/* ==========================================
   妖怪退魔録 〜無限百鬼夜行〜 - メインスタイル
   ========================================== */

/* --- CSS Variables --- */
:root {
    --bg-darkest: #0a0a0f;
    --bg-dark: #12121a;
    --bg-panel: #1a1a2e;
    --bg-panel-light: #222240;
    --bg-hover: #2a2a4a;
    --border-color: #333355;
    --border-glow: #6644aa;

    --text-primary: #e8e6f0;
    --text-secondary: #9995b0;
    --text-muted: #666680;

    --accent-primary: #8b5cf6;
    --accent-secondary: #d946ef;
    --accent-gold: #f59e0b;
    --accent-red: #ef4444;
    --accent-green: #22c55e;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;

    /* Element colors */
    --element-fire: #ff6b35;
    --element-water: #4fc3f7;
    --element-thunder: #ffeb3b;
    --element-earth: #a1887f;
    --element-wood: #66bb6a;

    /* Rarity colors */
    --rarity-common: #9e9e9e;
    --rarity-uncommon: #4caf50;
    --rarity-rare: #2196f3;
    --rarity-epic: #9c27b0;
    --rarity-legendary: #ff9800;
    --rarity-mythic: #ff1744;

    --font-main: 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background: var(--bg-darkest);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    overscroll-behavior: none;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

/* --- Screen Management --- */
.screen {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.screen.active { display: flex; flex-direction: column; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* ==========================================
   Buttons
   ========================================== */
.btn {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font-main);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn:hover { background: var(--bg-hover); border-color: var(--accent-primary); }
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
    border-color: var(--accent-primary);
}
.btn-primary:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.btn-secondary {
    background: var(--bg-panel-light);
    border-color: var(--border-color);
}
.btn-danger {
    background: linear-gradient(135deg, var(--accent-red), #dc2626);
    border-color: var(--accent-red);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 32px; font-size: 18px; }
.btn-back {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 12px;
    font-size: 14px;
}
.btn-back:hover { color: var(--text-primary); background: none; border: none; }
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================
   Title Screen
   ========================================== */
.title-bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
    position: relative;
    overflow: hidden;
}
.title-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.title-content {
    text-align: center;
    z-index: 2;
}
.title-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 48px;
}
.title-sub {
    font-size: 18px;
    letter-spacing: 12px;
    color: var(--accent-gold);
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}
.title-main {
    font-size: 56px;
    font-weight: 900;
    background: linear-gradient(180deg, #fff 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 20px rgba(139, 92, 246, 0.5));
}
.title-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* ==========================================
   Village Screen
   ========================================== */
.village-header {
    padding: 20px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.village-title {
    font-size: 24px;
    font-weight: 700;
}
.player-summary {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    gap: 16px;
}
.village-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
    align-content: start;
}
.village-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s;
    color: var(--text-primary);
    font-family: var(--font-main);
}
.village-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 0 20px rgba(139, 92, 246, 0.15);
}
.village-icon { font-size: 36px; }
.village-label { font-size: 16px; font-weight: 600; }
.village-desc { font-size: 11px; color: var(--text-muted); }

/* ==========================================
   Dungeon Select
   ========================================== */
.screen-header {
    padding: 16px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
}
.screen-header h2 { font-size: 20px; }

