body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: #151821;
    color: #e1e1e6;
    user-select: none;
}

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px;
}

.screen { display: none; }
.screen.active { display: block; }

/* ホーム画面デザイン */
.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75vh;
    text-align: center;
}
.game-title {
    font-size: 2.8rem;
    color: #ffd700;
    margin: 0 0 5px 0;
    text-shadow: 0 4px 6px rgba(0,0,0,0.5);
}
.game-subtitle {
    color: #a0a6b8;
    font-size: 1.1rem;
    margin-bottom: 40px;
}
.vertical-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 320px;
}
.menu-btn {
    padding: 16px 20px;
    font-size: 1.2rem;
    background: linear-gradient(to bottom, #d4af37, #aa8c2c);
    color: #111;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s, background 0.2s;
}
.menu-btn:hover {
    background: #f39c12;
    transform: translateY(-2px);
}

/* 各画面共通ヘッダー */
.screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e222d;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #2a2f3d;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.screen-header h2 { margin: 0; color: #ffd700; }
.back-btn {
    background: #2a2f3d;
    color: #fff;
    border: 1px solid #3f465d;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.back-btn:hover { background: #3f465d; }

/* ステージ選択画面 */
#stage-list { display: flex; flex-direction: column; gap: 12px; }
.stage-card {
    background: #1e222d;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid #2a2f3d;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stage-card.locked { opacity: 0.4; }
.stage-card button, .upgrade-btn {
    padding: 10px 24px;
    background: linear-gradient(to bottom, #d4af37, #aa8c2c);
    color: #111;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.stage-card button:hover, .upgrade-btn:hover:not(:disabled) { background: #f39c12; }
.upgrade-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* =========================================
   UI改修：オリジナルサイドバーレイアウト
========================================= */
.battle-layout { display: flex; gap: 10px; height: 100%; }
.battle-main { flex-grow: 1; display: flex; flex-direction: column; }

/* トップバー（マナゲージ） */
.battle-topbar {
    display: flex; justify-content: space-between; align-items: center;
    background: #1a2233; padding: 10px 15px; border-radius: 8px 8px 0 0;
    border: 1px solid #3a4766; border-bottom: none;
}
.icon-btn.back-icon {
    background: #e74c3c; color: white; border: none; border-radius: 50%;
    width: 32px; height: 32px; cursor: pointer; font-weight: bold;
}
.stage-name { color: #a0c4ff; font-weight: bold; }
.resource-container {
    display: flex; align-items: center; gap: 10px; background: #0f141e;
    padding: 5px 15px; border-radius: 20px; border: 1px solid #3a4766;
}
.resource-label { color: #82aaff; font-weight: bold; font-size: 0.9rem; }
.resource-bar-bg { width: 120px; height: 10px; background: #222; border-radius: 5px; overflow: hidden; }
.resource-bar-fill { height: 100%; background: linear-gradient(90deg, #3498db, #82aaff); width: 0%; transition: width 0.2s; }
.resource-text { color: #fff; font-size: 0.9rem; font-family: monospace; }

/* 戦場 */
#battlefield {
    position: relative;
    width: 100%;
    height: 380px;
    background-color: #11141b;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    overflow: hidden;
    border: 2px solid #3f465d;
    border-radius: 0 0 8px 8px;
}

.castle {
    position: absolute;
    bottom: 25px;
    width: 90px;
    height: 120px;
    text-align: center;
    z-index: 10; /* 拠点を奥に設定 */
}
#player-castle { left: 20px; }
#enemy-castle { right: 20px; }
.castle img { width: 85px; height: 85px; object-fit: contain; }

#player-castle-img, 
#enemy-castle-img {
    transform: scale(1.5);
    transform-origin: bottom;
}

/* 拠点直上HPバー */
.castle-hp-wrapper { position: absolute; top: -30px; width: 100%; text-align: center; z-index: 50;}
.castle-hp-text { font-size: 0.75rem; color: #fff; text-shadow: 1px 1px 2px #000; margin-bottom: 2px; font-weight: bold;}
.hp-bar-container {
    width: 100%; height: 8px; background: #111;
    border: 1px solid #333; border-radius: 4px;
    overflow: hidden; margin-top: 2px;
}
.hp-bar { height: 100%; background: linear-gradient(90deg, #2ecc71, #27ae60); width: 100%; transition: width 0.2s; }

/* サイドバー（右側操作パネル） */
.battle-sidebar {
    width: 150px;
    background: #1a2233; border-radius: 8px; border: 1px solid #3a4766;
    display: flex; flex-direction: column; padding: 10px; gap: 10px;
}

/* 拠点強化ボタン（横長） */
.sidebar-action-btn {
    width: 100%; padding: 8px 0; border-radius: 6px; border: 2px solid #5a6b99;
    background: #2a3652; color: white; cursor: pointer; display: flex;
    flex-direction: column; justify-content: center; align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4); transition: all 0.2s;
}
.sidebar-action-btn:hover:not(:disabled) {
    background: #3a4b73; border-color: #82aaff; transform: translateY(-2px);
}
.sidebar-action-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(100%); }
.action-text-large { font-size: 1rem; font-weight: bold; color: #f39c12; }
.action-cost { font-size: 0.8rem; color: #fff; margin-top: 2px;}
.sidebar-castle-info { font-size: 0.7rem; color: #a0a6b8; text-align: center; line-height: 1.2; margin-bottom: 5px; }

/* 2列グリッドのレイアウト */
.sidebar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px 12px; /* 縦の隙間を大きく広げてLvUPボタンが被らないように */
    align-content: start; 
    justify-items: center; 
    flex-grow: 1; 
    padding-top: 20px; /* 上部にも余裕を持たせる */
}

/* 円形ユニットボタンと秘術ボタンのサイズ統一 */
.unit-round-btn, .sidebar-skill-btn {
    position: relative; width: 55px; height: 55px; border-radius: 50%;
    background: #2a3652; border: 3px solid #3a4766; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: border-color 0.2s;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* ユニットアイコンのレベルアップ発光（UI枠用） */
.unit-round-btn.level-2 { 
    border-color: #00FFFF !important; 
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6) !important; 
}
.unit-round-btn.level-2 img { 
    filter: drop-shadow(0 0 6px #00FFFF) !important; 
}

.unit-round-btn.level-3 { 
    border-color: #FFD700 !important; 
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8) !important; 
}
.unit-round-btn.level-3 img { 
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 1)) brightness(1.1) !important; 
}

/* ↓ここから下はそのまま残す */
.sidebar-skill-btn { border-color: #5a6b99; }
.sidebar-skill-btn:hover:not(:disabled) { border-color: #82aaff; background: #3a4b73; transform: translateY(-2px); }
/* 以降省略... */
.sidebar-skill-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(100%); transform: none; }
.skill-icon { font-size: 1.3rem; color: #3498db; }
.skill-text { font-size: 0.65rem; margin-top: -2px; font-weight: bold; color: #ffffff;}

.unit-round-btn:hover:not(.disabled) { border-color: #82aaff; }
.unit-round-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.unit-round-btn img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* アイコン右下のコスト表示 */
.unit-cost-badge {
    position: absolute; bottom: -5px; right: -5px; background: #e67e22;
    color: white; font-size: 0.65rem; font-weight: bold; padding: 2px 6px;
    border-radius: 10px; border: 1px solid #fff; z-index: 2;
}

/* ユニットアイコンの完全に外側に配置するLvUPボタン */
.unit-lvup-overlay {
    position: absolute; 
    bottom: calc(100% + 5px); /* アイコンの完全な上外側に配置 */
    left: 50%; 
    transform: translateX(-50%); 
    background: rgba(46, 204, 113, 0.95);
    color: white; 
    font-size: 0.6rem; 
    font-weight: bold; 
    padding: 3px 6px;
    border-radius: 6px; 
    cursor: pointer; 
    z-index: 10; 
    border: 1px solid #fff;
    white-space: nowrap; /* テキストの折り返し防止 */
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.unit-lvup-overlay:hover { background: #27ae60; }

.cooldown-circle {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: none;
    align-items: center; justify-content: center; font-size: 0.85rem;
    font-weight: bold; color: #fff; z-index: 1;
}

/* 隠す旧要素 */
.battle-header, .controls-area, #castle-upgrade-panel { display: none !important; }

/* ユニットキャラクター（戦場内） */
.unit-element {
    position: absolute; bottom: 25px;
    transform: translateX(-50%); text-align: center;
    transition: left 0.1s linear;
    z-index: 20; /* ユニットを拠点より手前に設定 */
}
.unit-element img { object-fit: contain; }
.unit-small { width: 35px; height: 35px; }
.unit-small img { width: 35px; height: 35px; }
.unit-medium { width: 50px; height: 50px; }
.unit-medium img { width: 50px; height: 50px; }
.unit-large { width: 95px; height: 95px; }
.unit-large img { width: 95px; height: 95px; }
.unit-giant { width: 140px; height: 140px; }
.unit-giant img { width: 140px; height: 140px; }

.unit-hp-bar { width: 100%; height: 4px; background: #222; border-radius: 2px; overflow: hidden; margin-bottom: 2px; }
.unit-hp-fill { height: 100%; background: #e74c3c; }
.unit-element.player .unit-hp-fill { background-color: #2ecc71 !important; }
.unit-element.enemy .unit-hp-fill { background-color: #e74c3c !important; }

/* ユニット編成（図鑑・編成用） */
.party-section { background: #1e222d; padding: 15px; border-radius: 8px; border: 1px solid #2a2f3d; margin-bottom: 10px; }
.button-container { display: flex; gap: 12px; overflow-x: auto; padding: 5px 0 10px 0; }
.party-card {
    background: linear-gradient(to bottom, #2a3142, #1f2533);
    border: 2px solid #3f465d; color: #fff;
    padding: 8px; border-radius: 8px;
    cursor: pointer; min-width: 90px; text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.party-card:hover { border-color: #ffd700; }
.party-card.selected { border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.party-card img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 2px; }
.party-card div { font-size: 0.85rem; font-weight: bold; white-space: nowrap; }
.party-card .unit-cost-tag { font-size: 0.75rem; color: #ffd700; font-weight: bold; margin-top: 2px; }
.party-card .custom-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: #161922; color: #e2e8f0; border: 1px solid #3b4252; padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.5); transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; text-align: left; }
.party-card:hover .custom-tooltip { visibility: visible; opacity: 1; }

/* 図鑑・秘宝 */
#zukan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.zukan-card { background: #1e222d; padding: 15px; border-radius: 8px; border: 1px solid #2a2f3d; text-align: center; }
.zukan-card img { width: 60px; height: 60px; object-fit: contain; }

/* モーダル */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal.hidden { display: none; }
.modal-content { background: #1e222d; border: 1px solid #3f465d; padding: 30px; border-radius: 10px; text-align: center; max-width: 400px; width: 100%; }
.modal-content button { margin-top: 15px; padding: 10px 24px; background: #d4af37; color: #111; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }

/* トースト通知 */
.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 99999; pointer-events: none; }
.toast-message { background: #1e222d; color: #ffd700; border: 2px solid #ffd700; padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); font-weight: bold; font-size: 0.95rem; animation: toast-fade 2.5s forwards; pointer-events: auto; }
@keyframes toast-fade { 0% { opacity: 0; transform: translateY(20px); } 15% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }

/* 初期化確認ポップアップ */
.reset-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1e222d; border: 2px solid #ffd700; padding: 25px 35px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); z-index: 100000; text-align: center; }
.reset-popup.hidden { display: none; }
.reset-popup p { margin: 0 0 20px 0; font-size: 1.1rem; color: #ffd700; font-weight: bold; }
.reset-popup-btns { display: flex; gap: 15px; justify-content: center; }
.reset-popup-btns button { padding: 8px 20px; font-size: 0.95rem; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; }
.reset-popup-btns button:first-child { background: #c0392b; color: #fff; }
.reset-popup-btns button:last-child { background: #3f465d; color: #fff; }
.reset-popup-btns button:hover { opacity: 0.85; }

/* =========================================
   遠距離攻撃・拠点スキルエフェクト
========================================= */
.effect-element { position: absolute; bottom: 40px; pointer-events: none; z-index: 100; }
.effect-arrow { width: 25px; height: 4px; background: #ecf0f1; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.effect-arrow.enemy-effect { background: #e74c3c; }
.effect-magic { width: 16px; height: 16px; background: #3498db; border-radius: 50%; box-shadow: 0 0 10px #3498db, inset 0 0 5px #fff; }
.effect-big-magic { width: 32px; height: 32px; background: #9b59b6; border-radius: 50%; box-shadow: 0 0 15px #9b59b6, inset 0 0 8px #fff; }

.effect-roar { position: absolute; left: 90px; bottom: 25px; width: 400px; height: 100px; background: linear-gradient(90deg, rgba(52, 152, 219, 0.8), transparent); border-radius: 50% 0 0 50%; pointer-events: none; z-index: 150; animation: roar-fade 0.5s forwards; }
@keyframes roar-fade { 0% { opacity: 1; transform: scaleX(0); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); transform-origin: left; } 100% { opacity: 0; transform: scaleX(1.2); transform-origin: left; } }

/* =========================================
   状態異常・特殊効果エフェクト
========================================= */
.effect-status-stun img { filter: drop-shadow(0 0 8px #f1c40f) brightness(1.2) !important; }
.effect-status-heal img { filter: drop-shadow(0 0 8px #2ecc71) brightness(1.2) !important; }
.effect-status-evade img { filter: drop-shadow(0 0 8px #3498db) brightness(1.5) !important; opacity: 0.6; }
.effect-status-splash img { filter: drop-shadow(0 0 10px #e74c3c) brightness(1.2) contrast(1.5) !important; }
.effect-status-knockback img { filter: drop-shadow(0 0 10px #ffffff) brightness(1.5) !important; transform: translateY(-10px) rotate(-15deg); transition: transform 0.1s ease-out; }
.unit-element.enemy.effect-status-knockback img { transform: translateY(-10px) rotate(15deg); }
.effect-status-antiheal::after { content: '🚫'; position: absolute; top: -15px; right: 0; font-size: 14px; animation: pop 0.3s ease-out; }
div.unit-element.lvl-2 img { filter: drop-shadow(0 0 8px #00FFFF) !important; }
div.unit-element.lvl-3.lvl-3 img { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.9)) brightness(1.1) !important; }
.unit-element.is-summoned img { filter: brightness(0.4) drop-shadow(0 0 4px rgba(0, 150, 255, 0.7)); }

/* アニメーション */
.shake-animation { display: inline-block; animation: shake 0.5s infinite; }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } }
.result-pop-animation { animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.gold-popup { position: absolute; color: #FFD700; font-size: 24px; font-weight: bold; text-shadow: 1px 1px 3px #000; pointer-events: none; z-index: 100; animation: floatUpFade 1s ease-out forwards; }
@keyframes floatUpFade { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }