/* ============================================================
   Rich Theme - リッチUIテーマ
   body.theme-rich で有効化
   グラデーション・グロー・テクスチャで高級感を演出
   ============================================================ */

/* === CSS変数 === */
body.theme-rich {
    --rich-glow-primary: rgba(74, 144, 217, 0.35);
    --rich-glow-gold: rgba(240, 192, 64, 0.3);
    --rich-border: rgba(100, 140, 200, 0.22);
    --rich-border-bright: rgba(100, 140, 200, 0.45);
    --rich-panel-bg: linear-gradient(180deg, rgba(28, 28, 52, 0.97) 0%, rgba(18, 18, 35, 0.99) 100%);
    --rich-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --rich-inset-bot: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ============================================================
   1. バトル画面 - 構造
   ============================================================ */

/* --- BGMコントロールバー --- */
body.theme-rich .bgm-control-bar {
    background: linear-gradient(180deg, rgba(22, 22, 42, 0.98) 0%, rgba(16, 16, 32, 0.99) 100%);
    border-bottom: 1px solid var(--rich-border);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

body.theme-rich .bgm-track-select,
body.theme-rich .bgm-control-bar select {
    background: rgba(30, 30, 55, 0.8);
    border-color: var(--rich-border);
    color: var(--color-text);
}

/* --- プレイヤー情報バー --- */
body.theme-rich .player-info-bar {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(30, 30, 55, 0.96) 0%, rgba(20, 20, 40, 0.98) 100%);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
        transparent 0%,
        var(--rich-border-bright) 25%,
        rgba(120, 160, 220, 0.5) 50%,
        var(--rich-border-bright) 75%,
        transparent 100%) 1;
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        var(--rich-inset-top),
        var(--rich-inset-bot);
}

body.theme-rich .player-info-name {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
}

body.theme-rich .player-info-lp {
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.35);
}

body.theme-rich .player-info-sp {
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.35);
}

body.theme-rich .player-icon {
    border: 2px solid var(--rich-border-bright);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--rich-glow-primary), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* --- 属性バッジ --- */
body.theme-rich .attr-badge {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    font-weight: bold;
}

body.theme-rich .attr-badge.refess {
    background: linear-gradient(180deg, #f0c840, #c8a020);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(240, 192, 64, 0.25);
}

body.theme-rich .attr-badge.lawtia {
    background: linear-gradient(180deg, #9050d0, #6830a0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(128, 64, 192, 0.25);
}

body.theme-rich .attr-badge.gowen {
    background: linear-gradient(180deg, #e04848, #b03030);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(208, 64, 64, 0.25);
}

body.theme-rich .attr-badge.falkow {
    background: linear-gradient(180deg, #4890e0, #2868b8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 6px rgba(64, 128, 208, 0.25);
}

/* ============================================================
   2. シールドバー
   ============================================================ */

body.theme-rich .shield-bar {
    background: linear-gradient(180deg,
        rgba(10, 10, 25, 0.45) 0%,
        rgba(0, 0, 0, 0.3) 100%);
    border-top: 1px solid rgba(240, 192, 64, 0.08);
    border-bottom: 1px solid rgba(240, 192, 64, 0.08);
}

body.theme-rich .shield-icon {
    border: 2px solid rgba(240, 192, 64, 0.65);
    background: linear-gradient(180deg, rgba(45, 45, 74, 0.9) 0%, rgba(28, 28, 50, 0.95) 100%);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(240, 192, 64, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.25s;
}

body.theme-rich .shield-icon:hover {
    border-color: rgba(240, 192, 64, 0.9);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(240, 192, 64, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

body.theme-rich .shield-icon.broken {
    border-color: rgba(80, 80, 100, 0.4);
    box-shadow: none;
    opacity: 0.35;
}

body.theme-rich .shield-lp {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 6px rgba(240, 192, 64, 0.3);
}

/* ============================================================
   3. フィールドエリア
   ============================================================ */

/* --- フィールドセル --- */
body.theme-rich .field-cell {
    border: 1px solid rgba(80, 120, 180, 0.18);
    border-radius: 4px;
    background:
        linear-gradient(135deg,
            rgba(40, 40, 75, 0.22) 0%,
            rgba(25, 25, 50, 0.12) 50%,
            rgba(40, 40, 75, 0.22) 100%);
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.2),
        0 1px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.25s;
}

body.theme-rich .field-cell:hover {
    border-color: rgba(74, 144, 217, 0.5);
    background:
        linear-gradient(135deg,
            rgba(74, 144, 217, 0.1) 0%,
            rgba(74, 144, 217, 0.05) 50%,
            rgba(74, 144, 217, 0.1) 100%);
    box-shadow:
        inset 0 0 20px rgba(74, 144, 217, 0.06),
        0 0 10px rgba(74, 144, 217, 0.12);
}

body.theme-rich .field-cell.highlight {
    border-color: rgba(76, 175, 80, 0.6);
    background: rgba(76, 175, 80, 0.1);
    box-shadow:
        0 0 12px rgba(76, 175, 80, 0.2),
        inset 0 0 14px rgba(76, 175, 80, 0.06);
}

body.theme-rich .field-cell.attack-target {
    border-color: rgba(208, 64, 64, 0.6);
    background: rgba(208, 64, 64, 0.1);
    box-shadow:
        0 0 12px rgba(208, 64, 64, 0.2),
        inset 0 0 14px rgba(208, 64, 64, 0.06);
}

/* --- フィールドユニット --- */
body.theme-rich .field-unit {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    border-radius: 3px;
}

body.theme-rich .field-unit.element-0 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(240, 192, 64, 0.18);
}

body.theme-rich .field-unit.element-1 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(128, 64, 192, 0.18);
}

body.theme-rich .field-unit.element-2 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(208, 64, 64, 0.18);
}

body.theme-rich .field-unit.element-3 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 8px rgba(64, 128, 208, 0.18);
}

body.theme-rich .field-unit.current-action {
    box-shadow:
        0 0 18px rgba(240, 220, 80, 0.7),
        0 0 6px rgba(240, 220, 80, 0.5),
        inset 0 0 4px rgba(240, 220, 80, 0.15);
}

body.theme-rich .field-unit-overlay {
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.88) 100%);
}