.dungeon-list {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dungeon-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}
.dungeon-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.dungeon-card.locked {
    opacity: 0.4;
    cursor: not-allowed;
}
.dungeon-card-icon { font-size: 32px; }
.dungeon-card-info { flex: 1; }
.dungeon-card-name { font-size: 16px; font-weight: 600; }
.dungeon-card-detail { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.dungeon-card-floors {
    font-size: 12px;
    color: var(--accent-gold);
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

/* ==========================================
   Battle Screen
   ========================================== */
.battle-header {
    padding: 10px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.floor-info {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}
#dungeon-name { font-size: 11px; color: var(--text-muted); }
#floor-display { font-size: 20px; font-weight: 700; color: var(--accent-gold); }

.player-bars {
    flex: 1;
    display: flex;
    gap: 12px;
}
.bar-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bar-label {
    font-size: 10px;
    font-weight: 700;
    width: 24px;
    text-align: right;
    color: var(--text-secondary);
}
.bar {
    flex: 1;
    height: 16px;
    background: var(--bg-darkest);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}
.bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.3s;
    position: relative;
}
.hp-bar .bar-fill { background: linear-gradient(90deg, #22c55e, #16a34a); }
.mp-bar .bar-fill { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.exp-bar .bar-fill { background: linear-gradient(90deg, #a855f7, #7c3aed); }
.enemy-hp-bar { height: 20px; }
.enemy-hp-bar .bar-fill { background: linear-gradient(90deg, #ef4444, #dc2626); }
.bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.resource-bar {
    display: flex;
    gap: 16px;
    font-size: 13px;
}
.resource {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Battle Main Layout */
.battle-main {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Left Panel */
.battle-left-panel {
    width: 200px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}
.player-info-panel {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}
.player-info-panel h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--accent-gold);
}
.stat-list { display: flex; flex-direction: column; gap: 4px; }
.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
.stat-name { color: var(--text-secondary); }
.stat-value { color: var(--text-primary); font-weight: 600; }
.weapon-info {
    margin-top: 12px;
    padding: 8px;
    background: var(--bg-darkest);
    border-radius: var(--radius-md);
    font-size: 11px;
}
.weapon-info .weapon-name {
    font-weight: 600;
    margin-bottom: 4px;
}
.shikigami-panel {
    padding: 12px;
    flex: 1;
}
.shikigami-slot {
    padding: 8px;
    margin-bottom: 6px;
    background: var(--bg-darkest);
    border-radius: var(--radius-md);
    font-size: 11px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Center Battle Area */
.battle-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
    position: relative;
}
.enemy-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
}
/* Multi-enemy wave layout */
.enemy-wave {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 700px;
    padding: 0 12px;
    z-index: 1;
}
.enemy-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    max-width: 200px;
    animation: enemyAppear 0.4s ease-out;
    transition: opacity 0.3s;
}
.enemy-slot.defeated {
    opacity: 0;
    pointer-events: none;
}
.enemy-slot .enemy-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.enemy-slot .enemy-name { font-size: 14px; font-weight: 700; }
.enemy-slot .enemy-level { font-size: 10px; color: var(--text-secondary); }
.enemy-slot .enemy-element {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}
.element-fire { background: rgba(255,107,53,0.2); color: var(--element-fire); }
.element-water { background: rgba(79,195,247,0.2); color: var(--element-water); }
.element-thunder { background: rgba(255,235,59,0.2); color: var(--element-thunder); }
.element-earth { background: rgba(161,136,127,0.2); color: var(--element-earth); }
.element-wood { background: rgba(102,187,106,0.2); color: var(--element-wood); }

.enemy-slot .enemy-hp-bar {
    width: 100%;
    height: 18px;
    flex: none;
}
.enemy-slot .enemy-hp-bar .bar-text {
    font-size: 10px;
}
/* 敵攻撃タイミングゲージ */
.enemy-atk-gauge {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.enemy-atk-gauge-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 3px;
    transition: width 0.1s linear;
}
.enemy-atk-gauge-fill.danger {
    background: linear-gradient(90deg, #f97316, #ef4444);
    box-shadow: 0 0 6px rgba(239,68,68,0.6);
    animation: gaugePulse 0.4s ease-in-out infinite;
}
@keyframes gaugePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.enemy-slot .enemy-visual {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    position: relative;
}
/* Single enemy gets bigger display */
.enemy-wave.single-enemy .enemy-slot .enemy-visual {
    width: 160px;
    height: 160px;
    font-size: 80px;
}
.enemy-wave.single-enemy .enemy-slot .enemy-name { font-size: 18px; }
.enemy-wave.single-enemy .enemy-slot .enemy-level { font-size: 12px; }
.enemy-wave.single-enemy .enemy-slot .enemy-hp-bar { height: 22px; }
.enemy-wave.single-enemy .enemy-slot .enemy-hp-bar .bar-text { font-size: 11px; }
.enemy-wave.single-enemy .enemy-atk-gauge { height: 8px; border-radius: 4px; }
.enemy-wave.single-enemy .enemy-atk-gauge-fill { border-radius: 4px; }
/* Boss gets even bigger */
.enemy-wave.single-enemy .enemy-slot.boss-slot .enemy-visual {
    width: 180px;
    height: 180px;
    font-size: 100px;
}

/* Click area overlay (covers entire enemy-area) */
.click-area-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    z-index: 5;
}
/* Zone indicators (thin dotted lines dividing into 3 zones) */
.zone-indicator {
    position: absolute;
    top: 10%;
    height: 80%;
    width: 1px;
    border-left: 1px dashed rgba(102, 68, 170, 0.2);
    pointer-events: none;
    z-index: 4;
}
.zone-indicator:first-child { left: 33.33%; }
.zone-indicator:last-child { left: 66.66%; }

/* Damage Numbers */
.damage-numbers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}
.damage-number {
    position: absolute;
    font-weight: 900;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px rgba(255,255,255,0.3);
    pointer-events: none;
    animation: damageFloat 1s ease-out forwards;
    white-space: nowrap;
}
.damage-number.crit {
    font-size: 36px;
    color: var(--accent-gold);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 20px rgba(245, 158, 11, 0.6);
}
.damage-number.heal {
    color: var(--accent-green);
}
/* 属性ダメージカラー */
.damage-number.element-fire-dmg {
    color: var(--element-fire);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(255,107,53,0.6);
}
.damage-number.element-water-dmg {
    color: var(--element-water);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(79,195,247,0.6);
}
.damage-number.element-thunder-dmg {
    color: var(--element-thunder);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(255,235,59,0.6);
}
.damage-number.element-earth-dmg {
    color: var(--element-earth);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(161,136,127,0.6);
}
.damage-number.element-wood-dmg {
    color: var(--element-wood);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(102,187,106,0.6);
}

/* 式神ダメージ */
.damage-number.shikigami-dmg {
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

/* 属性相性テキスト */
.effectiveness-text {
    position: absolute;
    font-weight: 900;
    font-size: 14px;
    pointer-events: none;
    white-space: nowrap;
    animation: effectivenessFloat 1.2s ease-out forwards;
    z-index: 11;
}
.effectiveness-text.effective {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255,68,68,0.8), 0 1px 3px rgba(0,0,0,0.8);
}
.effectiveness-text.not-effective {
    color: #8899aa;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    font-size: 12px;
}

/* 式神スキル名フローティング表示 */
.shikigami-skill-label {
    position: absolute;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
    animation: skillLabelFloat 1.8s ease-out forwards;
    z-index: 11;
    padding: 4px 14px;
    border-radius: 6px;
    background: rgba(0,0,0,0.75);
    border: 2px solid;
}
.shikigami-skill-label.element-fire { border-color: var(--element-fire); color: var(--element-fire); text-shadow: 0 0 10px rgba(255,107,53,0.6); }
.shikigami-skill-label.element-water { border-color: var(--element-water); color: var(--element-water); text-shadow: 0 0 10px rgba(79,195,247,0.6); }
.shikigami-skill-label.element-thunder { border-color: var(--element-thunder); color: var(--element-thunder); text-shadow: 0 0 10px rgba(255,235,59,0.6); }
.shikigami-skill-label.element-earth { border-color: var(--element-earth); color: var(--element-earth); text-shadow: 0 0 10px rgba(161,136,127,0.6); }
.shikigami-skill-label.element-wood { border-color: var(--element-wood); color: var(--element-wood); text-shadow: 0 0 10px rgba(102,187,106,0.6); }
.shikigami-skill-label.element-none { border-color: rgba(200,200,220,0.5); color: rgba(200,200,220,0.8); }

/* 式神攻撃エフェクト */
.shikigami-attack-fx {
    position: absolute;
    pointer-events: none;
    z-index: 7;
}

/* 属性別攻撃エフェクト - 炎の爆発 */
.shiki-fx-fire {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,80,0.7) 0%, rgba(255,107,53,0.5) 30%, rgba(255,40,0,0.2) 55%, transparent 75%);
    border: 3px solid rgba(255,107,53,0.7);
    box-shadow: 0 0 30px rgba(255,107,53,0.5), 0 0 60px rgba(255,60,20,0.2);
    animation: shikiFxFire 0.7s ease-out forwards;
}

/* 水の大波紋 */
.shiki-fx-water {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,247,0.5) 0%, rgba(79,195,247,0.3) 35%, transparent 70%);
    border: 3px solid rgba(79,195,247,0.7);
    box-shadow: 0 0 25px rgba(79,195,247,0.4), 0 0 50px rgba(79,195,247,0.15);
    animation: shikiFxRipple 0.7s ease-out forwards;
}

/* 雷の放電 */
.shiki-fx-thunder {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,200,0.7) 0%, rgba(255,235,59,0.4) 30%, rgba(255,235,59,0.1) 55%, transparent 70%);
    border: 3px solid rgba(255,235,59,0.8);
    box-shadow: 0 0 35px rgba(255,235,59,0.6), 0 0 70px rgba(255,235,59,0.2);
    animation: shikiFxFlicker 0.6s ease-out forwards;
}

/* 土の衝撃波 */
.shiki-fx-earth {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,170,140,0.6) 0%, rgba(161,136,127,0.35) 35%, transparent 70%);
    border: 3px solid rgba(161,136,127,0.7);
    box-shadow: 0 0 25px rgba(161,136,127,0.4), 0 0 50px rgba(161,136,127,0.15);
    animation: shikiFxEarth 0.7s ease-out forwards;
}

/* 木の旋風 */
.shiki-fx-wood {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150,230,150,0.5) 0%, rgba(102,187,106,0.3) 35%, transparent 70%);
    border: 3px solid rgba(102,187,106,0.7);
    box-shadow: 0 0 25px rgba(102,187,106,0.4), 0 0 50px rgba(102,187,106,0.15);
    animation: shikiFxSpin 0.7s ease-out forwards;
}

/* 無属性 */
.shiki-fx-none {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220,220,240,0.5) 0%, rgba(200,200,220,0.2) 40%, transparent 65%);
    border: 2px solid rgba(200,200,220,0.5);
    box-shadow: 0 0 20px rgba(200,200,220,0.3);
    animation: shikiFxPulse 0.6s ease-out forwards;
}

/* 式神AoE全体エフェクト */
.shiki-fx-aoe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    animation: shikiAoeSweep 0.8s ease-out forwards;
}
.shiki-fx-aoe.element-fire { background: radial-gradient(ellipse at 50% 55%, rgba(255,107,53,0.4) 0%, rgba(255,60,20,0.15) 40%, transparent 70%); }
.shiki-fx-aoe.element-water { background: radial-gradient(ellipse at 50% 55%, rgba(79,195,247,0.4) 0%, rgba(79,195,247,0.15) 40%, transparent 70%); }
.shiki-fx-aoe.element-thunder { background: radial-gradient(ellipse at 50% 55%, rgba(255,235,59,0.4) 0%, rgba(255,235,59,0.15) 40%, transparent 70%); }
.shiki-fx-aoe.element-earth { background: radial-gradient(ellipse at 50% 55%, rgba(161,136,127,0.35) 0%, rgba(161,136,127,0.12) 40%, transparent 70%); }
.shiki-fx-aoe.element-wood { background: radial-gradient(ellipse at 50% 55%, rgba(102,187,106,0.4) 0%, rgba(102,187,106,0.15) 40%, transparent 70%); }
.shiki-fx-aoe.element-none { background: radial-gradient(ellipse at 50% 55%, rgba(200,200,220,0.3) 0%, transparent 60%); }

