/* © 2026 PassQuest Team (https://passquest.jp). All rights reserved. 無断複製・転載・改変を禁じます。 */
/* ===============================================
   PassQuest - Steampunk Fantasy Theme v2
   Based on: Brave Frontier / Dark Fantasy Reference
   =============================================== */

/* ★2026-09-21 ここにあった Google フォントの @import を外しました。
   index.html の <link> が 同じ書体・太さ（Cinzel 400/700/900・Dela Gothic One・Noto Sans JP 400/500/700）を
   すべて読み込んでいるので、二重でした。@import は «読み終わるまで この CSS 全体が止まる» ため、
   Google につながりにくいとき 画面が出るまで待たされる原因になっていました。 */

:root {
    /* ========================
       Typography (全体フォント統括設定)
       ======================== */
    --font-main: 'Noto Sans JP', sans-serif;
    --font-heading: 'Cinzel', serif;
    --font-pixel: 'DotGothic16', sans-serif;
    --font-accent: 'Dela Gothic One', sans-serif;

    /* ========================
       Steampunk Color Palette
       ======================== */
    --sp-dark-bg: #1a1209;
    --sp-sepia-dark: #2a1f0e;
    --sp-sepia-mid: #4a3820;
    --sp-sepia-light: #8d7355;

    /* Golds & Metals */
    --sp-gold: #c9a84c;
    --sp-gold-bright: #f0d060;
    --sp-gold-light: #e5c87a;
    --sp-gold-metallic: #d4af37;
    /* 金属的なゴールド (タイトルボタン等) */
    --sp-gold-pure: #ffd700;
    /* 純白に近い明るいゴールド (カード等) */
    --sp-gold-deep: #aa8c2c;
    /* 暗いゴールド */
    --sp-silver: #b0b8c1;

    /* Woods & Leather */
    --sp-wood-dark: #5c2e0b;
    /* ダークウッド (巻物の棒など) */
    --sp-wood-base: #8b4513;
    /* ベースの木/革の色 */
    --sp-wood-light: #d2b48c;
    /* 明るい木/革の色 */
    --sp-wood-reddish: #432b1d;
    /* 赤みがかったダークブラウン */
    --sp-wood-blackish: #2d1b10;
    /* 黒に近いダークブラウン */

    /* Papers & Parchments */
    --sp-cream: #f0e8d0;
    --sp-parchment: #d4c4a0;
    --sp-parchment-light: #fdf5e6;
    /* 明るい羊皮紙 (フラッシュカード、巻物など) */
    --sp-bg-overlay: rgba(29, 21, 16, 0.95);
    /* 半透明の暗黒背景レイヤー */

    /* Accents & Special */
    --sp-accent-red: #c62828;
    --sp-accent-red-bright: #ff5252;
    --sp-accent-red-dark: #8e0000;
    --sp-accent-blue: #1565c0;
    --sp-accent-blue-bright: #64b5f6;
    --sp-accent-blue-dark: #0d47a1;

    /* Texts & Colors */
    --sp-text-dark: #211508;
    --sp-text-mid: #4a3000;
    --sp-blue-bar: #2980b9;
    --sp-blue-bar-glow: #41aaff;
    --sp-gear: #5a4a35;
    --sp-border-dark: #7a6040;
    --sp-shadow: rgba(10, 5, 0, 0.7);
}

/* ========================
   BODY & BACKGROUND
   ======================== */
body {
    background:
        
        url('../images/title_hero_bg.png?v=20260424');
    background-size: cover;
    background-position: center 40%;
    background-attachment: fixed;
    background-color: #2b1a4a;
    color: var(--sp-cream);
    min-height: 100vh;
}

/* ========================
   HEADER: RPG Fantasy Style — quiz_header_bg.png 使用
   ======================== */
.app-header {
    background: linear-gradient(180deg, #241a4e 0%, #16102f 55%, #0d1734 100%) !important;
    border: none !important;
    /* ゴールドボーダーライン */
    box-shadow:
        0 0 0 2px #8a6a20,
        0 0 0 3px #c9a84c,
        0 8px 30px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 230, 100, 0.25) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20000 !important;
    padding: 10px 18px 10px !important;
    min-height: 64px !important;
}

/* ヘッダー上部の金のデコレーションライン */
.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            transparent 0%,
            #7a5a10 5%,
            #c9a84c 20%,
            #f0d060 40%,
            #fff8d0 50%,
            #f0d060 60%,
            #c9a84c 80%,
            #7a5a10 95%,
            transparent 100%);
    z-index: 1;
}

/* ヘッダー下部の金デコレーション */
.app-header::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            transparent 0%,
            #7a5a10 5%,
            #c9a84c 20%,
            #f0d060 40%,
            #fff8d0 50%,
            #f0d060 60%,
            #c9a84c 80%,
            #7a5a10 95%,
            transparent 100%);
    z-index: 10;
    opacity: 0.8;
}

/* マップ・単語帳ヘッダー内のタイトル視認性向上 */
#rpg-level {
    color: var(--sp-gold-bright) !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    /* 【改善】ピンク色を完全に排除し、クールなダーククリスタル＋ゴールドフレームに変更 */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364) !important;
    /* Deep Blue Metal */
    padding: 4px 15px;
    border-radius: 4px;
    border: 2px solid var(--sp-gold);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.8),
        inset 0 0 15px rgba(0, 255, 255, 0.2);
    /* Cyan glow */
    letter-spacing: 2px !important;
    display: inline-block;
    text-transform: uppercase;
}

