/* ==========================================================================
    幕末風雲録：双極の蒼穹 - Rogue Deck-Build -
   スタイルシート: 和モダン × 浮世絵風ダークファンタジー
   ========================================================================== */

/* --- 基本リセット & CSS変数 --- */
:root {
    --color-bg-dark: #0c0e12;
    --color-bg-panel: #161920;
    --color-washi: #f5ede0;
    --color-washi-dim: #d8cdba;
    --color-indigo: #1b2e46;
    --color-indigo-dark: #0f1c2d;
    --color-crimson: #b3261e;
    --color-crimson-glow: #e63946;
    --color-gold: #dfb15b;
    --color-gold-bright: #ffd166;
    --color-gold-dark: #8c6d2d;
    --color-ink: #121316;
    --color-border: #3a3226;

    --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS PMincho", serif;
    --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-gold: 0 0 16px rgba(223, 177, 91, 0.45);
    --header-height: 84px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

html {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}

body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    background-color: var(--color-bg-dark);
    color: var(--color-washi);
    font-family: var(--font-serif);
    background-image: 
        radial-gradient(circle at 50% 30%, rgba(27, 46, 70, 0.35) 0%, rgba(12, 14, 18, 0.95) 75%),
        linear-gradient(rgba(12, 14, 18, 0.8), rgba(12, 14, 18, 0.8));
}

/* --- Canvas オーバーレイ --- */
#fx-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* --- 上部常設ヘッダー（青色の帯） --- */
.main-header {
    flex-shrink: 0;
    width: 100%;
    height: var(--header-height, 84px);
    background: linear-gradient(180deg, rgba(16, 28, 48, 0.96) 0%, rgba(10, 18, 32, 0.92) 100%);
    border-bottom: 2px solid #204068;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    z-index: 1000;
    box-sizing: border-box;
    touch-action: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.main-header.visible {
    display: flex;
}

/* 初期画面でのヘッダー表示スタイル（青色の帯内に音声ボタンのみ表示） */
.main-header.title-mode {
    height: 60px;
    justify-content: flex-end;
}
.main-header.title-mode .header-left,
.main-header.title-mode .header-center,
.main-header.title-mode .header-right-meta,
.main-header.title-mode #header-relic-wrapper,
.main-header.title-mode #btn-view-deck {
    display: none !important;
}

/* 初期画面は画面幅に関わらずプルダウンメニューにせず、音声ボタンを直接横並び表示 */
.main-header.title-mode .header-dropdown-wrapper {
    display: none !important;
}
.main-header.title-mode .header-desktop-actions {
    display: flex !important;
}
.main-header.title-mode .audio-controls-vertical {
    flex-direction: row;
    gap: 8px;
}
.main-header.title-mode .btn-audio-stacked {
    height: 36px;
    padding: 6px 14px;
    font-size: 13px;
    min-width: auto;
}

/* ヘッダー内の全テキスト折り返し防止 */
.main-header,
.header-left,
.header-center,
.header-right,
.header-stat-group,
.header-stat-row,
.imperial-header,
.opinion-header {
    white-space: nowrap;
}

/* ヘッダー左側：陣営バッジ ＆ 縦2段ステータス（体力 / 防・金） */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.header-stat-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.header-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}


/* ヘッダー右側：世論＆遺物（縦スタック） ＆ アクションボタングループ */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.header-right-meta {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 通常（PC）表示アクションボタン群 */
.header-desktop-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-deck-compact {
    height: 62px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    border-radius: 4px;
    min-width: 60px;
}
.audio-controls-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.btn-audio-stacked {
    height: 29px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1;
    border-radius: 4px;
    min-width: 82px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 狭小画面用プルダウンメニュー */
.header-dropdown-wrapper {
    position: relative;
    display: none; /* デフォルト（デスクトップ）では非表示 */
}

.btn-header-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-weight: bold;
}
.btn-header-menu .menu-icon {
    font-size: 15px;
    line-height: 1;
}

.header-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 175px;
    background: linear-gradient(180deg, #182030 0%, #0d121c 100%);
    border: 2px solid var(--color-gold);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(223, 177, 91, 0.25);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.header-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    background: rgba(30, 36, 48, 0.6);
    border: 1px solid rgba(223, 177, 91, 0.3);
    color: var(--color-washi);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.dropdown-item:hover {
    background: rgba(50, 60, 80, 0.9);
    border-color: var(--color-gold-bright);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(223, 177, 91, 0.4);
    transform: translateX(2px);
}
.dropdown-item.muted {
    opacity: 0.6;
    border-color: #4a3e30;
    background: rgba(20, 24, 32, 0.5);
    color: #8c8273;
}
.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 177, 91, 0.4), transparent);
    margin: 2px 4px;
}

/* --- ヘッダー・所持遺物バッジ＆プルダウンメニュー --- */
.header-relic-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-relic-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(18, 22, 32, 0.85);
    border: 1px solid rgba(223, 177, 91, 0.45);
    border-radius: 4px;
    color: #e0d8c3;
    font-size: 13px;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.btn-relic-badge:hover,
.btn-relic-badge.active {
    background: rgba(36, 44, 62, 0.95);
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(223, 177, 91, 0.35);
    transform: translateY(-1px);
}

.relic-badge-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 0 2px rgba(255, 120, 40, 0.6));
}

.relic-badge-count {
    font-weight: bold;
    color: var(--color-gold);
    font-size: 13px;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
}

/* プルダウンメニュー本体 */
.header-relic-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 20px));
    max-height: min(480px, calc(100dvh - var(--header-height, 84px) - 20px));
    background: rgba(14, 18, 26, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-gold);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 12px rgba(223, 177, 91, 0.2);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y !important; /* 親要素のtouch-actionを確実に上書きしタッチスクロールを許可 */
}

.header-relic-dropdown.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.relic-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(223, 177, 91, 0.12);
    border-bottom: 1px solid rgba(223, 177, 91, 0.25);
    font-family: var(--font-serif);
    font-size: 12px;
    color: var(--color-gold);
    font-weight: bold;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.relic-dropdown-count-badge {
    font-size: 11px;
    color: #e0d8c3;
    background: rgba(0, 0, 0, 0.45);
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid rgba(223, 177, 91, 0.3);
}

.relic-dropdown-list {
    padding: 6px 8px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0; /* WebKit/Safariでflex子要素がスクロールしないバグを解消 */
    flex: 1 1 auto;
    max-height: min(420px, calc(100dvh - var(--header-height, 84px) - 68px));
    scrollbar-width: thin;
    scrollbar-color: rgba(223, 177, 91, 0.5) rgba(10, 14, 20, 0.3);
}

.relic-dropdown-list::-webkit-scrollbar {
    width: 6px;
}
.relic-dropdown-list::-webkit-scrollbar-track {
    background: rgba(10, 14, 20, 0.3);
}
.relic-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(223, 177, 91, 0.45);
    border-radius: 3px;
}
.relic-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

.relic-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(24, 30, 44, 0.65);
    border: 1px solid rgba(223, 177, 91, 0.2);
    border-radius: 4px;
    transition: background 0.15s ease, border-color 0.15s ease;
    touch-action: pan-y !important;
}

.relic-dropdown-item:hover {
    background: rgba(35, 45, 65, 0.85);
    border-color: rgba(223, 177, 91, 0.5);
}

.relic-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.relic-item-info {
    flex: 1;
    min-width: 0;
}

.relic-item-name {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: bold;
    color: #dfb15b;
    margin-bottom: 2px;
    white-space: normal;
}

.relic-item-desc {
    font-size: 11px;
    line-height: 1.4;
    color: #c8ced8;
    white-space: normal;
}

.relic-empty-message {
    padding: 16px 10px;
    text-align: center;
    font-size: 12px;
    color: #7d8494;
    font-family: var(--font-serif);
}



.header-center {
    flex: 1;
    max-width: 480px;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

/* 陣営バッジ */
.faction-badge {
    font-size: 14px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.4);
}
.faction-badge.tobaku {
    color: #ff6b6b;
    border-color: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}
.faction-badge.sabaku {
    color: #4dabf7;
    border-color: #4dabf7;
    box-shadow: 0 0 10px rgba(77, 171, 247, 0.3);
}

.badge-full {
    display: inline;
}
.badge-short {
    display: none;
}
.stat-label-full {
    display: inline;
}
.stat-label-short {
    display: none;
}

/* ヘッダー体力バー */
.header-stat-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.stat-label {
    color: var(--color-gold);
}
.header-bar {
    width: 95px;
    height: 10px;
    background: #252830;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #454955;
}
.hp-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #b3261e, #e63946);
    transition: width 0.3s ease;
}
.hp-bar-fill.hp-damage-flash {
    animation: hp-damage-flash 0.42s ease-out;
}
@keyframes hp-damage-flash {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(255, 60, 40, 0);
    }
    25% {
        filter: brightness(2.2);
        box-shadow: 0 0 14px rgba(255, 60, 40, 0.95);
    }
    55% {
        filter: brightness(1.35);
        box-shadow: 0 0 8px rgba(255, 60, 40, 0.65);
    }
}
.stat-badge-small {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
}
.stat-badge-small.def {
    background: var(--color-indigo);
    border: 1px solid #386799;
    color: #a8d5ff;
}
.stat-gold {
    color: var(--color-gold-bright);
    font-weight: bold;
}

/* 列強介入メーター */
.imperial-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #4a3e2c;
    container-type: inline-size;
}
.imperial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 2px;
    width: 100%;
    white-space: nowrap;
}
.imperial-title {
    color: #f77f00;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.imperial-title-full {
    display: inline;
}
.imperial-title-short {
    display: none;
}
.imperial-percent {
    font-family: var(--font-sans);
    font-weight: bold;
    color: #ffd166;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 6px;
}

/* メーター枠幅が320pxを下回る時は「列強介入メーター（植民地化リスク）」を省略して「列強介入」を表示 */
@container (max-width: 320px) {
    .imperial-title-full {
        display: none !important;
    }
    .imperial-title-short {
        display: inline !important;
    }
}

.imperial-container.compact .imperial-title-full {
    display: none !important;
}
.imperial-container.compact .imperial-title-short {
    display: inline !important;
}

.danger-pulse {
    color: #ff3333 !important;
    animation: text-pulse 0.8s infinite alternate;
}
@keyframes text-pulse {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.08); }
}

.imperial-bar-bg {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #333;
}
.imperial-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-gold);
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* 世論天秤メーター（天下の大勢） */
.opinion-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #4a3e2c;
    margin-top: 0;
    position: relative;
    container-type: inline-size;
}
.opinion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 2px;
    width: 100%;
}
.opinion-side-label {
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
}
.opinion-side-label.sabaku {
    color: #63b3ed;
}
.opinion-side-label.tobaku {
    color: #fc8181;
}
.opinion-phase-text {
    font-family: var(--font-sans);
    font-weight: bold;
    font-size: 11px;
    color: #dfb15b;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    transition: color 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

/* メーター枠幅が270pxを下回る時は「佐幕」「討幕」を消して中央テキストのみを中央表示 */
@container (max-width: 270px) {
    .opinion-side-label {
        display: none !important;
    }
    .opinion-header {
        justify-content: center;
    }
    .opinion-phase-text {
        width: 100%;
        text-align: center;
    }
}

.opinion-container.compact .opinion-side-label {
    display: none !important;
}
.opinion-container.compact .opinion-header {
    justify-content: center;
}
.opinion-container.compact .opinion-phase-text {
    width: 100%;
    text-align: center;
}
.opinion-bar-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #1a365d 0%, #2c5282 25%, #744210 45%, #d69e2e 50%, #744210 55%, #742a2a 75%, #9b2c2c 100%);
    border-radius: 4px;
    position: relative;
    border: 1px solid #333;
    overflow: visible;
}
.opinion-center-marker {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
    opacity: 0.7;
    z-index: 1;
}
.opinion-pointer {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: #ffd700;
    border: 2px solid #222;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.9);
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
.opinion-pointer.danger-pulse {
    background: #ff3333;
    box-shadow: 0 0 10px #ff3333;
    animation: opinion-alert-pulse 0.6s infinite alternate;
}
@keyframes opinion-alert-pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.35); }
}