/* 式神ヒールエフェクト */
.shiki-fx-heal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    background: radial-gradient(ellipse at 50% 70%, rgba(102,230,130,0.45) 0%, rgba(102,187,106,0.15) 40%, transparent 60%);
    animation: shikiHealGlow 1s ease-out forwards;
}

/* 式神デバフエフェクト */
.shiki-fx-debuff {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180,80,220,0.5) 0%, rgba(160,80,200,0.2) 45%, transparent 65%);
    border: 3px solid rgba(160,80,200,0.6);
    box-shadow: 0 0 25px rgba(160,80,200,0.4);
    animation: shikiFxDebuff 0.7s ease-out forwards;
}

/* 式神パネルのクールダウンバー */
.shikigami-slot {
    position: relative;
    overflow: hidden;
}
.shikigami-slot .shiki-cd-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), #7c3aed);
    border-radius: 0 0 4px 4px;
    transition: width 0.15s linear;
}
.shikigami-slot .shiki-cd-bar.ready {
    background: linear-gradient(90deg, var(--accent-green), #4ade80);
    box-shadow: 0 0 6px rgba(34,197,94,0.6);
    animation: shikiReady 0.5s ease-in-out infinite;
}
@keyframes shikiReady {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 式神パネル発動フラッシュ */
.shikigami-slot.skill-active {
    animation: shikiSlotFlash 0.6s ease-out;
}
.shikigami-slot.skill-active-fire { box-shadow: inset 0 0 12px rgba(255,107,53,0.5); }
.shikigami-slot.skill-active-water { box-shadow: inset 0 0 12px rgba(79,195,247,0.5); }
.shikigami-slot.skill-active-thunder { box-shadow: inset 0 0 12px rgba(255,235,59,0.5); }
.shikigami-slot.skill-active-earth { box-shadow: inset 0 0 12px rgba(161,136,127,0.5); }
.shikigami-slot.skill-active-wood { box-shadow: inset 0 0 12px rgba(102,187,106,0.5); }

/* モバイル式神CDオーバーレイ（デスクトップでは非表示） */
.mobile-shikigami-cd {
    display: none;
}

/* === プレイヤー属性ヒットエフェクト === */

/* 属性リング（敵に被さる輪） */
.elem-hit-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7;
    transform: translate(-50%, -50%);
    animation: elemHitRing 0.5s ease-out forwards;
}
.elem-hit-ring.elem-hit-fire {
    border: 3px solid rgba(255,107,53,0.8);
    box-shadow: 0 0 20px rgba(255,107,53,0.5), inset 0 0 15px rgba(255,107,53,0.2);
}
.elem-hit-ring.elem-hit-water {
    border: 3px solid rgba(79,195,247,0.8);
    box-shadow: 0 0 20px rgba(79,195,247,0.5), inset 0 0 15px rgba(79,195,247,0.2);
}
.elem-hit-ring.elem-hit-thunder {
    border: 3px solid rgba(255,235,59,0.9);
    box-shadow: 0 0 25px rgba(255,235,59,0.6), inset 0 0 15px rgba(255,235,59,0.3);
}
.elem-hit-ring.elem-hit-earth {
    border: 3px solid rgba(161,136,127,0.8);
    box-shadow: 0 0 20px rgba(161,136,127,0.5), inset 0 0 15px rgba(161,136,127,0.2);
}
.elem-hit-ring.elem-hit-wood {
    border: 3px solid rgba(102,187,106,0.8);
    box-shadow: 0 0 20px rgba(102,187,106,0.5), inset 0 0 15px rgba(102,187,106,0.2);
}

/* 属性パーティクル（散る火花） */
.elem-hit-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    transform: translate(-50%, -50%);
    animation: elemParticle 0.45s ease-out forwards;
}
.elem-particle-fire { background: #ff6b35; box-shadow: 0 0 6px rgba(255,107,53,0.8); }
.elem-particle-water { background: #4fc3f7; box-shadow: 0 0 6px rgba(79,195,247,0.8); }
.elem-particle-thunder { background: #ffeb3b; box-shadow: 0 0 8px rgba(255,235,59,0.9); }
.elem-particle-earth { background: #a1887f; box-shadow: 0 0 6px rgba(161,136,127,0.8); }
.elem-particle-wood { background: #66bb6a; box-shadow: 0 0 6px rgba(102,187,106,0.8); }

/* 有利属性時の大フラッシュ */
.elem-hit-super {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    transform: translate(-50%, -50%);
    animation: elemSuperFlash 0.7s ease-out forwards;
}
.elem-hit-super.elem-hit-fire {
    background: radial-gradient(circle, rgba(255,200,80,0.5) 0%, rgba(255,107,53,0.2) 40%, transparent 70%);
}
.elem-hit-super.elem-hit-water {
    background: radial-gradient(circle, rgba(150,220,255,0.5) 0%, rgba(79,195,247,0.2) 40%, transparent 70%);
}
.elem-hit-super.elem-hit-thunder {
    background: radial-gradient(circle, rgba(255,255,180,0.6) 0%, rgba(255,235,59,0.2) 40%, transparent 70%);
}
.elem-hit-super.elem-hit-earth {
    background: radial-gradient(circle, rgba(200,180,160,0.5) 0%, rgba(161,136,127,0.2) 40%, transparent 70%);
}
.elem-hit-super.elem-hit-wood {
    background: radial-gradient(circle, rgba(150,230,150,0.5) 0%, rgba(102,187,106,0.2) 40%, transparent 70%);
}

/* 属性リング ティアで拡大 */
.elem-hit-ring.large { width: 130px; height: 130px; }

/* ==========================================
   パワーティア ヒットエフェクト
   ========================================== */

/* --- インパクトリング --- */
.power-hit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7;
    transform: translate(-50%, -50%);
    animation: powerRingExpand 0.4s ease-out forwards;
}
.power-hit-ring.tier-1 {
    width: 50px; height: 50px;
    border: 2px solid rgba(200,200,220,0.5);
}
.power-hit-ring.tier-2 {
    width: 70px; height: 70px;
    border: 2px solid rgba(180,160,255,0.6);
    box-shadow: 0 0 10px rgba(139,92,246,0.3);
}
.power-hit-ring.tier-3 {
    width: 90px; height: 90px;
    border: 3px solid rgba(180,160,255,0.7);
    box-shadow: 0 0 18px rgba(139,92,246,0.4);
}
.power-hit-ring.tier-4 {
    width: 110px; height: 110px;
    border: 3px solid rgba(245,158,11,0.8);
    box-shadow: 0 0 25px rgba(245,158,11,0.5), 0 0 50px rgba(245,158,11,0.15);
}
.power-hit-ring.crit {
    border-color: rgba(245,158,11,0.9) !important;
    box-shadow: 0 0 25px rgba(245,158,11,0.6) !important;
}

/* --- スピードライン --- */
.power-speed-line {
    position: absolute;
    pointer-events: none;
    z-index: 7;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(var(--line-angle)) translateX(10px);
    animation: powerSpeedLine 0.35s ease-out forwards;
}
.power-speed-line.tier-2 {
    width: 25px; height: 2px;
    background: linear-gradient(90deg, rgba(180,160,255,0.7), transparent);
}
.power-speed-line.tier-3 {
    width: 35px; height: 2px;
    background: linear-gradient(90deg, rgba(200,180,255,0.8), transparent);
    filter: drop-shadow(0 0 3px rgba(139,92,246,0.5));
}
.power-speed-line.tier-4 {
    width: 45px; height: 3px;
    background: linear-gradient(90deg, rgba(255,220,100,0.9), rgba(245,158,11,0.4), transparent);
    filter: drop-shadow(0 0 5px rgba(245,158,11,0.6));
}

/* --- ヒットパーティクル --- */
.power-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    transform: translate(-50%, -50%);
    animation: elemParticle 0.45s ease-out forwards;
}
.power-particle.tier-3 {
    width: 5px; height: 5px;
    background: rgba(180,160,255,0.8);
    box-shadow: 0 0 4px rgba(139,92,246,0.6);
}
.power-particle.tier-4 {
    width: 6px; height: 6px;
    background: rgba(255,220,100,0.9);
    box-shadow: 0 0 6px rgba(245,158,11,0.7);
}

/* --- 背景パルス(Tier4) --- */
.power-bg-pulse {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(circle at 50% 55%, rgba(245,158,11,0.12) 0%, transparent 60%);
    animation: powerBgPulse 0.35s ease-out forwards;
}

/* --- クリティカルバースト --- */
.crit-burst {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 7;
    transform: translate(-50%, -50%);
    animation: critBurstAnim 0.5s ease-out forwards;
}
.crit-burst.tier-2 {
    width: 80px; height: 80px;
    background: radial-gradient(circle, rgba(245,158,11,0.5) 0%, rgba(245,158,11,0.15) 40%, transparent 65%);
}
.crit-burst.tier-3 {
    width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(245,200,50,0.6) 0%, rgba(245,158,11,0.2) 40%, transparent 65%);
    box-shadow: 0 0 30px rgba(245,158,11,0.3);
}
.crit-burst.tier-4 {
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255,240,150,0.7) 0%, rgba(245,158,11,0.3) 35%, transparent 65%);
    box-shadow: 0 0 40px rgba(245,158,11,0.4), 0 0 80px rgba(245,158,11,0.15);
}

