/* ==================================================
   [LOGLINE BATTLER] OFFICIAL STYLE SHEET: colosseum.css
   夜の闘技場（ダークコロシアム）世界観を表現するCSS。
   BiNDupとの衝突を避けるため、すべての独自クラスに「lb-」接頭辞を付与しています。
   ================================================== */

/* ========================================================
   闘技場背景（大理石・月光）の鉄壁指定
   ======================================================== */
body {
    /* 相対パスで _userdata/images/ フォルダの背景画像を読み込みます */
    background-image: url('../images/dark_colosseum_background.png') !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-color: #050b14 !important;
}

/* コロシアム固有のタイトル文字（BiNDup全体のh1と衝突しないよう限定化） */
.lb-colosseum-box h1, .lb-colosseum-h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8rem !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.6) !important;
    font-family: "Georgia", "Hiragino Mincho ProN", serif;
}

/* メインの大理石風ダークフレーム（カプセル化シールド） */
.lb-colosseum-box {
    background: linear-gradient(135deg, rgba(10, 20, 38, 0.95), rgba(16, 28, 54, 0.95)) !important;
    border: 2px solid #d97706 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(217, 119, 6, 0.25) !important;
    padding: 20px;
    color: #f8fafc !important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

/* テーブル（表）の内側の線、ダークシアンで統一 */
.lb-colosseum-box table th, .lb-colosseum-box table td, .lb-ranking-table th, .lb-ranking-table td {
    border-bottom: 1px solid rgba(38, 70, 112, 0.4) !important;
    padding: 12px !important;
    color: #f8fafc !important;
    text-align: left;
}

/* 属性バッジ */
.lb-type-badge {
    display: inline-block !important;
    background: rgba(16, 28, 54, 0.8) !important;
    color: #d97706 !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    margin-right: 4px !important;
    margin-bottom: 4px !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    font-weight: bold;
}

/* 弱点バッジ（赤色：#ef4444） */
.lb-type-badge.lb-weakness-badge {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* ドラッグ＆ドロップ検証エリア */
.lb-drop-zone {
    border: 2px dashed rgba(217, 119, 6, 0.5) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    text-align: center !important;
    background: rgba(10, 20, 38, 0.6) !important;
    cursor: pointer !important;
    margin-bottom: 25px !important;
    transition: 0.2s !important;
}
.lb-drop-zone.dragover {
    border-color: #f59e0b !important;
    background: rgba(38, 70, 112, 0.3) !important;
}
.lb-drop-zone p {
    margin-bottom: 10px !important;
    color: #cbd5e1 !important;
    font-size: 0.9rem;
}

/* 闘技場アンバーゴールドボタン */
.lb-btn {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    transition: all 0.2s ease-in-out !important;
}
.lb-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.5) !important;
}

/* タブ切り替えUI */
.lb-nav-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(38, 70, 112, 0.6) !important;
}
.lb-tab-btn {
    padding: 10px 20px !important;
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    transition: 0.2s !important;
}
.lb-tab-btn.active {
    color: #ffffff !important;
    border-bottom-color: #d97706 !important;
    font-weight: bold !important;
}
.lb-tab-content {
    display: none !important;
}
.lb-tab-content.active {
    display: block !important;
}

/* ランキングテーブル */
.lb-ranking-table {
    width: 100% !important;
    border-collapse: collapse !important;
    overflow: hidden !important;
    margin-top: 10px;
}
.lb-ranking-table th {
    background: rgba(16, 28, 54, 0.9) !important;
    color: #cbd5e1 !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
}
.lb-ranking-table tr:hover {
    background: rgba(38, 70, 112, 0.3) !important;
    cursor: pointer !important;
}
.lb-rank-num {
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

/* ランキング1位〜3位：ネオンホログラム */
.lb-colosseum-box table td.lb-rank-1 {
    color: #ffd700 !important;
    font-size: 1.25rem !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important;
}
.lb-colosseum-box table td.lb-rank-2 {
    color: #e2e8f0 !important;
    font-size: 1.15rem !important;
    text-shadow: 0 0 8px rgba(226, 232, 240, 0.6) !important;
}
.lb-colosseum-box table td.lb-rank-3 {
    color: #f97316 !important;
    font-size: 1.1rem !important;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.6) !important;
}