.map-header .rpg-status span:not(#rpg-level) {
    color: var(--sp-gold-light);
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

.word-empty-state {
    padding: 30px 20px;
    text-align: center;
    background: transparent !important;
    /* 背景はJS側または親コンテナ側で制御 */
    border-radius: 15px;
    margin: 20px auto;
    max-width: 90%;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.word-empty-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}

.word-guide-box {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.word-guide-box rt {
    color: #fff !important;
    /* フリガナを白に固定 */
}

.word-guide-box div {
    margin-bottom: 12px;
}

/* ルビ（フリガナ）の視認性一括修正 - デフォルトは黒 */
/* ★ !important を外すことでJSインラインスタイルが有効になる ★ */
rt {
    color: #000000;
    text-shadow: none;
    font-size: 0.6em;
    font-weight: 700;
}

/* 🛡️ 暗い背景・ボタン・ヘッダー = 白フリガナ（黒縁取り） */
.review-mode-btn rt,
.ai-teacher-btn rt,
.rpg-btn rt,
.app-header rt,
.mode-toggle rt,
.rpg-status rt,
.title-btn rt,
.login-link rt,
.part-header rt,
.quiz-nav-bar rt {
    color: #ffffff !important;
    text-shadow:
        1px 1px 0px #000,
        -1px -1px 0px #000,
        1px -1px 0px #000,
        -1px 1px 0px #000,
        1px 0 0 #000,
        -1px 0 0 #000,
        0 1px 0 #000,
        0 -1px 0 #000,
        0 0 8px rgba(0, 0, 0, 0.9) !important;
    font-weight: 700 !important;
}

/* 📖 問題文・解説・単語帳・選択肢 = 黒フリガナ（背景が羊皮紙のため） */
.question-card rt,
.option-card rt,
.question-text rt,
.q-content rt,
.explanation rt,
.meaning-text rt,
.feedback-area rt,
.word-empty-state rt,
.word-item-info rt,
.guide-modal-content rt {
    color: #000000 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}


/* ロゴエリア */
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 王冠アイコン (SVGに置き換え) */
.logo-crown {
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url('../images/icon_crown.svg') no-repeat center;
    background-size: contain;
    font-size: 0 !important;
    /* 絵文字の👑を隠す */
    filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.4));
}

/* PassQuest ロゴ文字 (SVGに置き換え) */
.logo-text {
    display: inline-block;
    width: 280px;
    height: 100px;
    background: transparent url('../images/game_logo_v2.png') no-repeat center !important;
    background-size: contain;
    font-size: 0 !important;
    /* PassQuestテキストを隠す */
    margin-left: 5px;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

.beta-tag {
    font-family: var(--font-heading) !important;
    font-size: 0.65rem !important;
    color: var(--sp-gold-light) !important;
    letter-spacing: 2px;
    opacity: 0.8;
    margin-top: 15px;
    text-transform: uppercase;
}

/* ========================
   HEADER BUTTONS: DQ Stone Buttons
   ======================== */
.mode-toggle {
    background:
        linear-gradient(180deg,
            #5a4a2a 0%,
            #3a2e18 50%,
            #2a2010 100%) !important;
    border: 2px solid #c9a84c !important;
    border-radius: 6px !important;
    box-shadow:
        0 4px 0 #0f0a00,
        inset 0 1px 0 rgba(255, 230, 100, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 0, 0, 0.4) !important;
    color: #f0d870 !important;
    text-shadow: 1px 1px 0 #000, 0 0 8px rgba(240, 200, 50, 0.4) !important;
    font-weight: bold !important;
    font-size: 0.88rem !important;
    padding: 7px 12px !important;
    transition: all 0.1s !important;
    min-width: 60px !important;
}

.mode-toggle:hover {
    background:
        linear-gradient(180deg,
            #6a5a3a 0%,
            #4a3e28 100%) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.15) !important;
}

.mode-toggle:active {
    transform: translateY(3px) !important;
    box-shadow:
        0 1px 0 #0f0a00,
        inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}


/* ========================
   HEADER BUTTONS: Metallic Knobs / Gear Buttons
   ======================== */
.mode-toggle {
    background:
        linear-gradient(180deg,
            #6b5535 0%,
            #4a3520 60%,
            #3a2810 100%) !important;
    border: 2px solid var(--sp-gold) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 0 #1a0f05,
        inset 0 1px 0 rgba(201, 168, 76, 0.5),
        0 0 8px rgba(0, 0, 0, 0.5) !important;
    color: var(--sp-gold-light) !important;
    text-shadow: 1px 1px 2px #000, 0 0 5px rgba(201, 168, 76, 0.4) !important;
    font-weight: bold !important;
    padding: 8px 14px !important;
    transition: all 0.1s !important;
}

.mode-toggle:hover {
    filter: brightness(1.2) !important;
    transform: translateY(-1px) !important;
}

.mode-toggle:active {
    transform: translateY(3px) !important;
    box-shadow:
        0 1px 0 #1a0f05,
        inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}

/* ── Language Buttons: タイトル画面（#title-top-nav）と同一スタイル ── */
/* セレクター全体：すりガラスカプセル */
.app-header .lang-selector,
.header-lang-center .lang-selector {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 5px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    justify-content: flex-start !important;
    width: auto !important;
}

/* 各ボタン：タイトル画面と同値 */
.app-header .lang-btn,
.header-lang-center .lang-btn {
    padding: 6px 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 1 !important;
    min-width: unset !important;
    width: auto !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    box-sizing: content-box !important;
}

.app-header .lang-btn img,
.header-lang-center .lang-btn img {
    width: 28px !important;
    height: 21px !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.app-header .lang-btn:hover,
.header-lang-center .lang-btn:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

.app-header .lang-btn.active,
.header-lang-center .lang-btn.active {
    background: white !important;
    color: #333 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    border: none !important;
}

/* ========================
   アイテムボックス内 国旗ボタン（トップページ同デザイン）
   ======================== */
#word-bank-screen .lang-selector {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 5px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
}

#word-bank-screen .lang-btn {
    padding: 6px 14px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    flex-shrink: 0 !important;
}

#word-bank-screen .lang-btn img {
    width: 28px !important;
    height: 21px !important;
    display: block !important;
    flex-shrink: 0 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

#word-bank-screen .lang-btn:hover {
    transform: scale(1.05) !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

#word-bank-screen .lang-btn.active {
    background: white !important;
    color: #333 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    border: none !important;
}

/* ========================
   CARDS: Ancient Parchment with Metal Frames
   ======================== */
.card {
    background: url('../images/ui/parchment.png') center/cover no-repeat #dccdaa !important;
    border: none !important;
    border-radius: 4px !important;
    position: relative;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.6),
        inset 0 0 0 2px rgba(139, 110, 70, 0.8),
        inset 0 0 0 4px rgba(68, 48, 25, 0.4) !important;
    color: var(--sp-text-dark) !important;
    padding: 14px !important;
}

/* Card corner decorations */
.card::before,
.card::after {
    content: '⚙';
    position: absolute;
    font-size: 1.3rem;
    color: var(--sp-gold);
    opacity: 0.6;
    line-height: 1;
}

.card::before {
    top: 6px;
    left: 8px;
}

.card::after {
    bottom: 6px;
    right: 8px;
}

.option-card {
    background: url('../images/ui/parchment.png') center/cover no-repeat #dccdaa !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px rgba(139, 110, 70, 0.9),
        inset 0 0 0 4px rgba(80, 58, 30, 0.3) !important;
    transition: all 0.25s ease !important;
    color: var(--sp-text-dark) !important;
}

.option-card.active {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px var(--sp-gold),
        inset 0 0 0 4px rgba(201, 168, 76, 0.3),
        0 0 15px rgba(201, 168, 76, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Subject Tag */
.subject-tag {
    background: linear-gradient(135deg, #3a2a15, #5a4228) !important;
    color: var(--sp-gold-light) !important;
    border: 1px solid var(--sp-gold) !important;
    text-shadow: 1px 1px 0 #000 !important;
    padding: 4px 14px !important;
}

/* Option Header */
.option-header {
    color: var(--sp-sepia-mid) !important;
    font-weight: bold !important;
}

/* Feedback Area */
.feedback-area {
    background: url('../images/ui/parchment.png') center/cover no-repeat rgba(255, 255, 240, 0.95) !important;
    border: 2px solid rgba(139, 110, 70, 0.8) !important;
    border-radius: 8px !important;
    color: var(--sp-text-dark) !important;
    margin-top: 10px;
    padding: 15px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.feedback-area.correct {
    background-color: rgba(220, 255, 220, 0.95) !important;
    border-color: #2e7d32 !important;
    box-shadow: 0 0 15px rgba(46, 125, 50, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

.feedback-area.incorrect {
    background-color: rgba(255, 230, 230, 0.95) !important;
    border-color: #c62828 !important;
    box-shadow: 0 0 15px rgba(198, 40, 40, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

/* Question Text */
.question-text {
    color: var(--sp-text-dark) !important;
}

/* ========================
   QUESTION FIGURE (Exam Diagrams)
   ======================== */
.question-figure {
    margin: 12px auto 8px;
    padding: 12px;
    background: #fff;
    border: 2px solid #d4af37;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.question-figure svg,
.question-figure img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.question-figure.hidden {
    display: none;
}

/* ========================
   CHOICE BUTTONS: Engraved Stone
   ======================== */
.btn-choice {
    background:
        linear-gradient(180deg,
            #f0e8d8 0%,
            #ddd0b8 100%) !important;
    border: none !important;
    border-bottom: 5px solid #a09070 !important;
    border-radius: 8px !important;
    color: #3a2808 !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
    transition: all 0.1s !important;
}

.btn-choice:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.btn-choice:active {
    transform: translateY(4px) !important;
    border-bottom-width: 1px !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.btn-o {
    border-bottom-color: #3a7a3a !important;
}

.btn-o:hover {
    background: linear-gradient(180deg, #d8f0d8, #b8e0b8) !important;
}

.btn-x {
    border-bottom-color: #9a3030 !important;
}

.btn-x:hover {
    background: linear-gradient(180deg, #f0d8d8, #e0b8b8) !important;
}

/* ========================
   AI TEACHER BUTTON: Magic Crystal Gem
   ======================== */
.ai-teacher-btn {
    /* ★ Pure white text with hard drop shadow (NO gradient text) */
    color: #ffffff !important;
    /* ★ Dark backdrop for text contrast */
    text-shadow:
        0 0 0 transparent,
        1px 1px 0 #000000,
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        0 0 10px rgba(200, 100, 255, 0.9) !important;
    font-weight: 900 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    /* Gem-like background */
    background: linear-gradient(135deg, #9b59b6 0%, #6c1fa8 50%, #4a0080 100%) !important;
    border: 2px solid #d7b8ff !important;
    border-bottom: 5px solid #2d006b !important;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    box-shadow:
        0 6px 20px rgba(107, 10, 168, 0.6),
        inset 0 2px 8px rgba(255, 255, 255, 0.25),
        0 0 0 1px rgba(107, 10, 168, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 15px auto !important;
    width: auto !important;
    max-width: 320px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.ai-teacher-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 10px 30px rgba(107, 10, 168, 0.7),
        inset 0 2px 8px rgba(255, 255, 255, 0.35),
        0 0 20px rgba(180, 100, 255, 0.6) !important;
    filter: brightness(1.15) !important;
}

.ai-teacher-btn:active {
    transform: translateY(2px) !important;
    border-bottom-width: 2px !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}

/* ========================
   TITLE & RESULT SCREENS
   ======================== */
.app-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5000 !important;
    /* ヘッダー(20000)より背面に配置して設定ボタンが見えるようにする */
    background:
        linear-gradient(160deg,
            rgba(15, 10, 3, 0.92) 0%,
            rgba(30, 20, 8, 0.95) 100%) !important;   /* ★2026-09-23 外部サイト（transparenttextures.com）の模様をやめた（規約に無い外部通信のため） */
    background-color: #100c05 !important;
}

#title-screen {
    /* ★ bodyスクロール方式: position:relativeでdocumentフローに乗せてbodyでスクロール */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    z-index: 5000 !important;
    /* 背景はbodyに任せる（透明） */
    background: transparent !important;
    background-color: transparent !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* ★ タイトル画面表示中はbodyでスクロール可能にする */
body.is-title-screen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ★ クイズ画面: ヘッダー(70px)の直下から開始する決定的解決 */
#quiz-screen {
    /* ★ ヘッダー下の内部スクロール領域（下端まで確実にスクロール） */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 88px !important;
    padding-bottom: 140px !important;
    z-index: 50 !important;
    display: block !important;
    /* 特訓・苦手克服モード共用：火の魔法陣の訓練場背景 */
    background-color: #0a0814 !important;
    background-image:
        linear-gradient(160deg, rgba(15, 10, 3, 0.40) 0%, rgba(30, 20, 8, 0.50) 100%),
        url('../images/training_bg.png?v=20260430a') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}




/* ======================================
   問題カード: 通常配置（1選択肢ずつ表示するため1画面に収まる）
   ====================================== */
#question-card {
    z-index: 10 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 10px !important;
}

.title-logo {
    font-family: var(--font-heading) !important;
    color: var(--sp-gold-bright) !important;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(225, 190, 50, 0.8) !important;
}

/* ========================
   RESULT / FINAL CARD
   ======================== */
.result-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(135% 135% at 50% 0%,
            #2a2140 0%, #191324 55%, #0f0b18 100%) !important;
    color: #f3ecdd !important;
    border: 1.5px solid rgba(255, 210, 122, 0.5) !important;
    border-radius: 22px !important;
    padding-top: 26px !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 60px rgba(255, 190, 90, 0.05) !important;
}
/* カード上部の金の光の帯 */
.result-card::before {
    content: "";
    position: absolute;
    top: 0; left: 14%;
    width: 72%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 122, 0.9), transparent);
}

#final-score {
    color: var(--sp-gold) !important;
    text-shadow: 0 0 18px rgba(255, 210, 120, 0.55), 0 3px 6px rgba(0, 0, 0, 0.7) !important;
}
.score-display-wrapper .pct-sign {
    font-size: 2.4rem;
    font-weight: 900;
    margin-left: 3px;
    color: #ffd77a;
}
.score-frac {
    font-size: 1rem;
    font-weight: 600;
    color: #cbbfe0;
    letter-spacing: 0.04em;
    margin-top: 8px;
}

/* ========================
   PROGRESS BAR
   ======================== */
.progress-fill {
    background: linear-gradient(90deg, var(--sp-blue-bar), var(--sp-blue-bar-glow)) !important;
    box-shadow: 0 0 8px var(--sp-blue-bar-glow) !important;
}

/* Question Counter — quiz-progress-bar-wrap 内での表示スタイル */
.question-counter {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
    font-weight: 900 !important;
    font-family: 'DotGothic16', sans-serif !important;
    font-size: 0.9rem !important;
}

/* ========================
   HINT BUTTON (Synced with Correct/O Button)
   ======================== */
.btn-hint {
    background:
        linear-gradient(180deg,
            #e8f5e9 0%,
            #c8e6c9 100%) !important;
    /* Stone Green style */
    border: none !important;
    border-bottom: 5px solid #2e7d32 !important;
    /* Success Green Border */
    border-radius: 8px !important;
    color: #1b5e20 !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;
    /* Synced with O/X Font */
    font-family: var(--font-main) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: all 0.1s !important;
    text-align: center !important;
    justify-content: center !important;
}

.btn-hint:hover {
    background: linear-gradient(180deg, #d8f0d8, #b8e0b8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.4) !important;
}

/* ========================
   NEXT BUTTON
   ======================== */
#force-next-btn {
    background: linear-gradient(135deg, #3a5a3a, #4a7a4a) !important;
    border: 2px solid #6a9a6a !important;
    border-bottom: 4px solid #1a3a1a !important;
    color: #d0f0d0 !important;
    text-shadow: 1px 1px 0 #000 !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    padding: 12px 30px !important;
    box-shadow: 0 5px 15px rgba(0, 80, 0, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.1s !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    display: block !important;
}

#force-next-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.15) !important;
}

#force-next-btn:active {
    transform: translateY(3px) !important;
    border-bottom-width: 1px !important;
}

/* ========================
   TIMER
   ======================== */
.timer-container {
    background: linear-gradient(135deg, #2a1f0e, #3a2c18) !important;
    border: 2px solid var(--sp-gold) !important;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
    color: var(--sp-gold-light) !important;
}

/* ========================
   SCROLLBAR (optional flavor)
   ======================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1209;
}

::-webkit-scrollbar-thumb {
    background: var(--sp-sepia-mid);
    border-radius: 3px;
}

/* =============================================
   My単語帳 スタイル
   ============================================= */

/* バッジ（件数） */
.word-bank-badge {
    background: #e91e63;
    color: white;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    right: -5px;
    border: 1px solid white;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.word-list-container {
    padding: 4px 20px 24px;
    margin: 0 auto;
    /* 左右中央寄せだけを行う */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 600px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* 個別の単語カード */
/* --- Word Bank List Items (Cosmic Gold Aesthetic) --- */
.word-item {
    background: linear-gradient(135deg, rgba(20, 12, 4, 0.92), rgba(45, 28, 8, 0.88)) !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 180, 30, 0.07) !important;
    border: 1px solid rgba(255, 190, 60, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    margin-bottom: 15px !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.word-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 200, 60, 0.5), transparent);
}

.word-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(255, 200, 60, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 0 0 22px rgba(255, 180, 30, 0.28) !important;
    background: linear-gradient(135deg, rgba(40, 22, 4, 0.97), rgba(70, 44, 10, 0.95)) !important;
}

.word-item-main {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 8px 10px;
}

.word-item-info {
    flex: 1;
    text-align: center;
}

.word-item-term {
    font-size: 2.0rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    display: inline-block !important;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.word-item-term rt {
    color: #ffffff !important;
    font-size: 0.6em !important;
    text-align: center !important;
    display: block !important;
    letter-spacing: normal !important;
    transform: translateY(-2px);
}

.word-item-meanings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.word-mean-jp {
    font-size: 1.05rem !important;
    color: #e2e8f0 !important;
    font-weight: 800;
    line-height: 1.7;
    text-align: left;
    padding: 0 5px;
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 1px;
}

.word-mean-foreign {
    font-size: 1.05rem !important;
    color: rgba(255, 220, 120, 0.92) !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 6px 8px 2px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255, 190, 60, 0.2);
    margin-top: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.word-mean-jp rt,
.vocab-meaning-jp rt {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px #000 !important;
}

/* モーダル内のキャラクターコメントをクッキリさせる */
.vocab-meaning-jp span,
#vocab-meaning-foreign span {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    letter-spacing: 1px;
}

/* スパンの中のルビも色と縁取りを完全に継承 */
.vocab-meaning-jp span rt,
#vocab-meaning-foreign span rt {
    color: inherit !important;
    -webkit-text-stroke: inherit !important;
    text-shadow: inherit !important;
}

/* 削除ボタン */
/* 削除ボタンのプレミアム化 */
.word-delete-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.2s;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* ★2026-08-16 ☰と同じ理由で @media (hover: hover) で囲みました。
     iPhone では指でタップすると :hover が残り、ゴミ箱が傾いたままになります。 */
@media (hover: hover) and (pointer: fine) {
.word-delete-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    transform: rotate(10deg) scale(1.1);
}
}

/* === 保存済みボタンの状態 === */
#save-word-btn.is-saved {
    background: var(--sp-gold) !important;
    border-color: #ff8800 !important;
    color: #333 !important;
    font-weight: bold;
}

/* =============================================
   MODAL: ステップパンク / プレミアム羊皮紙デザイン
   ============================================= */

/* ============================================================
   VOCAB MODAL - リデザイン（魔法辞典スタイル）
   ============================================================ */

/* モーダル背景（オーバーレイ） — guide系・ログインモーダルは独自背景を使うので除外 */
.modal:not(#quiz-guide-modal):not(#adventure-guide-modal):not(#login-modal) {
    background: rgba(3, 5, 18, 0.88) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal {
    z-index: 50000 !important;
    display: none;
    /* JSで制御 */
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal:not(.hidden) {
    display: flex !important;
}

/* ログインモーダル専用の図書館背景（マスコット全体・足先まで表示） */
#login-modal.modal {
    /* 背景アート（そら＆エマ）を明るくしっかり見せる：暗幕を薄く・ぼかし無し・画面いっぱい(cover) */
    background:
        linear-gradient(rgba(12, 6, 28, 0.12), rgba(12, 6, 28, 0.22)),
        url('../images/login_bg_v2.png?v=20260424') center 50%/cover no-repeat,
        #14091f !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: flex-start !important;   /* カードは上寄せ＝二匹のマスコットを下に見せる */
    justify-content: center !important;
    padding-top: 3vh !important;
}

/* ===========================================
   ★ NEW LOGIN MODAL DESIGN（メダルと同じ世界観）
   =========================================== */
.login-modal-panel {
    position: relative !important;
    width: 88% !important;
    max-width: 320px !important;
    padding: 16px 20px 8px !important;
    background:
        linear-gradient(180deg, rgba(70,40,120,0.92) 0%, rgba(50,25,90,0.95) 50%, rgba(35,15,70,0.97) 100%) !important;
    border: 2.5px solid #c084fc !important;
    border-radius: 20px !important;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.65),
        0 0 32px rgba(168,85,247,0.45),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 6px rgba(0,0,0,0.3) !important;
    color: #fff !important;
    text-align: center !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    overflow: visible !important;
}

/* 閉じるボタン（紫の丸ボタン） */
.login-close-btn {
    position: absolute !important;
    top: -14px !important;
    right: -14px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #c084fc, #7c3aed) !important;
    border: 2px solid #fff !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 12px rgba(192,132,252,0.6) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    z-index: 5 !important;
}
/* ★2026-08-16 ☰と同じ理由で @media (hover: hover) で囲みました。
     iPhone では ✕ が rotate(90deg) のまま «＋» の形で残り、
     1回目のタップで閉じられないことがありました。 */
@media (hover: hover) and (pointer: fine) {
.login-close-btn:hover {
    transform: scale(1.1) rotate(90deg) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 20px rgba(192,132,252,0.9) !important;
}
}

/* ヘッダー部 */
.login-header {
    margin-bottom: 10px !important;
}
.login-crown {
    font-size: 1.8rem !important;
    margin-bottom: 2px !important;
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.7)) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
    animation: loginCrownFloat 3s ease-in-out infinite alternate !important;
    line-height: 1 !important;
}
@keyframes loginCrownFloat {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(-4px) rotate(3deg); }
}
.login-title {
    margin: 0 !important;
    font-family: 'Cinzel', 'Times New Roman', serif !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}
.login-title-en {
    display: block !important;
    font-size: 1.3rem !important;
    color: #ffd700 !important;
    letter-spacing: 3px !important;
    text-shadow:
        0 0 8px rgba(255,215,0,0.6),
        2px 2px 0 #2e1065,
        -1px -1px 0 #2e1065,
        1px -1px 0 #2e1065,
        -1px 1px 0 #2e1065 !important;
}
.login-title-jp {
    display: block !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.85rem !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    margin-top: 2px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 8px rgba(192,132,252,0.5) !important;
}
.login-subtitle {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 0.7rem !important;
    color: rgba(220,200,255,0.85) !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* 装飾区切り線 */
.login-divider {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 0 10px !important;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192,132,252,0.7), transparent);
}
.login-divider-star {
    color: #ffd700 !important;
    font-size: 1.1rem !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.8) !important;
}

/* フォーム */
.login-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}
.login-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.login-input-icon {
    position: absolute !important;
    left: 14px !important;
    font-size: 1.05rem !important;
    z-index: 2 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 4px rgba(192,132,252,0.5)) !important;
}
.login-input {
    width: 100% !important;
    padding: 9px 14px 9px 38px !important;
    background: rgba(20,10,40,0.6) !important;
    border: 2px solid rgba(192,132,252,0.5) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.login-input::placeholder {
    color: rgba(200,180,240,0.55) !important;
}
.login-input:focus {
    border-color: #ffd700 !important;
    background: rgba(30,15,55,0.8) !important;
    box-shadow:
        0 0 0 3px rgba(255,215,0,0.15),
        0 0 15px rgba(255,215,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ログインボタン（光るシャイン付き）*/
.login-submit-btn {
    position: relative !important;
    width: 100% !important;
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #ff7eb3 0%, #ff4081 50%, #c2185b 100%) !important;
    border: 2px solid #e0256e !important;
    border-radius: 26px !important;
    color: #fff !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-shadow:
        0 5px 15px rgba(0,0,0,0.7),
        0 0 20px rgba(255,64,129,0.4),
        inset 0 -2px 5px rgba(0,0,0,0.7),
        inset 0 2px 5px rgba(255,255,255,0.4) !important;
    text-shadow:
        1px 1px 0 #6e0d3a,
        -1px -1px 0 #6e0d3a,
        1px -1px 0 #6e0d3a,
        -1px 1px 0 #6e0d3a,
        0 2px 4px rgba(0,0,0,0.7) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.login-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.8),
        0 0 28px rgba(255,64,129,0.6),
        inset 0 -2px 5px rgba(0,0,0,0.7),
        inset 0 2px 5px rgba(255,255,255,0.5) !important;
}
.login-submit-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 150% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent) !important;
    transform: skewX(-25deg) !important;
    animation: loginShine 4s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation-delay: 1s !important;
    pointer-events: none !important;
}
@keyframes loginShine {
    0%   { left: -150%; }
    20%  { left: 150%; }
    100% { left: 150%; }
}

/* フッター（リンク） */
.login-footer {
    margin-top: 6px !important;
    font-size: 0.68rem !important;
    color: rgba(220,200,255,0.7) !important;
    line-height: 1.3 !important;
}
.login-link {
    color: rgba(220,200,255,0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s, text-shadow 0.2s !important;
}
.login-link:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255,215,0,0.6) !important;
}
.login-footer-sep {
    margin: 0 8px !important;
    color: rgba(192,132,252,0.5) !important;
}
/* ワイドスクリーン（デスクトップ）: カードを少し大きく（背景・配置はベース共通） */
@media (min-aspect-ratio: 16/10) {
    .login-modal-panel {
        max-width: 380px !important;
        width: 92% !important;
    }
}
/* 縦長スクリーン */
@media (max-aspect-ratio: 4/3) {
    #login-modal.modal {
        background-size: auto, 160% auto, auto !important;
        padding-top: 8vh !important;
    }
    .login-modal-panel {
        max-width: 320px !important;
        padding: 22px 20px 18px !important;
    }
    .login-title-en { font-size: 1.4rem !important; }
    .login-crown { font-size: 2rem !important; }
}

/* モーダルコンテンツ（魔法辞典スタイル） */
.modal-content {
    background:
        linear-gradient(rgba(3, 6, 20, 0.82), rgba(8, 12, 38, 0.90)),
        url('../images/quiz_header_bg.png') center/cover no-repeat !important;
    border: 2px solid rgba(255, 215, 0, 0.6) !important;
    border-radius: 20px !important;
    position: relative;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(255, 215, 0, 0.12),
        0 0 40px rgba(255, 180, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    padding: 28px 24px 24px !important;
    width: 92% !important;
    max-width: 480px !important;
    animation: modal-open-anim 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    max-height: 86vh;
}

/* 上部装飾ライン */
.modal-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.8), #ffd700, rgba(255,215,0,0.8), transparent);
    border-radius: 20px 20px 0 0;
}

