@charset "UTF-8";
/**
 * [Path: assets/css/logos-ui.css] - VER.8.00
 * Quest of Logos: Ultimate Console UI (Numerical Status & Training Edition)
 * 監修：猪俣文行氏
 * 修正内容：
 * 1. 5枚看板の完全左寄せ対応
 * 2. 解説スイッチの大型化(36x18)と余白(12px)確保
 * 3. XPとRD（練度）の数値表示スタイル追加
 * 4. 精神の修行（shuren）用のテーマカラー追加
 * 垂直展開形式：猪俣氏のルールに基づき、プロパティを一切省略せず記述。
 */

/* =========================================================
   1. 基本変数
========================================================= */
:root {
    --rpg-panel-bg: linear-gradient(
        180deg, 
        #0f2244 0%,    
        #050d1a 100%   
    );
    --rpg-border-gold: #d4af37;
    --rpg-border-gold-light: #f3e5ab;
    --rpg-text-main: #ffffff;
    --rpg-amber-glow: #ffcc00;
    --rpg-hp-green: #4ade80;
    --rpg-mp-blue: #60a5fa;
    --rpg-xp-purple: #c084fc;
    --rpg-rd-teal: #14b8a6; /* ⚠️ 新規：練度（RD）用カラー */
    --rpg-incorrect-mark: #ef4444;
    --rpg-crystal-cyan: #22d3ee;
    
    --theme-enemy-bg: linear-gradient(
        180deg, 
        #1a2d4d 0%, 
        #0f2244 100%
    );
    --theme-title-bg: #1e3a8a;
    --theme-opt-bg: linear-gradient(
        180deg, 
        #1e40af 0%, 
        #1e3a8a 100%
    );
}

/* =========================================================
   2. 全体構造
========================================================= */
.logos-hub-outer {
    display: flex;
    justify-content: center;
    background-image: linear-gradient(
        180deg, 
        #3d1a5a 0%, 
        #0f051a 100%
    ) !important;
    background-color: #0f051a !important;
    min-height: calc(100dvh - 60px);
    width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

#quest-battle-screen.logos-battle-outer {
    background-image: var(--rpg-panel-bg) !important;
    background-color: #051020 !important;
    min-height: calc(100dvh - 80px);
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    transition-property: background-image;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

/* =========================================================
   2.5 モード別背景演出
========================================================= */
#quest-battle-screen.mode-shiren {
    background-image: linear-gradient(180deg, #102a50 0%, #051020 100%) !important;
}

#quest-battle-screen.mode-verbal {
    background-image: linear-gradient(180deg, #2a1050 0%, #0f0520 100%) !important;
}

#quest-battle-screen.mode-shuren {
    background-image: linear-gradient(180deg, #0a3d2e 0%, #02100a 100%) !important;
}

#quest-battle-screen.mode-kantei {
    background-image: linear-gradient(180deg, #5e4d00 0%, #1a1600 100%) !important;
}

#quest-battle-screen.mode-record {
    background-image: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%) !important;
}

/* =========================================================
   3. 共通ラッパー
========================================================= */
.game-outer-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    max-width: 430px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    overflow-y: visible;
}

@media (min-width: 700px) {
    .game-outer-wrapper {
        max-width: 650px;
    }
}

.logos-rpg-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    box-sizing: border-box;
    overflow-y: hidden;
}

/* =========================================================
   4. ハブ画面：ビジュアルエリア
========================================================= */
.hub-header-window {
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

.header-char-bg {
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 95%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 1;
    pointer-events: none;
}

.quest-logo-img-large {
    width: 80%;
    max-width: 320px;
    height: auto;
    z-index: 2;              /* ⚠️ 修正：キャラより手前に */
    margin-bottom: 10px;
    filter: drop-shadow(0px 0px 15px #000000);
}

.game-desc-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--rpg-amber-glow);
    z-index: 2;
    line-height: 1.5;
    text-shadow: 2px 2px 4px #000000;
}

/* =========================================================
   5. ハブ画面：メニューエリア（1大 + 2x2グリッド）
========================================================= */
.action-hub-panel {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    box-sizing: border-box;
    background-color: transparent;
}