/* ==========================================
   撃破エフェクト
   ========================================== */

/* --- 撃破バースト --- */
.defeat-burst {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    transform: translate(-50%, -50%);
    animation: defeatBurstAnim 0.6s ease-out forwards;
}
.defeat-burst.tier-1 {
    width: 80px; height: 80px;
    border: 2px solid rgba(255,255,255,0.6);
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
}
.defeat-burst.tier-2 {
    width: 110px; height: 110px;
    border: 3px solid rgba(200,180,255,0.7);
    background: radial-gradient(circle, rgba(200,180,255,0.4) 0%, transparent 55%);
    box-shadow: 0 0 20px rgba(139,92,246,0.4);
}
.defeat-burst.tier-3 {
    width: 140px; height: 140px;
    border: 3px solid rgba(245,200,50,0.8);
    background: radial-gradient(circle, rgba(255,240,150,0.5) 0%, rgba(245,158,11,0.2) 40%, transparent 65%);
    box-shadow: 0 0 30px rgba(245,158,11,0.5);
}
.defeat-burst.tier-4 {
    width: 180px; height: 180px;
    border: 4px solid rgba(255,240,100,0.9);
    background: radial-gradient(circle, rgba(255,255,200,0.6) 0%, rgba(245,158,11,0.3) 35%, transparent 60%);
    box-shadow: 0 0 40px rgba(245,158,11,0.6), 0 0 80px rgba(245,158,11,0.2);
}

/* --- 撃破パーティクル --- */
.defeat-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9;
    transform: translate(-50%, -50%);
    animation: elemParticle 0.55s ease-out forwards;
}
.defeat-particle.tier-2 {
    width: 5px; height: 5px;
    background: rgba(200,180,255,0.8);
    box-shadow: 0 0 4px rgba(139,92,246,0.5);
}
.defeat-particle.tier-3 {
    width: 6px; height: 6px;
    background: rgba(255,220,100,0.9);
    box-shadow: 0 0 5px rgba(245,158,11,0.6);
}
.defeat-particle.tier-4 {
    width: 7px; height: 7px;
    background: rgba(255,240,150,0.95);
    box-shadow: 0 0 8px rgba(245,158,11,0.8);
}

/* --- 撃破スクリーンフラッシュ --- */
.defeat-screen-flash {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 6;
    animation: defeatFlashAnim 0.4s ease-out forwards;
}
.defeat-screen-flash.tier-3 {
    background: rgba(200,180,255,0.15);
}
.defeat-screen-flash.tier-4 {
    background: rgba(255,240,150,0.2);
}

/* --- 撃破十字衝撃波(Tier4) --- */
.defeat-cross-wave {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.8), rgba(255,240,150,0.9), rgba(245,158,11,0.8), transparent);
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(var(--wave-angle)) scaleX(0);
    animation: defeatCrossWave 0.5s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(245,158,11,0.6));
}

/* Tap ripple effect (デフォルトエフェクト) */
.tap-ripple {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: 6;
    animation: tapRipple 0.4s ease-out forwards;
    transform: translate(-50%, -50%);
}