@keyframes modal-open-anim {
    from { transform: scale(0.85) translateY(10px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* モーダル内テキスト */
.modal-content h2,
.modal-content h3,
.modal-content p,
.modal-content span,
.modal-content div:not(.action-btn):not(.lang-selector):not(.lang-btn) {
    color: #ffffff !important;
}

/* 装飾ラベル */
.vocab-ornament {
    text-align: center;
    font-size: 0.92rem;
    letter-spacing: 4px;
    color: rgba(255, 200, 60, 0.8) !important;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 単語タイトル */
.modal-content h2 {
    font-family: var(--font-heading) !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    text-align: center;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 3px;
    color: #ffd700 !important;
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.6) !important;
    line-height: 1.2 !important;
}

/* フリガナ */
.vocab-furigana {
    display: block;
    text-align: center;
    font-size: 0.95rem !important;
    margin: 0 0 16px 0 !important;
    color: rgba(255, 220, 140, 0.75) !important;
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: none !important;
}

/* フリガナエリア */
.vocab-info-area {
    text-align: center;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 14px;
}
.vocab-info-area::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent);
}

/* 解説エリア */
.modal-content .vocab-meaning-jp {
    font-size: 1.05rem !important;
    line-height: 1.75;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    margin-bottom: 24px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.modal-content hr {
    border: none;
    border-top: 1px solid rgba(255, 215, 0, 0.15);
    margin: 14px 0;
}

/* 閉じるボタン */
.close-modal {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 215, 0, 0.35) !important;
    border-radius: 50% !important;
    color: rgba(255, 215, 0, 0.85) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s;
    text-shadow: none !important;
    z-index: 10;
    padding: 0 !important;
}
.close-modal:hover {
    background: rgba(200, 30, 30, 0.45) !important;
    border-color: #ff4444 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* マスコットアドバイスボックス */
.mascot-talk-frame {
    position: relative;
    border-top-left-radius: 5px !important;
    animation: slideInUp 0.3s ease-out;
    text-align: left !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    padding-top: 14px !important;
}
.mascot-talk-frame::before {
    content: "ADVICE";
    position: absolute;
    top: -10px; left: 12px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1e1b4b;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    letter-spacing: 1px;
    z-index: 1;
}
.mascot-talk-frame.hidden { display: none !important; }

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* モーダル内 言語セレクター（lang-selectorスタイルと統一） */
#vocab-modal .vocab-flags {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 215, 0, 0.15);
    padding-top: 14px;
}
#vocab-modal .lang-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap;
    justify-content: center;
}
#vocab-modal .lang-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 7px !important;
    padding: 5px 7px !important;
    cursor: pointer;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