.menu-grid-5 {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
    justify-content: flex-start;
}

/* 【1大：王座のカード】左寄せ対応 */
.action-card-large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* ⚠️ 左寄せ */
    text-align: left;        /* ⚠️ 左寄せ */
    padding-top: 13px;
    padding-right: 15px;
    padding-bottom: 18px;
    padding-left: 20px;      /* ⚠️ 左に余白を確保 */
    border-radius: 8px;
    text-decoration: none;
    height: auto;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    transition-property: transform;
    transition-duration: 0.1s;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.action-card-large:active {
    transform: scale(0.98);
}

/* 【2x2：知略と記録のグリッド】左寄せ対応 */
.menu-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: calc(70% - 10px);
    width: 100%;
}

.action-card-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-top: 5px;
    padding-right: 12px;
    padding-bottom: 5px;
    padding-left: 12px;
    border-radius: 8px;
    text-decoration: none;
    height: 100%;
    border-width: 2px;
    border-style: solid;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    transition-property: transform;
    transition-duration: 0.1s;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.action-card-small:active {
    transform: scale(0.96);
}

/* =========================================================
   6. 5枚看板：カラーリング定義
========================================================= */
.btn-kantei {
    background-image: linear-gradient(135deg, #b8860b 0%, #4a3500 100%);
    border-top-color: #ffd700;
    border-right-color: #ffd700;
    border-bottom-color: #ffd700;
    border-left-color: #ffd700;
}

.btn-shiren {
    background-image: linear-gradient(135deg, #00008b 0%, #000033 100%);
    border-top-color: #3399ff;
    border-right-color: #3399ff;
    border-bottom-color: #3399ff;
    border-left-color: #3399ff;
}

.btn-verbal {
    background-image: linear-gradient(135deg, #4b0082 0%, #1a0033 100%);
    border-top-color: #ba55d3;
    border-right-color: #ba55d3;
    border-bottom-color: #ba55d3;
    border-left-color: #ba55d3;
}

.btn-shuren {
    background-image: linear-gradient(135deg, #006400 0%, #001a00 100%);
    border-top-color: #66cc33;
    border-right-color: #66cc33;
    border-bottom-color: #66cc33;
    border-left-color: #66cc33;
}

.btn-record {
    background-image: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    border-top-color: #aaaaaa;
    border-right-color: #aaaaaa;
    border-bottom-color: #aaaaaa;
    border-left-color: #aaaaaa;
}

/* =========================================================
   7. 5枚看板：フォントと装飾
========================================================= */
.action-card-large .card-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px #000000;
}

.action-card-large .card-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    text-shadow: 1px 1px 1px #000000;
}

.action-card-small .card-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 2px;
    text-shadow: 1px 1px 2px #000000;
}

.action-card-small .card-desc {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    text-shadow: 1px 1px 1px #000000;
}

.card-note {
    font-size: 0.55rem;
    color: var(--rpg-amber-glow);
    font-weight: bold;
    display: block;
    margin-top: 3px;
}

.footer-info {
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    color: #999;
    padding-bottom: 5px;
    letter-spacing: 0.2em;
}

/* =========================================================
   8. パネル共通装飾
========================================================= */
.rpg-panel {
    width: 100%;
    box-sizing: border-box;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: var(--rpg-border-gold);
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--rpg-border-gold);
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: var(--rpg-border-gold);
    border-radius: 4px;
    background-image: var(--rpg-panel-bg);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    margin-bottom: 10px;
}

.logos-hub-outer .rpg-panel {
    border-top-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   9. バトル画面：共通ヘッダー（50px固定）
========================================================= */
.quest-header-logo-area {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(212, 175, 55, 0.3);
    margin-bottom: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.quest-logo-img {
    height: 24px;
    width: auto;
}

.btn-end-game {
    background-color: #1e3a8a;
    color: var(--rpg-border-gold-light);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    padding-left: 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   10. バトル画面：統合コンソール（数値表示対応版）
========================================================= */
.hero-console-frame {
    margin-top: 0px;
    margin-bottom: 10px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: var(--rpg-border-gold);
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: var(--rpg-border-gold);
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: var(--rpg-border-gold);
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 8px;
    padding-left: 10px;
    background-image: var(--rpg-panel-bg);
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    flex-shrink: 0;
}

.hero-status-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 15px;
}

.hero-portrait-box {
    width: 100px;
    height: 100px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    flex-shrink: 0;
}

.hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
}

.hero-stats-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    gap: 4px;
}

