/* ==========================================================================
   1. 基本設定 & テーマカラー（ハロウィン限定ダークポップ仕様）
   ========================================================================== */
:root {
    --ink: #1a1105;         /* 深みのあるダークブラウン */
    --muted: #5c4d3c;       /* くすんだセピア */
    --shadow: 0 16px 40px rgba(26, 17, 5, 0.25);
    --primary-color: #d97706; /* カボチャのオレンジ */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    padding: 16px;
    position: relative; /* 🌟 必須：背景を裏に閉じ込めるための基準点 */
}

/* ==========================================================================
   👻 【スマホ背景固定バグ完全退治】最背面に背景専用の固定レイヤーを設置
   ========================================================================== */
body::before {
    content: "";
    position: fixed; /* 🌟 画面の最背面にガチッとピン留めして動かさない */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;     /* クイズカード（.quiz-container）の「後ろ」に回り込ませる */
    
    /* 📱 【初期設定：スマホ版（SP）】縦長お化け画像 */
    background-image: url('halloween_bg_sp.jpeg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* 💻 【画面幅 768px 以上：パソコン版（PC）】横長ワイドお化け画像に自動切り替え */
@media (min-width: 768px) {
    body::before {
        background-image: url('halloween_bg.jpeg'); /* パソコン用のワイド画像 */
    }
}


button, a {
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* ==========================================================================
   2. 全体コンテナ & 画面制御
   ========================================================================== */
.quiz-container {
    width: min(92vw, 520px);
    margin: 0 auto;
    padding: 18px 0 90px;
}

.screen { display: none; }
.screen.active { display: block; }

/* ==========================================================================
   3. 各画面共通のベースカード（すりガラス風セピアデザイン）
   ========================================================================== */
#start-screen,
#quiz-screen,
#score-screen {
    position: relative;
    background: rgba(247, 241, 230, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 18px 20px 26px;
}

.app-hero {
    position: relative; height: 205px; border-radius: 25px; overflow: hidden; margin: -2px -2px 15px; box-shadow: 0 8px 22px rgba(26, 17, 5, 0.2);
}
.app-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quiz-hero { height: 120px; border-radius: 25px 25px 0 0; }

.app-hero .hero-glass {
    position: absolute; left: 14px; bottom: 13px; padding: 9px 13px; border-radius: 16px;
    background: rgba(26, 17, 5, 0.75); backdrop-filter: blur(7px);
    font-size: .78rem; font-weight: 700; color: #fef3c7;
}

h1 { text-align: center; font-size: 1.7rem; margin: 12px 0 4px; font-weight: 900; }
.subtitle { text-align: center; color: var(--muted); font-size: .86rem; margin-bottom: 18px; }
.section-label { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 800; color: var(--muted); margin: 16px 3px 9px; }

/* ==========================================================================
   4. クイズ出題エリア
   ========================================================================== */
.progress { text-align: center; color: var(--muted); font-size: .82rem; margin: 8px 0 14px; background: #ebdcc5; border-radius: 99px; padding: 7px; font-weight: bold; }
.question-box { background: linear-gradient(135deg, #fff, #faf6ee); border: 1px solid #e3d5be; border-radius: 22px; padding: 22px 18px; font-size: 1.08rem; line-height: 1.7; text-align: center; box-shadow: 0 7px 17px rgba(0,0,0,0.03); }
.question-th-box { margin-top: 9px; padding: 12px; border-radius: 16px; background: #f5ebd7; color: var(--muted); text-align: center; font-size: .84rem; line-height: 1.5; }
.options-list { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }

/* ==========================================================================
   5. ボタン設計（通常時 ➔ ホバー時 ➔ スマホタッチ時）
   ========================================================================== */
.btn { transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* 🅰️ グループ：レベル選択 ＆ 4択の選択肢（★以前のパステルグラデーションカプセルをハロウィン色で完全復活！） */
.level-btn, .option-btn {
    width: 100%; border: 1px solid rgba(211, 194, 169, 0.5); border-radius: 20px;
    
    /* 🌟復活：うっすら可愛いカボチャオレンジ味の、高級感あるパステルグラデーション背景！ */
    background: linear-gradient(135deg, #fffbf5, #f5f0e6); 
    color: var(--ink);
    box-shadow: 0 4px 12px rgba(26, 17, 5, 0.04);
    font-weight: 800;
}
.level-btn { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 15px; text-align: center; font-size: 1.05rem; }
.option-btn { padding: 16px; text-align: left; font-size: 1.02rem; }

/* 🅱️ グループ：赤いアクションボタン（復習 ＆ 次の問題へ） */
.review-card { margin: 0 0 14px; padding: 15px; border-radius: 20px; background: #faebd7; border: 1px solid #e6d3b8; text-align: center; }
.review-card p { margin: 0 0 10px; font-weight: 800; color: #c2410c; font-size: .88rem; }

.review-btn, .next-btn {
    width: 100%; min-height: 54px; padding: 12px 20px; border: none; border-radius: 18px;
    background: linear-gradient(135deg, #ea580c, #f97316); /* 燃えるカボチャオレンジ */
    color: #ffffff; font-weight: 800; font-size: 1.05rem;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3);
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.review-main-text { font-weight: 800; font-size: 0.95rem; margin-bottom: 2px; }

/* 🆂 特殊配置のボタン（右上ホーム ＆ 右下問い合わせ） */
.home-back-btn {
    position: absolute; top: 18px; right: 16px; z-index: 10;
    width: auto; padding: 9px 14px; border: none; border-radius: 18px;
    background: rgba(26, 17, 5, 0.8); color: #fef3c7; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.floating-feedback-btn {
    position: fixed; right: 15px; bottom: 15px; z-index: 20;
    width: max-content; padding: 11px 16px; border: none; border-radius: 99px;
    background: rgba(26, 17, 5, 0.85); color: #fef3c7; box-shadow: 0 8px 22px rgba(0,0,0,0.25); font-size: .75rem; font-weight: bold;
}

/* 💻 【PCホバー演出】：マウスを乗せたら「クリーンな純白 👆」または「闇夜のオレンジ」に変身 */
@media (hover: hover) {
    /* 🌟復活：マウスを乗せたら、グラデーションを邪魔せず「上品な純白」にスッと切り替わるあの見やすさを復元！ */
    .level-btn:hover, .option-btn:hover, .home-back-btn:hover, .floating-feedback-btn:hover {
        border-color: #3b82f6; color: #3b82f6; background: #ffffff; cursor: pointer; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
    }
    .review-btn:hover, .next-btn:hover {
        background: linear-gradient(135deg, #c2410c, #ea580c); color: #ffffff; cursor: pointer; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(234, 88, 12, 0.45);
    }
}

/* 📱 【スマホタッチ残像】：あなたが一番気が楽だと言った「確定・安全のブルー 🔵」で完璧発光！ */
.btn-pressed {
    transform: scale(.95);
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    color: var(--ink) !important;
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.05) !important;
}
.review-btn.btn-pressed, .next-btn.btn-pressed {
    transform: scale(.95);
    background: linear-gradient(135deg, #f97316, #ffedd5) !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   🎯 6. クイズ解答後のステート制御（完全な真っ白 ＆ フリーズロック）
   ========================================================================== */
#quiz-screen .option-btn.correct { background: #e9faf3 !important; border-color: #22c55e !important; color: #15803d !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important; }
#quiz-screen .option-btn.wrong { background: #fff1f2 !important; border-color: #ef4444 !important; color: #b91c1c !important; box-shadow: none !important; }

/* 🌟復活：選ばれなかったボタンは、あなたのこだわり通り「完全な真っ白」にしてノイズを100%消去！背景カードと同化させます */
#quiz-screen .options-list:has(.correct) .option-btn:not(.correct):not(.wrong) {
    background: #ffffff !important; border-color: #e2e8f0 !important; color: #cbd5e1 !important; box-shadow: none !important;
}
/* 回答後はすべてのボタンを鉄壁フリーズロック */
#quiz-screen .options-list:has(.correct) .option-btn {
    pointer-events: none !important; transform: none !important; cursor: default !important;
}

.result-box { margin-top: 12px; padding: 16px; border-radius: 20px; line-height: 1.65; }
.result-box.correct { background: #ecfbf4; border: 1px solid #b9ead4; }
.result-box.wrong { background: #fff1f3; border: 1px solid #ffd0d8; }
.explanation { margin-top: 7px; }
.th-text { margin-top: 8px; color: #68758b; font-size: .86rem; }

/* ==========================================================================
   7. レスポンシブ対応（スマホ用のサイズ微調整）
   ========================================================================== */
@media(max-width:420px) {
    .quiz-container { width: 94vw; padding-top: 8px; }
    .app-hero { height: 180px; }
    #start-screen { padding: 13px 14px 22px; }
    .home-back-btn { top: 14px; right: 14px; padding: 7px 10px; font-size: 0.75rem; }
}
/* ==========================================================================
   📐 【ミリ単位のズレ修正】白いメインカード全体を画面の「完全など真ん中」に固定する
   ========================================================================== */
.quiz-container {
    margin-right: auto !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* ==========================================================================
   📐 クイズ画面：ボタンの余白 ＆ 丸付け時の位置固定バグ修正
   ========================================================================== */

/* 「次の問題へ」ボタンの上側に、絶対に潰れない16pxのゆったりした隙間を強制発動！ */
.next-btn {
    margin-top: 16px !important;
}
/* ==========================================================================
   📐 【詳細度バトル最終勝利版】スマホ実機の右ズレ怪奇現象を100%完全修正
   ========================================================================== */

/* 1. 諸悪の根源だった body の不細工な余白の計算を強制的にゼロにしてリセットします */
body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. カードを包むコンテナ自体で、左右に 4vw（スマホ画面幅の4%分）の『完璧に均等な余白』を作って中央固定！ */
.quiz-container {
    width: 100% !important;
    max-width: 520px !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* ==========================================================================
   💻 【PC版限定】コンテナの横幅が狭くなってしまったバグを完全救済
   ========================================================================== */

/* 画面幅が 768px 以上のパソコン（PC）の時は、左右の巨大な突っ張り棒をリセットします */
@media (min-width: 768px) {
    .quiz-container {
        width: 520px !important;       /* 元の一番綺麗に見える520pxの幅に固定 */
        padding-left: 0 !important;    /* PC画面では左右の圧迫を完全ゼロにリセット */
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   👻 クイズ画面：丸付け後に出現するひらがな・ローマ字の上品な文字デザイン
   ========================================================================== */
.sub-reading-box {
    margin-top: 10px;               /* 問題文との間に少しだけ隙間を作る */
    padding-top: 8px;
    border-top: 1px dashed #e3d5be; /* うっすらとした点線で区切る */
    font-size: 0.88rem;             /* 教科書っぽくならないよう、少し小さめに */
    color: #7c6a54;                 /* 目立ちすぎてガチャガチャしない、優しいセピアグレー */
    line-height: 1.5;
    text-align: center;
    word-break: break-word;         /* スマホの画面端で綺麗に自動改行させる */
}