#vocab-modal .lang-btn img {
    width: 20px !important;
    height: 15px !important;
    border-radius: 2px !important;
    display: block !important;
}
#vocab-modal .lang-btn.active {
    background: #ffffff !important;
    color: #333 !important;
    border-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
#vocab-modal .lang-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* モーダル内フリガナ（ルビ）の色 - 暗背景に合わせて明るく */
#vocab-modal ruby rt,
#vocab-modal .mascot-talk-frame rt,
#vocab-modal .vocab-meaning-jp rt {
    color: rgba(255, 210, 130, 0.85) !important;
    text-shadow: none !important;
    font-size: 0.7em !important;
}

/* 保存ボタン内フリガナ */
#save-word-btn ruby rt {
    color: rgba(255, 210, 100, 0.75) !important;
    text-shadow: none !important;
    font-size: 0.65em !important;
}

/* 保存ボタン */
#save-word-btn {
    width: 100% !important;
    background: linear-gradient(135deg, rgba(50, 30, 5, 0.95), rgba(80, 50, 10, 0.9)) !important;
    border: 1.5px solid rgba(255, 200, 60, 0.65) !important;
    color: #ffd700 !important;
    font-family: var(--font-main) !important;
    letter-spacing: 1.5px;
    font-weight: 800 !important;
    font-size: 1rem !important;
    padding: 13px 20px !important;
    border-radius: 50px !important;
    margin-top: 16px !important;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 180, 0, 0.12) !important;
    display: block !important;
    text-align: center !important;
}
#save-word-btn:hover {
    background: linear-gradient(135deg, rgba(70, 45, 8, 0.98), rgba(110, 75, 15, 0.95)) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 200, 0, 0.25) !important;
    transform: translateY(-2px);
}
#save-word-btn.saved {
    background: linear-gradient(135deg, rgba(5, 40, 20, 0.95), rgba(10, 60, 30, 0.9)) !important;
    border-color: rgba(100, 220, 130, 0.6) !important;
    color: #6ee7a0 !important;
}