.hero-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(212, 175, 55, 0.3);
    padding-bottom: 2px;
    margin-bottom: 4px;
}

.hero-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--rpg-border-gold-light);
}

.lv-label-small {
    font-size: 0.75rem;
    color: var(--rpg-text-main);
    margin-left: 8px;
}

.bp-text {
    color: var(--rpg-amber-glow);
    font-size: 0.85rem;
    font-weight: bold;
}

/* --- HP/MP バー表示 --- */
/* --- ステータス2x2グリッド構造：バー側を拡大 --- */
.hero-status-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr; 
    grid-template-rows: auto auto;
    gap: 5px 12px;
    margin-top: 5px;
}

.stat-unit {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* ⚠️ ラベル：テキスト(HP/MP等)に合わせて幅を調整 */
.stat-label {
    font-size: 0.65rem !important;
    font-weight: 900;
    width: 25px;
    color: var(--rpg-border-gold);
    flex-shrink: 0;
}

/* --- ステータス2x2グリッド構造：バー側を大きく確保 (最終調整版) --- */
.hero-status-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr; 
    grid-template-rows: auto auto;
    gap: 5px 12px;
    margin-top: 5px;
}

.stat-unit {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

/* ラベル：テキスト(HP/MP等)に合わせて幅を調整 */
.stat-label {
    font-size: 0.65rem !important;
    font-weight: 900;
    width: 25px;
    color: var(--rpg-border-gold);
    flex-shrink: 0;
}

/* ⚠️ バー：高さを14pxに拡大し、消えないように最低幅を確保 */
.stat-bar-container {
    flex-grow: 1;
    height: 14px;
    background-color: #111827;
    border: 1px solid #374151;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    min-width: 80px;
}

.stat-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* 数値表示（XP/RD）：右寄せを確定 */
.numerical-box { 
    justify-content: flex-end; 
}

.num-val-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 65px;
    justify-content: flex-end; /* 右寄せ */
}

/* ⚠️ 数値フォント：0.75remまで拡大し、HP/MP/XP/RDを統一 */
.val-current, .stat-val-text {
    font-size: 0.75rem !important; 
    font-weight: 900 !important;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    line-height: 1;
}

/* バー内の数値を中央に重ねる */
.stat-val-text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    text-shadow: 1px 1px 1px #000;
}

.val-max {
    font-size: 0.55rem;
    color: #888888;
}

/* ⚠️ キャラクター画像のズームアップ（枠の大きさを変えずに拡大） */
.hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.08);
    transform-origin: top center;
    z-index: 1;
}

/* ⚠️ 解説スイッチの文字を黄色に固定 */
.explain-toggle-wrapper {
    color: var(--rpg-amber-glow) !important;
}

/* ⚠️ 精神の修行：ダメージ警告演出 */
.shuren-warning-text {
    position: absolute;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ff4444;
    font-size: 1.4rem;
    font-weight: 900;
    text-shadow: 0 0 10px #000, 0 0 20px #ff0000;
    z-index: 10001;
    pointer-events: none;
    animation: warning-pop 1s ease-out forwards;
}

@keyframes warning-pop {
    0% { opacity: 0; scale: 0.5; }
    15% { opacity: 1; scale: 1.2; }
    85% { opacity: 1; scale: 1.0; }
    100% { opacity: 0; scale: 1.5; }
}