/* メイン・サブ共通モーダルレイアウト */
.lb-modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
}
.lb-modal-content {
    background: #111827 !important;
    color: #f8fafc !important;
    width: 90% !important;
    max-width: 650px !important;
    max-height: 85vh !important;
    border-radius: 12px !important;
    padding: 24px !important;
    border: 2px solid #d97706 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important;
    overflow-y: auto !important;
    position: relative !important;
}
.lb-close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 18px !important;
    font-size: 28px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    transition: 0.2s !important;
    line-height: 1;
}
.lb-close-btn:hover {
    color: #ffffff !important;
}

/* 詳細ログカード */
.lb-history-card {
    background: rgba(10, 20, 38, 0.8) !important;
    border-left: 4px solid #3b82f6 !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}
.lb-history-card.win {
    border-left-color: #10b981 !important;
}
.lb-history-card.loss {
    border-left-color: #ef4444 !important;
}
.lb-history-card.draw {
    border-left-color: #f59e0b !important;
}
.lb-history-detail {
    color: #94a3b8 !important;
    font-size: 12px !important;
    margin-top: 6px !important;
    font-family: monospace !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 6px !important;
    border-radius: 4px !important;
    line-height: 1.4 !important;
}
.lb-opponent-link {
    color: #ffd700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-weight: bold !important;
}
.lb-opponent-link:hover {
    color: #f59e0b !important;
}
.lb-sub-modal-content {
    background: #0f172a !important;
    border: 2px solid #ef4444 !important;
}

/* リプレイ（バトルステージ）画面のレイアウト */
.lb-replay-stage {
    text-align: center !important;
    min-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.lb-versus-header {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}
.lb-fighter-box {
    width: 42% !important;
}
.lb-hp-bar-outer {
    background: #1e293b !important;
    height: 16px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.lb-hp-bar-inner {
    background: linear-gradient(90deg, #10b981, #059669) !important;
    height: 100% !important;
    width: 100% !important;
    transition: width 0.3s ease-out-in !important;
}
.lb-battle-log-text {
    font-size: 1.1rem !important;
    min-height: 60px !important;
    padding: 15px !important;
    background: rgba(5, 11, 20, 0.85) !important;
    border-radius: 8px !important;
    margin: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(38, 70, 112, 0.4) !important;
    line-height: 1.5 !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}
.lb-replay-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 10px;
}

/* ステータス簡易グリッド（モーダル内） */
.lb-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    text-align: center !important;
}
.lb-stat-card {
    background: rgba(16, 28, 54, 0.5) !important;
    padding: 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(38, 70, 112, 0.3) !important;
}
.lb-stat-val {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: #ffffff !important;
}
.lb-stat-label {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
}

/* 必殺技ボックス */
.lb-special-move-box {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15), rgba(180, 83, 9, 0.05)) !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 15px 0 !important;
}

/* スケジュールカウントダウンタイマー */
#lb-timer-area {
    margin: 15px 0 25px 0 !important;
    text-align: center !important;
}
#timerText {
    font-weight: bold !important;
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.4) !important;
    font-size: 1.15rem !important;
}

/* バトルモーダル・アニメーション演出 */
.fighter-card {
    position: relative;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
}

.fighter-card.shake {
    animation: card-shake 0.4s ease-in-out;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

@keyframes card-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    12% { transform: translate(-6px, 2px) rotate(-1.5deg); }
    25% { transform: translate(5px, -1px) rotate(1.5deg); }
    37% { transform: translate(-5px, -1px) rotate(-1deg); }
    50% { transform: translate(4px, 2px) rotate(1deg); }
    62% { transform: translate(-3px, -1px) rotate(-0.5deg); }
    75% { transform: translate(2px, 1px) rotate(0.5deg); }
    87% { transform: translate(-1px, -1px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.damage-pop {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: #ff4757;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px 0px 8px rgba(255, 71, 87, 0.8);
    pointer-events: none;
    opacity: 0;
    z-index: 100;
}

.damage-pop.show {
    animation: damage-float-up 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes damage-float-up {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(0.4); }
    20% { opacity: 1; transform: translate(-50%, -10px) scale(1.2); }
    50% { opacity: 1; transform: translate(-50%, -20px) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50px) scale(0.8); }
}

.effect-badge {
    display: inline-block;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    margin-top: 8px;
    min-height: 1.2rem;
    font-family: monospace;
}

.versus-divider {
    font-size: 1.8rem;
    font-weight: bold;
    color: #d97706;
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
    animation: vs-pulse 2s infinite ease-in-out;
}

@keyframes vs-pulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(217, 119, 6, 0.5); }
    50% { transform: scale(1.1); text-shadow: 0 0 20px rgba(217, 119, 6, 0.9); }
}