/* キャラクタートークボックス（別枠）の装飾 */
.mascot-talk-frame {
    position: relative;
    border-top-left-radius: 5px !important;
    animation: slideInUp 0.3s ease-out;
    text-align: left !important;
}

.mascot-talk-frame::before {
    content: "ADVICE";
    position: absolute;
    top: -10px;
    left: 12px;
    background: #fbbf24;
    color: #1e1b4b;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 900;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.mascot-talk-frame.hidden {
    display: none !important;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-modal {
    color: #ffd700 !important;
    font-size: 2.5rem !important;
    top: 10px !important;
    right: 15px !important;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: all 0.2s;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

.close-modal:hover {
    color: #a30000 !important;
    transform: scale(1.2);
}

/* 保存ボタンのプレミアム化 */
#save-word-btn {
    background: var(--sp-sepia-mid) !important;
    border: 2px solid var(--sp-gold) !important;
    color: var(--sp-gold-light) !important;
    font-family: var(--font-main) !important;
    letter-spacing: 1px;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    margin-top: 25px !important;
    cursor: pointer;
    transition: all 0.2s;
}

#save-word-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

/* === 保存時の演出アニメーション === */
.word-save-animation {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300000;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
}

/* バックドロップを追加して視認性を確保 */
.word-save-animation::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.85) 0%, transparent 75%);
    z-index: -1;
    animation: pulse-backdrop 1s ease-out;
}