@keyframes feedbackSlide {
    0%   { opacity: 0; transform: translate(-50%, -40%); }
    12%  { opacity: 1; transform: translate(-50%, -50%); }
    80%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -58%); }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX(6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

@keyframes slideUp {
    0%   { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

.mode-shuren #ans-feedback-layer:has(.incorrect-mark) {
    animation: shuren-shake 0.4s ease-in-out;
}

@keyframes shuren-shake {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
}

/* BP（お金）のテキスト色を白で固定 */
.bp-text {
    color: #ffffff !important;
    font-weight: bold;
}


/* =========================================================
   11. バトル画面：試練エリア
========================================================= */
.enemy-panel {
    background-image: var(--theme-enemy-bg);
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    margin-bottom: 10px;
}

.enemy-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(212, 175, 55, 0.2);
    flex-shrink: 0;
}

.enemy-info-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    margin-right: 15px;
}

.enemy-name-label {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--rpg-border-gold-light);
}

/* ⚠️ 修正：タイマーとスイッチを縦に並べる箱の余白拡大 */
.timer-black-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;               /* 👈 余白を12pxに確保 */
    color: #00ffff;
    text-shadow: 0px 0px 8px rgba(0, 255, 255, 0.8);
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: right;
    min-width: 70px;
}

.question-text-area {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #ffffff;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    overflow-y: auto;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* ⚠️ 修正：高さを固定せず、中身に合わせて広げる */
    height: auto !important; 
    min-height: 120px;
    max-height: 55vh; /* スクロール上限：画面の55%まで */
}

@media (min-height: 701px) and (max-height: 900px) {
    .question-text-area {
        height: auto;
        min-height: 90px;
        max-height: 280px;
    }
}

@media (min-height: 901px) {
    .question-text-area {
        height: auto;
        min-height: 150px;
        max-height: 340px;
    }
}

/* --- 解説スイッチのデザインを追加（これで表示されます） --- */
.explain-toggle-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.65rem;
    color: #aaaaaa;
}
.explain-toggle-indicator {
    width: 36px; height: 18px;
    border-radius: 9px;
    background-color: #444444;
    position: relative;
    transition: 0.3s;
}
.explain-toggle-indicator::after {
    content: ""; position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.3s;
}
.explain-toggle-wrapper.is-on .explain-toggle-indicator {
    background-color: var(--rpg-amber-glow);
}
.explain-toggle-wrapper.is-on .explain-toggle-indicator::after {
    transform: translateX(18px);
}


/* =========================================================
   12. 選択肢ボタン
========================================================= */
.integrated-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}

.btn-option {
    background-image: var(--theme-opt-bg);
    border: 2px solid var(--rpg-border-gold);
    color: #ffffff;
    
    /* ⚠️ 修正：パディングを調整して左側に余白を確保 */
    padding: 10px 15px; 
    
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    
    /* ⚠️ 修正：テキストを左寄せに変更 */
    text-align: left; 
    
    height: auto;
    min-height: 44px;
    display: flex;
    
    /* ⚠️ 修正：Flexボックスの配置を左端（flex-start）へ */
    justify-content: flex-start; 
    
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
    transition: transform 0.1s;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

.btn-option:active {
    transform: scale(0.97);
}

/* =========================================================
   13. アクションコマンド
========================================================= */
.action-area-wrapper {
    width: 100%;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.battle-commands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
}

.btn-command {
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-image: linear-gradient(180deg, #1e3a8a 0%, #172554 100%);
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    border-radius: 4px;
    color: var(--rpg-border-gold-light);
    font-size: 0.75rem;
    font-weight: bold;
    box-shadow: 0px 2px 0px #090e17;
    cursor: pointer;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 4px;
    transition-property: transform;
    transition-duration: 0.1s;
}

.cmd-icon {
    font-size: 1.1rem;
    margin-bottom: 0px;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.8));
}

.btn-command:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0px 0px 0px #090e17;
}