/* 一撃必殺（弱点撃破）専用演出 */
.battle-modal-flash {
    animation: screen-flash 0.5s ease-out;
}

@keyframes screen-flash {
    0% { background-color: rgba(255, 255, 255, 0.9); }
    100% { background-color: rgba(15, 23, 42, 0.6); }
}

.fighter-card.fatal-shake {
    animation: card-fatal-shake 0.6s ease-in-out;
    box-shadow: 0 0 35px #ffd700, 0 0 15px #ff4500 !important;
    border: 2px solid #ffd700 !important;
}

@keyframes card-fatal-shake {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    10% { transform: translate(-12px, -8px) rotate(-4deg) scale(1.05); }
    20% { transform: translate(14px, 8px) rotate(4deg) scale(0.95); }
    30% { transform: translate(-15px, 5px) rotate(-3deg) scale(1.08); }
    40% { transform: translate(12px, -5px) rotate(3deg) scale(0.98); }
    50% { transform: translate(-10px, 10px) rotate(-5deg) scale(1.1); }
    60% { transform: translate(10px, -8px) rotate(4deg) scale(0.95); }
    70% { transform: translate(-5px, 5px) rotate(-2deg) scale(1.03); }
    80% { transform: translate(5px, -5px) rotate(2deg) scale(0.98); }
    90% { transform: translate(-2px, 2px) rotate(-1deg) scale(1.01); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.damage-pop.fatal-shatter {
    color: #ffd700 !important;
    font-size: 3.8rem !important;
    text-shadow:
        -3px -3px 0 #000,
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000,
         0px 0px 20px #ffaa00,
         0px 0px 10px #ffd700;
    z-index: 150;
}

.damage-pop.fatal-shatter.show {
    animation: damage-fatal-pop 1.2s cubic-bezier(0.15, 0.85, 0.35, 1.5) forwards;
}

@keyframes damage-fatal-pop {
    0% { opacity: 0; transform: translate(-50%, 40px) scale(0.2) rotate(-20deg); }
    15% { opacity: 1; transform: translate(-50%, -15px) scale(1.6) rotate(15deg); }
    40% { opacity: 1; transform: translate(-50%, -25px) scale(1.2) rotate(-10deg); }
    70% { opacity: 0.9; transform: translate(-50%, -35px) scale(1.0) rotate(5deg); }
    100% { opacity: 0; transform: translate(-50%, -80px) scale(0.7) rotate(0deg); }
}

/* 縦長カードゲーム仕様 */
.fighter-card {
    flex: none !important;
    width: 220px !important;
    height: 310px !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px !important;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.3s ease;
}

.battle-stage {
    display: flex;
    justify-content: center !important;
    align-items: center;
    margin: 25px 0;
    gap: 30px !important;
}

.card-bottom-icons {
    width: 100%;
    min-height: 50px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-bottom-icons img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
    transition: all 0.3s ease;
}

/* 弱点エリア専用赤ネオン＆パルス演出 */
.weakness-neon-box {
    border: 1px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 0 8px rgba(239, 68, 68, 0.3) !important;
    animation: weakness-pulse 2s infinite ease-in-out;
}

.weakness-neon-box img {
    filter: drop-shadow(0 0 6px #ef4444) !important;
}

@keyframes weakness-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.4), inset 0 0 6px rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), inset 0 0 12px rgba(239, 68, 68, 0.5);
        border-color: #ef4444;
    }
}

/* 上部へ戻るボタン */
.lb-back-to-top {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 999 !important;
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    border: 1px solid #f59e0b !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(217, 119, 6, 0.4) !important;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.lb-back-to-top.show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.lb-back-to-top:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.8) !important;
    transform: translateY(-4px) scale(1.08) !important;
}

/* ==================================================
   【スマホ・タブレット対応】レスポンシブWebデザイン
   ================================================== */