body.theme-rich .field-unit-overlay .unit-name {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.5);
}

/* --- 時間帯バー --- */
body.theme-rich .time-of-day-bar {
    position: relative;
    text-shadow: 0 0 10px currentColor;
}

body.theme-rich .time-of-day-bar::before,
body.theme-rich .time-of-day-bar::after {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    height: 1px;
    pointer-events: none;
}

body.theme-rich .time-of-day-bar::before {
    top: 0;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.25;
}

body.theme-rich .time-of-day-bar::after {
    bottom: 0;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.25;
}

/* ============================================================
   4. フェーズインジケーター
   ============================================================ */

body.theme-rich .phase-indicator-column {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(22, 22, 42, 0.92) 0%, rgba(14, 14, 30, 0.96) 100%);
    border-left: 1px solid var(--rich-border);
    box-shadow: inset 2px 0 10px rgba(0, 0, 0, 0.25);
}

body.theme-rich .phase-turn-number {
    text-shadow: 0 0 12px rgba(74, 144, 217, 0.5);
}

body.theme-rich .phase-step {
    background: rgba(30, 30, 55, 0.5);
    border: 1px solid rgba(80, 120, 180, 0.08);
    border-radius: 4px;
    transition: all 0.3s;
}

body.theme-rich .phase-step.active {
    background: linear-gradient(180deg,
        rgba(74, 144, 217, 0.7) 0%,
        rgba(50, 110, 180, 0.8) 100%);
    border-color: rgba(100, 170, 240, 0.55);
    box-shadow:
        0 0 14px rgba(74, 144, 217, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
}

body.theme-rich .phase-timer-value {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

body.theme-rich .phase-timer-value.warning {
    text-shadow: 0 0 10px rgba(240, 192, 64, 0.5);
}

body.theme-rich .phase-timer-value.critical {
    text-shadow: 0 0 12px rgba(208, 64, 64, 0.5);
}

/* ============================================================
   5. サイドパネル
   ============================================================ */

body.theme-rich .battle-side-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(25, 25, 48, 0.97) 0%, rgba(16, 16, 32, 0.99) 100%);
    border-left: 1px solid var(--rich-border);
    box-shadow:
        -4px 0 22px rgba(0, 0, 0, 0.5),
        inset 1px 0 0 rgba(255, 255, 255, 0.025);
}

body.theme-rich .side-panel-tabs {
    background: linear-gradient(180deg, rgba(35, 35, 62, 0.85) 0%, rgba(25, 25, 48, 0.85) 100%);
    border-bottom: 1px solid var(--rich-border);
}

body.theme-rich .side-panel-tab {
    transition: all 0.3s;
}

body.theme-rich .side-panel-tab:hover {
    color: #fff;
    background: rgba(74, 144, 217, 0.06);
}