/* Weapon UI Area */
.weapon-ui {
    padding: 0;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Weapon UI Inner Container */
.weapon-ui-inner {
    padding: 10px 16px 12px;
}

.weapon-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.weapon-type-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.weapon-mechanic {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.weapon-main-display {
    display: flex;
    align-items: center;
    justify-content: center;
}

.weapon-tip {
    text-align: left;
    margin-left: 16px;
}

.weapon-tip-text {
    font-size: 12px;
    color: var(--text-secondary);
}

.weapon-tip-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* --- Per-weapon badge colors --- */
.katana-badge { background: rgba(100, 180, 255, 0.15); color: #7cb8ff; }
.bow-badge    { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.spear-badge  { background: rgba(139, 92, 246, 0.15); color: var(--accent-primary); }
.fist-badge   { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
.staff-badge  { background: rgba(217, 70, 239, 0.15); color: var(--accent-secondary); }
.hammer-badge { background: rgba(255, 152, 0, 0.15); color: #ff9800; }

/* --- Per-weapon theme borders --- */
.katana-theme { border-left: 3px solid rgba(100, 180, 255, 0.4); }
.bow-theme    { border-left: 3px solid rgba(6, 182, 212, 0.4); }
.spear-theme  { border-left: 3px solid rgba(139, 92, 246, 0.4); }
.fist-theme   { border-left: 3px solid rgba(239, 68, 68, 0.4); }
.staff-theme  { border-left: 3px solid rgba(217, 70, 239, 0.4); }
.hammer-theme { border-left: 3px solid rgba(255, 152, 0, 0.4); }

/* Charge bar for bow/hammer */
.charge-bar-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
    flex: 1;
}
.charge-bar-outer {
    height: 28px;
    background: var(--bg-darkest);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
}
.charge-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 14px;
    width: 0%;
    transition: width 0.05s linear;
}
.charge-bar-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* Bow charge level markers */
.charge-level-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.charge-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.charge-marker.accent { color: rgba(180, 140, 255, 0.8); }
.charge-marker.gold   { color: rgba(245, 200, 100, 0.9); font-weight: 700; }

/* Combo counter */
.combo-display {
    text-align: center;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.combo-count {
    font-size: 38px;
    font-weight: 900;
    color: var(--accent-gold);
    line-height: 1;
}
.combo-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.combo-rank {
    font-size: 15px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: var(--radius-sm);
}

/* Fist specific */
.fist-display {
    display: flex;
    align-items: center;
    gap: 16px;
}
.fist-cps-area {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.fist-tiers {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.fist-tier {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-darkest);
}

/* Rhythm gauge for spear */
.rhythm-gauge-container { width: 100%; max-width: 400px; text-align: center; flex: 1; }
.rhythm-track {
    height: 36px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.rhythm-target {
    position: absolute;
    width: 50px;
    height: 100%;
    background: rgba(139, 92, 246, 0.3);
    border: 2px solid var(--accent-primary);
    border-radius: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rhythm-target-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(139, 92, 246, 0.8);
    letter-spacing: 0.5px;
}
.rhythm-cursor {
    position: absolute;
    width: 10px;
    height: 100%;
    background: var(--accent-gold);
    border-radius: 5px;
    top: 0;
    left: 0;
    transition: none;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.spear-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 13px;
}
.spear-combo-text {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 13px;
}
.spear-timing-text {
    font-weight: 700;
    font-size: 16px;
    min-width: 70px;
    text-align: right;
}

/* Magic pattern for staff */
.staff-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.staff-sequence-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    background: var(--bg-darkest);
    border-radius: 8px;
    min-height: 28px;
}
.magic-pattern {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}
.magic-node {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-darkest);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}
.magic-node:active {
    transform: scale(0.9);
}
.magic-node.active {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}
.magic-node.correct {
    border-color: var(--accent-green);
    background: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}
.magic-node.next {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    animation: pulse 1s infinite;
}
.staff-info {
    width: 100%;
    text-align: center;
}
.staff-sequence {
    font-size: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}
.seq-done    { color: var(--accent-green); font-weight: 700; }
.seq-current { color: var(--accent-gold); font-weight: 700; font-size: 18px; }
.seq-pending { color: var(--text-muted); }
.seq-arrow   { color: var(--text-muted); margin: 0 3px; font-size: 12px; }

/* Hammer specific */
.hammer-gauge-outer {
    overflow: visible;
}
.hammer-perfect-zone {
    position: absolute;
    right: 0;
    top: -2px;
    width: 12%;
    height: calc(100% + 4px);
    background: rgba(245, 158, 11, 0.2);
    border: 2px solid var(--accent-gold);
    border-radius: 0 14px 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hammer-zone-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
}
.hammer-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.hammer-result-text {
    font-size: 15px;
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

/* Floor Progress */
.floor-progress {
    padding: 8px 16px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.kill-counter { font-size: 13px; color: var(--text-secondary); }

/* Right Panel */
.battle-right-panel {
    width: 260px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}
.tab-btn {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.tab-content {
    flex: 1;
    overflow-y: auto;
}
.tab-pane {
    display: none;
    padding: 12px;
}
.tab-pane.active { display: block; }

/* Floor Transition Overlay */
.floor-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(10, 10, 20, 0.92) 0%, rgba(5, 5, 15, 0.98) 100%);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out;
}
.floor-transition.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.floor-transition.fade-out {
    opacity: 0;
    visibility: visible;
    transition: opacity 0.5s ease-in;
}
.floor-transition-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.floor-transition-line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    border-radius: 1px;
    transition: width 0.6s ease-out;
}
.floor-transition.active .floor-transition-line {
    width: 200px;
}
.floor-transition-floor {
    font-size: 48px;
    font-weight: 900;
    color: var(--accent-gold);
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.6), 0 0 60px rgba(245, 158, 11, 0.3);
    letter-spacing: 6px;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.4s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}
.floor-transition.active .floor-transition-floor {
    opacity: 1;
    transform: scale(1);
}
.floor-transition-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity 0.4s ease-out 0.4s;
}
.floor-transition.active .floor-transition-subtitle {
    opacity: 1;
}
.floor-transition-subtitle.boss-warning {
    color: var(--accent-red);
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    font-weight: 700;
    animation: pulse 1s infinite;
}

/* Player Hit Overlay (red vignette) */
.player-hit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}
.player-hit-overlay.active {
    animation: playerHitVignette 0.45s ease-out forwards;
}
.player-hit-overlay.heavy {
    animation: playerHitVignetteHeavy 0.5s ease-out forwards;
}

/* HP bar flash on damage */
.hp-bar.bar-flash .bar-fill {
    animation: hpBarDamageFlash 0.3s ease-out;
}

/* Enemy attack lunge */
.enemy-lunge {
    animation: enemyLunge 0.4s ease-out !important;
}

/* Player damage number (shown near HP bar area) */
.player-damage-number {
    position: absolute;
    font-weight: 900;
    font-size: 20px;
    color: #ef4444;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(239, 68, 68, 0.5);
    pointer-events: none;
    z-index: 55;
    animation: playerDamageFloat 0.8s ease-out forwards;
    white-space: nowrap;
}
.player-damage-number.heavy {
    font-size: 28px;
    color: #ff1744;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(255, 23, 68, 0.6);
}

/* ==========================================
   Active Skill Bar
   ========================================== */
.active-skill-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(18,18,26,0.98) 100%);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 56px;
}

.askill-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.askill-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    margin: 0 12px;
}

.active-skill-btn.askill-empty {
    opacity: 0.25;
    border-style: dashed;
    cursor: default;
}

.askill-empty-icon {
    opacity: 0.5;
}

.active-skill-btn {
    position: relative;
    width: 52px;
    height: 52px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-panel);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.active-skill-btn:active {
    transform: scale(0.92);
}

.askill-icon {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.askill-tier {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 8px;
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    pointer-events: none;
}
.askill-cost {
    font-size: 9px;
    color: var(--accent-blue);
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
    pointer-events: none;
}

/* CD overlay (conic-gradient sweep) */
.askill-cd-overlay {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: none;
    pointer-events: none;
    z-index: 1;
}

.askill-cd-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    display: none;
    pointer-events: none;
    z-index: 2;
}

/* States */
.active-skill-btn.askill-ready {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), inset 0 0 6px rgba(139, 92, 246, 0.15);
}

.active-skill-btn.askill-disabled {
    opacity: 0.35;
    border-color: var(--border-color);
    box-shadow: none;
}

.active-skill-btn.on-cooldown {
    border-color: rgba(51, 51, 85, 0.5);
    box-shadow: none;
}
.active-skill-btn.on-cooldown .askill-icon,
.active-skill-btn.on-cooldown .askill-cost {
    opacity: 0.3;
}

/* Buff active pulsing glow */
.active-skill-btn.askill-buff-active {
    border-color: var(--accent-green);
    animation: askillBuffPulse 1.2s ease-in-out infinite;
    background: rgba(34, 197, 94, 0.15);
}

@keyframes askillBuffPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), inset 0 0 6px rgba(34, 197, 94, 0.1); }
    50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.7), inset 0 0 10px rgba(34, 197, 94, 0.2); }
}

/* ボタン上のバフ残り時間 */
.askill-buff-timer {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-green);
    text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(34, 197, 94, 0.5);
    pointer-events: none;
    z-index: 5;
}

/* ==========================================
   Buff Indicator Bar
   ========================================== */
.buff-indicator-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    min-height: 0;
    transition: min-height 0.2s;
}
.buff-indicator-bar:not(:empty) {
    padding-top: 4px;
    padding-bottom: 2px;
}

.buff-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(30, 30, 50, 0.85);
    border: 1px solid var(--buff-color);
    box-shadow: 0 0 8px var(--buff-color);
    font-size: 11px;
    animation: buffChipAppear 0.3s ease-out;
}

.buff-chip-icon {
    font-size: 12px;
}

.buff-chip-name {
    color: var(--buff-color);
    font-weight: 600;
    font-size: 10px;
}

.buff-chip-time {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 10px;
    min-width: 18px;
    text-align: right;
}

/* 残り3秒以下で点滅 */
.buff-chip-urgent {
    animation: buffChipUrgent 0.5s ease-in-out infinite alternate;
}

@keyframes buffChipAppear {
    from { opacity: 0; transform: translateY(-4px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes buffChipUrgent {
    from { opacity: 1; }
    to { opacity: 0.5; }
}

/* Activation flash */
.active-skill-btn.askill-activated {
    animation: askillActivate 0.5s ease-out;
}

@keyframes askillActivate {
    0% { background: rgba(139, 92, 246, 0.6); transform: scale(1.1); }
    100% { background: var(--bg-panel); transform: scale(1); }
}

/* Screen flash for taimajin */
.askill-screen-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 107, 53, 0.4) 0%, transparent 70%);
    animation: askillFlash 0.5s ease-out forwards;
    pointer-events: none;
    z-index: 50;
}

@keyframes askillFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Battle Footer */
.battle-footer {
    padding: 8px 16px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
}
.battle-controls {
    display: flex;
    gap: 8px;
}

