/* ════════════════════════════════════════════════════════════════════
   ゲーム画面リデザイン（モックアップ準拠）
   ─────────────────────────────────────────────────────────────────────
   このファイルは site.css の末尾に追記してください。
   元の game-ui / score / timer / quit-btn / progress-bar 等の
   スタイルを上書きします（!important で確実に上書き）。
   既存の JS が参照する ID / class は全て保持しています。
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   0. #gameContainer を containing block にする
   ─────────────────────────────────────────────────────────────────────
   .vehicle は position:absolute + bottom:% で配置されるが、#gameContainer に
   position 指定が無いと、その % が「初期包含ブロック（＝ビューポート）」基準に
   なってしまう。Android 実機ではこの高さが URLバー込みの 100vh になることがあり、
   乗り物が想定より上にずれる原因になる。
   #gameContainer を position:relative にして、その高さ(JS で window.innerHeight に
   強制 = 可視領域)を基準に % が解決されるようにする。
───────────────────────────────────────────────────────────────────── */
#gameContainer {
    position: relative !important;
}

/* ─────────────────────────────────────────────────────────────────────
   1. 旧 .game-ui を非表示化（HUDは新しい .game-top-bar に統合）
───────────────────────────────────────────────────────────────────── */
.game-ui--legacy {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   2. ヘッダーバー（1行レイアウト：✕ ❤❤❤ ▓▓▓ 正解:0/0 ★0pt 🕐00:00）
   親パネル白背景に全要素を一行で配置
───────────────────────────────────────────────────────────────────── */
.game-header-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 8px 10px;
}

.game-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* ── ✕ ボタン（細い枠線だけ・立体感なしの控えめデザイン） */
.quit-btn {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 30px !important;
    height: 28px !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #0D47A1 !important;
    /* 薄い青の枠線＋濃い青(#1565C0)の3D影（メモ等のボタンと同様）で立体ボタンに */
    border: 2px solid #99BAFF !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 0 #1565C0, 0 3px 5px rgba(0,0,0,0.18) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    flex-shrink: 0 !important;
    z-index: 201 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s !important;
}

    .quit-btn::before {
        content: '' !important;
        display: none !important;
    }

.quit-btn__close {
    font-size: 14px;
    /* × は濃い方の青・900 太字 */
    font-weight: 900;
    -webkit-text-stroke: 0 !important;
    color: #0D47A1;
    line-height: 1;
}

.quit-btn__label {
    display: none !important;
}
/* 「やめる」テキストは非表示 */
.quit-btn:hover {
    background: #EAF1FF !important;
    border-color: #99BAFF !important;
}

.quit-btn:active {
    transform: translateY(2px) !important;
    background: #EAF1FF !important;
    box-shadow: 0 0 0 #1565C0, 0 1px 2px rgba(0,0,0,0.18) !important;
}

/* ── ハート */
.game-bar-row .hearts {
    display: flex !important;
    gap: 1px !important;
    align-items: center;
    width: auto !important; /* ← 追加：site.css の width: 100% を打ち消す */
    flex: 0 0 auto !important; /* ← 追加：grow/shrink 禁止、サイズはコンテンツ */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    opacity: 1 !important;
    height: 18px;
    /* pt-display との間隔：.game-bar-row の gap 8px に追加で 7px 足して合計 15px 離す */
    margin: 0 0 0 7px !important;
}

.game-bar-row .heart {
    font-size: 13px !important;
    color: #FF6B8A !important;
    line-height: 1;
    display: inline-block;
    transform: scaleY(1.35);
    transform-origin: center center;
}

/* 失ったハートは JS（updateHearts）側で「赤フラッシュ → フェードアウト」演出に
   置き換えたため、専用の CSS ルールは不要。
   .heart--lost クラスは付与されない（updateHearts で remove している）。 */

/* ── 進捗バー（横長、残りスペースを占める） */
/* ── 進捗バーはヘッダーから外す（別の場所に移動予定） */
.game-bar-row .progress-bar,
.game-header-panel #progressBar {
    display: none !important;
}

.game-bar-row .progress-fill,
.game-header-panel #progressFill {
    display: none !important;
}

/* 旧 .progress-bar（画面下端の青バー）は非表示にする */
body > .progress-bar,
#gameContainer > .progress-bar {
    display: none !important;
}

/* ── 問題数（0/0問）もヘッダーから外す */
.game-bar-row .score,
#scoreContainer.score {
    display: none !important;
}

