@charset "UTF-8";

/* --- 既存設定 --- */
* {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* ここでは指定しない */
}
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background-color: #050505;
    color: white;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    
    /* ★最強の拡大防止策: 画面全体でタッチ操作を無効化 */
    touch-action: none; 
    
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
}
.battle-scene,
.command-window,
.battle-item-bar {
    touch-action: none;
}

/* --- レイアウト構造 --- */
.game-container {
    flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; position: relative; overflow: hidden;
    
    /* コンテナ内も基本は操作無効（連打用） */
    touch-action: none;
}
.ad-space {
    height: 50px; background-color: #222; display: flex; justify-content: center; align-items: center; color: #555; font-size: 0.8rem; border-top: 1px solid #333; flex-shrink: 0; z-index: 1000;
}

/* --- バトル画面 --- */
.battle-scene {
    flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; position: relative;
    background: radial-gradient(circle, #222 0%, #000 90%); border-bottom: 2px solid #fff; padding-bottom: 20px; box-sizing: border-box;
    transition: filter 0.3s;
}

/* ★フィーバー中の背景演出 */
.battle-scene.fever-mode {
    animation: rainbow-bg 2s linear infinite;
    border-bottom-color: #ff0;
}
@keyframes rainbow-bg {
    0% { background: radial-gradient(circle, #400 0%, #000 90%); }
    25% { background: radial-gradient(circle, #440 0%, #000 90%); }
    50% { background: radial-gradient(circle, #040 0%, #000 90%); }
    75% { background: radial-gradient(circle, #004 0%, #000 90%); }
    100% { background: radial-gradient(circle, #400 0%, #000 90%); }
}

/* 暗幕 */
.dim-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 10;
}
.dim-overlay.active { opacity: 1; }

.enemies-container { display: flex; justify-content: center; align-items: flex-end; gap: 8px; width: 100%; }

/* --- 敵キャラ表示 --- */
.enemy-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px; /* ラッパーの幅は維持 */
    position: relative;
    z-index: 5;
    transition: transform 0.3s;
}
.enemy-wrapper.acting { z-index: 20; transform: scale(1.2) translateY(-20px); }

.enemy-info {
    height: 30px; /* 高さを固定 */
    display: flex;
    align-items: flex-end; /* 下揃えにする */
    justify-content: center;
    
    font-size: 0.75rem; 
    color: #fff; 
    margin-bottom: 2px; /* モンスターとの隙間 */
    text-align: center; 
    line-height: 1.2; 
    text-shadow: 1px 1px 2px #000; 
    white-space: nowrap;
}

.enemy-body {
    /* ★修正: ここでサイズを統一 */
    width: 80px;
    height: 80px;
    
    background-repeat: no-repeat;
    background-position: center bottom; /* 下揃えで表示 */
    background-size: contain; /* 枠内に収まるように調整 */
    
    position: relative;
    transition: transform 0.05s, opacity 0.2s;
    z-index: 5;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ★修正: 個別クラスは画像URLの指定のみにする */
.type-normal  { background-image: url('../images/silver_gummy.png'); }
.type-liquid  { background-image: url('../images/liquid_gummy.png'); }
.type-king    { background-image: url('../images/king_gummy.png'); }
.type-spike   { background-image: url('../images/spike_gummy.png'); }
.type-bomb    { background-image: url('../images/bomb_gummy.png'); }
.type-armored { background-image: url('../images/armored_gummy.png'); }
.type-ghost   { background-image: url('../images/ghost_gummy.png'); opacity: 0.7; }
.type-ninja   { background-image: url('../images/ninja_gummy.png'); }
.type-mecha   { background-image: url('../images/mecha_gummy.png'); }
.type-plasma  { background-image: url('../images/plasma_gummy.png'); }
.type-golem   { background-image: url('../images/golem_gummy.png'); }
.type-galaxy  { background-image: url('../images/galaxy_gummy.png'); }
.type-angel   { background-image: url('../images/angel_gummy.png'); }
.type-mimic   { background-image: url('../images/mimic_gummy.png'); }

.enemy-body.dead { opacity: 0; pointer-events: none; }
.enemy-body.hit { filter: brightness(2); }
.enemy-body.idle { animation: idle 2s infinite ease-in-out; }
@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@keyframes action-vibe {
    0% { transform: rotate(0deg); filter: brightness(1); }
    25% { transform: rotate(-5deg); filter: brightness(1.5); }
    50% { transform: rotate(5deg); filter: brightness(2); }
    75% { transform: rotate(-5deg); filter: brightness(1.5); }
    100% { transform: rotate(0deg); filter: brightness(1); }
}
.enemy-acting-anim { animation: action-vibe 0.5s ease-in-out infinite; }

.enemy-hp-bar { width: 100%; max-width: 50px; height: 4px; background: #333; margin-top: 4px; border-radius: 2px; overflow: hidden; }
.hp-fill { width: 100%; height: 100%; background: #00ff00; transition: width 0.1s; }

/* --- UIエリア --- */
.ui-area {
    height: 280px; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 5px;
    background: #000;
}
.window-frame {
    border: 2px solid white;
    border-radius: 6px;
    background: #000;
    padding: 8px;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.status-window { height: 75px; display: flex; flex-direction: column; justify-content: space-around; font-size: 0.85rem; color: #ddd; }
.status-top { display: flex; justify-content: space-between; width: 100%; }
.highlight { color: #ffff00; font-weight: bold; }

/* 経験値バー周辺のスタイル修正 */
.exp-bar-container {
    width: 100%;
    height: 10px; /* 5px -> 10px に太くして文字を入れる */
    background: #222; /* 背景色を統一 */
    border: 1px solid #555; /* 枠線追加 */
    border-radius: 4px;
    overflow: hidden;
    margin-top: 2px;
    position: relative; /* ラベル配置用 */
}
.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00bfff, #1e90ff);
    width: 0%;
    transition: width 0.3s;
}

/* ★追加: EXPラベル */
.exp-label {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: 0.6rem; color: #fff; text-shadow: 0 0 2px #000;
    font-weight: bold; letter-spacing: 2px;
    z-index: 2;
}

/* ★フィーバーゲージ */
.fever-bar-container { width: 100%; height: 10px; background: #222; border: 1px solid #555; border-radius: 4px; overflow: hidden; margin-top: 4px; position: relative; }
.fever-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff8c00, #ff0080); transition: width 0.2s; box-shadow: 0 0 10px #ff0080; }
.fever-bar-fill.max { animation: fever-glow 0.5s infinite alternate; }
@keyframes fever-glow { from { filter: brightness(1); } to { filter: brightness(1.5); } }
.fever-label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.6rem; color: #fff; text-shadow: 0 0 2px #000; font-weight: bold; letter-spacing: 2px; }
.message-window {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.4;
    overflow: hidden; /* はみ出た分は隠す（または scroll にしてもOK） */
    white-space: pre-wrap;
    padding: 8px;
    border-color: #888;
}
/* ★コマンドウィンドウ */
.command-window {
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* バーを中央に */
    cursor: pointer;
    position: relative;
}

/* コマンドテキスト */
#cmdText {
    width: 100%;
    text-align: left;     /* 左寄せ */
    padding-left: 15px;   /* 左余白 */
    box-sizing: border-box;
    font-size: 1.1rem;
    /* ボタンと被らないように右側に余白を設ける */
    padding-right: 140px; 
}

/* ラッシュ・フィーバー中のテキストは中央寄せ上書き */
.rush-text, .fever-cmd-text {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: -15px; /* padding-left分を相殺 */
    padding-right: 0;
}

.rush-mode { background-color: #400; border-color: #f00; }
.fever-cmd-mode { background-color: #440; border-color: #ff0; }

/* --- 演出 / オーバーレイ --- */
.turn-alert-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.turn-alert-overlay.show { opacity: 1; }
.turn-alert-text { font-size: 3rem; color: #ff0000; font-weight: 900; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 0 0 20px #f00; transform: scale(0.8); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.turn-alert-overlay.show .turn-alert-text { transform: scale(1); opacity: 1; }
.exp-pop { position: absolute; color: #00bfff; font-size: 1.4rem; font-weight: bold; pointer-events: none; animation: expUp 0.8s ease-out forwards; text-shadow: 1px 1px 0 #000; z-index: 110; }
@keyframes expUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(1.2); opacity: 0; } }
.damage-pop { position: absolute; color: white; font-size: 1.2rem; font-weight: bold; pointer-events: none; animation: popUp 0.6s ease-out forwards; text-shadow: 1px 1px 0 #000; z-index: 100; white-space: nowrap; }
.crit { color: #ff3333; font-size: 1.8rem; z-index: 101; text-shadow: 0 0 10px #f00; }
@keyframes popUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-30px) scale(1.2); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
.shake { animation: shake 0.2s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.time-bar {
    width: 0%; /* ★初期値は0%にする */
    height: 5px;
    background: #f00;
    margin-top: 6px;
    border-radius: 3px;
    /* コンテナに対して90%の幅を持たせるが、widthプロパティ自体はJSで0%〜100%制御されるため、
       ここでは「親要素に対する相対幅」ではなく、margin等で調整する */
    margin-left: auto;
    margin-right: auto;
    /* 念のため最大幅を制限 */
    max-width: 95%; 
}
.levelup-overlay { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #ff0; font-size: 3rem; font-weight: bold; text-shadow: 0 0 20px #ff0; opacity: 0; pointer-events: none; z-index: 200; }
.levelup-anim { animation: levelup 2s ease-out; }
@keyframes levelup { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -100%) scale(1); } }
@keyframes vibe { 0% { transform: translate(0,0); } 25% { transform: translate(-1px,1px); } 50% { transform: translate(0,0); } 75% { transform: translate(1px,-1px); } 100% { transform: translate(0,0); } }

/* ★ショップモーダル */
.shop-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex; flex-direction: column;
    padding: 20px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.shop-overlay.show { opacity: 1; pointer-events: auto; }

.shop-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #fff; padding-bottom: 10px; margin-bottom: 20px;
}
.shop-title { font-size: 1.5rem; color: #ff0; font-weight: bold; }
.shop-coins { font-size: 1.2rem; color: #fff; }
.shop-close-btn {
    background: #444; border: 1px solid #fff; color: #fff; padding: 5px 15px; cursor: pointer;
}

.shop-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;
    /* スクロール許可 */
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* コンテンツがはみ出す場合に備えて高さを明示的に確保 */
    min-height: 0;
}

.shop-item {
    background: #222; border: 1px solid #555; padding: 10px; border-radius: 4px;
    display: flex; justify-content: space-between; align-items: center;
}
.shop-item.locked { opacity: 0.5; pointer-events: none; }

.item-info { display: flex; flex-direction: column; }
.item-name { font-size: 1rem; color: #0ff; font-weight: bold; }
.item-desc { font-size: 0.7rem; color: #aaa; margin-top: 2px; }
.item-lvl { font-size: 0.8rem; color: #ff0; margin-top: 2px; }

.buy-btn {
    background: #004; border: 1px solid #00f; color: #fff; padding: 10px; min-width: 80px; text-align: center; cursor: pointer;
}
.buy-btn:active { background: #006; }
.buy-btn.disabled { background: #333; border-color: #555; color: #888; pointer-events: none; }

/* ギルドボタン（コマンドウィンドウ内） */
.guild-btn {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    background: #222; border: 1px solid #aaa; color: #aaa;
    padding: 8px 12px; font-size: 0.8rem; cursor: pointer; border-radius: 4px;
}
.guild-btn:active { background: #444; color: #fff; }

/* ★図鑑モーダル (基本はショップと同じ) */
.collection-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex; flex-direction: column;
    padding: 20px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.collection-overlay.show { opacity: 1; pointer-events: auto; }

.collection-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #fff; padding-bottom: 10px; margin-bottom: 20px;
}
.collection-title { font-size: 1.5rem; color: #0f0; font-weight: bold; } /* 緑色 */

.collection-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px;
    /* スクロール許可 */
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* コンテンツがはみ出す場合に備えて高さを明示的に確保 */
    min-height: 0;
}

.monster-card {
    background: #111; border: 1px solid #444; padding: 15px; border-radius: 4px;
    display: flex; align-items: center; gap: 15px;
}
.monster-card.unknown .monster-img {
    filter: brightness(0); /* 黒塗り */
}
.monster-card.unknown .monster-name {
    color: #888;
}

/* 図鑑内の画像表示 */
.monster-img-box {
    width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;
    background: #222; border-radius: 50%; border: 1px solid #333;
    flex-shrink: 0;
}
.monster-img {
    width: 50px;
    height: 50px;
    /* 以下共通設定 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;
}

.monster-data { flex: 1; display: flex; flex-direction: column; }
.monster-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
.monster-info-right {
    display: flex;
    align-items: center;
    gap: 10px; /* 文字とアイコンの間隔 */
}
.monster-name { font-size: 1.1rem; color: #fff; font-weight: bold; }
.monster-count { font-size: 0.9rem; color: #ff0; }
.monster-desc { font-size: 0.8rem; color: #aaa; line-height: 1.4; white-space: pre-wrap; }

/* 閉じるボタン共通化 */
.close-btn {
    background: #444; border: 1px solid #fff; color: #fff; padding: 5px 15px; cursor: pointer;
}

/* ★メニューボタンコンテナ */
.menu-buttons {
    position: absolute;
    right: 15px;       /* 右端からの距離 */
    top: 50%;          /* 上下中央の基準 */
    transform: translateY(-50%); /* 完全に上下中央に配置 */
    display: flex;
    flex-direction: row; /* 横並び */
    align-items: center; /* コンテナ内で上下中央揃え */
    gap: 8px;          /* ボタン間の隙間 */
    z-index: 10;
    margin: 0;
    padding: 0;
}

/* 個別のボタンデザイン */
.menu-btn {
    /* 重要: 個別の絶対配置をリセット */
    position: static !important; 
    transform: none !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;

    background: #222;
    border: 1px solid #aaa;
    color: #ddd;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    
    /* ▼ 修正: 固定幅をやめて、最低幅を設定 */
    width: auto;     
    min-width: 56px; /* 50px -> 56px に広げて余裕を持たせる */
    padding: 0 4px;  /* 左右の余白 */
    
    /* ▼ 追加: 文字の折り返しを禁止 */
    white-space: nowrap;
    
    height: 34px;
    
    /* テキストをボタン内で上下左右中央に */
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 2px 0 #111;
    box-sizing: border-box;
    line-height: 1;
}

.menu-btn:active {
    background: #444;
    color: #fff;
    transform: translateY(2px) !important; /* クリック時の沈み込み */
    box-shadow: none;
}

/* ★トゲ反動演出：赤いフラッシュ */
@keyframes red-flash {
    0%, 100% { box-shadow: inset 0 0 0 rgba(255,0,0,0); }
    50% { box-shadow: inset 0 0 100px rgba(255,0,0,0.8); }
}
.battle-scene.pain-flash {
    animation: red-flash 0.3s ease-out;
}
/* 痛いポップアップ文字色 */
.pain-text { color: #ff4444; font-weight: bold; font-size: 1.4rem; }


/* ★バトルアイテムバー（UIエリアとバトル画面の間に配置） */
.battle-item-bar {
    width: 100%;
    height: 50px;
    background: #111;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    padding: 5px 0;
}

.battle-item-icon {
    width: 40px; height: 40px;
    background-color: #222;
    border: 2px solid #444;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    /* 画像設定 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: pixelated;
}
.battle-item-icon:active { transform: scale(0.95); }

/* 所持数バッジ */
.item-count-badge {
    position: absolute; bottom: -5px; right: -5px;
    background: #f00; color: #fff;
    font-size: 0.7rem; padding: 2px 5px; border-radius: 10px;
    border: 1px solid #fff; font-weight: bold;
}

/* アイテムごとの画像 */
.item-potion_hit { background-image: url('../images/potion_hit.png'); }
.item-item_double { background-image: url('../images/item_double.png'); }
.item-item_cat { background-image: url('../images/item_cat.png'); }

/* 効果発動中のエフェクト */
.battle-item-icon.active {
    border-color: #ff0;
    box-shadow: 0 0 10px #ff0;
    animation: vibe 0.1s infinite;
}
.battle-item-icon.disabled {
    filter: grayscale(1); opacity: 0.5; pointer-events: none;
}

/* 図鑑内のアーティファクト表示用 */
.artifact-icon {
    width: 30px; height: 30px;
    background-color: #222;
    border: 1px solid #ffd700;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* margin-left: auto;  <-- これを削除 */
    margin-left: 0;
    
    flex-shrink: 0; /* 縮小防止 */
}
.artifact-none { display: none; }

/* アイコン画像 */
.icon-sword { background-image: url('../images/art_sword.png'); }
.icon-scroll { background-image: url('../images/art_scroll.png'); }
.icon-crown { background-image: url('../images/art_crown.png'); }
/* グミ素材などを流用する場合のプレースホルダー */
.icon-jelly { background-image: url('../images/silver_gummy.png'); }

/* 設定モーダル */
.settings-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex; flex-direction: column;
    padding: 20px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.settings-overlay.show { opacity: 1; pointer-events: auto; }

.settings-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #fff; padding-bottom: 10px; margin-bottom: 20px;
}
.settings-title { font-size: 1.5rem; color: #aaa; font-weight: bold; }

.settings-list {
    flex: 1; display: flex; flex-direction: column; gap: 20px;
    /* スクロール許可 */
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* コンテンツがはみ出す場合に備えて高さを明示的に確保 */
    min-height: 0;
}

/* 設定項目 */
.setting-item {
    display: flex; justify-content: space-between; align-items: center;
    background: #222; padding: 15px; border: 1px solid #444; border-radius: 4px;
}
.setting-label { font-size: 1rem; color: #fff; }

/* トグルボタン風 */
.toggle-btn {
    background: #444; border: 1px solid #888; color: #aaa;
    padding: 5px 15px; cursor: pointer; min-width: 60px; text-align: center;
}
.toggle-btn.on { background: #008000; color: #fff; border-color: #0f0; }

/* シェアボタン (X) */
.share-btn {
    background: #000; border: 1px solid #fff; color: #fff;
    padding: 15px; text-align: center; font-weight: bold; cursor: pointer;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    text-decoration: none; /* リンク用 */
}
.share-btn:active { background: #333; }

/* リセットボタン */
.reset-btn {
    background: #400; border: 1px solid #f00; color: #f88;
    padding: 15px; text-align: center; cursor: pointer; margin-top: auto;
}

/* 新アーティファクトアイコン */
.icon-fang  { background-image: url('../images/art_fang.png'); }
.icon-lens  { background-image: url('../images/art_lens.png'); }
.icon-gear  { background-image: url('../images/art_gear.png'); }

/* オフラインレポートモーダル */
.report-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000; /* 最前面 */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px; box-sizing: border-box;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.report-overlay.show { opacity: 1; pointer-events: auto; }

.report-box {
    width: 100%; max-width: 400px;
    background: #222; border: 2px solid #ffd700; border-radius: 8px;
    padding: 20px; text-align: center;
}

.report-title { font-size: 1.5rem; color: #ffd700; font-weight: bold; margin-bottom: 20px; }
.report-msg { font-size: 0.9rem; color: #ccc; margin-bottom: 20px; line-height: 1.6; }
.report-val { font-size: 1.2rem; color: #fff; font-weight: bold; display: block; margin: 5px 0; }

.report-ok-btn {
    background: #ffd700; color: #000; border: none;
    padding: 10px 30px; font-size: 1rem; font-weight: bold;
    border-radius: 4px; cursor: pointer; margin-top: 10px;
}
.report-ok-btn:active { transform: scale(0.95); }

/* アイテム詳細モーダル */
.item-detail-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 4000; /* 図鑑(2000)より上 */
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.item-detail-overlay.show { opacity: 1; pointer-events: auto; }

.item-detail-box {
    width: 80%; max-width: 300px;
    background: #222; border: 2px solid #fff; border-radius: 8px;
    padding: 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.detail-icon {
    width: 60px; height: 60px;
    background-color: #000; border: 2px solid #ffd700; border-radius: 8px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    margin-bottom: 5px;
}

.detail-name { font-size: 1.2rem; color: #ffd700; font-weight: bold; }
.detail-desc { font-size: 0.9rem; color: #ccc; line-height: 1.4; }
.detail-count { font-size: 1rem; color: #fff; font-weight: bold; margin-top: 5px; border-top: 1px solid #555; padding-top: 10px; width: 100%; }
.detail-effect { font-size: 0.85rem; color: #0ff; }

.detail-close-btn {
    background: #444; border: 1px solid #fff; color: #fff;
    padding: 8px 20px; cursor: pointer; border-radius: 4px; margin-top: 10px;
}

/* ★追加: リストの中身（子要素）全てに対してもスクロール操作を許可 */
.shop-list *,
.collection-list *,
.settings-list * {
    touch-action: pan-y !important;
}

/* バトル画面などはスクロール禁止のまま */
.battle-scene, 
.command-window {
    touch-action: none;
}

.icon-compass { background-image: url('../images/art_compass.png'); }
.item-item_card { background-image: url('../images/item_card.png'); }

.shop-list, .collection-list, .settings-list,
.shop-list *, .collection-list *, .settings-list * {
    /* 縦スクロールのみ許可（拡大操作はブロックされる） */
    touch-action: pan-y !important; 
    
    /* iOSの慣性スクロール */
    -webkit-overflow-scrolling: touch;
}

.shop-list, .collection-list, .settings-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overscroll-behavior: contain;
    min-height: 0;
}

/* 斬撃エフェクト */
.slash-effect {
    position: absolute;
    width: 100px; /* 画像に合わせて調整 */
    height: 100px;
    background-image: url('../images/effect_slash.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none; /* タップを邪魔しない */
    z-index: 1500; /* 敵より手前、UIより奥 */
    opacity: 0;
}

/* アニメーション定義: 現れて、少し移動しながら消える */
@keyframes slashAnim {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(-10deg); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -40%) scale(1.0) rotate(10deg); }
}

/* 適用クラス */
.slash-active {
    animation: slashAnim 0.3s ease-out forwards;
}

.icon-battery { background-image: url('../images/art_battery.png'); }
.icon-shield  { background-image: url('../images/art_shield.png'); }
.icon-orb     { background-image: url('../images/art_orb.png'); }

.hammer-effect {
    position: absolute;
    width: 80px; 
    height: 80px;
    background-image: url('../images/effect_hammer.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1500;
    
    /* 回転軸：右下（持ち手） */
    transform-origin: bottom right;
}

/* シンプルな「ピコッ」アニメーション */
@keyframes hammerSwing {
    0% { 
        transform: rotate(0deg); 
        opacity: 1;
    }
    40% { 
        /* 素早く振り下ろす (-45度) */
        transform: rotate(-45deg); 
        opacity: 1;
    }
    70% {
        /* そのまま少し留まる（ヒット感） */
        transform: rotate(-45deg);
        opacity: 1;
    }
    100% { 
        /* その場でフェードアウト */
        transform: rotate(-45deg); 
        opacity: 0; 
    }
}

.hammer-active {
    /* 時間も短縮 (0.25s -> 0.15s) してテンポ良く */
    animation: hammerSwing 0.15s ease-out forwards;
}

/* ローディング画面 */
.loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 5000; /* 最前面 */
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }

.loading-text {
    font-size: 1.5rem; color: #0ff; font-weight: bold;
    animation: blink 1s infinite;
}
.loading-sub {
    margin-top: 10px; font-size: 0.8rem; color: #888;
}