/* ==========================================
   Modals
   ========================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.modal.active { display: flex; }
.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

/* Level Up Modal */
.levelup-content { text-align: center; }
.levelup-title {
    font-size: 28px;
    color: var(--accent-gold);
    margin-bottom: 8px;
}
.levelup-subtitle {
    color: var(--text-secondary);
    margin-bottom: 24px;
}
.levelup-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.levelup-choice {
    padding: 16px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    color: var(--text-primary);
    font-family: var(--font-main);
    width: 100%;
}
.levelup-choice:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.levelup-choice-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
.levelup-choice-desc {
    font-size: 12px;
    color: var(--text-secondary);
}
.levelup-choice-category {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 6px;
}
.category-budo { background: rgba(239,68,68,0.2); color: var(--accent-red); }
.category-onmyo { background: rgba(139,92,246,0.2); color: var(--accent-primary); }
.category-jintsuu { background: rgba(34,197,94,0.2); color: var(--accent-green); }
.category-active { background: rgba(192,132,252,0.25); color: #c084fc; }

/* アクティブスキル選択肢（紫背景で視覚的に区別） */
.levelup-choice-active {
    background: linear-gradient(135deg, rgba(88,28,135,0.35) 0%, rgba(139,92,246,0.15) 100%);
    border: 1px solid rgba(192,132,252,0.4);
}
.levelup-choice-active:hover {
    border-color: #c084fc;
    box-shadow: 0 0 12px rgba(192,132,252,0.3);
}
.levelup-choice-active .levelup-choice-name {
    font-size: 18px;
}

/* Drop Modal */
.drop-content { text-align: center; }
.drop-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
    text-align: left;
}
.drop-item {
    padding: 10px 14px;
    background: var(--bg-darkest);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--rarity-common);
    font-size: 13px;
}
.drop-item.rarity-common { border-left-color: var(--rarity-common); }
.drop-item.rarity-uncommon { border-left-color: var(--rarity-uncommon); }
.drop-item.rarity-rare { border-left-color: var(--rarity-rare); }
.drop-item.rarity-epic { border-left-color: var(--rarity-epic); }
.drop-item.rarity-legendary { border-left-color: var(--rarity-legendary); }
.drop-item.rarity-mythic { border-left-color: var(--rarity-mythic); }

/* Result Modal */
.result-content { text-align: center; }
#result-title { font-size: 28px; margin-bottom: 16px; }
#result-details {
    margin-bottom: 24px;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
}

/* ==========================================
   Smithy Screen
   ========================================== */
.smithy-tabs, .inventory-tabs {
    display: flex;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
}
.smithy-tab, .inv-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
}
.smithy-tab:hover, .inv-tab:hover { color: var(--text-secondary); }
.smithy-tab.active, .inv-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.smithy-content, .inventory-content, .shikigami-content,
.gacha-content, .arena-content, .settings-content, .enc-content,
.shop-content, .shrine-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}

/* ==========================================
   Encyclopedia (図鑑)
   ========================================== */
.enc-tabs {
    display: flex;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}
.enc-tab {
    flex: 1;
    min-width: 90px;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
    white-space: nowrap;
}
.enc-tab:hover { color: var(--text-secondary); }
.enc-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}
.enc-summary {
    padding: 12px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.enc-summary-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}
.enc-summary-value {
    font-weight: 700;
    color: var(--accent-gold);
}
.enc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.enc-card {
    padding: 14px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.enc-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.enc-card.undiscovered {
    opacity: 0.4;
    filter: grayscale(0.8);
}
.enc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.enc-card-icon {
    font-size: 36px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.enc-card.undiscovered .enc-card-icon {
    filter: brightness(0) invert(0.3);
}
.enc-card-title {
    flex: 1;
}
.enc-card-name {
    font-size: 15px;
    font-weight: 600;
}
.enc-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.enc-card-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.enc-card-body .enc-stat {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid rgba(51,51,85,0.2);
}
.enc-card-body .enc-stat-label {
    color: var(--text-muted);
}
.enc-card-body .enc-stat-value {
    color: var(--text-primary);
    font-weight: 600;
}
.enc-card-drops {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}
.enc-card-drops-title {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.enc-drop-item {
    font-size: 11px;
    padding: 2px 0;
    color: var(--text-secondary);
}
.enc-card-element {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
/* Achievement cards */
.ach-card {
    padding: 14px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
}
.ach-card.completed {
    border-color: var(--accent-gold);
    background: rgba(245, 158, 11, 0.05);
}
.ach-card.locked {
    opacity: 0.5;
}
.ach-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.ach-card.completed .ach-icon {
    background: rgba(245, 158, 11, 0.15);
}
.ach-info { flex: 1; }
.ach-name { font-size: 14px; font-weight: 600; }
.ach-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.ach-reward { font-size: 11px; color: var(--accent-gold); margin-top: 4px; }
.ach-status {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 10px;
    flex-shrink: 0;
}
.ach-status.done {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
}
.ach-status.not-done {
    background: var(--bg-panel);
    color: var(--text-muted);
}
.enc-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-darkest);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.enc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-gold));
    border-radius: 4px;
    transition: width 0.5s;
}

/* ==========================================
   Equipment Item Display
   ========================================== */