/* 選択肢ボタン内の世論変動バッジ */
.badge-opinion {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
/* 自軍有利な世論変動（青色） */
.badge-opinion-favorable,
.badge-opinion-sabaku {
    background: rgba(43, 108, 176, 0.25);
    border: 1px solid #3182ce;
    color: #bee3f8;
}

/* 自軍不利・逆風の世論変動（赤色・警告パルス） */
.badge-opinion-adverse,
.badge-opinion-warning,
.badge-opinion-tobaku {
    background: rgba(229, 62, 62, 0.35);
    border: 1px solid #ff3333;
    color: #ffcccc;
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.4);
    animation: opinionPulse 1.8s infinite;
}
.badge-opinion-neutral {
    background: rgba(214, 158, 46, 0.2);
    border: 1px solid #d69e2e;
    color: #fefcbf;
}
@keyframes opinionPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 歴史事件重要度バッジ */
.badge-importance {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}
.badge-imp-3 {
    background: linear-gradient(135deg, rgba(229, 62, 62, 0.45), rgba(214, 158, 46, 0.45));
    border: 1px solid #e53e3e;
    color: #ffdddd;
    box-shadow: 0 0 10px rgba(229, 62, 62, 0.5);
    animation: opinionPulse 1.6s infinite;
}
.badge-imp-2 {
    background: rgba(221, 107, 32, 0.35);
    border: 1px solid #dd6b20;
    color: #feebc8;
}
.badge-imp-1 {
    background: rgba(74, 85, 104, 0.35);
    border: 1px solid #718096;
    color: #e2e8f0;
}

/* 世論フェーズ別スタイル */
.opinion-phase-bakui {
    border-color: #2b6cb0 !important;
    color: #bee3f8 !important;
}
.opinion-phase-sabaku {
    border-color: #319795 !important;
    color: #b2f5ea !important;
}
.opinion-phase-neutral {
    border-color: #d69e2e !important;
    color: #fefcbf !important;
}
.opinion-phase-tobaku {
    border-color: #dd6b20 !important;
    color: #feebc8 !important;
}
.opinion-phase-kangun {
    border-color: #e53e3e !important;
    color: #fed7d7 !important;
}

/* 世論バッジ */
.trend-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #666;
}
.trend-badge.trend-red {
    border-color: #ff4d4d;
    color: #ffb3b3;
}
.trend-badge.trend-blue {
    border-color: #4da6ff;
    color: #b3d9ff;
}
.trend-badge.trend-gold {
    border-color: #dfb15b;
    color: #ffeaad;
}

/* 和風木製ボタン */
.btn-wood {
    background: linear-gradient(180deg, #36281e 0%, #201711 100%);
    color: var(--color-washi);
    border: 1px solid var(--color-gold);
    padding: 6px 14px;
    font-family: var(--font-serif);
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(223, 177, 91, 0.3);
}
.btn-wood:hover {
    background: linear-gradient(180deg, #4d392b 0%, #2d2118 100%);
    border-color: var(--color-gold-bright);
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}
.btn-wood:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-wood.large {
    font-size: 16px;
    padding: 12px 28px;
}
.btn-wood.muted {
    opacity: 0.6;
    border-color: #554433;
    background: linear-gradient(180deg, #1c1815 0%, #110e0b 100%);
    color: #8c8273;
    box-shadow: none;
}
.btn-wood.muted:hover {
    opacity: 0.85;
    border-color: #8c6d2d;
    background: linear-gradient(180deg, #2b221a 0%, #191410 100%);
    color: #cfc6b8;
}

/* --- 画面コンテナ --- */
.game-container {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    padding-top: 0;
    overflow: hidden;
}

.game-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-sizing: border-box;

    /* スクロールバー装飾（参考サイト準拠） */
    scrollbar-width: thin;
    scrollbar-color: #5a4b36 rgba(10, 14, 20, 0.4);
}

.game-screen::-webkit-scrollbar {
    width: 8px;
}
.game-screen::-webkit-scrollbar-track {
    background: rgba(10, 14, 20, 0.4);
}
.game-screen::-webkit-scrollbar-thumb {
    background: #5a4b36;
    border-radius: 4px;
}
.game-screen::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-dark);
}

/* 非アクティブな画面は確実に非表示＆前面遮断防止 */
.game-screen:not(.active) {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* アクティブな画面のみ表示＆操作有効化 */
.game-screen.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================
   1. タイトル＆陣営選択画面
   ========================================== */
#screen-title {
    background-image: linear-gradient(rgba(10, 11, 14, 0.84), rgba(10, 11, 14, 0.95)), url('../img/nippon.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
}

.title-wrapper {
    position: relative;
    margin: auto;
    max-width: 880px;
    width: 90%;
    padding: 24px 32px;
    background: rgba(14, 16, 21, 0.85);
    border: 2px solid var(--color-border);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(223, 177, 91, 0.1);
    border-radius: 8px;
}

.top-link {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 12px;
}
.top-link a {
    color: #8c8f99;
    text-decoration: none;
    transition: color 0.2s ease;
}
.top-link a:hover {
    color: var(--color-gold);
}

.title-crest-top {
    color: var(--color-gold);
    letter-spacing: 6px;
    font-size: 15px;
    margin-bottom: 8px;
}

.main-title {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--color-washi);
    text-shadow: 0 0 20px rgba(223, 177, 91, 0.5), 0 4px 10px #000;
    margin-bottom: 2px;
}
.title-sub {
    font-size: 26px;
    display: block;
    color: #dfb15b;
    letter-spacing: 12px;
    margin-top: 2px;
}

.title-genre {
    color: #8c8f99;
    letter-spacing: 4px;
    font-size: 13px;
    margin-bottom: 10px;
    font-family: var(--font-sans);
}

.title-flavor {
    font-size: 14px;
    color: #b0a89b;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* 中断セーブデータ再開ボックス */
.continue-game-box {
    margin: 0 auto 20px auto;
    max-width: 680px;
    width: 100%;
}
.continue-game-box.hidden {
    display: none !important;
}

.continue-card {
    background: linear-gradient(135deg, rgba(28, 34, 48, 0.95) 0%, rgba(16, 20, 28, 0.98) 100%);
    border: 2px solid var(--color-gold);
    border-radius: 8px;
    padding: 14px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(223, 177, 91, 0.25);
    position: relative;
    overflow: hidden;
}
.continue-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold-bright), transparent);
}

.continue-badge {
    font-size: 12px;
    color: var(--color-gold);
    letter-spacing: 3px;
    margin-bottom: 8px;
    text-align: center;
    font-family: var(--font-serif);
}

.continue-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.continue-faction-icon {
    font-size: 32px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
}

.continue-details {
    flex: 1;
    text-align: left;
}

.continue-faction-name {
    font-size: 18px;
    font-weight: bold;
    color: var(--color-washi);
    margin-bottom: 4px;
    font-family: var(--font-serif);
    letter-spacing: 1px;
}

.continue-stats {
    font-size: 13px;
    color: #a8a299;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.continue-divider-dot {
    color: #555046;
}

.btn-continue {
    background: linear-gradient(180deg, #d4a044 0%, #a87928 100%);
    color: #101217;
    border: 1px solid #ffe194;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: bold;
    font-family: var(--font-serif);
    letter-spacing: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(223, 177, 91, 0.4);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-continue:hover {
    background: linear-gradient(180deg, #f0be5e 0%, #c49132 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 20px rgba(223, 177, 91, 0.6);
}
.btn-continue:active {
    transform: translateY(1px) scale(0.98);
}
.btn-continue-icon {
    font-size: 16px;
}

.continue-divider {
    display: flex;
    align-items: center;
    margin: 18px 0 10px 0;
    color: #7a7366;
    font-size: 12px;
    letter-spacing: 2px;
    font-family: var(--font-serif);
}
.continue-divider::before,
.continue-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 177, 91, 0.25), transparent);
}
.continue-divider span {
    padding: 0 14px;
}