.save-anim-icon {
    font-size: 6rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.save-anim-text {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    /* 白に変更してコントラストを最大化 */
    text-shadow:
        0 0 5px #000,
        0 0 15px var(--sp-gold),
        0 0 25px var(--sp-gold);
    /* ゴールドの輝きは残す */
    letter-spacing: 4px;
    margin-top: 15px;
    opacity: 0;
    animation: fade-in-up 0.5s 0.2s forwards;
}

@keyframes pulse-backdrop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 空状態の表示 */
/* 空状態の表示 (JS側で背景を制御) */
.word-empty-state {
    text-align: center;
    padding: 50px 20px;
    background: transparent !important;
}

.word-empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;
}

.word-empty-state p {
    color: #ffffff;
    line-height: 1.8;
}


/* =============================================
   復習モード (苦手克服モード) スタイル
   ============================================= */

/* === タイトル画面: 復習モードボタン === */
/* .review-mode-btn のスタイルは index.html 側へ移動しました */

.review-mode-btn {
    animation: review-btn-pulse 1.5s infinite ease-in-out;
}

.review-mode-btn.review-btn-empty {
    opacity: 0.6;
    animation: none !important;
    filter: grayscale(0.3);
    box-shadow: none !important;
}

@keyframes review-btn-pulse {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(180, 50, 10, 0.5), inset 0 1px 0 rgba(255, 150, 50, 0.3);
    }

    50% {
        box-shadow: 0 6px 25px rgba(255, 100, 20, 0.8), inset 0 1px 0 rgba(255, 150, 50, 0.5), 0 0 25px rgba(255, 80, 20, 0.5);
    }
}

.review-mode-btn:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.2) !important;
}

.review-mode-btn:active {
    transform: translateY(3px) !important;
    border-bottom-width: 2px !important;
}

/* 苦手問題件数バッジ */
.review-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6020, #cc3000);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 180, 100, 0.5);
    box-shadow: 0 2px 6px rgba(200, 50, 0, 0.6);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* 復習モードヒントテキスト */
.review-mode-hint {
    font-size: 0.75rem;
    color: #e09060;
    text-align: center;
    margin: 4px 0 0;
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.5px;
}

/* === 復習バナー（ヘッダー下）=== */
#review-mode-banner {
    background: linear-gradient(135deg, #3a1005, #5a1e08, #3a1005);
    border-top: 3px solid #ff6030;
    border-bottom: 3px solid #cc3010;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 70px;
    z-index: 19000;
    box-shadow: 0 4px 15px rgba(200, 80, 20, 0.5);
}

.review-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

.review-banner-icon {
    font-size: 1.8rem;
    animation: flame-dance 1s ease-in-out infinite alternate;
}

@keyframes flame-dance {
    0% {
        transform: scale(1) rotate(-5deg);
    }

    100% {
        transform: scale(1.15) rotate(5deg);
    }
}

.review-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-banner-text strong {
    color: #ffa060;
    font-size: 0.95rem;
    text-shadow: 1px 1px 0 #000;
    font-family: var(--font-heading);
}