.equip-card {
    padding: 12px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.equip-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.equip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.equip-card-name { font-weight: 600; font-size: 14px; }
.equip-card-rarity {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.equip-card-stats {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.equip-card-enchants {
    margin-top: 6px;
    font-size: 11px;
}
.enchant-line {
    color: var(--accent-cyan);
    padding: 1px 0;
}

/* ==========================================
   Inventory Grid & Filters
   ========================================== */
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.material-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.material-icon { font-size: 24px; }
.material-info { flex: 1; }
.material-name { font-size: 13px; }
.material-count { font-size: 12px; color: var(--accent-gold); }

/* セクションヘッダー */
.inv-section-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 8px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

/* 装備中グリッド */
.inv-equipped-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.inv-equip-slot {
    position: relative;
    padding: 8px 10px;
    background: var(--bg-darkest);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.inv-equip-slot:hover {
    background: var(--bg-hover);
}
.inv-equip-slot.inv-slot-selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
}
.inv-equip-slot.inv-slot-empty {
    border-style: dashed;
    opacity: 0.6;
}
.inv-equip-slot.inv-slot-empty.inv-slot-selected {
    opacity: 1;
}
.inv-slot-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.inv-slot-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-slot-stats {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.inv-unequip-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    padding: 1px 6px;
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.inv-equip-slot:hover .inv-unequip-btn {
    opacity: 1;
}

/* フィルターバー */
.inv-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
    align-items: center;
}
.inv-filter-group {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
}
.inv-filter-btn {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.inv-filter-btn:hover {
    border-color: var(--text-secondary);
}
.inv-filter-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
}

/* 倉庫アイテムリスト */
.inv-item-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
}
.inv-item-card {
    margin-bottom: 0;
}

/* 装備比較表示 */
.inv-compare {
    display: flex;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 3px;
}
.inv-cmp-up {
    color: #34d399;
}
.inv-cmp-down {
    color: #f87171;
}
.inv-cmp-new {
    color: var(--accent-gold);
    font-size: 9px;
    padding: 0 5px;
    border: 1px solid var(--accent-gold);
    border-radius: 6px;
}

/* ==========================================
   Gacha
   ========================================== */
.gacha-banner {
    padding: 24px;
    background: linear-gradient(135deg, var(--bg-panel-light), var(--bg-panel));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
    margin-bottom: 16px;
}
.gacha-banner-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.gacha-banner-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.gacha-buttons { display: flex; gap: 12px; justify-content: center; }
.gacha-result {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}
.gacha-card {
    width: 100px;
    padding: 12px;
    background: var(--bg-darkest);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
    animation: gachaReveal 0.5s ease-out;
}
.gacha-card-icon { font-size: 36px; }
.gacha-card-name { font-size: 11px; margin-top: 6px; }

/* ==========================================
   弾幕通知（ニコニコ動画風）
   ========================================== */
#notification-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
}
.danmaku {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    animation: danmakuScroll 6s linear forwards;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000;
    will-change: transform;
}
.danmaku.info    { color: #ffffff; }
.danmaku.success { color: #00ff00; }
.danmaku.warning { color: #ffff00; }
.danmaku.error   { color: #ff4444; }
@keyframes danmakuScroll {
    from { transform: translateX(100vw); }
    to   { transform: translateX(calc(-100% - 40px)); }
}

/* ==========================================
   Log
   ========================================== */
.log-entry {
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(51,51,85,0.3);
    color: var(--text-secondary);
    line-height: 1.4;
}
.log-entry.damage { color: var(--accent-red); }
.log-entry.heal { color: var(--accent-green); }
.log-entry.loot { color: var(--accent-gold); }
.log-entry.level { color: var(--accent-primary); }
.log-entry.system { color: var(--accent-cyan); }

/* ==========================================
   Mobile Info Toggle (hidden on desktop)
   ========================================== */
.mobile-info-toggle { display: none; }
.mobile-panel-close { display: none; }
.mobile-panel-backdrop { display: none; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 900px) {
    .battle-left-panel { width: 160px; }
    .battle-right-panel { width: 200px; }
    .village-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .title-main { font-size: 36px; }
}
@media (max-width: 700px) {
    .battle-left-panel { display: none; }
    .battle-right-panel { width: 180px; }
}

/* ==========================================
   Mobile Portrait (<= 600px)
   ========================================== */
@media (max-width: 600px) {
    body {
        height: 100dvh;
    }

    /* --- Title Screen --- */
    .title-main {
        font-size: 32px;
        filter: drop-shadow(0 2px 12px rgba(139, 92, 246, 0.5));
    }
    .title-sub {
        font-size: 13px;
        letter-spacing: 6px;
    }
    .title-text { margin-bottom: 36px; }
    .btn-lg {
        padding: 14px 36px;
        font-size: 16px;
        width: 80vw;
        max-width: 280px;
    }

    /* --- Village Screen --- */
    .village-header {
        padding: 10px 12px;
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }
    .village-title { font-size: 18px; text-align: center; }
    .player-summary {
        font-size: 12px;
        justify-content: center;
        gap: 12px;
    }
    .village-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 10px;
    }
    .village-btn {
        padding: 14px 6px;
        gap: 4px;
        min-height: 0;
    }
    .village-icon { font-size: 26px; }
    .village-label { font-size: 12px; }
    .village-desc { font-size: 9px; display: none; }

    /* --- Screen Headers --- */
    .screen-header {
        padding: 10px 12px;
        gap: 8px;
    }
    .screen-header h2 { font-size: 16px; }
    .btn-back { padding: 6px 8px; font-size: 13px; }

    /* --- Battle Header (2行グリッドレイアウト) --- */
    .battle-header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 6px 10px;
        padding: 8px 10px;
        align-items: center;
    }
    /* 1行目左: ダンジョン名 + 階層 */
    .floor-info {
        grid-column: 1;
        grid-row: 1;
        min-width: auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    #dungeon-name { font-size: 12px; }
    #floor-display { font-size: 18px; }
    /* 1行目右: Lv・ゴールド・霊石 */
    .resource-bar {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: 12px;
        gap: 10px;
    }
    /* 2行目: HP / MP / EXP バー（全幅） */
    .player-bars {
        grid-column: 1 / -1;
        grid-row: 2;
        flex: none;
        width: 100%;
        gap: 4px;
    }
    .bar-group { gap: 4px; }
    .bar { height: 14px; }
    .bar-text { font-size: 9px; }
    .bar-label { font-size: 9px; width: 22px; }

    /* --- Battle Main Layout --- */
    .battle-main {
        flex-direction: column;
    }
    .battle-left-panel { display: none !important; }

    /* --- Right Panel: overlay on mobile --- */
    .battle-right-panel {
        display: none !important;
        width: 100% !important;
    }
    .battle-right-panel.mobile-visible {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55vh;
        z-index: 200;
        border-top: 2px solid var(--accent-primary);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
        animation: slideUpPanel 0.25s ease-out;
    }
    .battle-right-panel.mobile-visible .tab-buttons {
        padding-top: 4px;
    }

    /* --- Mobile panel toggle / close --- */
    .mobile-info-toggle {
        display: inline-flex !important;
        font-size: 14px;
        padding: 6px 10px;
    }
    .mobile-panel-close {
        display: block;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 20px;
        padding: 8px 12px;
        cursor: pointer;
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 10;
        font-family: var(--font-main);
    }
    .mobile-panel-close:hover {
        color: var(--text-primary);
    }
    .mobile-panel-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 199;
    }
    .mobile-panel-backdrop.active { display: block; }

    /* --- Battle Center --- */
    .battle-center {
        flex: 1;
        min-height: 0;
    }
    .enemy-area {
        cursor: pointer;
    }
    .enemy-wave {
        gap: 4px;
        padding: 0 4px;
    }
    .enemy-slot .enemy-visual {
        width: 80px;
        height: 80px;
        font-size: 48px;
    }
    .enemy-wave.single-enemy .enemy-slot .enemy-visual {
        width: 120px;
        height: 120px;
        font-size: 64px;
    }
    .enemy-wave.single-enemy .enemy-slot.boss-slot .enemy-visual {
        width: 130px;
        height: 130px;
        font-size: 72px;
    }
    .enemy-slot .enemy-name { font-size: 11px; }
    .enemy-slot .enemy-hp-bar { height: 14px; flex: none; }
    .enemy-atk-gauge { height: 4px; }
    .enemy-wave.single-enemy .enemy-slot .enemy-name { font-size: 16px; }
    .enemy-wave.single-enemy .enemy-slot .enemy-hp-bar { height: 18px; }
    .click-area-overlay { cursor: pointer; }
    .zone-indicator { display: none; }

    /* --- モバイル式神CDオーバーレイ --- */
    .mobile-shikigami-cd {
        display: flex !important;
        position: absolute;
        top: 6px;
        left: 6px;
        flex-direction: column;
        gap: 4px;
        z-index: 5;
        pointer-events: none;
    }
    .m-shiki-item {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(4px);
        border-radius: 6px;
        padding: 3px 6px;
        min-width: 100px;
    }
    .m-shiki-emoji {
        font-size: 14px;
        flex-shrink: 0;
    }
    .m-shiki-gauge {
        flex: 1;
        height: 5px;
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
        overflow: hidden;
    }
    .m-shiki-gauge-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, var(--accent-primary), #7c3aed);
        border-radius: 3px;
        transition: width 0.15s linear;
    }
    .m-shiki-gauge-fill.ready {
        background: linear-gradient(90deg, var(--accent-green), #4ade80);
        box-shadow: 0 0 4px rgba(34,197,94,0.5);
        animation: shikiReady 0.5s ease-in-out infinite;
    }
    .m-shiki-name {
        font-size: 9px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Tap ripple effect (モバイル用のレガシーは削除 → 全デバイス版はメインセクションに移動済み) */

    /* --- Weapon UI --- */
    .weapon-ui {
        min-height: 0;
    }
    .weapon-ui-inner {
        padding: 8px 10px 10px;
    }
    .weapon-header {
        gap: 6px;
        margin-bottom: 6px;
    }
    .weapon-type-badge {
        font-size: 12px;
        padding: 2px 8px;
    }
    .weapon-mechanic {
        font-size: 10px;
    }
    .weapon-tip {
        margin-left: 8px;
    }
    .weapon-tip-text {
        font-size: 11px;
    }
    .weapon-tip-detail {
        display: none;
    }
    /* Katana */
    .combo-display { gap: 4px; }
    .combo-count { font-size: 30px; }
    .combo-label { font-size: 11px; }
    /* Bow */
    .charge-bar-container { width: 100%; }
    .charge-bar-outer { height: 24px; }
    .charge-bar-label { font-size: 11px; margin-top: 3px; }
    .charge-marker { font-size: 8px; }
    /* Spear */
    .rhythm-gauge-container { width: 100%; }
    .rhythm-track { height: 32px; }
    .spear-info-row { font-size: 12px; }
    .spear-timing-text { font-size: 14px; }
    /* Fist */
    .fist-display { gap: 10px; }
    .fist-tiers { gap: 6px; }
    .fist-tier { font-size: 10px; padding: 2px 6px; }
    /* Staff */
    .staff-layout {
        gap: 8px;
    }
    .magic-pattern {
        gap: 10px;
        flex-wrap: wrap;
    }
    .magic-node {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    .staff-info { text-align: center; }
    .staff-sequence { font-size: 14px; }
    .staff-sequence-row { padding: 3px 6px; min-height: 24px; }
    /* Hammer */
    .hammer-info-row { font-size: 12px; }
    .hammer-result-text { font-size: 14px; }
    .hammer-zone-label { font-size: 8px; }

    /* --- Floor Progress --- */
    .floor-progress {
        padding: 4px 10px;
    }
    .kill-counter { font-size: 12px; }
    #btn-next-floor {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* --- Active Skill Bar (Mobile) --- */
    .active-skill-bar {
        padding: 5px 8px;
        min-height: 50px;
    }
    .askill-group { gap: 6px; }
    .askill-divider { height: 28px; margin: 0 6px; }
    .active-skill-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }
    .askill-icon { font-size: 16px; }
    .askill-cost { font-size: 8px; }
    .askill-cd-text { font-size: 14px; }
    .askill-buff-timer { font-size: 8px; bottom: 0; }

    /* --- Buff Indicator (Mobile) --- */
    .buff-chip { padding: 1px 6px; font-size: 10px; }
    .buff-chip-icon { font-size: 10px; }
    .buff-chip-name { font-size: 9px; }
    .buff-chip-time { font-size: 9px; }

    /* --- Battle Footer --- */
    .battle-footer {
        padding: 6px 8px;
        gap: 6px;
    }
    .battle-controls {
        gap: 4px;
        flex-shrink: 0;
    }
    .battle-controls .btn-sm {
        padding: 6px 8px;
        font-size: 11px;
    }

    /* --- Modals --- */
    .modal-content {
        padding: 20px 16px;
        width: 95%;
        max-height: 85vh;
        border-radius: var(--radius-lg);
    }
    .levelup-title { font-size: 22px; }
    .levelup-subtitle { font-size: 13px; margin-bottom: 16px; }
    .levelup-choice {
        padding: 14px;
    }
    .levelup-choice-name { font-size: 15px; }
    .levelup-choice-desc { font-size: 11px; }

    /* --- Dungeon Select --- */
    .dungeon-list { padding: 10px; gap: 8px; }
    .dungeon-card {
        padding: 12px;
        gap: 10px;
    }
    .dungeon-card-icon { font-size: 24px; }
    .dungeon-card-name { font-size: 14px; }
    .dungeon-card-detail { font-size: 11px; }

    /* --- Other Screens --- */
    .smithy-tabs, .inventory-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .smithy-tab, .inv-tab {
        padding: 10px 8px;
        font-size: 12px;
        white-space: nowrap;
        min-width: 60px;
    }
    .smithy-content, .inventory-content, .shikigami-content,
    .gacha-content, .arena-content, .settings-content, .enc-content,
    .shop-content, .shrine-content {
        padding: 10px;
    }
    .inv-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 6px;
    }

    /* --- Inventory Filters (Mobile) --- */
    .inv-equipped-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .inv-equip-slot { padding: 6px 8px; }
    .inv-slot-label { font-size: 9px; }
    .inv-slot-name { font-size: 11px; }
    .inv-slot-stats { font-size: 9px; }
    .inv-unequip-btn { opacity: 1; font-size: 8px; padding: 1px 4px; }
    .inv-filter-bar { gap: 4px; padding: 6px 0; }
    .inv-filter-btn { font-size: 10px; padding: 2px 6px; }
    .inv-item-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* --- Encyclopedia --- */
    .enc-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    .enc-tab {
        min-width: 70px;
        padding: 10px 6px;
        font-size: 11px;
    }
    .enc-summary {
        padding: 8px 12px;
        gap: 10px;
        font-size: 11px;
        flex-wrap: wrap;
    }
    .enc-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* --- Gacha --- */
    .gacha-banner { padding: 16px; }
    .gacha-banner-title { font-size: 18px; }
    .gacha-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .gacha-card {
        width: 80px;
        padding: 8px;
    }
    .gacha-card-icon { font-size: 28px; }
    .gacha-card-name { font-size: 10px; }

    /* --- 弾幕通知（モバイル） --- */
    .danmaku {
        font-size: 13px;
    }

    /* --- Equipment Cards --- */
    .equip-card { padding: 10px; }
    .equip-card-name { font-size: 13px; }

    /* --- Log --- */
    .log-entry { font-size: 10px; }

    /* --- Tab buttons (battle) --- */
    .tab-btn { padding: 8px 6px; font-size: 11px; }
    .tab-pane { padding: 8px; }

    /* --- Floor Transition --- */
    .floor-transition-floor { font-size: 36px; letter-spacing: 4px; }
    .floor-transition.active .floor-transition-line { width: 150px; }
    .floor-transition-subtitle { font-size: 12px; }

    /* --- セーフエリア対応 --- */
    .battle-header {
        padding-top: max(8px, env(safe-area-inset-top));
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    .battle-footer {
        padding-bottom: max(6px, env(safe-area-inset-bottom));
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    .village-header {
        padding-top: max(10px, env(safe-area-inset-top));
    }

    /* --- モバイルvillageボタン改善 --- */
    .village-btn {
        min-height: 70px;
        min-width: 44px;
    }
    .village-btn:active {
        transform: scale(0.95);
        background: var(--bg-hover);
    }

    /* --- チュートリアルダイアログ（モバイル） --- */
    .tutorial-dialog {
        width: 92vw;
        max-width: none;
        bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ==========================================
   チュートリアルシステム
   ========================================== */
.tutorial-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}
.tutorial-overlay.active {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* ハイライトマスク（暗転用） */
.tutorial-highlight-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    transition: clip-path 0.3s ease;
    pointer-events: auto;
}

/* ハイライト対象の強調 */
.tutorial-highlighted {
    position: relative;
    z-index: 9999 !important;
    box-shadow: 0 0 0 4px var(--accent-gold), 0 0 20px rgba(245, 158, 11, 0.5) !important;
    border-radius: var(--radius-md);
    animation: tutorialPulse 1.5s ease-in-out infinite;
    pointer-events: auto !important;
}

@keyframes tutorialPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-gold), 0 0 20px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 0 6px var(--accent-gold), 0 0 30px rgba(245, 158, 11, 0.7); }
}

/* ダイアログ */
.tutorial-dialog {
    position: relative;
    z-index: 10000;
    background: linear-gradient(135deg, var(--bg-panel) 0%, #1e1e3a 100%);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 20px 24px;
    margin-bottom: 0;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 -4px 30px rgba(245, 158, 11, 0.2), 0 0 60px rgba(0, 0, 0, 0.5);
    animation: tutorialSlideUp 0.3s ease-out;
    pointer-events: auto;
}

@keyframes tutorialSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.tutorial-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tutorial-step-indicator {
    font-size: 11px;
    color: var(--accent-gold);
    font-weight: bold;
    letter-spacing: 1px;
}

.tutorial-skip-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
}
.tutorial-skip-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.tutorial-dialog-body {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
}
.tutorial-dialog-body .tutorial-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--accent-gold);
    margin-bottom: 8px;
}
.tutorial-dialog-body .tutorial-desc {
    color: var(--text-secondary);
    font-size: 13px;
}

.tutorial-dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.tutorial-next-btn {
    padding: 10px 28px;
    font-size: 14px;
    min-width: 100px;
}

/* ==========================================
   横向き警告
   ========================================== */
.landscape-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-darkest);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.landscape-warning-content {
    text-align: center;
}
.landscape-warning-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: rotatePhone 2s ease-in-out infinite;
}
@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    75% { transform: rotate(-90deg); }
}
.landscape-warning-text {
    font-size: 18px;
    color: var(--text-primary);
}

@media (max-width: 900px) and (orientation: landscape) {
    .landscape-warning {
        display: flex;
    }
}