@media (max-width: 768px) {
    
    /* 1. 全体コンテナの余白調整 */
    .lb-colosseum-box {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    /* 2. タイトルロゴのフォントサイズ調整 */
    .lb-colosseum-h1 {
        font-size: 1.3rem !important;
    }

    /* 3. ランキングテーブルの横スクロール化 */
    #rankingTab {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .lb-ranking-table {
        min-width: 600px !important; /* テーブル最小幅を確保し、横スクロール可能に */
    }

    .lb-ranking-table th, 
    .lb-ranking-table td {
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
    }

    /* 4. モーダルの表示幅拡大 */
    .lb-modal-content {
        width: 95% !important;
        padding: 16px !important;
        max-height: 90vh !important;
    }

    /* 5. 対戦ステージ：カードを縦並びに変更 */
    .battle-stage {
        flex-direction: column !important; /* 横並びから縦並びに切替 */
        gap: 15px !important;
        align-items: center !important;
    }

    /* カード本体のサイズ調整 */
    .fighter-card {
        width: 100% !important;
        max-width: 260px !important; /* スマホでちょうど良いカードサイズ */
        height: 320px !important;
    }

    /* VSマークのサイズ・余白調整 */
    .versus-divider {
        font-size: 1.6rem !important;
        margin: 5px 0 !important;
    }

    /* 6. コントロールボタン群の折り返し配置 */
    .battle-controls, .lb-replay-controls {
        gap: 6px !important;
    }

    .battle-controls .lb-btn, .lb-btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }

    /* 7. ステータス簡易グリッドの調整 */
    .lb-stats-grid {
        gap: 6px !important;
    }

    .lb-stat-card {
        padding: 6px !important;
    }

    .lb-stat-val {
        font-size: 1.1rem !important;
    }

    /* 8. 上部へ戻るボタンの位置調整 */
    .lb-back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 0.75rem !important;
    }

    /* スマホ表示時：.col-logline と .col-stats のクラスがついた列を消す */
    .col-logline,
    .col-stats {
        display: none !important;
    }

    /* 列数が減った分、テーブル最小幅の制限を解除して画面幅にぴったりフィットさせる */
    .lb-ranking-table {
        min-width: 100% !important;
    }
}

/* ==================================================
   ランキング表 案内注記スタイル
   ================================================== */