.review-banner-sub {
    color: #e08040;
    font-size: 0.75rem;
    text-shadow: 1px 1px 0 #000;
}

.review-cleared-counter {
    color: #ffd0a0;
    font-size: 0.85rem;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 120, 40, 0.4);
}

/* === クリアエフェクト（⭐ 飛び出す） === */
.review-clear-star {
    position: fixed;
    font-size: 2rem;
    animation: review-star-fly 1s ease-out forwards;
    z-index: 99999;
    pointer-events: none;
    top: 40%;
}

@keyframes review-star-fly {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 1;
    }

    100% {
        transform: translateY(-120px) scale(1.5);
        opacity: 0;
    }
}

/* === 空状態モーダル（苦手0件） === */
#review-empty-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(10,5,2,0.50), rgba(12,6,3,0.62)), url('../images/review_bg.jpg') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300000;
}

.review-empty-content {
    background: linear-gradient(160deg, #2a1f0e, #1a1205);
    border: 2px solid var(--sp-gold);
    border-radius: 16px;
    padding: 40px 30px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.3);
}

.review-empty-icon {
    font-size: 4rem;
    margin-bottom: 10px;
    animation: bounce 1s infinite;
}

.review-empty-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--sp-gold-bright);
    text-shadow: 0 0 15px rgba(240, 200, 50, 0.8);
    margin-bottom: 15px;
}

.review-empty-msg {
    color: var(--sp-cream);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

.review-empty-hint {
    color: #b0a070;
    font-size: 0.8rem;
    line-height: 1.6;
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.review-empty-btn {
    background: linear-gradient(135deg, #5a4228, #3a2a18);
    border: 2px solid var(--sp-gold);
    border-bottom: 4px solid #1a0f05;
    color: var(--sp-gold-light);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.1s;
}

.review-empty-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

/* === 復習モード結果ボックス === */
.review-result-box {
    background: linear-gradient(160deg, #3a1808, #5a2010);
    border: 2px solid #e05020;
    border-radius: 12px;
    padding: 25px 20px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 0 20px rgba(200, 80, 20, 0.4);
}

.review-result-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    animation: flame-dance 0.8s ease-in-out infinite alternate;
}

.review-result-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: #ffa060;
    text-shadow: 0 0 10px rgba(255, 100, 20, 0.8);
    margin-bottom: 20px;
    font-weight: bold;
}

.review-result-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.review-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.review-stat-label {
    font-size: 0.8rem;
    color: #c08050;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-stat-value {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: var(--font-heading);
}

.review-stat-value.cleared {
    color: #7cfc00;
    text-shadow: 0 0 10px rgba(100, 255, 0, 0.6);
}

.review-stat-value.remaining {
    color: #ff8030;
    text-shadow: 0 0 10px rgba(255, 120, 20, 0.6);
}

.review-allclear {
    background: rgba(100, 220, 50, 0.2);
    border: 1px solid rgba(100, 220, 50, 0.5);
    border-radius: 8px;
    padding: 12px;
    color: #a0ff60;
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 15px;
    animation: review-btn-pulse 1.5s infinite;
}

.review-keep-going {
    background: rgba(255, 130, 20, 0.15);
    border: 1px solid rgba(255, 130, 20, 0.4);
    border-radius: 8px;
    padding: 12px;
    color: #ffb060;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.review-back-to-title {
    background: linear-gradient(135deg, #5a2010, #3a1208);
    border: 2px solid #e05020;
    border-bottom: 4px solid #7a1a05;
    color: #ffd0a0;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 15px rgba(200, 80, 20, 0.4);
}

.review-back-to-title:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.review-back-to-title:active {
    transform: translateY(3px);
    border-bottom-width: 1px;
}

/* =========================================
   OVERLAY & CLOSE BUTTON FIX (Word Bank)
   ========================================= */

#word-bank-screen {
    justify-content: flex-start !important;
    padding-top: 11px !important;
    z-index: 99999 !important;
    background: linear-gradient(rgba(3,6,20,0.6), rgba(5,10,30,0.6)), url('../images/quiz_header_bg.png') center/cover no-repeat fixed !important;
    background-color: #030614 !important;
    overflow-y: auto !important;
}

/* メインヘッダーをword-bankが開いているときに非表示（CSS :has()対応ブラウザ用） */
body:has(#word-bank-screen:not(.hidden)) > header.app-header {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* フラッシュカード画面: word-bank(99999)の上に表示されるよう同じz-indexを設定 */
#flashcard-screen {
    z-index: 99999 !important;
}

/* word-bank内のヘッダー: 上端11pxの余白を常時確保（sticky時も維持） */
#word-bank-screen .app-header,
#word-bank-screen .map-header {
    position: sticky !important;
    top: 11px !important;
    z-index: 100 !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    max-width: 600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* タイトルをヘッダー中央に配置（rpg-statusはdisplay:flexなのでjustify-contentで中央寄せ） */
#word-bank-screen .map-header .rpg-status {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 言語バーも同じ幅に制限 */
#word-bank-screen > div:nth-child(2) {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#word-bank-close-btn {
    background: #ff5252 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 0 #800000, 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.1s !important;
    font-size: 0.9rem !important;
}

#word-bank-close-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.1);
}

#word-bank-close-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 1px 0 #800000 !important;
}

/* =========================================
   ADVENTURE GUIDE (Manual)
   ========================================= */
/* .guide-btn のスタイルは index.html 側へ移動しました */

.guide-modal-content {
    max-width: 450px !important;
    width: 90% !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.guide-title {
    font-size: 1.4rem !important;
    margin-bottom: 25px !important;
    color: var(--sp-text-dark) !important;
    border-bottom: 2px solid var(--sp-sepia-mid) !important;
    padding-bottom: 15px !important;
}

.guide-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 25px;
    text-align: left;
}

/* Scrollbar for Guide */
.guide-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.guide-scroll-area::-webkit-scrollbar-thumb {
    background: var(--sp-sepia-mid);
    border-radius: 10px;
}

.guide-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.03);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    align-items: flex-start;
}

.guide-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.guide-text h3 {
    margin: 0 0 5px 0 !important;
    font-size: 1.05rem !important;
    color: var(--sp-text-dark) !important;
    border: none !important;
    text-align: left !important;
    padding: 0 !important;
}

.guide-text p {
    margin: 0;
    font-size: 0.82rem;
    color: #5d4037;
    line-height: 1.6;
}