body.theme-rich .side-panel-tab.active {
    color: var(--color-primary);
    text-shadow: 0 0 8px rgba(74, 144, 217, 0.4);
    border-bottom-color: var(--color-primary);
    background: linear-gradient(180deg, transparent, rgba(74, 144, 217, 0.08));
}

body.theme-rich .side-panel-lower {
    border-top: 1px solid var(--rich-border);
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(15, 15, 30, 0.65) 0%, rgba(10, 10, 22, 0.8) 100%);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* --- セットフェーズタイトル --- */
body.theme-rich .set-phase-title {
    text-shadow: 0 0 8px rgba(208, 64, 64, 0.3);
}

/* --- 属性上昇セクション --- */
body.theme-rich .attribute-raise-section {
    background: rgba(20, 20, 40, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(80, 120, 180, 0.08);
}

body.theme-rich .attr-up-btn,
body.theme-rich .attr-down-btn {
    background: linear-gradient(180deg, rgba(45, 45, 78, 0.9) 0%, rgba(30, 30, 55, 0.9) 100%);
    border: 1px solid var(--rich-border);
    color: var(--color-text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
}

body.theme-rich .attr-up-btn:hover,
body.theme-rich .attr-down-btn:hover {
    border-color: var(--rich-border-bright);
    box-shadow: 0 0 8px var(--rich-glow-primary), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   6. アクションバー・ボタン
   ============================================================ */

body.theme-rich .action-bar {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(30, 30, 55, 0.96) 0%, rgba(20, 20, 38, 0.98) 100%);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--rich-border-bright), transparent) 1;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35);
}

body.theme-rich .action-btn {
    background: linear-gradient(180deg,
        rgba(45, 45, 80, 0.9) 0%,
        rgba(28, 28, 52, 0.92) 100%);
    border: 1px solid var(--rich-border);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        var(--rich-inset-top);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: all 0.25s;
}

