/* =========================================
   style.css の内容 (Mindustry風テックツリー対応済み)
   ========================================= */
:root {
    --bg-color: #0b0f19;
    --panel-bg: #151a25;
    --text-color: #e4e4e4;
    --accent-color: #3a7dff;
    --highlight: #ffdd44;
    --danger: #ff4c4c;
    --warning: #ffaa00; /* 警告色 */
    --energy-color: #ffaa00; /* エネルギー色 */
}
body { 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    background: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; /* 最小高さを確保しつつ、コンテンツが増えれば伸びる */
}

/* -------------------------------------
   スタート画面
   ------------------------------------- */
#splashScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}
#splashScreen h1 {
    color: var(--accent-color);
    font-size: 2.5em;
}
#splashScreen button {
    padding: 15px 30px;
    font-size: 1.2em;
    margin-top: 20px;
    background: #28a745; /* 強調カラー */
}
#splashScreen button:hover {
    background: #218838;
}


/* -------------------------------------
   ゲームUI
   ------------------------------------- */
#gameUI {
    display: none; /* 初期状態で非表示 */
    flex-direction: column;
    flex: 1;
}

header { 
    background: var(--panel-bg); 
    padding: 10px 20px; 
    border-bottom: 1px solid #333; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; /* ヘッダーは縮まない */
}
header h1 { 
    margin: 0; 
    font-size: 20px; 
    color: var(--accent-color); 
}
.save-status { 
    font-size: 10px; 
    color: var(--highlight); 
    margin-right: 20px; 
}

.main-container { 
    display: flex; 
    flex: 1; /* 残りスペースを使う（デスクトップ） */
    padding: 10px; 
    gap: 10px; 
    overflow: hidden; /* デスクトップでは全体スクロールはさせない */
}

/* サイドバー (左) */
.sidebar { 
    width: 200px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow-y: auto;
    flex-shrink: 0;
}

/* 中央コンテンツ */
.content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    overflow: hidden; 
}

/* コンポーネント */
.panel { 
    background: #1c2230; 
    padding: 10px; 
    border-radius: 6px; 
    border: 1px solid #333; 
}
.panel h2 { 
    margin-top: 0; 
    font-size: 16px; 
    padding-bottom: 5px; 
    color: var(--accent-color); 
    border-bottom: 1px solid #444;
}

/* デブリフィールドパネル (常に表示される上部) */
#debrisFieldPanel {
    height: 45vh; 
    min-height: 250px; 
    display:flex; 
    flex-direction:column;
    flex-shrink: 0; /* デスクトップで高さを維持 */
}
#debrisField {
    flex: 1; 
    border: 1px solid #444;
    background: #000;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}
.debris {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #777;
    border-radius: 4px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    border: 1px solid #aaa;
    transition: transform 0.1s;
    user-select: none;
}
/* 自動回収ドローン視覚化のための追加CSS */
.debris.auto-collected {
    background: #4cc2ff !important; /* ドローンカラー (青) */
    border-color: #ffffff !important;
    transform: scale(1.5);
    opacity: 0;
    transition: all 0.3s ease-out; /* 0.3秒でアニメーション */
    z-index: 999;
}

/* ★修正: レアデブリを緑色に */
.debris.rare {
    background: #4cff4c; /* 緑: 資源量5倍 (Green Rare) */
    color: #000;
    border: 1px solid #2ecc71;
    box-shadow: 0 0 8px rgba(76, 255, 76, 0.8); 
    font-weight: bold;
}

/* ★修正: チタンデブリを赤色に */
.debris.titanium {
    background: #ff4c4c; /* 赤: 高額資源 (Red Rare/Titanium) */
    color: #fff;
    border: 1px solid #cc3333;
    box-shadow: 0 0 5px #ff4c4c;
    font-weight: bold;
}

.debris:hover {
    transform: scale(1.1);
}

/* タブコンテナ (残りスペース全てを使用) */
#tabContainer {
    flex: 1; 
    padding: 0; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tab-buttons {
    display: flex;
    border-bottom: 1px solid #444;
    padding: 10px;
    flex-shrink: 0;
}
.tab-buttons button {
    flex: 1;
    background: #232a38;
    color: var(--text-color);
    border-radius: 4px 4px 0 0;
    padding: 10px 12px;
    font-size: 14px;
    width: auto;
    border: 1px solid #333;
    border-bottom: none;
    margin: 0 1px;
}
.tab-buttons button.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.tab-content {
    flex: 1; 
    padding: 10px;
    overflow-y: auto; 
}
.tab-content.hidden {
    display: none;
}

/* ボタン */
button { 
    background: var(--accent-color); 
    color: white; 
    border: none; 
    padding: 8px 12px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 14px; 
    width: 100%; 
}
button:hover { 
    background: #508aff; 
}
button:disabled { 
    background: #444; 
    cursor: not-allowed; 
    opacity: 0.7; 
}
/* 研究不可ボタンの強調色 */
.tech-node button:disabled { 
    /* 初回研究コスト不足時のみ適用 */
} 

/* その他 */
.stat-row { 
    display: flex; 
    justify-content: space-between; 
    font-size: 13px; 
    margin-bottom: 4px; 
}
.resource-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 4px 0; 
    font-size: 13px;
    border-bottom: 1px dotted #333;
}
.res-val { color: var(--highlight); font-weight: bold; }
.res-val.energy { color: var(--energy-color); } /* エネルギー値のハイライト */