/* === 気になる (Unsure) Checkbox UI === */
.unsure-wrap {
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-user-select: none; user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.unsure-wrap:hover {
    transform: translateY(-2px);
    background: rgba(255, 165, 0, 0.2) !important;
    border-color: rgba(255, 165, 0, 0.5) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.unsure-wrap:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#unsure-checkbox {
    accent-color: #8b4513;
    /* Copper/Brown accent */
}

/* =============================================
   タイトル画面: パート合格状況 (Medals)
   ============================================= */
.title-part-status {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    /* 中央揃えに固定 */
    width: 320px;
    /* 他のボタンと同じ幅 */
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 10px;
    border-radius: 50px;
    /* 他のボタンの丸みに合わせる */
    border: 2px solid var(--sp-gold);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.part-status-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.part-status-item.passed {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

.part-medal {
    width: 48px;
    height: 48px;
    background: var(--sp-sepia-dark);
    border: 2px solid var(--sp-sepia-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    position: relative;
}

.passed .part-medal {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    border-color: #fff;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* メダルのリボン（装飾） */
.passed .part-medal::before {
    content: '';
    position: absolute;
    top: -5px;
    width: 20px;
    height: 30px;
    background: linear-gradient(to bottom, #d32f2f, #b71c1c);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);
    z-index: -1;
}

.part-info {
    text-align: center;
}

.part-label {
    display: block;
    font-size: 0.65rem;
    font-family: var(--font-heading);
    color: var(--sp-gold-light);
    letter-spacing: 1px;
}

.part-name {
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

.passed .part-name {
    color: var(--sp-gold-bright);
}

/* =========================================
   RPG RESULT SCREEN (QUEST CLEARED)
========================================= */
.rpg-result-header {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 210, 122, 0.28);
}

#quest-cleared-text {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.5rem;
    background: linear-gradient(to bottom, #fff8d0, #c9a84c, #7a5a10);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 8px rgba(201, 168, 76, 0.8));
    margin: 0 0 10px 0;
    animation: scale-bounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stars-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 3rem;
    color: #444;
    /* Disabled star color */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.star.active {
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
    /* ★2026-08-16 «both» → «forwards»。
         both は «始まる前» も最初のコマ（opacity:0）を当ててしまうため、
         iPhone でアニメが始まらなかったとき ★ が
         «出たはずなのに見えない» ことがありました。
         forwards なら «終わったあと» だけを保ち、
         始まらなくても普通に見えます。見た目・動きは同じです。 */
    animation: drop-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes drop-in {
    0% {
        transform: scale(3) translateY(-50px) rotate(45deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0) rotate(0);
        opacity: 1;
    }
}

@keyframes scale-bounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.result-body-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 22px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border-radius: 14px;
    border: 1px solid rgba(255, 210, 122, 0.22);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}

.score-exp-section {
    text-align: center;
    flex-grow: 1;
}

.score-display-wrapper {
    font-size: 4.6rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

.rpg-exp-wrapper {
    background: rgba(30, 20, 10, 0.8);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #c9a84c;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 5px 15px rgba(0, 0, 0, 0.5);
    margin: 10px auto 0;
    max-width: 300px;
}

.weak-chest-container {
    background: linear-gradient(135deg, rgba(40, 20, 10, 0.9), rgba(20, 10, 5, 0.9));
    border: 2px dashed #c9a84c;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

/* ★2026-09-19 トモさんのご指摘：箱の «下の文字»（Q.ex30_2 など）が
   箱からはみ出して 枠線に重なっていました。仕様ではなく 不具合です。
   原因：箱を 60×60px に決め打ちしていたので、文字のほうが 大きいときに
         はみ出していました（絵文字の大きさは 端末によって変わります）。
   直し方：箱を «中身に合わせて» 伸びるようにし、下限だけ 60px にします。 */
.weak-chest-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 62px;
    max-width: 132px;
    height: auto;
    min-height: 62px;
    padding: 6px 8px 5px;
    line-height: 1;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid #c9a84c;
    border-radius: 8px;
    /* 絵文字は «かざり» なので、文字を大きくする設定のときも 大きくしすぎません
       （文字のほうは そのまま大きくなります） */
    font-size: 2rem;
    font-size: min(2rem, 44px);
    animation: float 3s ease-in-out infinite;
    cursor: pointer;
    transition: transform 0.2s;
}

.weak-chest-item:hover {
    transform: scale(1.1);
    background: rgba(201, 168, 76, 0.3);
}

.weak-chest-item span {
    font-size: 0.6rem;
    color: #f0d060;
    font-weight: bold;
    margin-top: 5px;
    text-shadow: 0 1px 2px #000;
    /* ★2026-09-19 文字が箱の外へ出ないようにします（上の直しと一組）。
       «第30回 / 問2» の2行にしたので、少しだけ読みやすい大きさにします。 */
    display: block;
    max-width: 100%;
    font-size: 0.64rem;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ============================================================
   QUIZ GUIDE MODAL: .modal:not(.hidden){flex} を上書き
   IDセレクターはクラスセレクターより詳細度が高いため確実に勝つ
   ============================================================ */
#quiz-guide-modal:not(.hidden) {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
}

/* ★ .modal の background ショートハンドより詳細度を高く（IDセレクター×2でね） */
#quiz-guide-modal,
#quiz-guide-modal.modal {
    background:
        linear-gradient(rgba(20, 12, 5, 0.55), rgba(15, 8, 28, 0.65)),
        url('../images/guide_bg.png?v=20260430a') center/cover no-repeat fixed,
        #1a0f08 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* ============================================================
   MASCOT: option-header 基準 top:0 絶対配置・大サイズ
   option-header に position:relative がある → top:0 = カード上端
   185px のキャラが上端→ボタン直上まで占有する
   ============================================================ */

.option-card {
    position: relative !important;
    overflow: visible !important;
}

.option-header {
    overflow: visible !important;
    min-height: 50px !important;
}

/* キャラを option-header の右側・下方向にオフセット配置 */
.option-header .mascot-container {
    position: absolute !important;
    top: 5px !important;
    right: 6px !important;
    bottom: unset !important;
    z-index: 3 !important;
    pointer-events: none !important;
    transform: none !important;
    flex-shrink: unset !important;
}

/* キャラ本体 260px（エリアサイズ変更なし・はみ出しOK） */
.option-header .mascot-icon,
.option-header .mascot-icon[data-role="priest"],
.option-header .mascot-icon[data-role="monk"],
.option-header .mascot-icon[data-role="warrior"] {
    width: 260px !important;
    height: 260px !important;
    margin: 0 !important;
    background-position: center bottom !important;
}

/* テキスト：キャラ幅分の右パディング */
.option-text {
    padding-right: 195px !important;
    min-height: 80px !important;
}

/* ★RPGバトル中はマスコット非表示なので、右パディングを詰めて問題文を右端まで表示（初回問題から常時適用） */
body.rpg-battle-mode #quiz-screen .option-text,
body.rpg-battle-mode .option-text {
    padding-right: 12px !important;
    min-height: 0 !important;
}
body.rpg-battle-mode .option-header .mascot-icon,
body.rpg-battle-mode .mascot-container {
    display: none !important;
}

/* 判定ボタンをキャラより前面に（重なっても操作可能） */
.decision-buttons {
    position: relative !important;
    z-index: 10 !important;
}

/* =============================================
   アイテムボックス空状態 幅統一
   ============================================= */
#word-bank-list,
#

/* ★ 苦手克服モード（復習バナー表示中）のクイズ背景＝炎の修練場 */
body.has-review-banner #quiz-screen {
    background: linear-gradient(rgba(10,6,6,0.60), rgba(14,7,7,0.72)), url('../images/review_bg.jpg') center/cover no-repeat fixed !important;
}