body.theme-rich .action-btn:hover {
    border-color: var(--rich-border-bright);
    background: linear-gradient(180deg,
        rgba(55, 55, 95, 0.95) 0%,
        rgba(38, 38, 68, 0.95) 100%);
    box-shadow:
        0 0 14px var(--rich-glow-primary),
        0 2px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-rich .action-btn.primary {
    background: linear-gradient(180deg,
        rgba(74, 144, 217, 0.75) 0%,
        rgba(50, 110, 180, 0.85) 100%);
    border-color: rgba(100, 170, 240, 0.55);
    box-shadow:
        0 0 12px rgba(74, 144, 217, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.theme-rich .action-btn.primary:hover {
    background: linear-gradient(180deg,
        rgba(84, 154, 227, 0.85) 0%,
        rgba(60, 120, 195, 0.92) 100%);
    box-shadow:
        0 0 18px rgba(74, 144, 217, 0.45),
        0 2px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.theme-rich .action-btn.danger {
    border-color: rgba(208, 64, 64, 0.45);
    color: #e05050;
    text-shadow: 0 0 6px rgba(208, 64, 64, 0.25);
}

body.theme-rich .action-btn.danger:hover {
    box-shadow: 0 0 14px rgba(208, 64, 64, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.theme-rich .action-btn.skill {
    border-color: rgba(224, 160, 48, 0.45);
    color: #e0a030;
    text-shadow: 0 0 6px rgba(224, 160, 48, 0.25);
}

body.theme-rich .action-btn.skill:hover {
    box-shadow: 0 0 14px rgba(224, 160, 48, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   7. バトルログ
   ============================================================ */

body.theme-rich .battle-log-entry {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

body.theme-rich .battle-log-entry.log-entry-self {
    border-left-color: rgba(74, 144, 217, 0.6);
    text-shadow: 0 0 4px rgba(74, 144, 217, 0.15);
}

body.theme-rich .battle-log-entry.log-entry-opponent {
    border-left-color: rgba(208, 64, 64, 0.6);
    text-shadow: 0 0 4px rgba(208, 64, 64, 0.15);
}

body.theme-rich .log-turn {
    text-shadow: 0 0 6px rgba(74, 144, 217, 0.3);
}

/* ============================================================
   8. カード詳細パネル
   ============================================================ */

body.theme-rich .card-detail-image,
body.theme-rich .card-detail-panel img {
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
    border: 1px solid var(--rich-border);
}

body.theme-rich .stat-box {
    background: linear-gradient(180deg, rgba(35, 35, 60, 0.6) 0%, rgba(22, 22, 45, 0.75) 100%);
    border: 1px solid rgba(80, 120, 180, 0.1);
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-rich .stat-label {
    text-shadow: 0 0 4px rgba(170, 170, 170, 0.2);
}

body.theme-rich .stat-value {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}

/* ============================================================
   9. 装飾的区切り線（ディバイダー画像活用）
   ============================================================ */

body.theme-rich .detail-area-header {
    position: relative;
    padding-bottom: 12px;
}

body.theme-rich .detail-area-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 24px;
    background: url('/mayoteiru/images/ui/divider-h.webp') center center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: 0.6;
    pointer-events: none;
}

/* ============================================================
   10. ゲーム結果オーバーレイ
   ============================================================ */

body.theme-rich .game-result-card {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(28, 28, 52, 0.98) 0%, rgba(18, 18, 35, 0.99) 100%);
    border: 1px solid var(--rich-border-bright);
    box-shadow:
        0 8px 45px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(74, 144, 217, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-rich .game-result-text.win {
    text-shadow: 0 0 22px rgba(76, 175, 80, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
}

body.theme-rich .game-result-text.lose {
    text-shadow: 0 0 22px rgba(208, 64, 64, 0.5), 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   11. 接続ステータス
   ============================================================ */

body.theme-rich .connection-status.connected {
    background: rgba(64, 192, 96, 0.15);
    box-shadow: 0 0 8px rgba(64, 192, 96, 0.15);
    backdrop-filter: blur(4px);
}

body.theme-rich .connection-status.disconnected {
    background: rgba(208, 64, 64, 0.15);
    box-shadow: 0 0 8px rgba(208, 64, 64, 0.15);
    backdrop-filter: blur(4px);
}

/* ============================================================
   12. 汎用ボタン強化（.btn）
   ============================================================ */

body.theme-rich .btn {
    background: linear-gradient(180deg,
        rgba(45, 45, 80, 0.85) 0%,
        rgba(28, 28, 52, 0.9) 100%);
    border: 1px solid var(--rich-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), var(--rich-inset-top);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.25s;
}

body.theme-rich .btn:hover {
    border-color: var(--rich-border-bright);
    box-shadow: 0 0 10px var(--rich-glow-primary), 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.theme-rich .btn-primary,
body.theme-rich .btn.primary {
    background: linear-gradient(180deg,
        rgba(74, 144, 217, 0.75) 0%,
        rgba(50, 110, 180, 0.85) 100%);
    border-color: rgba(100, 170, 240, 0.5);
    box-shadow: 0 0 10px rgba(74, 144, 217, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.theme-rich .btn-primary:hover,
body.theme-rich .btn.primary:hover {
    box-shadow: 0 0 16px rgba(74, 144, 217, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.theme-rich .btn-danger {
    background: linear-gradient(180deg,
        rgba(208, 64, 64, 0.65) 0%,
        rgba(170, 45, 45, 0.75) 100%);
    border-color: rgba(208, 64, 64, 0.5);
    box-shadow: 0 0 8px rgba(208, 64, 64, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   13. デッキ編集画面
   ============================================================ */

body.theme-rich .card-list-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, var(--color-bg) 0%, rgba(18, 18, 35, 1) 100%);
    border-right: 1px solid var(--rich-border);
}

body.theme-rich .card-list-header {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(30, 30, 55, 0.95) 0%, rgba(22, 22, 42, 0.98) 100%);
    border-bottom: 1px solid var(--rich-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.theme-rich .card-list-header h2 {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

body.theme-rich .filter-row select,
body.theme-rich .filter-row input {
    background: rgba(30, 30, 55, 0.8);
    border: 1px solid var(--rich-border);
    color: var(--color-text);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s;
}

body.theme-rich .filter-row select:focus,
body.theme-rich .filter-row input:focus {
    border-color: var(--rich-border-bright);
    box-shadow: 0 0 6px var(--rich-glow-primary), inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.theme-rich .deck-edit-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(25, 25, 48, 0.97) 0%, rgba(18, 18, 35, 0.99) 100%);
    border-left: 1px solid var(--rich-border);
}

body.theme-rich .deck-edit-header {
    background: linear-gradient(180deg, rgba(35, 35, 60, 0.8) 0%, rgba(25, 25, 48, 0.85) 100%);
    border-bottom: 1px solid var(--rich-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.theme-rich .deck-edit-header h2 {
    text-shadow: 0 0 6px rgba(74, 144, 217, 0.2);
}

body.theme-rich .deck-edit-footer {
    background: linear-gradient(180deg, rgba(30, 30, 55, 0.95) 0%, rgba(22, 22, 42, 0.98) 100%);
    border-top: 1px solid var(--rich-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

body.theme-rich .deck-list-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(22, 22, 42, 0.95) 0%, rgba(16, 16, 32, 0.98) 100%);
}

/* デッキカード詳細パネル */
body.theme-rich .card-detail-side-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(22, 22, 42, 0.97) 0%, rgba(14, 14, 30, 0.99) 100%);
    border-left: 1px solid var(--rich-border);
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   14. 待機画面
   ============================================================ */

body.theme-rich .waiting-room-card {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        rgba(30, 30, 55, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--rich-border-bright);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(74, 144, 217, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.theme-rich .waiting-room-card h2 {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
    letter-spacing: 1px;
}

body.theme-rich .player-row {
    background: linear-gradient(180deg, rgba(40, 40, 68, 0.7) 0%, rgba(30, 30, 55, 0.8) 100%);
    border: 1px solid rgba(80, 120, 180, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-rich .status-dot.ready {
    box-shadow: 0 0 8px rgba(64, 192, 96, 0.5);
}

body.theme-rich .waiting-divider {
    text-shadow: 0 0 12px rgba(74, 144, 217, 0.4);
}

body.theme-rich .waiting-guest-placeholder {
    background: rgba(20, 20, 40, 0.4);
    border: 1px dashed var(--rich-border);
    border-radius: 8px;
}

/* ============================================================
   15. スタンプ選択パネル
   ============================================================ */

body.theme-rich .stamp-panel {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(28, 28, 52, 0.96) 0%, rgba(18, 18, 35, 0.98) 100%);
    border: 1px solid var(--rich-border-bright);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(74, 144, 217, 0.08);
}

/* ============================================================
   16. デバッグパネル
   ============================================================ */

body.theme-rich .debug-section {
    background: rgba(20, 20, 40, 0.35);
    border: 1px solid rgba(80, 120, 180, 0.06);
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

body.theme-rich .debug-section-title {
    text-shadow: 0 0 4px rgba(240, 192, 64, 0.2);
}

body.theme-rich .debug-input {
    background: rgba(25, 25, 48, 0.8);
    border: 1px solid var(--rich-border);
    color: var(--color-text);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.theme-rich .debug-input:focus {
    border-color: var(--rich-border-bright);
    box-shadow: 0 0 6px var(--rich-glow-primary);
}

/* ============================================================
   17. モーダル・トースト
   ============================================================ */

body.theme-rich .modal-content {
    background:
        url('/mayoteiru/images/ui/panel-texture.webp') center / 512px 512px repeat,
        linear-gradient(180deg, rgba(28, 28, 52, 0.98) 0%, rgba(18, 18, 35, 0.99) 100%);
    border: 1px solid var(--rich-border-bright);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(74, 144, 217, 0.1);
}

body.theme-rich .toast {
    background: linear-gradient(180deg, rgba(35, 35, 60, 0.95) 0%, rgba(25, 25, 48, 0.98) 100%);
    border: 1px solid var(--rich-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 8px var(--rich-glow-primary);
}

/* ============================================================
   18. スクロールバーカスタマイズ
   ============================================================ */

body.theme-rich ::-webkit-scrollbar {
    width: 6px;
}

body.theme-rich ::-webkit-scrollbar-track {
    background: rgba(15, 15, 30, 0.5);
}

body.theme-rich ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(74, 144, 217, 0.3) 0%, rgba(50, 100, 170, 0.25) 100%);
    border-radius: 3px;
}

body.theme-rich ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(74, 144, 217, 0.5) 0%, rgba(50, 100, 170, 0.4) 100%);
}

/* ============================================================
   19. オープンカードスロット
   ============================================================ */

body.theme-rich .open-card-slot {
    border: 1px solid var(--rich-border);
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

body.theme-rich .open-card-slot:not(.empty) {
    border-color: var(--rich-border-bright);
    box-shadow: 0 0 10px var(--rich-glow-primary), inset 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   20. 墓地・除外パネル
   ============================================================ */

body.theme-rich .zone-section {
    background: rgba(20, 20, 40, 0.3);
    border: 1px solid rgba(80, 120, 180, 0.06);
    border-radius: 6px;
    margin-bottom: 8px;
}

body.theme-rich .zone-section-header {
    background: linear-gradient(180deg, rgba(35, 35, 60, 0.5) 0%, transparent 100%);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(80, 120, 180, 0.06);
}

body.theme-rich .zone-card-item:hover {
    box-shadow: 0 0 8px var(--rich-glow-primary);
    border-color: var(--rich-border-bright);
}