/* マーケット・精製 */
.market-section {
    padding-bottom: 15px;
    border-bottom: 1px dashed #444;
    margin-bottom: 15px;
}
.market-row {
    border: 1px solid #333;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    background: #232a38;
}
.market-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 5px;
}
.sell-price, .buy-price { 
    font-size: 12px; 
    margin-left: 10px;
}
.slider-control { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 8px; 
    font-size: 13px;
}
.slider-control input[type="range"] {
    flex: 1;
}
.sell-buttons, .buy-buttons {
    display: flex;
    gap: 5px;
}
.sell-buttons button, .buy-buttons button {
    width: auto;
    padding: 6px 8px;
    font-size: 12px;
}
.buy-buttons button {
    background: #1e8736; /* 購入ボタンは緑 */
}
.buy-buttons button:hover {
    background: #21a840;
}


/* --- テックツリー & 施設グリッド UI (Mindustry風) --- */
#techContent, #facilityContent {
    overflow: auto; /* ツリー全体をスクロール可能にする */
    position: relative;
    padding: 0; 
}

#techList, #facilityGrid {
    position: relative;
    width: 1500px; /* ★仮想的な幅 (ツリーの最大サイズ) */
    height: 1000px; /* ★仮想的な高さ (ツリーの最大サイズ) */
    min-width: 100%;
    min-height: 100%;
    padding: 20px;
}

/* Tech Node Styling */
.tech-node, .facility-node {
    position: absolute; /* ★絶対配置に変更 */
    width: 180px;       /* ノードの幅を固定 */
    height: 100px;      /* ノードの高さを固定 */
    padding: 10px;
    margin-bottom: 0; /* マージンを削除 */
    border-radius: 6px;
    transition: all 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 2; /* ★修正: 線の上に表示されるように設定 */
    
    /* 基本デザイン: ロック時 */
    background: #232a38; 
    border: 1px solid #3a475c; 
    opacity: 0.6; /* ロックされているものは暗く */
}

.tech-node.purchased {
    background: #11151c; /* 研究済み */
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(58, 125, 255, 0.8); /* 明るいシャドウ */
    opacity: 1; 
    z-index: 3; /* ★修正: 研究済みのノードをさらに前面へ */
}
/* ★施設ノードの建設済みスタイル★ */
.facility-node.built {
    background: #11151c; 
    border-color: #4cff4c; /* 建設済みは緑色にハイライト */
    box-shadow: 0 0 12px rgba(76, 255, 76, 0.8);
    opacity: 1; 
    z-index: 3;
}

.tech-node.locked, .facility-node.locked {
    border-style: dashed;
    opacity: 0.4;
}

/* 接続線用のクラス (JSで動的に生成) */
.tech-line {
    position: absolute;
    background: #5c677f; /* ★線は暗めの色 */
    height: 3px;         /* 線の太さ */
    z-index: 1;          /* ノードの裏側に表示 */
    pointer-events: none; /* クリックを透過 */
    border-radius: 1px;
}

/* 建設済み施設の接続線は緑 */
.tech-line.active {
    background: var(--accent-color); /* アクティブなテックラインはアクセントカラー */
    box-shadow: 0 0 5px rgba(58, 125, 255, 0.8);
}

.tech-node button, .facility-node button {
    margin-top: 5px;
    width: 100%;
    font-size: 12px;
    padding: 6px;
}

.tech-name, .facility-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--highlight);
    text-align: center;
    border-bottom: 1px dotted #444;
    padding-bottom: 3px;
    margin-bottom: 3px;
}
.tech-desc, .facility-desc {
    font-size: 11px;
    color: #ccc;
    margin-bottom: 3px;
    height: 25px; /* 高さ固定でレイアウト崩れを防ぐ */
    overflow: hidden;
    line-height: 1.2;
}
.tech-cost, .facility-info-status {
    font-size: 11px;
    margin-bottom: 3px;
    color: #999;
}
.facility-info-status {
    height: 15px; /* 高さ調整 */
    overflow: hidden;
    line-height: 1.2;
}


/* フローティングテキスト */
.float-text {
    position: fixed;
    font-weight: bold;
    color: #fff;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 1000;
    text-shadow: 1px 1px 2px #000;
}
@keyframes floatUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

/* =========================================
   レスポンシブ対応 (メディアクエリ)
   ========================================= */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
        flex: none; 
        height: auto;
        min-height: 100vh;
        overflow-y: visible; /* ★修正: スマホでは縦スクロールを可能にする */
        padding: 5px;
    }

    .sidebar {
        width: 100%;
        order: 0; 
        max-height: 300px; /* サイドバーが長くなりすぎないように制限 */
    }
    
    .content {
        width: 100%;
        order: 1; 
        height: auto;
        min-height: auto; 
        overflow: visible;
        flex: none; /* スマホではフレックス高さを解除 */
    }
    
    #debrisFieldPanel {
        height: 350px; 
        flex: none; 
        max-height: 50vh;
    }
    
    #tabContainer {
        flex: none;
        height: auto; 
        min-height: 400px; /* タブコンテナが潰れないように最小高さを確保 */
    }
    
    .tab-content {
         overflow-y: visible; /* タブコンテンツ内のスクロールを解除し、全体スクロールに任せる */
         height: auto;
    }

    header h1 {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .sell-buttons, .buy-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    .sell-buttons button:nth-child(3), 
    .sell-buttons button:nth-child(4) {
        /* スマホではx100とx10を非表示 */
        display: none; 
    }
}