.lb-table-notice {
    font-size: 0.85rem;
    color: #ffd700;                  /* 黄金色で視認性を確保 */
    text-align: right;               /* PC画面では右寄せで控えめに表示 */
    margin-bottom: 8px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* スマホ表示時（768px以下）のレイアウト調整 */
@media (max-width: 768px) {
    .lb-table-notice {
        text-align: center;          /* スマホ画面では中央寄せ */
        font-size: 0.8rem;
        background: rgba(16, 28, 54, 0.7); /* 暗めの背景でくっきり強調 */
        border: 1px solid rgba(217, 119, 6, 0.4); /* アンバーゴールドの小さな枠線 */
        padding: 6px 10px;
        border-radius: 6px;
        margin-bottom: 12px;
    }
}

/* ==================================================
   共通ヘッダーナビゲーション (Dark Colosseum仕様)
   ================================================== */
.lb-global-header {
    background: linear-gradient(135deg, rgba(10, 20, 38, 0.95), rgba(16, 28, 54, 0.95)) !important;
    border: 1px solid #d97706 !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.25) !important;
}

.lb-header-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.lb-header-link {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: bold !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.lb-header-link:hover {
    color: #ffd700 !important;
    background: rgba(217, 119, 6, 0.2) !important;
    border-color: rgba(217, 119, 6, 0.5) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* 現在のページ（アクティブ状態）のスタイル */
.lb-header-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* スマホ・タブレット（768px以下）表示時の調整 */
@media (max-width: 768px) {
    .lb-global-header {
        padding: 8px 10px !important;
        margin-bottom: 15px !important;
    }

    .lb-header-inner {
        gap: 6px 6px !important;
    }

    .lb-header-link {
        font-size: 0.78rem !important;
        padding: 5px 8px !important;
    }
}

/* ==================================================
   お知らせ・更新ニュース欄スタイル
   ================================================== */
.lb-news-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lb-news-list li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(38, 70, 112, 0.4) !important;
    font-size: 0.9rem !important;
    flex-wrap: wrap !important;
}

.lb-news-list li:last-child {
    border-bottom: none !important;
}

.lb-news-date {
    color: #94a3b8 !important;
    font-family: monospace !important;
    font-size: 0.85rem !important;
}

.lb-news-badge {
    background: rgba(38, 70, 112, 0.6) !important;
    color: #cbd5e1 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* NEWバッジ（赤ネオン強調） */
.lb-news-badge.new {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4) !important;
}

.lb-news-text {
    color: #f8fafc !important;
    flex: 1 !important;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .lb-news-list li {
        gap: 6px 10px !important;
    }
    .lb-news-text {
        width: 100% !important; /* スマホでは文章を改行して全幅表示 */
    }
}

@media (max-width: 768px) {

    /* ==================================================
       対戦再生モーダルのスマホ全画面（フルスクリーン）化
       ================================================== */
    #battle-modal .lb-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important; /* スマホのアドレスバー伸縮に対応 */
        border-radius: 0 !important;   /* 全画面化のため角丸を解除 */
        border: none !important;        /* 外枠を解除 */
        padding: 12px 10px !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* 閉じるボタン（×）を画面右上に押しやすく配置 */
    #battle-modal .lb-close-btn {
        top: 10px !important;
        right: 14px !important;
        font-size: 32px !important;
        z-index: 100 !important;
    }
}

/* ==================================================
   news.html 専用 枠内スクロールバー（Dark Colosseum仕様）
   ================================================== */
.lb-news-scroll-container {
    max-height: 480px !important;  /* 枠の高さ（PCで約8〜10件分が表示される高さ） */
    overflow-y: auto !important;   /* 溢れた分はスクロール化 */
    padding-right: 10px !important;/* バーと文字の重なり防止 */
    overscroll-behavior: contain !important; /* スマホ操作時の誤スクロール防止 */
}

/* スクロールバー本体 */
.lb-news-scroll-container::-webkit-scrollbar {
    width: 6px !important;
}

/* スクロールバーのレール（背景） */
.lb-news-scroll-container::-webkit-scrollbar-track {
    background: rgba(10, 20, 38, 0.6) !important;
    border-radius: 3px !important;
}

/* スクロールバーのつまみ（ゴールド） */
.lb-news-scroll-container::-webkit-scrollbar-thumb {
    background: #d97706 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.5) !important;
}

.lb-news-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #f59e0b !important;
}

/* ==================================================
   共通ヘッダーナビゲーション (ロゴ＋2段ナビ対応拡張)
   ================================================== */
.lb-global-header {
    background: linear-gradient(135deg, rgba(10, 20, 38, 0.95), rgba(16, 28, 54, 0.95)) !important;
    border: 1px solid #d97706 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.25) !important;
}

/* ロゴとナビ群を左右に配置するラッパー */
.lb-header-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

/* ロゴ画像スタイル */
.lb-header-logo img {
    height: 60px !important; /* ロゴの高さ */
    width: auto !important;
    display: block !important;
    transition: transform 0.2s ease !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}
.lb-header-logo img:hover {
    transform: scale(1.03) !important;
}

/* ナビゲーションリンク群（右寄せ・デフォルト2段で綺麗に折り返し） */
.lb-header-inner {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    flex: 1 !important;
    max-width: 600px !important; /* PC時に自然に2段へ分かれる幅 */
}

/* 各ナビリンクボタン */
.lb-header-link {
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 0.82rem !important;
    font-weight: bold !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease-in-out !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.lb-header-link:hover {
    color: #ffd700 !important;
    background: rgba(217, 119, 6, 0.2) !important;
    border-color: rgba(217, 119, 6, 0.5) !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* アクティブページのボタン強調 */
.lb-header-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* スマホ・タブレット（768px以下）表示時の調整 */
@media (max-width: 768px) {
    .lb-header-wrapper {
        flex-direction: column !important; /* 中央縦並びに切り替え */
        align-items: center !important;
        gap: 10px !important;
    }
    .lb-header-logo img {
        height: 36px !important; /* スマホ用にロゴを少し小さく */
    }
    .lb-header-inner {
        justify-content: center !important; /* スマホでは中央寄せ */
        max-width: 100% !important;
        gap: 4px 6px !important;
    }
    .lb-header-link {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
}