/* ── ポイント（point.png アイコン + 数値、PT 表記なし、#99BAFF 枠） */
#ptDisplay,
.pt-display {
    position: static !important;
    background: #ffffff !important;
    color: #0a2647 !important;
    padding: 5px 8px !important;
    /* タイマーとの間隔：.game-bar-row の gap 8px に追加で 5px 足して合計 13px 離す */
    margin: 0 0 0 5px !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    /* アイコンを削除したので数値を中央寄せに */
    justify-content: center !important;
    gap: 6px !important;
    /* アイコン分の幅が不要になったので少し詰める（4桁でも収まる幅） */
    min-width: 64px !important;
    flex-shrink: 0;
    -webkit-text-fill-color: #0a2647;
    text-shadow: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

    /* 旧 ::before での擬似アイコンは無効化（今は HTML 側 <img> でアイコンを置く） */
    #ptDisplay::before,
    .pt-display::before {
        content: '' !important;
        display: none !important;
    }

/* point.png アイコンは非表示（数値のみ表示） */
.pt-display__icon {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* PT 数値部分 */
.pt-display__value {
    color: #0a2647;
    font-weight: 900;
    font-size: 19px;
    line-height: 1;
}

/* ── 時間（clock.png アイコン + mm:ss テキスト） */
.game-bar-row #timer,
.game-bar-row .timer {
    position: static !important;
    background: transparent !important;
    color: #0a2647 !important;
    padding: 0 0 0 4px !important;
    /* ×ボタンとの間隔：.game-bar-row の gap 8px に追加で 4px 足して合計 12px 離す */
    margin: 0 0 0 4px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    flex-shrink: 0;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

    .game-bar-row #timer #timeLeft {
        color: #0a2647 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        font-variant-numeric: tabular-nums; /* 数字が幅でガタつかないように */
        /* inline 要素は上下 padding が効きにくいため、relative + top で 2px 下げる */
        position: relative !important;
        top: 2px !important;
    }

/* clock.png アイコン（HTML 側 <img class="timer__icon">、着色済みのままなので filter 不要） */
.timer__icon {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

/* 残り時間警告（既存の .warning クラス） */
.timer.warning,
.timer.warning #timeLeft {
    color: #d32f2f !important;
}

/* スコアコンテナの total が JS で参照されるが、表示は score とまとめて出すので
   そのまま inline 表示で OK */
#total {
    display: inline !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. スピーカー（オーディオON/OFF）ボタン
   ─ ペン / ヒントと同じ丸ボタンデザイン
   ─ 位置：メモボタンの上（top: 10px, right: 10px）
   ─ ON/OFF は .is-muted クラスで切替（::before/::after による斜線オーバーレイ）
───────────────────────────────────────────────────────────────────── */
.game-audio-btn {
    position: static !important;
    /* margin-left:auto は .hint-btn へ移動（右クラスタの先頭がヒントになったため） */
    /* 統一サイズ 32×32（top-page__icon-btn と同じ） */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #99BAFF !important;
    border-radius: 50% !important;
    color: #1565C0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    /* 統一 3D影：top-page__icon-btn と同じ（2px段＋ドロップシャドウ） */
    box-shadow: 0 2px 0 #1565C0, 0 3px 5px rgba(0,0,0,0.18) !important;
    z-index: 201 !important;
    transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.15s !important;
}

    .game-audio-btn:hover {
        background: #f5fbff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 0 #1565C0, 0 5px 8px rgba(0,0,0,0.20) !important;
    }

    .game-audio-btn:active {
        transform: translateY(2px) !important;
        box-shadow: 0 0 0 #1565C0, 0 1px 2px rgba(0,0,0,0.15) !important;
    }

/* アイコン共通：mask 方式で #1565C0 に着色（top-page__icon-mask と同じ） */
.game-audio-btn__icon {
    display: block;
    width: 22px;
    height: 22px;
    background-color: #1565C0;
    background-image: none;
    -webkit-mask-image: url('/images/common/ico-sound-on.png');
    mask-image: url('/images/common/ico-sound-on.png');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

    .game-audio-btn__icon svg {
        /* mask で PNG を表示するので元の inline SVG は非表示 */
        display: none;
    }

/* ミュート時：アイコンを ico-sound-off.png に差し替え（mask 画像のみ変更） */
.game-audio-btn.is-muted .game-audio-btn__icon {
    -webkit-mask-image: url('/images/common/ico-sound-off.png');
    mask-image: url('/images/common/ico-sound-off.png');
}

/* ミュート時の斜線オーバーレイは廃止
   （ico-sound-off.png 自体にミュート（×印・斜線等）の絵柄が含まれているため、
    重ねて描く必要なし） */

/* 旧 img / emoji フォールバックは使わないが、念のため非表示 */
.game-audio-btn img,
.game-audio-btn__emoji {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   6. 問題カード
───────────────────────────────────────────────────────────────────── */
.question-container {
    position: absolute !important;
    /* ヘッダーに寄せた位置からさらに 13px 下げる */
    top: 70px !important;
    left: 0;
    right: 0;
    bottom: 80px;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    z-index: 100;
    padding: 2px 12px; /* 右側にペンボタン分の余白を確保 */
    overflow: visible;
}

.question-area {
    text-align: left !important;
    width: 100% !important;
    max-width: 520px !important;
    /* 白パネル装飾は question-content だけに移動 → 選択肢が白枠の外に出る */
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* 円形進捗ウィジェットが左上にはみ出すために overflow を visible に */
    overflow: visible !important;
}

.question-content {
    /* 問題のみを白パネルに */
    position: relative; /* 円形進捗ウィジェットの absolute 基準 */
    background: #ffffff !important;
    padding: 10px 10px 10px 13px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(20, 40, 80, 0.18) !important;
    margin-bottom: 25px !important;
    overflow: visible !important; /* 円形進捗ウィジェットが左上にはみ出せるように */
    /* 問題ラベルは上寄せ。問題文は残りスペースで上下中央（.question-sentence の margin:auto）。
       最低の高さは文字数階層クラス(.question-area.qlen-* .question-content)で指定 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* ─────────────────────────────────────────────────────────────────────
   6a. 円形進捗ウィジェット（旧デザイン）は撤去。
       現在は新 style.css の .question-progress（__circle / __summary / __current
       / __separator / __total）が担当する。旧ここにあった .question-progress__*
       （__svg/__outer/__bg/__bar/__text と、特に __current の position:relative;
       top:-12px 等）が新マークアップと class 名衝突し、分子の数字が上にずれていた
       ため削除した（新 style.css は game-redesign.css より後に読まれるが、style.css
       が上書きしない top/left/position 等の旧プロパティが生き残っていたのが原因）。
   ───────────────────────────────────────────────────────────────────── */

/* 問題文の強調表示（対象語＝旧 .question-target、□＝旧 .sentence-box）は、
   いずれも style.css の .question-block__highlight へ移行したため、ここでの定義は廃止。
   ※ 編集画面（.editor-display-layer .question-target）は site.css 側でスタイルされるため影響なし。 */

.question-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.question-q-badge {
    display: none !important;
}

.question-label {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1f3a5f !important;
    margin-bottom: 0 !important;
    line-height: 1.45 !important;
    flex: 1;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

.question-sentence {
    font-size: clamp(22px, 5.5vw, 26px) !important;
    color: #2C3E50 !important;
    margin: auto 0 !important; /* 残りスペースで上下中央（ラベルは上寄せ） */
    padding-top: 8px;
    line-height: 1.5 !important;
    font-weight: 500;
    text-align: center;
}

/* ───────────────────────────────────────────────
   問題文の文字数に応じたフォントサイズ
     JS(applyDynamicFontSizes) が #questionArea に
     qlen-s / qlen-m / qlen-l のいずれかを付与する。
       qlen-s : 〜14文字   Label20 / 問題文32(中央) / 選択肢24
       qlen-m : 15〜75文字 Label18 / 問題文20(左)   / 選択肢16
       qlen-l : 76文字〜   Label16 / 問題文16(左)   / 選択肢14
   （.question-area .xxx より詳細度が高いので確実に上書きされる）
─────────────────────────────────────────────── */
.question-area.qlen-s .question-label    { font-size: 20px !important; }
.question-area.qlen-s .question-sentence { font-size: 32px !important; text-align: center !important; }
.question-area.qlen-s .choice-btn        { font-size: 24px !important; }

.question-area.qlen-m .question-label    { font-size: 18px !important; }
.question-area.qlen-m .question-sentence { font-size: 20px !important; text-align: left !important; }
.question-area.qlen-m .choice-btn        { font-size: 16px !important; }

.question-area.qlen-l .question-label    { font-size: 16px !important; }
.question-area.qlen-l .question-sentence { font-size: 16px !important; text-align: left !important; }
.question-area.qlen-l .choice-btn        { font-size: 14px !important; }

/* ───────────────────────────────────────────────
   問題カード(.question-content)の最低の高さ（文字数階層別）
     qlen-s : 〜14文字   min-height 120px
     qlen-m : 15〜75文字 min-height 160px
     qlen-l : 76文字〜   min-height 210px
   中身は .question-content の justify-content:center で上下中央寄せ。
─────────────────────────────────────────────── */
.question-area.qlen-s .question-content { min-height: 120px !important; }
.question-area.qlen-m .question-content { min-height: 160px !important; }
.question-area.qlen-l .question-content { min-height: 210px !important; }

/* 解答カード（不正解時に正解を表示する白カード）の余白・角丸を控えめに */
.answer-display {
    padding: 15px 10px !important;
    border-radius: 15px !important;
    /* 横幅は question-container の幅から左右 10px ずつ内側に狭める。
       （question-container 内側幅 = 100% - 24px。さらに左右10px=計20px 縮める）
       最大幅も質問カード 520px から 20px 引いて 500px、中央寄せ。 */
    width: calc(100% - 44px) !important;
    max-width: 500px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* 答えの選択肢：白パネル内に縦並び（個別カードではなく） */
.choices {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* ボタンを question-content と同じ幅に伸ばす */
    gap: 18px !important;
    margin-top: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    counter-reset: choice;
}

.choice-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* 中身（テキスト）を中央寄せ */
    gap: 12px !important;
    width: 100% !important;     /* question-content と幅をそろえる */
    min-width: 0 !important;
    max-width: 100% !important; /* 左右の余白（マージン）をなくす */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 5px 18px !important;
    min-height: 55px !important;
    font-size: clamp(19px, 5.0vw, 23px) !important;
    font-weight: 700 !important;
    color: #1f3a5f !important;
    background: #ffffff !important;
    border: 1px solid #1565C0 !important;
    border-radius: 10px !important;
    cursor: pointer;
    text-align: center !important; /* 折り返した時のテキストも中央 */
    white-space: normal !important; /* 長文は折り返す */
    word-break: break-word !important;
    counter-increment: choice;
    position: relative;
    /* 立体感：上部内側ハイライト + 下端の青色の段 + 浮き影 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(21, 101, 192, 0.05), 0 2px 0 #1565C0, 0 6px 8px rgba(21, 101, 192, 0.18) !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s;
}

    /* 番号バッジは表示しない */
    .choice-btn::before {
        content: none !important;
        display: none !important;
    }

    .choice-btn:hover:not(.wrong):not(.correct) {
        background: #f5faff !important;
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(21, 101, 192, 0.05), 0 5px 0 #1565C0, 0 8px 12px rgba(21, 101, 192, 0.22) !important;
    }

    .choice-btn:active:not(.wrong):not(.correct) {
        transform: translateY(4px);
        background: #eaf3ff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(21, 101, 192, 0.05), 0 0 0 #1565C0, 0 1px 3px rgba(21, 101, 192, 0.18) !important;
    }

    .choice-btn.wrong {
        background: #ffeded !important;
        border-color: #ff5722 !important;
        color: #b3261e !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 0 #ff5722, 0 6px 8px rgba(255, 87, 34, 0.2) !important;
    }

        .choice-btn.wrong::before {
            background: #ff5722;
        }

    .choice-btn.correct {
        background: #e8f5e9 !important;
        border-color: #2e7d32 !important;
        color: #1b5e20 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 0 #2e7d32, 0 6px 8px rgba(46, 125, 50, 0.2) !important;
    }

        .choice-btn.correct::before {
            background: #2e7d32;
        }

/* ─────────────────────────────────────────────────────────────────────
   7. ヒントボタン（左下に配置、ペンボタンと同デザインの丸ボタン）
   隣に解説テキストの吹き出しが出る
───────────────────────────────────────────────────────────────────── */
.hint-btn {
    /* ヘッダー内のフレックスアイテムとして配置 */
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    /* 統一サイズ 32×32 */
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    /* ボタン本体（top-page__icon-btn と同じ：1px フチ + 2px 3D影） */
    background: #ffffff !important;
    border: 1px solid #99BAFF !important;
    box-shadow: 0 2px 0 #1565C0, 0 3px 5px rgba(0,0,0,0.18) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 201;
    /* 左だけ auto → 右クラスタの先頭としてクラスタ全体を右端へ寄せる（旧 .game-audio-btn の役割を継承） */
    margin: 0 0 0 auto !important;
    transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.15s;
    pointer-events: auto;
    line-height: 1 !important;
}

    .hint-btn:hover {
        background: #f5fbff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 0 #1565C0, 0 5px 8px rgba(0,0,0,0.20) !important;
    }

    .hint-btn:active {
        transform: translateY(2px) !important;
        box-shadow: 0 0 0 #1565C0, 0 1px 2px rgba(0,0,0,0.15) !important;
    }

.hint-btn__icon {
    /* question.png を mask として #1565C0 に着色して表示（元の inline SVG は非表示） */
    display: block;
    width: 22px;
    height: 22px;
    background-color: #1565C0;
    background-image: none;
    -webkit-mask-image: url('/images/common/question.png');
    mask-image: url('/images/common/question.png');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

    .hint-btn__icon svg {
        /* 元の inline SVG は非表示（CSS で PNG を mask 表示） */
        display: none;
    }

.hint-btn__label {
    display: none !important;
}

/* ヒント本文：画面の一番下に黄色フチのバーとして表示 */
#hintArea {
    position: fixed !important;
    /* 画面下端に固定（左右いっぱい・中央に余白） */
    top: auto !important;
    bottom: 14px !important;
    left: 12px !important;
    right: 12px !important;
    margin: 0 auto !important;
    padding: 12px 16px !important;
    background: #FFFBEB !important;
    color: #1f3a5f !important;
    border: 2px solid #FFC107 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    max-width: 520px !important; /* 横長すぎないよう上限（中央寄せ） */
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.25) !important;
    z-index: 299 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   8. メモ機能：ピル型ボタン（左下） + 展開時のツールバー
───────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
   8. メモ（ペン）ボタン：ヘッダー右端の丸ボタン
   ─ デザインは top-page__icon-btn と統一
   ─ アイコンは inline SVG を currentColor で #1565C0 着色
     （memo.png は「ボタン全体の絵柄」のため mask 不向き、SVG を使う）
───────────────────────────────────────────────────────────────────── */
.memo-toggle-btn {
    /* ヘッダー内のフレックスアイテムとして配置 */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    /* 統一サイズ 32×32 */
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    /* ボタン本体（top-page__icon-btn と同じ：1px フチ + 2px 3D影） */
    background: #ffffff !important;
    border: 1px solid #99BAFF !important;
    box-shadow: 0 2px 0 #1565C0, 0 3px 5px rgba(0,0,0,0.18) !important;
    border-radius: 50% !important;
    color: #1565C0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    line-height: 1 !important;
    z-index: 201;
    margin: 0 !important;
    transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.15s;
}

    .memo-toggle-btn:hover {
        background: #f5fbff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 0 #1565C0, 0 5px 8px rgba(0,0,0,0.20) !important;
    }

    .memo-toggle-btn:active {
        transform: translateY(2px) !important;
        box-shadow: 0 0 0 #1565C0, 0 1px 2px rgba(0,0,0,0.15) !important;
    }

/* アクティブ時：軽くスケールで選択中を示す */
.memo-toggle-btn--active {
    background: #e3f0ff !important;
}

.memo-toggle-btn__icon {
    /* inline SVG を表示。color: #1565C0 → svg path の fill: currentColor で着色 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #1565C0;
    background-image: none !important;
}

    .memo-toggle-btn__icon svg {
        /* SVG を表示（旧: display:none を解除） */
        display: block !important;
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

/* 「メモ」テキストは非表示 */
.memo-toggle-btn__label {
    display: none !important;
}

/* ペンツールバーは既定で隠す（メモボタンで開閉） */
#penToolbar.pen-toolbar--collapsed {
    display: none !important;
}

/* 展開時：ヘッダー内 memo ボタン（右端）の真下に縦並びで表示 */
#penToolbar {
    position: fixed !important;
    /* ヘッダー高さ(8+30+8=46px) + 少し余白 */
    top: 52px !important;
    /* memo ボタンの右端と揃える */
    right: 1px !important;
    top: 52px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 300 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-end !important; /* memo の右端と縦に揃える */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* 各サブボタン（消しゴム / ゴミ箱）— 統一デザイン（top-page__icon-btn 系統）
   アイコンは inline SVG を currentColor で着色（eraser.png / trash.png は使わない） */
.pen-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #99BAFF !important;
    box-shadow: 0 2px 0 #1565C0, 0 3px 5px rgba(0,0,0,0.18) !important;
    border-radius: 50% !important;
    color: #1565C0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: transform 0.10s ease, box-shadow 0.10s ease, background 0.15s !important;
    font-size: 0 !important; /* 旧 emoji 用フォントサイズを打ち消す */
}

    .pen-btn:hover {
        background: #f5fbff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 3px 0 #1565C0, 0 5px 8px rgba(0,0,0,0.20) !important;
    }

    .pen-btn:active {
        transform: translateY(2px) !important;
        box-shadow: 0 0 0 #1565C0, 0 1px 2px rgba(0,0,0,0.15) !important;
    }

    /* 消しゴムモード選択中：背景を薄く色付け */
    .pen-btn.active {
        background: #e3f0ff !important;
    }

.pen-btn__icon {
    /* inline SVG を表示。color: #1565C0 → svg path の fill: currentColor で着色 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #1565C0;
    background-image: none !important;
}

    .pen-btn__icon svg {
        display: block !important;
        width: 100%;
        height: 100%;
        fill: currentColor;
    }

/* 旧: eraser.png / trash.png の差し替え指定は不要（inline SVG を表示するため）。
   以下はあえて打ち消しておく（site.css に古い指定が残っていても効かないように） */
#penBtnEraser .pen-btn__icon,
#penBtnClear .pen-btn__icon {
    background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   8b. 飛行機（airplaneモード）の縦位置
   問題カード下端とページ下端の中間あたりに配置
───────────────────────────────────────────────────────────────────── */
.vehicle.mode-airplane {
    /* 中央寄せ。以前は site.css の .vehicle.mode-airplane（left:50% / right:auto /
       transform:translateX(-50%)）を継承していたが、ゲーム画面が site.css を読み込まなく
       なったため、ここで明示する。これが無いと基底 .vehicle{right:80%} が残り左端へ寄る。 */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: 14% !important;
    /* 親の幅を明示指定 → IMG はこれに収まる */
    width: 90vw !important; /* ビューポートの90% */
    max-width: 480px !important; /* PCでも480pxまで */
    height: auto !important; /* 高さはアスペクト比に従う */
}

    /* ─────────────────────────────────────────────────────────────────────
   8b-2. gameMode 別の乗り物位置オーバーライド
   ─────────────────────────────────────────────────────────────────────
   JS 側で initGame 時に `.vehicle` に `mode-${gameModeId}` クラスが付与される。
   これを使って、特定のゲームモードだけ位置やサイズを上書きできる。
   セレクタ `.vehicle.mode-airplane.mode-XXX` で airplane 系の指定よりも
   詳細度が高くなるため、!important なしでも上書き可能。
   ───────────────────────────────────────────────────────────────────── */
    /* 地面を移動するモードは画面下に乗り物を配置する */
    .vehicle.mode-airplane.mode-sweets,
    .vehicle.mode-airplane.mode-fantasy,
    .vehicle.mode-airplane.mode-dinosaur,
    .vehicle.mode-airplane.mode-train {
        bottom: 2% !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       電車（train）だけ：乗り物を大きくして「左半分が画面外へはみ出す」配置にする
       ・left:0 + 既存の transform:translateX(-50%)（site.css 由来）で
         乗り物の中心が画面左端に来る → ちょうど左半分が画面外へ。
       ・サイズは width / max-width で調整可能（大きくしたい場合は数値を上げる）。
       ・通常プレイ中の電車は横移動しない（updateShipPosition が airplane 系で
         早期 return する）ため、この固定配置が維持される。
       ───────────────────────────────────────────────────────────────────── */
    .vehicle.mode-airplane.mode-train {
        /* 拡大（お好みで数値調整：基準は通常時 90vw / max 480px） */
        width: 150vw !important;
        max-width: 900px !important;
        height: auto !important;
        /* 中心を画面左端へ（transform:translateX(-50%) は site.css の指定を継承） */
        left: 0 !important;
        right: auto !important;
    }

    .vehicle.mode-airplane .vehicle-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

/* ─────────────────────────────────────────────────────────────────────
   9. レスポンシブ（モバイル幅）
───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* 旧モバイルCSSで強制された wrap / fixed quit-btn を打ち消す */
    .game-ui {
        flex-wrap: nowrap !important;
    }

    .quit-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        /* padding / font-size の指定はベースルール（行 41-）に任せる。
           ここで上書きすると左右非対称 padding で ✕ が中心からずれる原因になる。 */
    }

    .game-stat__value {
        font-size: clamp(16px, 5vw, 20px);
    }

    .game-stat__label {
        font-size: 10px;
    }

    /* チョイスは縦並びをそのまま（既存の .choices 上書きが効いている）
       width / max-width は基本ルール（width:auto、min-width:50%、max-width:100%）に任せる */

    /* ハート、ライフ表示の余白詰め */
    .game-info-bar {
        padding: 4px 10px 6px;
        gap: 8px;
    }

    .game-info-bar__label {
        font-size: 10px;
    }

    .game-info-bar .heart {
        font-size: 14px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   10. PC幅では最大幅を制限してスマホ風レイアウトを保つ
───────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .game-bar-row {
        padding: 0;
        gap: 12px;
    }

    .question-container {
        top: 72px !important;
    }

    .hint-btn {
        top: 64px;
    }

    /* ─────────────────────────────────────────────────────────────────────
       PC幅では電車を「中央表示」にする（サイズはスマホと同じ大きめを維持）。
       ・はみ出し用の 150vw は画面外前提なので、中央表示では 90vw
         （画面幅に収まる範囲で最大）にする。max-width はスマホと同じ 900px。
       ・left:50% + translateX(-50%) で中央。
       ・JS 側(startBonusGame)もこの 768px を境に同じ分岐をしている。
       ───────────────────────────────────────────────────────────────────── */
    .vehicle.mode-airplane.mode-train {
        left: 50% !important;     /* translateX(-50%) と合わせて中央 */
        width: 90vw !important;     /* 中央表示でも画面内に収まる範囲で最大 */
        max-width: 900px !important;/* スマホ時と同じ大きさを維持 */
    }
}

/* ============================================================
   ゲーム画面システム（背景・乗り物・障害物・ゴール・星空・
   ポイント/連続ボーナス演出・花火・メモcanvas）
   ── もとは site.css に定義されていたが、ゲーム画面は site.css を
      読み込まない方針のため、ここ(game-redesign.css)へ移設した。
   ── .vehicle.mode-airplane 系は本ファイル上部に既存のため重複させない。
   ============================================================ */

/* 動的ビューポート高さ（.goal などが参照） */
:root {
    --safe-vh: 100vh; /* フォールバック値 */
}
@supports (height: 100dvh) {
    :root {
        --safe-vh: 100dvh; /* 動的ビューポート高さ */
    }
}

/* 背景要素 */
.game-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.mode-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease;
    z-index: 5;
}

/* ※星空（.stars / .star / twinkle）は削除済み。背景が画像方式（.mode-background z-index:5）に
   なった時点で星（z-index:1）は背景画像の裏に隠れて見えないデッドコードだったため。 */

/* 背景 (.game-background) - 時間帯のグラデーション */
.game-background.theme-morning {
    background: linear-gradient(to bottom, #FFE4B5 0%, #FFEAA7 25%, #FFB6C1 50%, #E6E6FA 75%, #F0F8FF 100%);
}

.game-background.theme-day {
    background: linear-gradient(to bottom, #87CEEB 0%, #87CEFA 30%, #4682B4 60%, #1E90FF 100%);
}

.game-background.theme-night {
    background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 30%, #0f3460 70%, #53354a 100%);
}

/* 背景 (.mode-background) - 背景画像は JS（game.js）が時間帯別ファイルを設定する。
   airplane はスクロール用の repeat/size 指定のみ CSS 側に残す。 */
.mode-background.game-mode-airplane {
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position-y: 0;
}

@keyframes bgScroll {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -2000px;
    }
}

/* 背景 (.mode-background) - 時間帯 × モードのフィルター */
.mode-background.theme-morning.game-mode-sea,
.mode-background.theme-morning.game-mode-train,
.mode-background.theme-morning.game-mode-car,
.mode-background.theme-morning.game-mode-carriage,
.mode-background.theme-morning.game-mode-airplane,
.mode-background.theme-morning.game-mode-dinosaur,
.mode-background.theme-morning.game-mode-fantasy {
    filter: brightness(1.0) saturate(1.0);
}

.mode-background.theme-day.game-mode-sea,
.mode-background.theme-day.game-mode-train,
.mode-background.theme-day.game-mode-car,
.mode-background.theme-day.game-mode-carriage,
.mode-background.theme-day.game-mode-airplane,
.mode-background.theme-day.game-mode-dinosaur,
.mode-background.theme-day.game-mode-fantasy {
    filter: brightness(1.1) contrast(1.0);
}

.mode-background.theme-night.game-mode-sea,
.mode-background.theme-night.game-mode-train,
.mode-background.theme-night.game-mode-car,
.mode-background.theme-night.game-mode-carriage,
.mode-background.theme-night.game-mode-airplane,
.mode-background.theme-night.game-mode-dinosaur,
.mode-background.theme-night.game-mode-fantasy {
    filter: brightness(0.6) saturate(0.8);
}

/* 乗り物（.vehicle.mode-airplane 系は本ファイル上部に既存のため除外） */
.vehicle {
    position: absolute;
    bottom: 15%;
    right: 80%;
    height: clamp(120px, 35vw, 400px);
    width: auto;
    z-index: 15;
    opacity: 1;
    filter: drop-shadow(0 clamp(2px, 0.5vw, 4px) clamp(4px, 1vw, 8px) rgba(0,0,0,0.3));
}

.vehicle-image {
    height: 100%;
    width: auto;
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    transform: none;
}

/* 障害物 */
.obstacle {
    position: absolute;
    bottom: 0%;
    left: 10%;
    height: 80vh;
    height: 80dvh;
    width: auto;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .obstacle.show {
        opacity: 1;
    }

.obstacle-image {
    height: 100%;
    width: auto;
    display: block;
    filter: drop-shadow(0 clamp(2px, 0.5vw, 4px) clamp(6px, 1.5vw, 10px) rgba(0,0,0,0.4));
}

/* ゴール: 画面全体を覆う背景画像。<img class="goal-image"> は非表示にし、
   その src を JS 側で .goal の background-image にコピーして使う。 */
.goal {
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw;
    height: var(--safe-vh);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 0;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .goal.show {
        opacity: 1;
    }

.goal-image {
    display: none;
}

/* ポイント金貨 */
.pt-coin {
    position: fixed;
    width: 32px;
    height: 32px;
    font-size: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFE566, #FFB800 60%, #CC8800);
    border: 3px solid #FFD700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 3px rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #7A4F00;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    z-index: 9999;
    pointer-events: none;
}

/* +1PT ラベル */
.pt-label {
    position: fixed;
    font-size: 16px;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 8px #FF8C00, 1px 1px 0 #000, -1px -1px 0 #000;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

.pt-banner {
    position: fixed;
    font-size: clamp(28px, 7vw, 48px);
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 20px #FF8C00, 0 0 40px #FF4500, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

/* 連続ボーナス カットイン（白(内)→黒(中)→オレンジ(外)の多重縁取り＋縦グラデ塗り） */
.combo-bonus-cutin {
    font-family: 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN',
                 'M PLUS Rounded 1c', 'Kosugi Maru', 'Rounded Mplus 1c',
                 'メイリオ', Meiryo, sans-serif;
    font-size: clamp(36px, 10vw, 64px);
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1.4;
    padding: 0.2em 0.4em;
    filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.35));
    /* 必ず1行で出す。position:fixed + left:50% の要素は「画面の右半分」を基準に
       幅が縮められるため、nowrap が無いと「すごい／！」のように途中で折れる */
    white-space: nowrap;
}

.combo-bonus-char {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

.combo-bonus-layer {
    display: inline-block;
}

.combo-bonus-char .combo-bonus-layer + .combo-bonus-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.combo-bonus-layer--outer {
    color: transparent;
    -webkit-text-stroke: 12px #EF6C00;
    paint-order: stroke fill;
}

.combo-bonus-layer--middle {
    color: transparent;
    -webkit-text-stroke: 8px #1a1a1a;
    paint-order: stroke fill;
}

.combo-bonus-layer--inner {
    color: transparent;
    -webkit-text-stroke: 4px #ffffff;
    paint-order: stroke fill;
}

.combo-bonus-layer--fill {
    background: linear-gradient(180deg,
        #FFC247 0%,
        #FF8A1E 50%,
        #E63A12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.combo-bonus-coin {
    box-shadow:
        0 2px 8px rgba(0,0,0,0.35),
        inset 0 1px 3px rgba(255,255,255,0.55),
        0 0 14px rgba(255, 180, 0, 0.7);
}

/* 花火エフェクト */
.firework {
    position: absolute;
    width: clamp(8px, 2vw, 15px);
    height: clamp(8px, 2vw, 15px);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 2500;
}
@media (min-aspect-ratio: 16/10) {
    .firework {
        width: clamp(6px, 1.5vw, 10px);
        height: clamp(6px, 1.5vw, 10px);
    }
}

/* メモ（ペン）canvas */
#memoCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    pointer-events: none;
    touch-action: none;
}

#memoCanvas.cursor-eraser {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='2' y='2' width='28' height='28' fill='rgba(255,255,255,0.15)' stroke='white' stroke-width='2'/%3E%3Crect x='3' y='3' width='26' height='26' fill='none' stroke='%23666' stroke-width='0.8'/%3E%3C/svg%3E") 16 16, cell;
}

#memoCanvas.cursor-pen {
    cursor: crosshair;
}

/* 数学の分数表示：MathML 対応ブラウザでは MathML、非対応では "2/3" フォールバックを出す
   （convertFractionToMathML が両方を出力し、ここで一方を非表示にする） */
.frac-fallback {
    display: none;
}

@supports not (math-style: normal) {
    .mathml {
        display: none;
    }

    .frac-fallback {
        display: inline;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   覚えよう（おぼえよう）画面の表示制御フック

   #memorizeScreen は memorize.js が .show の付け外しで表示/非表示を切り替える
   制御用フック。style.css にはこの制御用クラス（.memorize-screen / .show）が
   無いため、ここに新規追加する（既存定義の上書きはしていない）。

   ・既定は非表示。.show 付与時のみ表示。
   ・#gameContainer は 100vh 固定・overflow:hidden のため、覚えよう画面は
     その内側で高さ100%を占有し、自身を縦スクロールコンテナにする
     （ページ全体は伸びず、この画面内だけがスクロールする）。
   ・サンプルの .ly-memorize は height:100vh だが、#gameContainer 内に収めるため
     ここで 100% に上書き…ではなく、別クラス .memorize-screen 側で height:100%
     を指定して制御する（.ly-memorize の見た目はそのまま活かす）。
───────────────────────────────────────────────────────────────────── */
.memorize-screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300; /* ゲーム画面(header-game:200 等)より前面に重ねる */
    overflow-y: auto;
    overflow-x: hidden;
    /* サンプルの memorize は body 背景（白）。head/quiz エリアは白、bottom のみ pale2。 */
    background-color: var(--color-white, #fff);
}

.memorize-screen.show {
    display: block;
    /* 覚えよう画面は「ページ全体スクロール」にする（自前の内部スクロールは廃止）。
       position:absolute をやめて通常フローに乗せ（#gameContainer を内容なりに伸ばす）、
       高さ固定・overflow:auto を解除する。ゲーム要素より前面に出すため z-index 用に
       position は relative を維持（背景は白なので下のゲーム背景は隠れる）。 */
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* 覚えよう画面の内側ラッパ：高さは内容なりにし、内部スクロールを親(.memorize-screen)へ委譲。
   style.css の .ly-memorize__inner（flex-column / height:100%）と併用するため、
   ここでは min-height:100% のみ付与してフッターを最下部へ押し下げる。 */
.memorize-screen .memorize__inner {
    min-height: 100%;
    height: auto;
}

/* 問題リストが残りスペースを占有し、シェア/フッターを下に押し出す */
.memorize-screen .memorize-main {
    flex: 1 0 auto;
}

/* 覚えよう表示中（＝ゲーム開始前）は、ゲーム側のレイヤーを描画しない。
   通常フローに乗せた覚えよう画面のフッターより下に、ゲーム背景（.game-background）や
   ゲームヘッダー（.game__inner 内の .header-game）が見えてしまうのを防ぐ。
   ゲーム開始時に memorize.js が .show を外すと、従来どおり表示される。 */
#gameContainer:has(.memorize-screen.show) .game-background,
#gameContainer:has(.memorize-screen.show) .player-object,
#gameContainer:has(.memorize-screen.show) .game__inner,
#gameContainer:has(.memorize-screen.show) #memoCanvas {
    display: none;
}

/* ===================================================================
   正解時の新演出（サンプル 演出サンプル/sample/collect 準拠）
   - .correct-ring : 緑のリングを .game-main 中央に一瞬表示
   - 問題遷移のスライドは GSAP（game.js: slideToNextQuestion）で transform を
     動かすため、ここではクローン要素の重なり順だけ補助的に定義する。
   ※ style.css / normalize.css は編集せず、ここ（game-redesign.css 末尾）に追加。
   =================================================================== */

/* 正解時のマーク：画像 img_correct.svg（○）を .game-main 中央に表示。
   要素は game.js の showCorrectRing() が <img class="correct-ring"> として生成。
   サンプル(collect)準拠で transition なし＝.is-show の不透明度トグルで一瞬で出る。
   縦位置は中央よりやや上(-58%)。スケール等の立体演出は付けない。 */
.correct-ring {
    position: absolute;
    z-index: 7;
    left: 50%;
    /* 表示位置は game-main 上端からの距離(top)で調整する。問題文の下部に少しかぶる高さ。
       マークは「上端基準」(translate の Y は 0)なので、top の値＝マーク上端の位置。 */
    top: 100px;
    width: min(56vw, 241px);   /* 画像 241px を上限に */
    height: auto;
    pointer-events: none;
    transform: translate(-50%, 0);
    opacity: 0;
}

.correct-ring.is-show {
    opacity: 1;
}

/* 不正解時のマーク：画像 img_incorrect.svg（✔）を .game-main 中央に表示。
   要素は game.js の showMissCheck() が <img class="miss-check"> として生成。
   スケール(0.92→1)＋フェードは CSS transition が担う（サンプル /sample/miss/ 準拠・GSAP不使用）。 */
.miss-check {
    position: absolute;
    z-index: 8;
    left: 50%;
    /* 正解マークと同様、top（game-main上端からの距離＝マーク上端位置）で調整。 */
    top: 100px;
    width: min(50vw, 184px);   /* 画像 184px を上限に */
    height: auto;
    opacity: 0;
    transform: translate(-50%, 0) scale(0.92);
    transform-origin: 50% 0;   /* 上端基準でスケールイン（top を固定して拡大） */
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.miss-check.is-show {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* 退場用クローン（game.js が #questionAreaClone を動的生成）。
   位置/サイズは JS が inline で付与するため、ここでは念のため重なり順のみ補強。
   .game-main は overflow:hidden のため、左右へ抜けたクローン/本体は自動でクリップされる。 */
#questionAreaClone {
    pointer-events: none;
}

/* 小さい画面ではマークをやや控えめに */
@media (max-width: 740px) {
    .correct-ring {
        width: min(60vw, 200px);
    }
    .miss-check {
        width: min(52vw, 160px);
    }
}

/* ===================================================================
   ハート減少演出（サンプル 演出サンプル/sample/life-lost 準拠）
   失ったハートは fill を一瞬 #FA8C6A にしてから 500ms 保持 → 500ms でフェードアウトし、
   完了後に is-empty（fill 非表示）にして outline だけ残す。制御は game.js: updateHearts()。
   ※ style.css は編集せず、ここ(game-redesign.css 末尾)に追加。
   =================================================================== */

/* 失ったハートで outline を見せるため heart-line に stroke を補う
   （style.css 側は stroke 色未設定で outline が見えないため）。
   ※ ただし通常時に stroke を付けると stroke 幅の分だけハートが一回り大きく
     見えてしまう（元デザインより大きくなる）ため、stroke は「失う最中
     (is-reducing)〜失ったあと(is-empty)」のハートだけに限定する。
     通常のハートは stroke なし＝元デザインの原寸を保つ。
   ※ fill と line は同じ path（line は fill の次の兄弟要素）なので ~ で対象を選ぶ。 */
.player-life__heart-fill.is-reducing ~ .player-life__heart-line,
.player-life__item.is-empty .player-life__heart-line {
    stroke: var(--color-life);
}

/* 減少アニメ：fill を #FA8C6A にして 500ms 保持 → 500ms でフェードアウト（forwards で 0 を維持）。 */
.player-life__heart-fill.is-reducing {
    fill: #FA8C6A;
    animation: life-heart-fadeout 500ms ease 500ms forwards;
}

/* 失ったあと：fill を非表示にして outline のみ残す。 */
.player-life__item.is-empty .player-life__heart-fill {
    opacity: 0;
}

@keyframes life-heart-fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===================================================================
   ハート登場演出（サンプル 演出サンプル/sample/life-start 準拠）
   ゲーム開始時、各ハートの fill が scale 0→1.5→1 と pop して順番に登場する。
   発火タイミング制御のためトリガークラス .is-life-start を fill に付与し、
   stagger（順番のずらし）は game.js: playLifeStartAnimation() が各 fill の
   animation-delay をインライン設定する（ハート数が可変なため nth-child は使わない）。
   ※ style.css は編集せず、ここ(game-redesign.css)に追加。
   =================================================================== */
/* ハート要素(.player-life__item)全体を scale でポップさせる。
   ※ fill(SVG パス)だけを scale すると一部環境で「四角く広がってからハートになる」
     見え方になるため、ハート要素ごと拡大縮小する（fill+outline が一体で拡縮）。
   動き：scale 0 → 1.2（少しだけ大きく）→ 1（本来のサイズに戻る）。 */
.player-life__item.is-life-start {
    transform-origin: center center;
    animation: life-heart-pop 0.8s ease-out both;
}

@keyframes life-heart-pop {
    0%   { transform: scale(0);   }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1);   }
}

/* ===================================================================
   ゲーム画面の初回チュートリアル吹き出し（TOPのコーチ吹き出しと同デザイン）
   TOP側は _Top.cshtml のインライン<style>で完結しているため、ゲームページ用に
   ここへ同じ定義を持つ（game-redesign.css はゲームページ専用読込なので衝突しない）。
   非ブロッキング：ページは全部さわれる。タップ/×で次の吹き出しへ進む。
   表示制御は _Game.cshtml のインラインスクリプト（_startGameCoachHints）。
   ※ style.css は編集せず、ここ(game-redesign.css)に追加。
   =================================================================== */
.coach-bubble {
    position: fixed;
    z-index: 9000; /* モーダル(10000)より下、通常UIより上 */
    max-width: min(300px, calc(100vw - 16px));
    padding: 10px 38px 10px 14px;   /* 右は×ボタン（絶対配置）の分だけ余白を確保 */
    /* 折り返しは半角スペースの位置を優先（単語の途中で折れない）。
       収まらない長い連続文字だけ緊急的に途中で折る */
    word-break: keep-all;
    overflow-wrap: anywhere;
    background-color: var(--color-white);
    border: 3px solid var(--color-main);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgb(0 0 0 / .18);
    color: var(--color-main);
    font-size: var(--font-s);
    font-weight: var(--font-weight-bold);
    line-height: 1.6;
    /* タップしても何も起きない仕様（2026-08 仕様変更）のため cursor:pointer は付けない */
    /* ふわふわは transform で行う（margin-top だと毎フレーム再レイアウトが走り、
       枠と文字の動きがわずかにずれて見えるため） */
    animation: coachBob 1.6s ease-in-out infinite;
    will-change: transform, opacity;
    /* 出現は「ぱっ」ではなく、ふわっと（is-shown 付与でフェードイン。JS側が付ける） */
    opacity: 0;
    transition: opacity 0.35s ease;
}

    .coach-bubble.is-shown {
        opacity: 1;
    }

.coach-bubble__tail {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--color-white);
    transform: rotate(45deg);
}

.coach-bubble--below .coach-bubble__tail {
    top: -10px;
    border-left: 3px solid var(--color-main);
    border-top: 3px solid var(--color-main);
}

.coach-bubble--above .coach-bubble__tail {
    bottom: -10px;
    border-right: 3px solid var(--color-main);
    border-bottom: 3px solid var(--color-main);
}

/* ×は吹き出し右上の角にぴったり寄せる（絶対配置）。閉じる操作は×のみのため
   大きめ・青色。本文は .coach-bubble の padding-right で×と重ならないよう退避 */
.coach-bubble__close {
    position: absolute;
    top: -4px;
    right: 2px;
    padding: 4px;
    border: none;
    background: none;
    color: var(--color-main);
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
}

@keyframes coachBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .coach-bubble { animation: none; }
}