.btn-skill-blue {
    background-image: linear-gradient(180deg, #2a5298 0%, #1e3c72 100%);
    border-top-color: #4a90e2;
    border-right-color: #4a90e2;
    border-bottom-color: #4a90e2;
    border-left-color: #4a90e2;
}

.btn-shop-gold {
    background-image: linear-gradient(180deg, #b8860b 0%, #755a03 100%);
    border-top-color: #d4af37;
    border-right-color: #d4af37;
    border-bottom-color: #d4af37;
    border-left-color: #d4af37;
}

/* 使用不可ボタン統一スタイル */
.btn-command:disabled,
.btn-skill-blue:disabled,
.btn-shop-gold:disabled,
.btn-overcome:disabled,
.btn-command.btn-locked,
.btn-skill-blue.btn-locked,
.btn-shop-gold.btn-locked {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(40%);
}

/* =========================================================
   14. フィードバック ＆ モーダル
========================================================= */
#ans-feedback-layer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    pointer-events: none;
}

.feedback-mark {
    font-size: 8rem;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
}

.correct-mark { color: #00ff00; }
.incorrect-mark { color: #ff0000; }

.modal-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: flex-start;
    z-index: 20000;
    padding-top: 40px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

.modal-window {
    width: 100%;
    max-width: 380px;
    background-color: #0b1a30;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    border-radius: 8px;
    padding-top: 25px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-label {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e3a8a;
    color: var(--rpg-border-gold-light);
    padding-top: 4px;
    padding-right: 15px;
    padding-bottom: 4px;
    padding-left: 15px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    font-size: 0.8rem;
    font-weight: bold;
}

.modal-text {
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 8px;
    text-align: center;
    line-height: 1.5;
    width: 100%;
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 5px;
}

.item-tier-header {
    color: var(--rpg-border-gold);
    font-size: 0.75rem;
    font-weight: bold;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(212, 175, 55, 0.5);
    margin-top: 10px;
    padding-bottom: 3px;
}

/* --- 修正：行商人アイテムのフォント拡大と価格非表示設定 --- */
.btn-item-buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #111827;
    border: 1px solid #374151;
    color: #ffffff;
    padding: 12px 15px; /* 余白を拡大 */
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    min-height: 60px;   /* 高さを確保 */
}

/* アイテム名のフォントを大きく */
.btn-item-buy span[style*="font-weight: bold;"] {
    font-size: 1.0rem !important; 
    margin-bottom: 4px;
}

/* 説明文のフォントも微増 */
.btn-item-buy span[style*="font-size: 0.65rem;"] {
    font-size: 0.75rem !important;
}

/* 価格表示のフォント拡大 */
.item-price-val {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--rpg-border-gold);
}

/* ⚠️ 未解放（ロック）状態のスタイル */
.btn-item-locked {
    opacity: 0.4;
    cursor: not-allowed !important;
    filter: grayscale(1);
}

.btn-item-buy:active {
    background-color: #1f2937;
}

.btn-modal-close {
    margin-top: 8px;
    background-color: #1e3a8a;
    color: var(--rpg-border-gold-light);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--rpg-border-gold);
    border-right-color: var(--rpg-border-gold);
    border-bottom-color: var(--rpg-border-gold);
    border-left-color: var(--rpg-border-gold);
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
}

.save-sync-indicator {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
    font-size: 0.6rem;
    font-family: monospace;
    opacity: 0.7;
    z-index: 50;
}

.sync-dot {
    width: 6px;
    height: 6px;
    background-color: #4ade80;
    border-radius: 50%;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/* =========================================================
   15. 進捗ノード（◇）の意匠
========================================================= */
.progress-node {
    width: 10px;
    height: 10px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    transform: rotate(45deg);
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    box-sizing: border-box;
}

.node-empty {
    background-color: transparent;
    opacity: 0.3;
}

.node-current {
    opacity: 1.0;
    transform: rotate(45deg) scale(1.4);
    box-shadow: 0px 0px 8px currentColor;
    background-color: transparent;
}

.node-filled {
    opacity: 0.8;
    background-color: currentColor; 
}

.node-incorrect {
    background-color: transparent;
    opacity: 0.8;
    border-top-color: var(--rpg-incorrect-mark);
    border-right-color: var(--rpg-incorrect-mark);
    border-bottom-color: var(--rpg-incorrect-mark);
    border-left-color: var(--rpg-incorrect-mark);
}

/* =========================================================
   16. リザルト・追憶・苦手克服モード
========================================================= */
.result-list-item {
    background-color: #0b1525;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    border-radius: 4px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--rpg-border-gold);
    margin-bottom: 10px;
}

.result-list-item.is-incorrect {
    border-left-color: var(--rpg-incorrect-mark);
}

.btn-overcome {
    background-image: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ff4444;
    border-right-color: #ff4444;
    border-bottom-color: #ff4444;
    border-left-color: #ff4444;
    color: #ffffff;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 6px;
    padding-left: 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    width: 100%;
}

.btn-overcome:active {
    transform: translateY(2px);
}

/* =========================================================
   17. iPhone SE / 小画面デバイス専用の微調整
========================================================= */
@media (max-height: 700px) {
    .quest-header-logo-area {
        height: 40px;
    }

    .hero-console-frame {
        padding-top: 5px;
        padding-right: 8px;
        padding-bottom: 5px;
        padding-left: 8px;
        margin-bottom: 5px;
    }

    .hero-portrait-box {
        width: 85px;
        height: 85px;
    }

    .enemy-panel {
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
        margin-bottom: 5px;
    }

    .question-text-area {
        font-size: 0.82rem;
        line-height: 1.4;
        min-height: 100px;
    }

    .btn-option {
        min-height: 45px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 0.8rem;
    }

    .action-area-wrapper {
        padding-bottom: 5px;
    }

    .btn-command {
        height: 44px;
        font-size: 0.7rem;
    }
    
    .action-card-large .card-title {
        font-size: 1.05rem;
    }
    .action-card-large .card-desc {
        font-size: 0.65rem;
    }
    .action-card-small .card-title {
        font-size: 0.8rem;
    }
    .action-card-small .card-desc {
        font-size: 0.5rem;
    }
    .action-card-small .card-note {
        font-size: 0.5rem;
    }
}

/* =========================================================
   18. iPad / タブレット専用：全体大型化スケーリング
========================================================= */
@media (min-width: 768px) {
    .game-outer-wrapper {
        max-width: 700px;
    }

    .quest-header-logo-area {
        height: 70px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .quest-logo-img {
        height: 35px;
    }

    .btn-end-game {
        font-size: 1.0rem;
        padding-top: 8px;
        padding-right: 20px;
        padding-bottom: 8px;
        padding-left: 20px;
        border-radius: 20px;
    }

    .hero-console-frame {
        padding-top: 15px;
        padding-right: 20px;
        padding-bottom: 15px;
        padding-left: 20px;
        margin-bottom: 20px;
    }

    .hero-portrait-box {
        width: 120px;
        height: 120px;
    }

    .hero-name {
        font-size: 1.3rem;
    }

    .lv-label-small {
        font-size: 1.0rem;
    }

    .bp-text {
        font-size: 1.2rem;
    }

    .stat-bar-container {
        height: 16px;
    }

    .stat-label {
        width: 30px;
        font-size: 0.85rem;
    }

    .stat-val-text {
        font-size: 0.75rem;
        line-height: 16px;
    }

    .enemy-panel {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }

    .enemy-name-label {
        font-size: 1.1rem;
    }

    .timer-black-box {
        font-size: 1.5rem;
    }

    .question-text-area {
        font-size: 1.1rem;
        line-height: 1.8;
        min-height: 250px;
        max-height: 500px;
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }

    .integrated-options {
        gap: 15px;
        margin-top: 20px;
    }

    .btn-option {
        font-size: 1.1rem;
        min-height: 60px;
        padding-top: 12px;
        padding-bottom: 12px;
        border-width: 3px;
    }

    .action-area-wrapper {
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .btn-command {
        height: 48px;
        font-size: 0.85rem;
        gap: 8px;
    }

    .cmd-icon {
        font-size: 1.4rem;
    }
    
    .action-card-large .card-title {
        font-size: 1.4rem;
    }
    .action-card-large .card-desc {
        font-size: 0.9rem;
    }
    .action-card-small .card-title {
        font-size: 1.1rem;
    }
    .action-card-small .card-desc {
        font-size: 0.75rem;
    }
    .card-note {
        font-size: 0.7rem;
    }
}

/* ⚠️ 覇王の鑑定：門の選択画面を広げる修正 */
.mode-kantei .hero-console-frame {
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.mode-kantei #problem-content {
    height: auto !important;
}

/* --- 解説スイッチのデザインを確定（VER.8.10） --- */
.explain-toggle-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.65rem;
    color: #aaaaaa;
}
.explain-toggle-indicator {
    width: 36px; height: 18px;
    border-radius: 9px;
    background-color: #444444;
    position: relative;
    transition: 0.3s;
}
.explain-toggle-indicator::after {
    content: ""; position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.3s;
}
.explain-toggle-wrapper.is-on .explain-toggle-indicator {
    background-color: var(--rpg-amber-glow);
}
.explain-toggle-wrapper.is-on .explain-toggle-indicator::after {
    transform: translateX(18px);
}

/* --- 覇王の鑑定：門の選択画面を広げる修正 --- */
.mode-kantei #problem-content, 
.mode-record #problem-content {
    height: auto !important;
    min-height: 120px;
    max-height: none !important;
    overflow-y: visible !important;
    border: 1px solid var(--rpg-border-gold) !important;
}

.mode-record .question-text-area {
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.mode-record .integrated-options {
    display: none;
}

/* フロアクリア画面はmax-heightを外す */
.mode-shiren #problem-content,
.mode-verbal #problem-content {
    max-height: none !important;
    overflow-y: visible !important;
}

#quest-battle-screen.mode-record .logos-rpg-container {
    overflow-y: visible;
    padding-bottom: 20px;
}

/* recordモード：enemy-panelのoverflowを解放して下枠を見えるように */
.mode-record .enemy-panel {
    border-bottom-width: 2px;
    margin-bottom: 0;
    padding-bottom: 15px;
    overflow: visible !important;
}
.mode-record .enemy-header-flex {
    border-bottom-width: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 修行導入画面のチェックボックス調整 */
#skip-intro-check {
    width: 14px;
    height: 14px;
    accent-color: var(--rpg-rd-teal);
    cursor: pointer;
}

/* =========================================================
   19. 旅の追憶：新・精緻分析UI（猪俣氏 監修・完成版）
  
========================================================= */

/* 領域選択：クリスタル・タブ */
.shelf-tab-group {
    display: flex;
    width: 100%;
    gap: 6px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 6px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-sizing: border-box;
}

.shelf-tab {
    flex: 1;
    padding: 8px 2px;
    font-size: 0.75rem;
    font-weight: 900;
    text-align: center;
    color: #999;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.shelf-tab.active.math   { color: #fff; background: rgba(51, 153, 255, 0.25); border-color: #3399ff; box-shadow: 0 0 15px rgba(51, 153, 255, 0.5); }
.shelf-tab.active.verbal { color: #fff; background: rgba(186, 85, 211, 0.25); border-color: #ba55d3; box-shadow: 0 0 15px rgba(186, 85, 211, 0.5); }
.shelf-tab.active.spirit { color: #fff; background: rgba(20, 184, 166, 0.25); border-color: #14b8a6; box-shadow: 0 0 15px rgba(20, 184, 166, 0.5); }

/* モード切替：セグメントスイッチ */
.mode-segment-control {
    display: flex;
    width: 220px;
    margin: 4px auto 8px auto;
    background: #0a0a0a;
    border-radius: 20px;
    border: 1px solid #555;
    padding: 2px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}

.mode-btn {
    flex: 1;
    padding: 8px 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #aaa;
    text-align: center;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s;
}

.mode-btn.active { color: #000; }

.mode-selection-slider {
    position: absolute;
    width: 108px;
    height: 32px;
    background: linear-gradient(180deg, var(--rpg-border-gold-light), var(--rpg-border-gold));
    border-radius: 18px;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    z-index: 1;
}

.mode-segment-control.is-analysis .mode-selection-slider { transform: translateX(108px); }

/* 分析カードとプログレスバー */
.analysis-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

@keyframes blink {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}
/* お試しモード ゆっくり点滅 */
@keyframes ql-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.25; }
    100% { opacity: 1; }
}