@media (max-width: 600px) {
    .continue-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .continue-details {
        text-align: center;
    }
    .continue-stats {
        justify-content: center;
    }
    .btn-continue {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
}

.select-heading {
    font-size: 18px;
    color: var(--color-gold);
    margin-bottom: 14px;
    letter-spacing: 4px;
}

.faction-cards-grid {
    display: flex;
    gap: 22px;
    justify-content: center;
}

.faction-card {
    flex: 1;
    background: linear-gradient(180deg, #181d26 0%, #101217 100%);
    border: 2px solid #333d4d;
    border-radius: 8px;
    padding: 18px 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.faction-card:hover {
    transform: translateY(-4px);
}

.tobaku-card:hover {
    border-color: #ff5252;
    box-shadow: 0 0 25px rgba(255, 82, 82, 0.35);
}
.sabaku-card:hover {
    border-color: #448aff;
    box-shadow: 0 0 25px rgba(68, 138, 255, 0.35);
}

.faction-crest {
    font-size: 26px;
    margin-bottom: 4px;
}

.faction-name {
    font-size: 19px;
    margin-bottom: 4px;
    letter-spacing: 2px;
}
.tobaku-card .faction-name { color: #ff6b6b; }
.sabaku-card .faction-name { color: #58a6ff; }

.faction-leader {
    font-size: 12px;
    color: #a8a299;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #3a3226;
}

.faction-traits {
    list-style: none;
    font-size: 12px;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 14px;
}

.btn-faction {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 12px;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}
.select-tobaku {
    background: linear-gradient(180deg, #b3261e 0%, #6e110b 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(179, 38, 30, 0.5);
}
.select-tobaku:hover {
    background: linear-gradient(180deg, #d32f2f 0%, #85140d 100%);
    box-shadow: 0 0 20px rgba(255, 82, 82, 0.7);
}

.select-sabaku {
    background: linear-gradient(180deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.5);
}
.select-sabaku:hover {
    background: linear-gradient(180deg, #2196f3 0%, #1565c0 100%);
    box-shadow: 0 0 20px rgba(68, 138, 255, 0.7);
}

/* 自動再生保留時の案内バッジ */
.bgm-autoplay-hint {
    margin: 20px auto 0 auto;
    background: rgba(18, 24, 36, 0.92);
    border: 1px solid var(--color-gold);
    color: #ffd166;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-family: var(--font-serif);
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(223, 177, 91, 0.35);
    cursor: pointer;
    animation: hint-float 2.5s infinite ease-in-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
    user-select: none;
}
.bgm-autoplay-hint:hover {
    background: rgba(28, 36, 54, 0.98);
    box-shadow: 0 0 18px rgba(223, 177, 91, 0.6);
}
.bgm-autoplay-hint.hidden {
    display: none !important;
}
.hint-pulse {
    font-size: 15px;
    animation: note-bounce 1s infinite alternate;
}
@keyframes hint-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes note-bounce {
    from { transform: scale(0.9); }
    to { transform: scale(1.25); }
}

/* ==========================================
   2. マップ画面
   ========================================== */
#screen-map {
    background-image: linear-gradient(rgba(10, 11, 14, 0.84), rgba(10, 11, 14, 0.95)), url('../img/nippon.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
}

.map-view-wrapper {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

.map-header-bar {
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(12, 14, 18, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 24px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.map-title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.map-act-title {
    font-size: 24px;
    color: var(--color-gold);
    letter-spacing: 2px;
}
.map-floor-progress {
    font-size: 14px;
    color: var(--color-washi-dim);
    letter-spacing: 1px;
    font-family: var(--font-serif);
}
.map-legend {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #a8a299;
}

.map-scroll-area {
    width: 100%;
    position: relative;
    padding: 24px 16px 60px 16px;
    box-sizing: border-box;
    display: block;
}

.map-grid-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

.map-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.map-nodes-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse; /* 下がFloor 0、上がBoss */
    gap: 58px;
    width: 100%;
    padding: 20px 0 36px 0;
}

.map-floor-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

/* ==========================================
   時代区分（Period）の範囲区切り線
   ========================================== */
.map-period-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    pointer-events: none;
    z-index: 2;
    margin: -14px 0;
}

.map-period-divider::before,
.map-period-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(223, 177, 91, 0.45) 40%, rgba(223, 177, 91, 0.75) 100%);
}

.map-period-divider::after {
    background: linear-gradient(90deg, rgba(223, 177, 91, 0.75) 0%, rgba(223, 177, 91, 0.45) 60%, transparent 100%);
}

.map-period-divider-label {
    padding: 3px 16px;
    font-size: 11.5px;
    font-family: var(--font-serif);
    color: var(--color-gold);
    background: rgba(14, 17, 24, 0.94);
    border: 1px solid rgba(223, 177, 91, 0.45);
    border-radius: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
    margin: 0 12px;
}

/* 開始線・終了線の微細なデザイン分け */
.map-period-divider-start .map-period-divider-label {
    border-bottom: 2px solid rgba(223, 177, 91, 0.7);
}

.map-period-divider-end .map-period-divider-label {
    border-top: 2px solid rgba(223, 177, 91, 0.7);
}

/* 現在進行中の時代区分（アクティブ） */
.map-period-divider.active-period .map-period-divider-label {
    color: #fff9e6;
    border-color: var(--color-gold-bright);
    background: linear-gradient(135deg, rgba(54, 42, 20, 0.96), rgba(22, 18, 14, 0.96));
    box-shadow: 0 0 14px rgba(223, 177, 91, 0.6), inset 0 0 8px rgba(223, 177, 91, 0.25);
    font-weight: bold;
}

.map-period-divider.active-period::before {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.6) 40%, rgba(255, 215, 0, 0.95) 100%);
}

.map-period-divider.active-period::after {
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 215, 0, 0.6) 60%, transparent 100%);
}

.map-node {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #191c24;
    border: 2px solid #3b352a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    opacity: 0.5;
    position: relative;
    z-index: 3;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(223, 177, 91, 0.3);
}

.map-node.selectable {
    opacity: 1;
    cursor: pointer;
    border-color: var(--color-gold-bright);
    box-shadow: var(--shadow-gold);
}

.map-node.selectable::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 2px solid var(--color-gold-bright);
    opacity: 0;
    animation: ring-pulse 1.6s infinite ease-out;
    pointer-events: none;
}

@keyframes ring-pulse {
    0% { transform: scale(0.92); opacity: 0.85; }
    100% { transform: scale(1.28); opacity: 0; }
}

.map-node.completed {
    opacity: 0.35;
    filter: grayscale(80%);
    border-style: dashed;
}
.map-node.current {
    border-color: #4da6ff;
    box-shadow: 0 0 18px rgba(77, 166, 255, 0.8);
    opacity: 1;
}

.node-icon {
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.node-title {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    max-width: 104px;
    font-size: 11px;
    line-height: 1.25;
    background: rgba(14, 17, 24, 0.92);
    color: var(--color-washi-dim);
    border: 1px solid rgba(223, 177, 91, 0.35);
    border-radius: 4px;
    padding: 2px 4px;
    margin-top: 0;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: break-word;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    z-index: 4;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.map-node.selectable .node-title {
    color: var(--color-washi);
    border-color: rgba(223, 177, 91, 0.85);
    box-shadow: 0 2px 8px rgba(223, 177, 91, 0.35);
}

.map-node.current .node-title {
    color: #ffffff;
    border-color: #4da6ff;
    box-shadow: 0 2px 8px rgba(77, 166, 255, 0.45);
}

.map-node.completed .node-title {
    opacity: 0.5;
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow: none;
}

.node-title .node-period {
    display: block;
    font-size: 9.5px;
    font-weight: bold;
    color: var(--color-gold-bright);
    letter-spacing: 0.3px;
    margin-bottom: 1px;
    line-height: 1.15;
}

.node-title .node-name {
    display: block;
    line-height: 1.25;
}

/* ノード種別ごとの固有アクセント */
.map-node.treasure {
    background: radial-gradient(circle, #2d2616 0%, #15130f 100%);
    border-color: #d4a044;
}
.map-node.treasure.selectable {
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}
.map-node.elite {
    background: radial-gradient(circle, #2d1616 0%, #170d0d 100%);
    border-color: #9e2a2b;
}
.map-node.elite.selectable {
    border-color: #e63946;
    box-shadow: 0 0 16px rgba(230, 57, 70, 0.6);
}
.map-node.boss {
    background: radial-gradient(circle, #2d162b 0%, #170d16 100%);
    border-color: #9c27b0;
    width: 82px;
    height: 82px;
}
.map-node.boss.selectable {
    border-color: #ba68c8;
    box-shadow: 0 0 20px rgba(186, 104, 200, 0.7);
}

/* 歴史の関門（チョークポイント）ノード & 歴史の霧 */
.map-node.chokepoint-node {
    background: radial-gradient(circle, #3d1c1c 0%, #1c0e0e 100%);
    border: 2px solid #e53e3e;
    box-shadow: 0 0 15px rgba(229, 62, 62, 0.4);
}
.map-node.chokepoint-node.selectable {
    border-color: #ff4d4d;
    box-shadow: 0 0 22px rgba(255, 77, 77, 0.8), 0 0 8px #ffd700;
}
.node-fog {
    color: #a0aec0 !important;
    font-style: italic;
    opacity: 0.85;
}
.node-fog-choke {
    color: #f6ad55 !important;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(237, 137, 54, 0.6);
}

/* 武器庫（宝箱）モーダル */
.treasure-box {
    max-width: 640px;
    background: linear-gradient(135deg, rgba(24, 20, 16, 0.96) 0%, rgba(14, 12, 10, 0.98) 100%);
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 30px rgba(223, 177, 91, 0.3), 0 8px 32px rgba(0, 0, 0, 0.85);
}
.treasure-content {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.treasure-flavor {
    font-size: 14px;
    color: var(--color-washi-dim);
    line-height: 1.6;
    text-align: center;
    max-width: 520px;
    margin: 0;
}
.treasure-rewards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.treasure-reward-item {
    background: rgba(30, 26, 20, 0.85);
    border: 1px solid var(--color-gold);
    border-radius: 8px;
    padding: 14px 20px;
    width: 90%;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.4s ease;
}
.treasure-reward-icon {
    font-size: 36px;
    line-height: 1;
}
.treasure-reward-info {
    flex: 1;
    text-align: left;
}
.treasure-reward-title {
    font-size: 17px;
    font-weight: bold;
    color: var(--color-gold-bright);
    margin-bottom: 4px;
    font-family: var(--font-serif);
}
.treasure-reward-desc {
    font-size: 13px;
    color: var(--color-washi);
    line-height: 1.4;
}
.treasure-action-box {
    margin-top: 10px;
}

/* ==========================================
   3. 戦闘画面
   ========================================== */
#screen-battle {
    --battle-danger: 0;
    --battle-hit-flash: 0;
    background-image:
        linear-gradient(rgba(255, 30, 20, var(--battle-hit-flash)), rgba(80, 0, 0, var(--battle-hit-flash))),
        linear-gradient(rgba(150, 0, 0, var(--battle-danger)), rgba(70, 0, 0, var(--battle-danger))),
        linear-gradient(rgba(10, 11, 14, 0.70), rgba(10, 11, 14, 0.86)),
        url('../img/tatakai.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
}
#screen-battle.battle-damage-impact {
    animation: battle-damage-impact 0.52s ease-out;
}
@keyframes battle-damage-impact {
    0%, 100% {
        transform: translate(0, 0);
        --battle-hit-flash: 0;
    }
    12% {
        transform: translate(-7px, 2px);
        --battle-hit-flash: 0.32;
    }
    24% {
        transform: translate(8px, -2px);
        --battle-hit-flash: 0.2;
    }
    38% {
        transform: translate(-5px, 1px);
        --battle-hit-flash: 0.12;
    }
    55% {
        transform: translate(3px, 0);
        --battle-hit-flash: 0.06;
    }
}

.battle-arena {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 24px 20px 24px;
    box-sizing: border-box;
}

/* 敵エリア */
.battle-upper-arena {
    min-height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 12px 16px;
}

/* 敵デッキ統計（山札・捨札） - 左上に配置 */
.enemy-deck-stats-box {
    position: absolute;
    left: 24px;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(18, 20, 26, 0.85);
    border: 1px solid #4a3d24;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #a8a299;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    min-width: 110px;
    z-index: 10;
}
.enemy-deck-pile, .enemy-discard-pile {
    display: flex;
    align-items: center;
    gap: 6px;
}
.enemy-deck-pile strong {
    color: #ffd166;
}
.enemy-discard-pile strong {
    color: #c8bfb0;
}
.pile-icon {
    font-size: 16px;
}

.battle-enemy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.enemy-intent-bubble {
    background: rgba(18, 20, 26, 0.95);
    border: 1px solid var(--color-gold);
    border-radius: 20px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}
.intent-icon { font-size: 18px; }
.intent-desc { color: #ffd166; font-weight: bold; }

.enemy-avatar-frame {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, #2d3345 0%, #12141a 100%);
    border: 3px solid #8c6d2d;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
    position: relative;
}

.enemy-silhouette {
    font-size: 28px;
    color: var(--color-washi);
    letter-spacing: 2px;
}

.enemy-info-panel {
    margin-top: 10px;
    text-align: center;
    width: 220px;
}

.enemy-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-washi);
    margin-bottom: 4px;
    white-space: nowrap;
}

.enemy-hp-bar-bg {
    width: 100%;
    height: 12px;
    background: #1e222a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #454955;
    margin-bottom: 4px;
}
.enemy-hp-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #c52828 0%, #ff4d4d 100%);
    transition: width 0.3s ease;
}

.enemy-shield-bar-bg {
    width: 100%;
    height: 8px;
    background: #141b24;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.35);
    margin-bottom: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
.enemy-shield-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.enemy-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #a8a299;
}
.enemy-stats-row strong#battle-enemy-shield-text {
    color: #a8d5ff;
}

.enemy-status-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}
.status-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
}
.status-tag.weak { background: #5c3d2e; color: #ffc299; }
.status-tag.bleed { background: #5c1d1d; color: #ff9999; }
.status-tag.buff { background: #4a401d; color: #ffeb99; }

/* 敵伏せ手札エリア */
.enemy-hand-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    width: 100%;
}
.enemy-hand-title {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-gold);
    font-family: var(--font-serif);
    text-shadow: 0 0 6px rgba(223, 177, 91, 0.4);
}
.battle-enemy-hand {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* 敵伏せカード（裏面デザイン：漆黒×金箔和風紋様） */
.enemy-card-back {
    width: 68px;
    height: 98px;
    background: linear-gradient(145deg, #181c26 0%, #0d0f14 100%);
    border: 2px solid #8c6d2d;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.enemy-card-back::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px dashed rgba(223, 177, 91, 0.45);
    border-radius: 4px;
    pointer-events: none;
}
.enemy-card-crest {
    font-size: 24px;
    color: #dfb15b;
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(223, 177, 91, 0.6);
    user-select: none;
    animation: crest-float 2.5s infinite ease-in-out;
}
@keyframes crest-float {
    0%, 100% { transform: scale(0.95); opacity: 0.75; }
    50% { transform: scale(1.05); opacity: 0.95; }
}

/* 次手予告オーラ（敵伏せ手札の気配） */
.enemy-card-back.intent-attack {
    border-color: #e63946;
    box-shadow: 0 0 14px rgba(230, 57, 70, 0.8), inset 0 0 8px rgba(230, 57, 70, 0.4);
    animation: aura-attack 1.6s infinite alternate ease-in-out;
}
.enemy-card-back.intent-defend {
    border-color: #4da6ff;
    box-shadow: 0 0 14px rgba(77, 166, 255, 0.8), inset 0 0 8px rgba(77, 166, 255, 0.4);
    animation: aura-defend 1.6s infinite alternate ease-in-out;
}
.enemy-card-back.intent-buff {
    border-color: #ffd700;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.8), inset 0 0 8px rgba(255, 215, 0, 0.4);
    animation: aura-buff 1.6s infinite alternate ease-in-out;
}
.enemy-card-back.intent-curse {
    border-color: #ba55d3;
    box-shadow: 0 0 14px rgba(186, 85, 211, 0.8), inset 0 0 8px rgba(186, 85, 211, 0.4);
    animation: aura-curse 1.6s infinite alternate ease-in-out;
}

@keyframes aura-attack {
    from { transform: translateY(0); box-shadow: 0 0 8px rgba(230, 57, 70, 0.6); }
    to { transform: translateY(-4px); box-shadow: 0 0 18px rgba(255, 60, 60, 0.95); }
}
@keyframes aura-defend {
    from { transform: translateY(0); box-shadow: 0 0 8px rgba(77, 166, 255, 0.6); }
    to { transform: translateY(-4px); box-shadow: 0 0 18px rgba(77, 166, 255, 0.95); }
}
@keyframes aura-buff {
    from { transform: translateY(0); box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
    to { transform: translateY(-4px); box-shadow: 0 0 18px rgba(255, 215, 0, 0.95); }
}
@keyframes aura-curse {
    from { transform: translateY(0); box-shadow: 0 0 8px rgba(186, 85, 211, 0.6); }
    to { transform: translateY(-4px); box-shadow: 0 0 18px rgba(186, 85, 211, 0.95); }
}

/* 敵カードプレイ演出用ゾーン */
.battle-enemy-play-zone {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 120;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 敵が繰り出した表向きカード（ドラマチック公開） */
.enemy-revealed-card {
    width: 170px;
    height: 245px;
    background: linear-gradient(180deg, #1c1514 0%, #2e1d1b 100%);
    color: #f7eedf;
    border-radius: 8px;
    border: 3px solid #dfb15b;
    box-shadow: 0 0 35px rgba(223, 177, 91, 0.8), 0 16px 36px rgba(0, 0, 0, 0.9);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: enemy-card-reveal 1.4s ease-out forwards;
    backface-visibility: hidden;
}

.enemy-revealed-card.attack {
    border-color: #e63946;
    box-shadow: 0 0 35px rgba(230, 57, 70, 0.85), 0 16px 36px rgba(0, 0, 0, 0.9);
}
.enemy-revealed-card.defend {
    border-color: #4da6ff;
    box-shadow: 0 0 35px rgba(77, 166, 255, 0.85), 0 16px 36px rgba(0, 0, 0, 0.9);
}
.enemy-revealed-card.buff {
    border-color: #ffd700;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.85), 0 16px 36px rgba(0, 0, 0, 0.9);
}
.enemy-revealed-card.curse {
    border-color: #ba55d3;
    box-shadow: 0 0 35px rgba(186, 85, 211, 0.85), 0 16px 36px rgba(0, 0, 0, 0.9);
}

.enemy-card-banner {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(223, 177, 91, 0.5);
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.enemy-card-type-tag {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
}
.enemy-card-type-tag.attack { background: #801d1d; color: #ffb3b3; }
.enemy-card-type-tag.defend { background: #1d3d66; color: #b3d9ff; }
.enemy-card-type-tag.buff { background: #66521d; color: #ffe6b3; }
.enemy-card-type-tag.curse { background: #4d1d66; color: #e6b3ff; }

.enemy-card-owner {
    font-size: 10px;
    color: #c8bfb0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

.enemy-card-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #ffd166;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    margin: 6px 0;
    border-bottom: 1px solid rgba(223, 177, 91, 0.35);
    padding-bottom: 4px;
}

.enemy-card-stats {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0;
}
.enemy-stat-badge {
    font-size: 12px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.enemy-stat-badge.atk { background: #962222; color: #fff; border: 1px solid #ff6666; }
.enemy-stat-badge.def { background: #1a4f8a; color: #fff; border: 1px solid #66b3ff; }
.enemy-stat-badge.buff { background: #8a6a1a; color: #fff; border: 1px solid #ffd700; }
.enemy-stat-badge.curse { background: #611a8a; color: #fff; border: 1px solid #d466ff; }

.enemy-card-desc {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    padding: 6px 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.enemy-card-foot {
    font-size: 10px;
    text-align: center;
    color: #dfb15b;
    letter-spacing: 1px;
}

@keyframes enemy-card-reveal {
    0% {
        transform: translateY(-80px) scale(0.3) rotateY(180deg);
        opacity: 0;
    }
    30% {
        transform: translateY(0) scale(1.15) rotateY(0deg);
        opacity: 1;
    }
    45% {
        transform: translateY(0) scale(1.0) rotateY(0deg);
        opacity: 1;
    }
    80% {
        transform: translateY(0) scale(1.0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(60px) scale(0.6);
        opacity: 0;
    }
}

/* 中央操作バー */
.battle-middle-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(18, 20, 26, 0.7);
    border-top: 1px solid #332d22;
    border-bottom: 1px solid #332d22;
    padding: 8px 24px;
    border-radius: 6px;
}

.enemy-deck-counts {
    display: flex;
    justify-content: center;
    gap: 12px;
    color: #c8bfb0;
    font-size: 11px;
    margin-top: 6px;
}
.enemy-deck-counts strong {
    color: #ff8c82;
}

.player-battle-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.player-resource-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.energy-orb-box {
    display: flex;
    align-items: center;
}
.energy-orb {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffd700, #b8860b 60%, #473200 100%);
    border: 2px solid #fff3b0;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #1a1200;
    font-weight: 900;
    font-size: 18px;
}
.energy-unit {
    font-size: 10px;
    font-weight: bold;
}

/* プレイヤー体力＆防具ゲージグループ */
.player-vitals-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.player-vital-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1;
}

.vital-label {
    font-size: 11px;
    font-weight: bold;
    color: #c9c0b1;
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.player-vital-bar-bg {
    width: 80px;
    height: 10px;
    background: rgba(10, 12, 16, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
    flex-shrink: 0;
}

.player-hp-bar-bg {
    border-color: rgba(239, 68, 68, 0.4);
}

.player-hp-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #991b1b, #ef4444);
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.player-hp-bar-fill.hp-damage-flash {
    animation: hp-damage-flash 0.42s ease-out;
}

.player-shield-bar-bg {
    border-color: rgba(56, 189, 248, 0.4);
}

.player-shield-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.vital-value {
    font-size: 12px;
    font-weight: bold;
    color: #f0f0f0;
    min-width: 48px;
    white-space: nowrap;
}

.player-shield-row .vital-value {
    color: #a8d5ff;
}

.player-info-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.battle-buffs-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.buff-tag {
    font-size: 11px;
    background: #252b36;
    border: 1px solid #4a5468;
    color: #d1d8e6;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.deck-counts-box {
    font-size: 14px;
    color: #a8a299;
    display: flex;
    gap: 16px;
    white-space: nowrap;
}

.btn-end-turn {
    background: linear-gradient(180deg, #8a241b 0%, #47110c 100%);
    color: #fff;
    border: 2px solid #dfb15b;
    border-radius: 6px;
    padding: 10px 24px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
    line-height: 1.25;
}
.btn-end-turn:hover {
    background: linear-gradient(180deg, #ab2e23 0%, #5e1610 100%);
    box-shadow: 0 0 16px rgba(223, 177, 91, 0.6);
    transform: translateY(-2px);
}
.btn-end-turn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 手札カードエリア */
.battle-hand-container {
    width: 100%;
    max-width: 100%;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding: 56px 0 10px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 15;

    /* 横スクロールバーのスタイリング（参考サイトガイド準拠） */
    scrollbar-width: thin;
    scrollbar-color: #5a4b36 rgba(10, 14, 20, 0.4);
}

.battle-hand-container::-webkit-scrollbar {
    height: 6px;
}
.battle-hand-container::-webkit-scrollbar-track {
    background: rgba(10, 14, 20, 0.4);
    border-radius: 3px;
}
.battle-hand-container::-webkit-scrollbar-thumb {
    background: #5a4b36;
    border-radius: 3px;
}
.battle-hand-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-dark);
}

.battle-hand {
    display: flex;
    justify-content: safe center;
    align-items: flex-end;
    gap: 14px;
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    padding: 24px 16px 8px 16px;
    box-sizing: border-box;
}

/* ==========================================
   カードフレーム共通デザイン（和紙×漆塗り風）
   ========================================== */
.card-frame {
    flex-shrink: 0;
    width: 160px;
    height: 230px;
    background: linear-gradient(180deg, #f5ede0 0%, #e2d2ba 100%);
    color: #1a1714;
    border-radius: 8px;
    border: 2px solid #3d3121;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    padding: 8px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-inner {
    width: 100%;
    height: 100%;
    border: 1px solid #7d6b53;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.4);
}

.card-frame:hover {
    transform: translateY(-16px) scale(1.05);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.7);
    z-index: 30;
}

.card-frame.cannot-play {
    opacity: 0.6;
    filter: brightness(0.75);
}
.card-frame.can-play:hover {
    border-color: #ffd166;
}

/* 陣営別カード上部枠 */
.card-frame.tobaku {
    background: linear-gradient(180deg, #faebd7 0%, #ecd4be 100%);
    border-color: #8c2820;
}
.card-frame.sabaku {
    background: linear-gradient(180deg, #edf3fa 0%, #c8d8ea 100%);
    border-color: #204068;
}
.card-frame.neutral {
    background: linear-gradient(180deg, #fbf7ee 0%, #d8c89d 100%);
    border-color: #7a632e;
}
.card-frame.curse {
    background: linear-gradient(180deg, #2a212c 0%, #151017 100%);
    color: #e0d0d8;
    border-color: #6b244d;
}
.card-frame.curse .card-inner {
    background: rgba(0, 0, 0, 0.5);
    border-color: #5c1f43;
}

/* コスト表示 */
.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-cost {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #252018;
    color: #ffd700;
    font-weight: 900;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ffd700;
}
.card-type-tag {
    font-size: 10px;
    font-weight: bold;
    color: #594b3b;
    padding: 1px 4px;
    border: 1px solid #8c765c;
    border-radius: 2px;
}

.card-name {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    margin: 4px 0;
    line-height: 1.3;
    border-bottom: 1px solid #ab977e;
    padding-bottom: 4px;
}

.card-stats {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.stat-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
}
.stat-badge.atk { background: #b3261e; color: #fff; }
.stat-badge.def { background: #1b4975; color: #fff; }
.stat-badge.risk { background: #d9534f; color: #fff; font-size: 9px; }

/* カード右上グループ */
.card-top-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 手札カードスロット（温存ボタンとカード本体の縦並びコンテナ） */
.battle-card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 温存ボタンとカード本体の間に少し離れた隙間を確保 */
    flex-shrink: 0;
    position: relative;
}

/* カード上部・温存ボタン（完全に静止した独立ボタン） */
.card-keep-tab {
    background: rgba(22, 18, 14, 0.95);
    border: 1px solid #c9a45c;
    color: #e2d9c8;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    z-index: 10;
}

.card-keep-tab:hover {
    background: #d4af37;
    color: #1a1510;
    border-color: #fff;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.85);
}

.card-keep-tab.active {
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    color: #1a1510;
    border-color: #fff;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
}

.card-frame.card-kept {
    border-color: #ffd700 !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.75), inset 0 0 10px rgba(255, 215, 0, 0.35) !important;
    transform: none !important;
}

.card-frame.card-kept:hover {
    transform: none !important;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.45) !important;
}


.card-desc {
    font-size: 11px;
    line-height: 1.4;
    color: #2b251f;
    flex: 1;
    overflow-y: auto;
}
.card-frame.curse .card-desc {
    color: #d1b8c6;
}

.card-footer {
    display: flex;
    justify-content: flex-end;
    font-size: 9px;
    color: #7a6b58;
}

/* コネクトリンク予測発光 */
.synergy-partner-glow {
    border-color: #ffd700 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.95), 0 0 50px rgba(255, 215, 0, 0.45) !important;
    transform: translateY(-28px) scale(1.12) !important;
    animation: gold-pulse 0.9s infinite alternate;
}
@keyframes gold-pulse {
    0% { filter: drop-shadow(0 0 5px #ffd700); }
    100% { filter: drop-shadow(0 0 20px #ffd700); }
}

/* ==========================================
   4. 歴史イベント画面
   ========================================== */
#screen-event {
    background-image: linear-gradient(rgba(10, 11, 14, 0.55), rgba(10, 11, 14, 0.72)), url('../img/event.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    box-sizing: border-box;
}

.event-parchment-box {
    margin: auto;
    max-width: 780px;
    width: 90%;
    background: linear-gradient(180deg, #1b2029 0%, #10131a 100%);
    border: 2px solid var(--color-gold);
    border-radius: 8px;
    padding: 36px 44px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.85);
    position: relative;
}

.event-stamp {
    position: absolute;
    top: 24px;
    right: 28px;
    border: 2px solid #b3261e;
    color: #b3261e;
    padding: 2px 10px;
    font-size: 14px;
    font-weight: bold;
    transform: rotate(8deg);
    border-radius: 4px;
}

.event-title {
    font-size: 26px;
    color: var(--color-gold-bright);
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.event-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-washi);
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #3d3528;
}

.event-choices-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-event-choice {
    background: rgba(26, 31, 41, 0.85);
    border: 1px solid #4a4131;
    border-radius: 6px;
    padding: 14px 20px;
    text-align: left;
    color: var(--color-washi);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-event-choice:hover:not(:disabled) {
    background: rgba(43, 52, 69, 0.95);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
    transform: translateX(6px);
}
.btn-event-choice:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: rgba(20, 20, 25, 0.7);
    border-color: #333;
}

.btn-event-choice.special-shishi-choice {
    border: 1.5px solid #d4af37;
    background: linear-gradient(135deg, rgba(45, 38, 25, 0.9) 0%, rgba(20, 25, 35, 0.9) 100%);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
}
.btn-event-choice.special-shishi-choice:hover:not(:disabled) {
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.5);
    border-color: #ffd700;
}

.btn-event-choice.locked-shishi-choice {
    border-style: dashed;
    border-color: #554444;
}

.badge-shishi-req {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
.badge-shishi-req.unlocked {
    background: linear-gradient(90deg, #b8860b, #d4af37);
    color: #111;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}
.badge-shishi-req.locked {
    background: #3a2222;
    color: #ff8888;
    border: 1px solid #773333;
}

.choice-shishi-bonus {
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 4px;
    color: #a3e9a4;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: bonusGlow 2s infinite alternate;
}

@keyframes bonusGlow {
    from { box-shadow: 0 0 2px rgba(46, 204, 113, 0.2); }
    to { box-shadow: 0 0 8px rgba(46, 204, 113, 0.5); }
}

.choice-survival-bonus {
    margin-top: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(52, 152, 219, 0.2));
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 4px;
    color: #f7e7b4;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    animation: survivalGlow 2.5s infinite alternate;
}

@keyframes survivalGlow {
    from { box-shadow: 0 0 4px rgba(212, 175, 55, 0.3); border-color: rgba(212, 175, 55, 0.5); }
    to { box-shadow: 0 0 12px rgba(52, 152, 219, 0.6); border-color: rgba(52, 152, 219, 0.8); }
}

.choice-text {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-washi);
    margin-bottom: 4px;
}
.choice-effect {
    font-size: 13px;
    color: var(--color-gold);
}

/* ==========================================
   4.1 歴史事件：天命判定（運命の審判）スタイル
   ========================================== */
.event-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeInStage 0.35s ease;
}

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

/* 選択肢内の確率表示バッジ（世論バッジを目立たせるため、控えめな中間トーンに抑制） */
.choice-probability-row {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.85;
}

.badge-risk {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0a8b4;
}
.badge-risk-safe,
.badge-risk-orthodox,
.badge-risk-intrigue,
.badge-risk-defiance,
.badge-risk-reckless {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0a8b4;
}

.badge-prob-total {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a0a8b4;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: normal;
}

.badge-prob-great {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8c93a0;
    padding: 1px 5px;
    border-radius: 3px;
}

.badge-prob-fail {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8c93a0;
    padding: 1px 5px;
    border-radius: 3px;
}

.badge-prob-warning {
    color: #707684;
    font-size: 10.5px;
    margin-left: 2px;
}

/* 天命判定アニメーション枠 */
.fate-roll-box {
    background: rgba(20, 24, 32, 0.9);
    border: 2px solid var(--color-gold);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    box-shadow: 0 0 24px rgba(223, 177, 91, 0.3), inset 0 0 16px rgba(0, 0, 0, 0.7);
    margin: 16px 0;
}

.fate-roll-badge {
    background: linear-gradient(135deg, #b8860b, #d4af37);
    color: #111;
    font-size: 13px;
    font-weight: 900;
    padding: 4px 14px;
    border-radius: 14px;
    letter-spacing: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.fate-roll-choice-name {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-washi);
    max-width: 550px;
    line-height: 1.5;
}

.fate-roll-animation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.fate-roll-wheel {
    font-size: 52px;
    color: var(--color-gold);
    animation: rotateWheel 1.0s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    text-shadow: 0 0 16px rgba(223, 177, 91, 0.6);
}

@keyframes rotateWheel {
    0% { transform: rotate(0deg) scale(0.9); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(0.9); }
}

.fate-roll-status-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-gold-bright);
    letter-spacing: 2px;
    animation: pulseGlow 1s infinite alternate;
}

@keyframes pulseGlow {
    from { opacity: 0.7; }
    to { opacity: 1; text-shadow: 0 0 8px rgba(255, 209, 102, 0.8); }
}

.fate-roll-chances {
    font-size: 13px;
    color: var(--color-washi-dim);
    display: flex;
    gap: 12px;
}

/* 幕参：解決・論功行賞 */
.resolution-box {
    background: rgba(20, 24, 30, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    color: var(--color-washi);
}

.resolution-stamp {
    font-size: 26px;
    font-weight: 900;
    padding: 8px 24px;
    border-radius: 8px;
    letter-spacing: 4px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    animation: stampIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes stampIn {
    0% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.resolution-stamp.grade-great {
    background: linear-gradient(135deg, #f39c12, #d35400);
    border: 2px solid #f1c40f;
    color: #fff;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.5);
}

.resolution-stamp.grade-success {
    background: linear-gradient(135deg, #27ae60, #2980b9);
    border: 2px solid #2ecc71;
    color: #fff;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
}

.resolution-stamp.grade-failure {
    background: linear-gradient(135deg, #c0392b, #7f1d1d);
    border: 2px solid #e74c3c;
    color: #fff;
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}

.resolution-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-washi);
    margin: 10px 0 6px;
}

.resolution-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-washi);
    max-width: 620px;
    margin: 0 auto 16px;
    padding: 12px 18px;
    background: rgba(16, 18, 24, 0.6);
    border-radius: 6px;
}

.resolution-rewards-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
}

.resolution-reward-row {
    background: rgba(26, 31, 41, 0.85);
    border: 1px solid #4a4131;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.resolution-reward-row.penalty {
    color: #ff8888;
    border-color: #662222;
    background: rgba(45, 20, 20, 0.85);
}

.resolution-reward-row .reward-icon {
    font-size: 16px;
}

.resolution-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}



/* ==========================================
   5. ショップ画面
   ========================================== */
#screen-shop {
    background-image: linear-gradient(rgba(10, 11, 14, 0.55), rgba(10, 11, 14, 0.72)), url('../img/shop.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    box-sizing: border-box;
}

.shop-wrapper {
    margin: auto;
    width: 90%;
    max-width: 1100px;
    background: rgba(18, 21, 28, 0.95);
    border: 2px solid var(--color-gold-dark);
    border-radius: 8px;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.shop-header h2 {
    font-size: 24px;
    color: var(--color-gold-bright);
    margin-bottom: 4px;
}
.shop-flavor {
    font-size: 13px;
    color: #a89f92;
}

.shop-sections-grid {
    display: flex;
    gap: 32px;
    flex: 1;
    margin: 16px 0;
    overflow-y: auto;
}

.shop-card-section {
    flex: 3;
}
.shop-side-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shop-section-title {
    font-size: 15px;
    color: var(--color-gold);
    margin-bottom: 12px;
    border-bottom: 1px solid #3a3224;
    padding-bottom: 4px;
}

.shop-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.shop-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-shop-buy {
    width: 100%;
    padding: 6px;
    background: #362a1d;
    border: 1px solid var(--color-gold);
    color: #ffd700;
    font-weight: bold;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-shop-buy:hover:not(:disabled) {
    background: #4d3c2a;
    box-shadow: var(--shadow-gold);
}
.btn-shop-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #555;
    color: #888;
}

.shop-relics-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-relic-card {
    background: #14171f;
    border: 1px solid #3d3425;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.relic-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-gold-bright);
}
.relic-desc {
    font-size: 12px;
    color: #b0a89d;
}

/* 密貿易枠 */
.smuggle-box {
    background: linear-gradient(180deg, #2b1212 0%, #170808 100%);
    border: 2px dashed #b3261e;
    border-radius: 6px;
    padding: 12px;
}
.smuggle-badge {
    font-size: 13px;
    font-weight: bold;
    color: #ff4d4d;
    margin-bottom: 6px;
}
.smuggle-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #e6ccd0;
    margin-bottom: 8px;
}
.btn-smuggle {
    width: 100%;
    padding: 8px;
    background: #b3261e;
    color: #fff;
    font-weight: bold;
    border: 1px solid #ff6b6b;
    border-radius: 4px;
    cursor: pointer;
}
.btn-smuggle:hover:not(:disabled) {
    background: #d32f2f;
    box-shadow: var(--shadow-red);
}

.shop-heal-box,
.shop-removal-box {
    background: #151821;
    border: 1px solid #2d4a3e;
    border-radius: 6px;
    padding: 12px;
}
.shop-heal-box h4,
.shop-removal-box h4 {
    font-size: 13px;
    color: #48bb78;
    margin-bottom: 4px;
}
.shop-heal-box p,
.shop-removal-box p {
    font-size: 11px;
    color: #a89e90;
    margin-bottom: 8px;
}

.shop-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.shop-leave-hint {
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.shop-leave-hint.warning {
    color: #e59866;
    background: rgba(229, 152, 102, 0.12);
    border: 1px dashed rgba(229, 152, 102, 0.4);
}

.shop-leave-hint.ready {
    color: #68d391;
    background: rgba(104, 211, 145, 0.12);
    border: 1px solid rgba(104, 211, 145, 0.4);
}

#btn-leave-shop.btn-retreat {
    border-color: #8c7866;
    color: #d8cfc4;
}

#btn-leave-shop.btn-proceed {
    border-color: #48bb78;
    color: #9ae6b4;
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.3);
}

/* ==========================================
   6. 休息画面
   ========================================== */
#screen-rest {
    background-image: linear-gradient(rgba(10, 11, 14, 0.55), rgba(10, 11, 14, 0.72)), url('../img/rest.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    box-sizing: border-box;
}

.rest-wrapper {
    margin: auto;
    max-width: 850px;
    width: 90%;
    background: rgba(18, 20, 26, 0.95);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 36px 40px;
    text-align: center;
    box-shadow: 0 0 50px rgba(0,0,0,0.85);
}

.rest-title {
    font-size: 28px;
    color: var(--color-gold-bright);
    margin-bottom: 8px;
}
.rest-desc {
    font-size: 15px;
    color: #a89f92;
    margin-bottom: 36px;
}

.rest-choices-grid {
    display: flex;
    gap: 20px;
}

.rest-card {
    flex: 1;
    background: linear-gradient(180deg, #1c212b 0%, #12151c 100%);
    border: 1px solid #4a3e2a;
    border-radius: 8px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.rest-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
}

.rest-icon {
    font-size: 36px;
    margin-bottom: 12px;
}
.rest-card h3 {
    font-size: 16px;
    color: var(--color-washi);
    margin-bottom: 8px;
}
.rest-card p {
    font-size: 13px;
    color: #a89e90;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ==========================================
   7 & 8. ゲームオーバー ＆ 勝利画面
   ========================================== */
#screen-gamewin {
    background-image: linear-gradient(rgba(10, 11, 14, 0.45), rgba(10, 11, 14, 0.65)), url('../img/gamewin_tobaku.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    box-sizing: border-box;
}

#screen-gamewin.faction-tobaku {
    background-image: linear-gradient(rgba(10, 11, 14, 0.45), rgba(10, 11, 14, 0.65)), url('../img/gamewin_tobaku.jpg');
}

#screen-gamewin.faction-sabaku {
    background-image: linear-gradient(rgba(10, 11, 14, 0.45), rgba(10, 11, 14, 0.65)), url('../img/gamewin_sabaku.jpg');
}

#screen-gameover {
    background-image: linear-gradient(rgba(10, 11, 14, 0.84), rgba(10, 11, 14, 0.95)), url('../img/gameover.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    box-sizing: border-box;
}

.result-box {
    position: relative;
    margin: auto;
    max-width: 650px;
    width: 90%;
    border-radius: 8px;
    padding: 48px;
    text-align: center;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 背景鑑賞モード */
#screen-gamewin.backdrop-only {
    background-image: url('../img/gamewin_tobaku.jpg');
    cursor: pointer;
}
#screen-gamewin.faction-tobaku.backdrop-only {
    background-image: url('../img/gamewin_tobaku.jpg');
}
#screen-gamewin.faction-sabaku.backdrop-only {
    background-image: url('../img/gamewin_sabaku.jpg');
}

.game-screen.backdrop-only .result-box {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.result-backdrop-hint {
    display: none;
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #f0e6d2;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 15px;
    letter-spacing: 2px;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

.game-screen.backdrop-only .result-backdrop-hint {
    display: block;
    animation: fadeInHint 0.5s ease forwards, pulse-hint 2s infinite ease-in-out 0.5s;
}

@keyframes fadeInHint {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 0.85; transform: translate(-50%, 0); }
}

@keyframes pulse-hint {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.4; }
}

.gameover-box {
    background: linear-gradient(180deg, #220e0e 0%, #0d0505 100%);
    border: 2px solid #851c14;
}
.gamewin-box {
    background: linear-gradient(180deg, #241d11 0%, #0d0a05 100%);
    border: 2px solid var(--color-gold);
}

.result-emblem {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 10px;
    color: #b3261e;
    margin-bottom: 16px;
}
.result-emblem.gold {
    color: #ffd700;
}

.result-title {
    font-size: 32px;
    margin-bottom: 16px;
    letter-spacing: 4px;
}

.result-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #c9c1b3;
    margin-bottom: 36px;
}

/* ==========================================
   モーダル（デッキ閲覧・報酬・カード破棄）
   ========================================== */
.game-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 80;
}
.game-modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.modal-content-box {
    position: relative;
    z-index: 2;
    background: #141720;
    border: 2px solid var(--color-gold);
    border-radius: 8px;
    width: 85%;
    max-width: 1000px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.modal-header h2 {
    font-size: 20px;
    color: var(--color-gold-bright);
}
.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--color-washi);
    font-size: 22px;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.modal-close-btn:hover {
    color: #ff4d4d;
    background: rgba(255, 255, 255, 0.1);
}

/* 山札ポップウィンドウ（所持デッキ一覧モーダル・カード破棄モーダル）
   上下中央ではなくヘッダーの下に配置し、歴史事件対決画面や戦果確認など他のあらゆる画面よりも最上位に表示する */
#modal-deck {
    z-index: 1500;
    align-items: flex-start;
    padding-top: calc(var(--header-height, 84px) + 12px);
    padding-bottom: 16px;
    box-sizing: border-box;
}

#modal-removal {
    z-index: 85;
    align-items: flex-start;
    padding-top: calc(var(--header-height, 84px) + 12px);
    padding-bottom: 16px;
    box-sizing: border-box;
}

#modal-deck .modal-content-box,
#modal-removal .modal-content-box {
    max-height: calc(100vh - var(--header-height, 84px) - 28px);
    max-height: calc(100dvh - var(--header-height, 84px) - 28px);
}

.modal-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    overflow-y: auto;
    padding: 10px;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: #5a4b36 rgba(10, 14, 20, 0.4);
}
.modal-cards-grid::-webkit-scrollbar {
    width: 8px;
}
.modal-cards-grid::-webkit-scrollbar-track {
    background: rgba(10, 14, 20, 0.4);
}
.modal-cards-grid::-webkit-scrollbar-thumb {
    background: #5a4b36;
    border-radius: 4px;
}
.modal-cards-grid::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-dark);
}

.clickable-removal:hover {
    border-color: #ff3333 !important;
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.8) !important;
}

/* ==========================================
   カード詳細・人物伝拡大モーダル
   （デッキ一覧の手前：z-index: 1000）
   ========================================== */
.card-clickable-detail {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.card-clickable-detail:hover {
    transform: translateY(-8px) scale(1.05) !important;
    border-color: var(--color-gold-bright) !important;
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.55), 0 0 15px rgba(212, 175, 55, 0.3) !important;
}
.card-clickable-detail::after {
    content: "🔍 詳細・人物伝";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 21, 28, 0.95);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-bright);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, bottom 0.2s;
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.card-clickable-detail:hover::after {
    opacity: 1;
    bottom: -18px;
}

#modal-card-detail {
    z-index: 1600; /* デッキ一覧(1500)よりさらに前面 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#card-detail-backdrop {
    background: rgba(4, 6, 10, 0.82);
    backdrop-filter: blur(6px);
}

.card-detail-modal-box {
    width: 90%;
    max-width: 820px;
    max-height: 88vh;
    max-height: 88dvh;
    padding: 20px 24px;
    background: linear-gradient(175deg, #171b26 0%, #0e1118 100%);
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.card-detail-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-detail-sub-badge {
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid var(--color-gold);
    color: var(--color-gold-bright);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

.card-detail-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    overflow-y: auto;
    padding: 8px 4px 12px 4px;
    scrollbar-width: thin;
    scrollbar-color: #5a4b36 rgba(10, 14, 20, 0.4);
}
.card-detail-body::-webkit-scrollbar {
    width: 6px;
}
.card-detail-body::-webkit-scrollbar-thumb {
    background: #5a4b36;
    border-radius: 3px;
}

.card-detail-visual-col {
    flex: 0 0 210px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
}

.card-enlarged-wrapper .card-frame {
    width: 200px;
    height: 285px;
    cursor: default;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.25);
    transition: none;
    transform: none !important;
}
.card-enlarged-wrapper .card-frame:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.25) !important;
}
.card-enlarged-wrapper .card-inner {
    padding: 10px;
}
.card-enlarged-wrapper .card-name {
    font-size: 15px;
}
.card-enlarged-wrapper .card-desc {
    font-size: 13px;
    line-height: 1.5;
}

.card-detail-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-detail-meta-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.card-detail-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.card-detail-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.card-detail-rarity-tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: bold;
    border: 1px solid currentColor;
}
.card-detail-rarity-tag.starter { color: #aaa; border-color: #777; background: rgba(255,255,255,0.05); }
.card-detail-rarity-tag.common { color: #8bc34a; border-color: #8bc34a; background: rgba(139,195,74,0.1); }
.card-detail-rarity-tag.uncommon { color: #00bcd4; border-color: #00bcd4; background: rgba(0,188,212,0.1); }
.card-detail-rarity-tag.rare { color: #ffb300; border-color: #ffb300; background: rgba(255,179,0,0.1); }
.card-detail-rarity-tag.legendary { color: #e040fb; border-color: #e040fb; background: rgba(224,64,251,0.12); }
.card-detail-rarity-tag.curse { color: #f44336; border-color: #f44336; background: rgba(244,67,54,0.1); }

.card-detail-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-badge-pill {
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e6e6e6;
}
.detail-badge-pill.faction-tobaku {
    background: rgba(168, 50, 40, 0.25);
    border-color: #c94a3d;
    color: #ff9b91;
}
.detail-badge-pill.faction-sabaku {
    background: rgba(30, 80, 140, 0.25);
    border-color: #3b7dc4;
    color: #9eccfa;
}
.detail-badge-pill.faction-neutral {
    background: rgba(130, 100, 30, 0.25);
    border-color: #c9a444;
    color: #fde89b;
}
.detail-badge-pill.atk {
    background: rgba(200, 40, 40, 0.2);
    border-color: #ff6b6b;
    color: #ff9999;
}
.detail-badge-pill.def {
    background: rgba(40, 120, 200, 0.2);
    border-color: #4da6ff;
    color: #a3d1ff;
}

.card-detail-section {
    background: rgba(10, 14, 22, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 6px;
    padding: 12px 14px;
}

.card-detail-section-title {
    font-size: 13px;
    color: var(--color-gold-bright);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.card-detail-effect-text {
    font-size: 14px;
    line-height: 1.6;
    color: #eaeaea;
}

.bio-section {
    background: rgba(28, 22, 18, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-left: 4px solid var(--color-gold-bright);
}

.card-detail-bio-text {
    font-size: 13.5px;
    line-height: 1.8;
    color: #f5eedf;
    text-align: justify;
    letter-spacing: 0.3px;
    font-family: var(--font-mincho, 'Yu Mincho', 'Hiragino Mincho ProN', serif);
}

.synergy-section {
    border-left: 4px solid #00bcd4;
    background: rgba(0, 30, 40, 0.5);
}
.card-detail-synergy-text {
    font-size: 13px;
    line-height: 1.6;
    color: #b2ebf2;
}

@media (max-width: 680px) {
    .card-detail-modal-box {
        width: 95%;
        padding: 14px;
        max-height: 92vh;
        max-height: 92dvh;
    }
    .card-detail-body {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .card-detail-visual-col {
        flex: none;
    }
    .card-enlarged-wrapper .card-frame {
        width: 170px;
        height: 245px;
    }
    .card-detail-name {
        font-size: 17px;
    }
}

/* 報酬モーダル */
.reward-box {
    max-width: 860px;
    width: 94%;
}
.reward-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.reward-gold-line {
    font-size: 18px;
    margin-bottom: 10px;
}
.reward-scroll-hint {
    display: none;
    text-align: center;
    font-size: 12px;
    color: var(--color-gold);
    letter-spacing: 1px;
    margin: 4px 0 8px;
    font-family: var(--font-serif);
    opacity: 0.9;
}
@media (max-width: 820px) {
    .reward-scroll-hint {
        display: block;
    }
}
.reward-cards-grid {
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    margin: 10px 0 16px;
    padding: 14px 16px 18px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(223, 177, 91, 0.5) rgba(0, 0, 0, 0.3);
}
/* 収まる場合は中央配置、溢れる場合は左端からスクロール可能にする安全アライメント */
.reward-cards-grid::before,
.reward-cards-grid::after {
    content: '';
    margin: auto;
}
.reward-cards-grid::-webkit-scrollbar {
    height: 6px;
}
.reward-cards-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
}
.reward-cards-grid::-webkit-scrollbar-thumb {
    background: rgba(223, 177, 91, 0.5);
    border-radius: 3px;
}
.reward-cards-grid::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}
.reward-cards-grid .card-frame {
    flex-shrink: 0;
    scroll-snap-align: center;
}
.reward-card-choice:hover {
    border-color: #ffd700 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.85) !important;
}
.reward-skip-box {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.reward-relic-box {
    background: #1e2430;
    border: 1px solid #dfb15b;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* レスポンシブ対応（画面幅縮小時） */
@media (max-width: 980px) {
    .main-header {
        padding: 0 16px;
    }
    /* ゲーム中（初期画面以外）：デスクトップ用ボタンを隠し、プルダウンメニューを展開 */
    .main-header:not(.title-mode) .header-desktop-actions {
        display: none !important;
    }
    .main-header:not(.title-mode) .header-dropdown-wrapper {
        display: block !important;
    }
    /* 右端のメニューボタンが画面外にはみ出さないよう固定 */
    .header-right {
        flex-shrink: 0 !important;
    }
    /* 列強介入メーターの幅調整とタイトル短縮（iPad等の狭小幅対応） */
    .header-center {
        margin: 0 10px;
        max-width: 220px;
        flex-shrink: 1;
    }
    .imperial-title-full {
        display: none !important;
    }
    .imperial-title-short {
        display: inline !important;
    }
    .header-left {
        gap: 10px;
        flex-shrink: 1;
    }
    .header-bar {
        width: 80px;
    }
    .opinion-side-label {
        display: none !important;
    }
    .opinion-header {
        justify-content: center;
    }
    .opinion-phase-text {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .battle-upper-arena {
        min-height: 250px;
        padding: 8px 12px;
    }
    .enemy-deck-stats-box {
        left: 12px;
        top: 10px;
        min-width: 80px;
        padding: 5px 8px;
        font-size: 11px;
    }
    .enemy-card-back {
        width: 58px;
        height: 84px;
    }
    .enemy-card-crest {
        font-size: 16px;
    }
    .enemy-hand-container {
        margin-top: 8px;
    }
}

/* 縦の長さが短い画面、またはスマートフォン・タブレット表示時：
   画面上下中央揃えによる上部（ヘッダー下）の隠れを防止し、上寄せで表示する */
@media (max-height: 760px), (max-width: 768px) {
    #screen-title,
    #screen-shop,
    #screen-rest,
    #screen-event,
    #screen-gamewin,
    #screen-gameover {
        justify-content: flex-start !important;
        padding: 16px 0 36px 0 !important;
    }
    .title-wrapper,
    .shop-wrapper,
    .rest-wrapper,
    .event-parchment-box,
    .result-box {
        margin: 0 auto !important;
    }
}

@media (max-width: 768px) {
    .main-header {
        padding: 0 12px;
    }
    .header-left {
        gap: 8px;
        font-size: 13px;
        flex-shrink: 1;
    }
    /* 幅が狭い画面では数値を非表示にし、体力メーター（バー）を表示 */
    .header-stat-box .header-bar {
        display: block;
        width: 70px;
        height: 10px;
    }
    #header-hp-text {
        display: none !important;
    }
    .header-center {
        margin: 0 8px;
        max-width: 170px;
    }



    /* 戦闘中央操作バー（帯）の幅狭画面・スマホ向けスリム化レイアウト */
    .battle-middle-bar {
        padding: 6px 12px;
        gap: 8px;
    }
    .player-battle-stats {
        gap: 12px;
        flex: 1;
        min-width: 0;
    }

    /* 文の円と体力/防具ゲージ */
    .player-resource-group {
        flex-direction: row;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
    }
    .energy-orb {
        width: 44px;
        height: 44px;
        font-size: 14px;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }
    .energy-unit {
        font-size: 8px;
    }
    .player-vitals-group {
        gap: 3px;
        min-width: 0;
    }
    .player-vital-row {
        gap: 4px;
        font-size: 11px;
    }
    .vital-label {
        font-size: 10px;
        width: 20px;
    }
    .player-vital-bar-bg {
        width: 65px;
        height: 7px;
    }
    .vital-value {
        font-size: 10.5px;
        min-width: 38px;
    }

    /* 腕力＋や山札、捨札を縦に並べる */
    .player-info-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        min-width: 0;
        flex: 1;
    }
    .battle-buffs-list {
        gap: 3px;
    }
    .buff-tag {
        font-size: 10px;
        padding: 1px 4px;
    }
    .deck-counts-box {
        flex-direction: column;
        gap: 1px;
        font-size: 11px;
    }

    /* ターン終了ボタン（スマホでもフルテキスト「太刀を収める（ターン終了）」を維持） */
    .battle-action-box {
        flex-shrink: 0;
    }
    .btn-end-turn {
        padding: 6px 12px;
        font-size: 13px;
        line-height: 1.2;
    }
}

/* 画面幅が狭い場合（Android / スマートフォン等）の省スペース化 */
@media (max-width: 640px) {
    :root {
        --header-height: 76px;
    }
    .main-header {
        padding: 4px 8px;
        height: var(--header-height, 76px);
    }
    .header-left {
        gap: 6px;
        font-size: 11px;
        flex-shrink: 1;
        min-width: 0;
    }
    /* 「薩長同盟（討幕派）」→「討幕派」、「幕府・会津藩（佐幕派）」→「佐幕派」 */
    .badge-full {
        display: none !important;
    }
    .badge-short {
        display: inline !important;
    }
    .faction-badge {
        font-size: 11px;
        padding: 2px 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* 「体力」→「体」、「資金」→「金」 */
    .stat-label-full {
        display: none !important;
    }
    .stat-label-short {
        display: inline !important;
    }
    .header-stat-group {
        gap: 2px;
    }
    .header-stat-row {
        gap: 4px;
        font-size: 11px;
    }
    /* スマホ画面でも体力メーター（バー）を維持表示 */
    .header-stat-row .header-bar {
        display: block;
        width: 50px;
        height: 8px;
    }
    #header-hp-text {
        display: none !important;
    }

    /* 介入メーターは画面幅が狭くても短縮タイトル「⚠️ 列強介入」を維持表示 */
    .header-center {
        margin: 0 6px;
        min-width: 120px;
        max-width: 190px;
        flex-shrink: 1;
        gap: 2px;
    }
    .imperial-container {
        padding: 2px 6px;
    }
    .imperial-title {
        display: inline !important;
        font-size: 10px;
        white-space: nowrap;
    }
    .imperial-title-full {
        display: none !important;
    }
    .imperial-title-short {
        display: inline !important;
    }
    .imperial-header::before {
        display: none !important;
    }
    .imperial-percent {
        font-size: 10px;
    }

    .opinion-container {
        padding: 2px 6px;
        margin-top: 0;
    }
    .opinion-side-label {
        display: none !important;
    }
    .opinion-phase-text {
        font-size: 10px;
        width: 100%;
        text-align: center;
    }
    .opinion-bar-track {
        height: 6px;
    }
    .opinion-pointer {
        width: 10px;
        height: 10px;
    }

    /* 右端のプルダウンメニューボタンが絶対に画面外に押し出されないよう右端固定 */
    .header-right {
        flex-shrink: 0 !important;
    }
    .btn-header-menu .menu-label {
        display: none;
    }
    .btn-header-menu .menu-icon {
        font-size: 17px;
    }

    /* マップヘッダーバーのモバイル最適化（左右端まで塗りつぶし維持） */
    .map-header-bar {
        padding: 8px 12px;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
    .map-act-title {
        font-size: 18px;
    }
    .map-legend {
        gap: 10px;
        font-size: 11px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 自軍手札エリアの横スクロール＆スマホ用カードサイズ最適化 */
    .battle-hand-container {
        min-height: 270px;
        padding: 44px 0 6px 0;
    }
    .battle-hand {
        gap: 10px;
        padding: 16px 12px 4px 12px;
    }
    .card-frame {
        width: 135px;
        height: 195px;
        padding: 6px;
    }
    .card-inner {
        padding: 6px;
    }
    .card-title {
        font-size: 13px;
        margin: 4px 0 2px 0;
    }
    .card-cost {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }
    .card-type-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
    .card-faction-tag {
        font-size: 9px;
    }
    .card-desc {
        font-size: 11px;
        line-height: 1.35;
        padding: 4px 6px;
    }
    .card-character-tag {
        font-size: 9px;
    }

    /* 初期画面（タイトル画面）のスマホ向け最適化 */
    .title-wrapper {
        padding: 20px 14px;
        width: 92%;
    }
    .main-title {
        font-size: 32px;
        letter-spacing: 4px;
    }
    .title-sub {
        font-size: 20px;
        letter-spacing: 6px;
    }
    .faction-cards-grid {
        flex-direction: column;
        gap: 14px;
    }

    /* 商人（ショップ）画面のスマホ向け最適化 */
    .shop-wrapper {
        padding: 16px 12px;
        width: 94%;
    }
    .shop-sections-grid {
        flex-direction: column;
        gap: 18px;
    }

    /* 休息（休憩）画面のスマホ向け最適化 */
    .rest-wrapper {
        padding: 20px 14px;
        width: 94%;
    }
    .rest-choices-grid {
        flex-direction: column;
        gap: 12px;
    }

    /* マップ画面のノードタイトル（スマホ対応） */
    .map-nodes-container {
        gap: 54px;
        padding: 16px 0 32px 0;
    }
    .node-title {
        width: 86px;
        max-width: 90px;
        font-size: 10px;
        line-height: 1.2;
        padding: 2px 3px;
        top: calc(100% + 4px);
    }
    .node-title .node-period {
        font-size: 8.5px;
    }

    /* 山札・対決モーダルのスマホ最適化 */
    #modal-deck,
    #modal-removal,
    #modal-event-clash {
        padding-top: calc(var(--header-height, 76px) + 8px);
        padding-bottom: 8px;
    }
    #modal-deck .modal-content-box,
    #modal-removal .modal-content-box,
    #modal-event-clash .clash-modal-box {
        width: 95%;
        padding: 14px 10px;
        max-height: calc(100vh - var(--header-height, 76px) - 16px);
        max-height: calc(100dvh - var(--header-height, 76px) - 16px);
    }
    .clash-modal-header {
        flex-direction: column;
        gap: 6px;
    }
    .clash-modal-header h2 {
        font-size: 17px;
    }
    .clash-header-badge {
        font-size: 12px;
    }
    .btn-clash-skip {
        flex-direction: column;
        padding: 6px 14px;
        gap: 2px;
    }
    .skip-btn-main {
        font-size: 12px;
    }
    .skip-btn-sub {
        font-size: 11px;
        opacity: 0.85;
    }
}

/* 最小幅（360px〜400pxクラスのAndroid端末等）向けの最適化 */
@media (max-width: 420px) {
    .main-header {
        padding: 0 5px;
    }
    .header-left {
        gap: 4px;
        font-size: 11px;
    }
    .faction-badge {
        font-size: 10px;
        padding: 2px 4px;
    }
    .header-stat-box {
        gap: 2px;
        font-size: 11px;
    }
    .header-stat-box .header-bar {
        width: 45px;
        height: 8px;
    }

    .header-center {
        margin: 0 4px;
        min-width: 110px;
        max-width: 170px;
    }
    .imperial-title {
        font-size: 9px;
    }
    .imperial-percent {
        font-size: 9px;
    }
    .btn-header-menu {
        padding: 4px 6px;
    }
    .btn-header-menu .menu-icon {
        font-size: 15px;
    }

    /* 最小幅端末でのカード手札調整 */
    .battle-hand-container {
        min-height: 250px;
        padding: 40px 0 6px 0;
    }
    .battle-hand {
        gap: 8px;
        padding: 14px 8px 4px 8px;
    }
    .card-frame {
        width: 120px;
        height: 175px;
        padding: 5px;
    }
    .card-inner {
        padding: 4px;
    }
    .card-title {
        font-size: 12px;
    }
    .card-desc {
        font-size: 10px;
        line-height: 1.3;
        padding: 3px 4px;
    }

    /* 最小幅端末での戦闘中央操作バー調整 */
    .battle-middle-bar {
        padding: 4px 6px;
        gap: 6px;
    }
    .energy-orb {
        width: 38px;
        height: 38px;
        font-size: 12px;
    }
    .player-resource-group {
        gap: 4px;
    }
    .player-vitals-group {
        gap: 2px;
    }
    .vital-label {
        font-size: 9px;
        width: 18px;
    }
    .player-vital-bar-bg {
        width: 52px;
        height: 6px;
    }
    .vital-value {
        font-size: 9.5px;
        min-width: 32px;
    }
    .deck-counts-box {
        font-size: 10px;
    }
    .btn-end-turn {
        padding: 5px 8px;
        font-size: 11px;
        line-height: 1.15;
    }

    /* マップ画面のノードタイトル（小型端末対応） */
    .map-nodes-container {
        gap: 50px;
        padding: 14px 0 28px 0;
    }
    .node-title {
        width: 78px;
        max-width: 82px;
        font-size: 9.5px;
        line-height: 1.15;
        padding: 1px 2px;
        top: calc(100% + 3px);
    }
    .node-title .node-period {
        font-size: 8px;
    }
}



/* トースト通知 */
#toast-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.toast-msg {
    background: rgba(18, 20, 28, 0.95);
    color: var(--color-washi);
    border: 1px solid var(--color-gold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.4);
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    pointer-events: auto;
    animation: toastIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast-msg.toast-warning {
    border-color: #ff6666;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 68, 68, 0.6);
    color: #ffcccc;
}
.toast-msg.toast-success {
    border-color: #2ecc71;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(46, 204, 113, 0.6);
    color: #d4ffd8;
}
.toast-msg.fade-out {
    opacity: 0;
    transform: translateY(-12px);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   志士落命（散華）通知モーダル ＆ マップ命運ノード
   ========================================== */
.modal-death-overlay {
    z-index: 10050;
}

.death-modal-box {
    max-width: 680px;
    width: 90%;
    background: linear-gradient(135deg, #1c1417 0%, #100b0d 100%);
    border: 2px solid #8b1e22;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(139, 30, 34, 0.5);
    color: #ebdcd6;
    border-radius: 8px;
    overflow: hidden;
}

.death-modal-header {
    background: linear-gradient(90deg, #420d11 0%, #1f080a 100%);
    border-bottom: 2px solid #8b1e22;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.death-header-badge {
    background: #8b1e22;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 2px;
    border: 1px solid #ff4444;
    animation: deathBadgePulse 2s infinite ease-in-out;
}

@keyframes deathBadgePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 68, 68, 0.4); }
    50% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.8); }
}

.death-modal-header h2 {
    font-size: 18px;
    margin: 0;
    color: #ffd8d8;
    font-family: var(--font-mincho, "Yu Mincho", serif);
    letter-spacing: 1px;
}

.death-modal-body {
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
}

.death-modal-lead {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #d1b8b8;
    background: rgba(40, 10, 12, 0.4);
    padding: 10px 14px;
    border-left: 4px solid #8b1e22;
    border-radius: 0 4px 4px 0;
}

.highlight-loss {
    color: #ff5555;
    text-decoration: underline;
    font-weight: bold;
}

.shishi-death-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shishi-death-card-item {
    display: flex;
    gap: 16px;
    background: rgba(25, 18, 20, 0.85);
    border: 1px solid #5a2024;
    border-radius: 6px;
    padding: 12px;
    align-items: center;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.death-card-visual {
    flex-shrink: 0;
    width: 90px;
    height: 128px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #4a3335;
    filter: grayscale(100%) contrast(110%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    position: relative;
    background: #111;
}

.death-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.death-card-visual .death-fallen-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(100, 10, 15, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 2px 0;
    letter-spacing: 1px;
}

.death-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.death-card-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.death-card-name {
    font-size: 17px;
    font-weight: bold;
    color: #fce8e8;
    font-family: var(--font-mincho, "Yu Mincho", serif);
}

.death-status-badge {
    background: #420f12;
    color: #ff8888;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #731b20;
}

.death-reason-box {
    font-size: 12.5px;
    color: #c9afaf;
    line-height: 1.4;
}

.death-reason-box strong {
    color: #e68585;
}

.death-lastwords {
    font-size: 12px;
    font-style: italic;
    color: #b59595;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 10px;
    border-radius: 4px;
    border-left: 2px solid #5a2024;
    margin-top: 2px;
}

.death-modal-footer {
    padding: 14px 20px;
    background: rgba(15, 10, 12, 0.9);
    border-top: 1px solid #3a1518;
    display: flex;
    justify-content: flex-end;
}

.btn-death-confirm {
    background: linear-gradient(180deg, #6b181c 0%, #420d11 100%) !important;
    border: 1px solid #9e2a2f !important;
    color: #ffe6e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(158, 42, 47, 0.4) !important;
    font-weight: bold;
}
.btn-death-confirm:hover {
    background: linear-gradient(180deg, #872025 0%, #541116 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 68, 68, 0.6) !important;
}

/* マップ上の命運ノード（志士の生死がかかる歴史事件マス） */
.map-node.fate-node {
    border-color: #d68910;
}

.map-node.owned-fate-node {
    border-color: #e74c3c !important;
    animation: ownedFatePulse 1.8s infinite ease-in-out;
}

@keyframes ownedFatePulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(231, 76, 60, 0.6), inset 0 0 4px rgba(231, 76, 60, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(231, 76, 60, 0.95), inset 0 0 8px rgba(231, 76, 60, 0.5);
        transform: scale(1.06);
    }
}

.node-fate-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(120, 20, 25, 0.95);
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
    border: 1px solid #ff4444;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    z-index: 5;
    letter-spacing: 0.5px;
}

.node-fate-badge.owned {
    background: linear-gradient(90deg, #b01b22, #7d1217);
    border-color: #ff7777;
    animation: fateBadgeBounce 2s infinite ease-in-out;
}

@keyframes fateBadgeBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-2px); }
}

/* ========================================================
   歴史事件対決モーダル＆場（フィールド）カード提示システム
   ======================================================== */
.modal-clash-overlay {
    z-index: 900;
    align-items: flex-start;
    padding-top: calc(var(--header-height, 84px) + 8px);
    padding-bottom: 12px;
    box-sizing: border-box;
}
.modal-clash-overlay.active {
    display: flex !important;
}

/* 歴史事件対決画面の背景画像（歴史事件の情景・絵巻） */
#event-clash-backdrop {
    background-image: linear-gradient(rgba(10, 11, 14, 0.55), rgba(10, 11, 14, 0.72)), url('../img/event.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 期間経過による歴史事件カード削除通知モーダル */
#modal-event-cards-expired {
    z-index: 1400;
}

.expired-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.expired-card-stamp {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    background: rgba(180, 20, 20, 0.88);
    border: 2px solid #ff4444;
    color: #fff;
    padding: 6px 14px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 10;
    letter-spacing: 2px;
}
.expired-card-wrapper .card-frame {
    filter: grayscale(0.5) brightness(0.85);
    opacity: 0.9;
}

/* 首謀者落命による歴史事件カード除外通知モーダル */
#modal-event-cards-mastermind-dead {
    z-index: 1420;
}

.mastermind-dead-stamp {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    background: rgba(140, 15, 15, 0.92);
    border: 2px solid #ff4444;
    color: #fff;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 10;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
}

#event-card-acquired-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.event-card-enemy-notice {
    width: 100%;
    max-width: 560px;
    margin: 16px auto 0;
    padding: 10px 18px;
    background: rgba(192, 57, 43, 0.22);
    border: 1px solid rgba(231, 76, 60, 0.55);
    border-radius: 6px;
    font-size: 0.88rem;
    color: #f1948a;
    text-align: center;
    line-height: 1.5;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}


.clash-modal-box {
    max-width: 960px;
    width: 95%;
    max-height: calc(100vh - var(--header-height, 84px) - 20px);
    max-height: calc(100dvh - var(--header-height, 84px) - 20px);
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at center, rgba(35, 27, 20, 0.94) 0%, rgba(21, 16, 12, 0.97) 100%);
    border: 2px solid #b8860b;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(184, 134, 11, 0.2);
    border-radius: 8px;
    padding: 16px 24px;
    overflow-y: auto;
}

.clash-modal-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(184, 134, 11, 0.4);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.clash-header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b0000, #4a0000);
    color: #ffd700;
    font-size: 13px;
    font-weight: bold;
    padding: 3px 14px;
    border-radius: 12px;
    border: 1px solid #ffd700;
    margin: 0;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.clash-modal-header h2 {
    font-size: 20px;
    color: #f7e6c4;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    white-space: nowrap;
    flex-shrink: 0;
}

.clash-period-hint {
    text-align: center;
    font-size: 12px;
    color: #d4af37;
    margin: 0 0 14px 0;
}

/* 場（アリーナ・対決フィールド）：画面幅に関わりなく常に縦並び */
.clash-arena-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(10, 8, 6, 0.65);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    width: 100%;
    box-sizing: border-box;
}

.clash-field-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 280px;
}

.clash-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 260px;
    gap: 8px;
    margin-bottom: 6px;
}

.side-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.side-badge.player {
    background: #1b4965;
    color: #e0fbfc;
    border: 1px solid #62b6cb;
}

.side-badge.enemy {
    background: #6a040f;
    color: #ffccd5;
    border: 1px solid #dc2f02;
}

.side-status {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    flex-shrink: 0;
}

.clash-card-slot {
    width: 170px;
    min-height: 235px;
    border: 2px dashed rgba(184, 134, 11, 0.4);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    background: rgba(20, 16, 12, 0.5);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.clash-card-slot.has-card {
    border: 2px solid #ffd700;
    background: rgba(30, 24, 16, 0.8);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.clash-slot-placeholder {
    font-size: 11px;
    color: #887;
    text-align: center;
    padding: 10px;
    line-height: 1.4;
}

/* VSディバイダー */
.clash-vs-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 4px 0;
}

.clash-vs-badge {
    font-size: 24px;
    font-weight: 900;
    color: #e63946;
    text-shadow: 0 0 10px rgba(230, 57, 70, 0.8), 0 2px 4px #000;
    letter-spacing: 2px;
    line-height: 1;
}

.clash-order-step {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    border: 1px solid #444;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.clash-order-step.player {
    border-color: #62b6cb;
    background: rgba(27, 73, 101, 0.4);
}

.clash-order-step.enemy {
    border-color: #dc2f02;
    background: rgba(106, 4, 15, 0.4);
}

.clash-order-step .step-name {
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.clash-order-step .step-imp {
    color: #ffd700;
    font-weight: bold;
}

/* 敵側カードの場への投下演出 */
.enemy-card-slammed {
    animation: enemyCardSlam 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes enemyCardSlam {
    0% {
        transform: translateY(-50px) scale(1.3) rotate(-5deg);
        opacity: 0;
    }
    70% {
        transform: translateY(4px) scale(0.97) rotate(1deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

.player-card-slammed {
    animation: playerCardSlam 0.35s ease-out forwards;
}

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

/* プレイヤー手札選択セクション */
.clash-player-hand-section {
    background: rgba(16, 12, 9, 0.75);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 6px;
    padding: 12px;
}

.clash-hand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.clash-hand-header h3 {
    margin: 0;
    font-size: 14px;
    color: #ffd700;
}

.clash-hand-hint {
    font-size: 11px;
    color: #aaa;
}

.clash-cards-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 26px 12px 14px 12px;
    min-height: 275px;
    align-items: flex-end;
    box-sizing: border-box;
}

/* 場のスロット内のカードはホバーで上に飛び出さないように固定 */
.clash-card-slot .card-frame {
    cursor: default;
    transition: none !important;
}
.clash-card-slot .card-frame:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

.clash-player-card-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s ease;
    flex-shrink: 0;
    border-radius: 8px;
}

/* 手札内の子カード要素の二重ホバー飛び出しを無効化 */
.clash-player-card-item .card-frame {
    transition: none !important;
}
.clash-player-card-item .card-frame:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

.clash-player-card-item.usable:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 24px rgba(255, 215, 0, 0.45);
    z-index: 10;
}

.clash-player-card-item.selected {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 0 20px #ffd700, 0 10px 25px rgba(0, 0, 0, 0.8);
    outline: 3px solid #ffd700;
    z-index: 10;
}

.clash-player-card-item.unusable-era {
    cursor: not-allowed;
    filter: grayscale(85%) opacity(0.5);
}

.era-mismatch-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #ff6b6b;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.3;
}

.mastermind-dead-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 0, 0, 0.78);
    color: #ff4d4d;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 11.5px;
    font-weight: bold;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.35;
    padding: 6px;
    border: 2px solid rgba(255, 60, 60, 0.5);
    box-sizing: border-box;
}

/* フッター操作ボタン */
.clash-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(184, 134, 11, 0.3);
}

.btn-clash-skip {
    background: #3a2e22;
    color: #ccc;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid #776249;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
}

.skip-btn-main,
.skip-btn-sub {
    white-space: nowrap;
}

.btn-clash-skip:hover {
    background: #4d3d2e;
    color: #fff;
    border-color: #b8860b;
}

.btn-clash-skip.active {
    background: #5c432d;
    color: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.btn-clash-execute {
    background: linear-gradient(135deg, #a67c1e, #684807);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 28px;
    border: 2px solid #ffd700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
}

.btn-clash-execute:hover:not(:disabled) {
    background: linear-gradient(135deg, #c99828, #825b0b);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    transform: translateY(-2px);
}

.btn-clash-execute:disabled {
    background: #333;
    color: #777;
    border-color: #555;
    cursor: not-allowed;
    opacity: 0.6;
}