/* style.css */
/* v138: 最終形態の外観 */

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    overscroll-behavior: none;
    background-color: #1a1a2e; /* 濃い藍色 */
    touch-action: manipulation; /* ダブルクリックズーム防止 */
}

/* --- 1. 全体レイアウト --- */
.game-board {
    display: grid;
    /* 相手手札 | 相手フィールド | 中央情報 | 自分フィールド | 自分手札 */
    grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 4px;
    height: 100vh;
    width: 100vw;
    padding: 6px;
    background-color: #0a0e20; /* 深淵の藍 */
    position: relative;
    /* ★ 盤面背景(2026-07-12・CSS強化版): アビスの海淵テーマ。
       上=相手側(紫の淀み) / 下=自分側(青緑の深海光) / 四隅ビネット */
    background-image:
        radial-gradient(ellipse 100% 60% at 50% 118%, rgba(24, 130, 150, 0.55), transparent 68%),
        radial-gradient(ellipse 100% 60% at 50% -18%, rgba(130, 40, 130, 0.45), transparent 68%),
        radial-gradient(ellipse 70% 34% at 50% 50%, rgba(80, 110, 190, 0.20), transparent 72%),
        radial-gradient(ellipse 140% 100% at 50% 50%, transparent 55%, rgba(0, 0, 8, 0.55) 100%),
        linear-gradient(180deg, #171d3d 0%, #0a0f26 45%, #0a1128 55%, #0f1834 100%);
}

/* ★ 光柱: 深海に斜めに差し込む淡い光(クリックは素通し) */
.game-board::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(115deg, transparent 18%, rgba(100, 190, 220, 0.10) 26%, transparent 35%),
        linear-gradient(115deg, transparent 52%, rgba(110, 150, 220, 0.07) 61%, transparent 70%),
        linear-gradient(115deg, transparent 76%, rgba(150, 90, 190, 0.08) 83%, transparent 91%);
}

/* ★ 泡と発光プランクトン(静的な粒。旧ドット柄の後継) */
.game-board::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(circle at 8% 82%, rgba(150, 230, 255, 0.20) 0 2px, transparent 4px),
        radial-gradient(circle at 15% 64%, rgba(150, 230, 255, 0.10) 0 3px, transparent 5px),
        radial-gradient(circle at 88% 74%, rgba(140, 220, 255, 0.16) 0 2px, transparent 4px),
        radial-gradient(circle at 93% 52%, rgba(140, 220, 255, 0.08) 0 4px, transparent 6px),
        radial-gradient(circle at 78% 88%, rgba(160, 240, 255, 0.12) 0 1px, transparent 3px),
        radial-gradient(circle at 5% 30%, rgba(200, 140, 230, 0.10) 0 2px, transparent 4px),
        radial-gradient(circle at 95% 18%, rgba(200, 140, 230, 0.12) 0 2px, transparent 4px),
        radial-gradient(circle at 70% 8%, rgba(190, 130, 220, 0.08) 0 3px, transparent 5px),
        radial-gradient(circle at 30% 12%, rgba(180, 120, 210, 0.07) 0 2px, transparent 4px),
        radial-gradient(circle at 45% 94%, rgba(150, 230, 255, 0.14) 0 2px, transparent 4px);
}
.field-row {
    display: grid;
    /* リソース | フィールド本体 | リソース */
    grid-template-columns: 60px 1fr 60px;
    gap: 6px;
    min-height: 0; /* (※ 縮小できるように) */
}

/* ★ 盤面背景(2026-07-12): 陣営の色温度(相手=淀んだ紫赤 / 自分=深海の青緑) */
#opponent-field {
    box-shadow: inset 0 0 60px rgba(160, 50, 100, 0.35);
    border: 1px solid rgba(190, 80, 120, 0.28);
}
#player-field {
    box-shadow: inset 0 0 60px rgba(40, 140, 175, 0.35);
    border: 1px solid rgba(70, 160, 195, 0.30);
}

.center-area {
    /* ★ 背景を透かして深淵を見せる(2026-07-12) */
    background: rgba(4, 6, 16, 0.35);
    border-radius: 10px;
    padding: 6px;
    display: flex; 
    gap: 6px; 
    align-items: center; 
    justify-content: center; 
    min-width: 0; 
    overflow-x: auto; /* (※ 横スクロール) */
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    position: relative;
}
.hand-area { 
    justify-content: center; 
    padding: 8px; 
    min-height: 110px; /* 手札エリアの最小高さを確保 */
}

/* --- 2. カード --- */
.card { 
    min-width: 72px; /* カードの最小幅 */
    width: 72px; 
    height: 100px; 
    border-radius: 6px; 
    background-size: cover;
    background-position: center; 
    color: white; 
    padding: 4px; 
    font-size: 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    border: 2px solid #555; 
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    user-select: none; 
    z-index: 10;
}
.card.selected { 
    transform: translateY(-10px) scale(1.08); 
    border-color: #00aaff; 
    box-shadow: 0 0 15px #00aaff;
}
.card.can-attack, .card.is-attacker { 
    border-color: #ffaa00; 
    box-shadow: 0 0 10px #ffaa00;
}
.card.valid-target { 
    box-shadow: 0 0 15px #ff4444 !important; 
    border-color: #ff4444 !important;
}
.card.is-chaining { 
    border-color: #f1c40f;
    box-shadow: 0 0 15px #f1c40f, 0 0 5px #f1c40f inset; 
    animation: pulse-yellow 1.5s infinite;
}
@keyframes pulse-yellow { 
    0% { box-shadow: 0 0 15px #f1c40f, 0 0 5px #f1c40f inset; } 
    50% { box-shadow: 0 0 25px #f1c40f, 0 0 10px #f1c40f inset; } 
    100% { box-shadow: 0 0 15px #f1c40f, 0 0 5px #f1c40f inset; } 
}
.card.ability-locked { 
    filter: grayscale(100%) brightness(0.5);
}

/* カード内部のUI */
.card-cost, .gem-count, .card-count, .chain-order { 
    background: rgba(0, 0, 0, 0.65); 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
}
.card-cost { 
    position: absolute;
    top: 3px; 
    left: 3px; 
    width: 20px; 
    height: 20px; 
    font-size: 12px; 
    border: 1px solid #fff;
}
.card-name { 
    font-weight: bold; 
    text-shadow: 1px 1px 3px black; 
    font-size: 9px;
    line-height: 1.1; 
    text-align: center; 
    margin-top: 20px; 
}
.gem-count { 
    position: absolute; 
    bottom: 3px;
    left: 3px; 
    width: 20px; 
    height: 20px; 
    font-size: 12px; 
    color: #f0f; 
    border: 1px solid #f0f;
}
.card-count { /* (※ v138: 墓地・デッキのカード枚数表示用) */
    position: absolute; 
    bottom: 3px; 
    right: 3px; 
    width: 22px; 
    height: 22px;
    font-size: 12px; 
    border: 1px solid #fff; 
    color: #fff; 
}
.chain-order { /* (※ v138: チェーンモーダル用) */
    position: absolute;
    bottom: 3px; 
    right: 3px; 
    width: 22px; 
    height: 22px; 
    font-size: 14px; 
    color: #f1c40f; 
    border: 1px solid #f1c40f;
}

/* --- 3. 中央情報 (ライフ・フェイズ) --- */
.player-info-container { 
    display: grid; 
    grid-template-columns: auto 1fr auto; 
    align-items: center; 
    gap: 8px;
}
.player-info { 
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 8px; 
    padding: 4px 8px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    gap: 8px; 
    border: 1px solid transparent; 
    cursor: pointer; 
    transition: all 0.2s ease;
}
.life { 
    font-size: 22px; 
    font-weight: bold; 
    color: #ff4444;
}
.phase-indicator { 
    font-size: 14px; 
    font-weight: bold; 
    color: #fff;
    padding: 4px 8px; 
    border-radius: 6px; 
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 20;
}

/* --- 4. リソース (マナ・ジェム・デッキ) --- */
.resource-container { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
    padding: 8px 0; 
}
.deck-graveyard-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px;
}
.resource-display { 
    width: 52px; 
    height: 52px;
    background: rgba(0, 0, 0, 0.3); 
    border-radius: 8px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    cursor: pointer;
    border: 1px solid #555; 
    background-size: cover; 
    background-position: center; 
}
.resource-display svg { 
    width: 20px;
    height: 20px; 
    opacity: 0.6; 
}
.resource-count { 
    font-size: 14px; 
    font-weight: bold;
    font-family: 'Inter', monospace; 
    text-shadow: 1px 1px 2px #000; 
}
/* リソース表示時のカード（手札エリア） */
.resource-card-view { 
    transform: rotate(0deg) !important;
    min-width: 60px; 
    width: 60px; 
    height: 84px; 
}
.resource-card-view.tapped { 
    filter: grayscale(80%) brightness(0.6);
    transform: rotate(15deg) !important; 
}

/* --- 5. ボタンとモーダル --- */
.action-button { 
    position: fixed;
    right: 10px; 
    bottom: 10px; 
    z-index: 50; 
}
.priority-buttons { 
    position: fixed; 
    left: 10px;
    bottom: 10px; 
    z-index: 50; 
    display: flex; 
    gap: 8px; 
}
.log-container { 
    position: fixed;
    top: 10px; 
    left: 10px; 
    width: 180px; 
    height: 120px; 
    background: rgba(0, 0, 0, 0.6); 
    border-radius: 8px; 
    color: #eee; 
    padding: 8px;
    font-size: 11px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column-reverse; 
    z-index: 100; 
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 200;
}
.modal-content { 
    background: #2c3e50; 
    padding: 30px; 
    border-radius: 15px; 
    text-align: center; 
    color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
}
.targeting { /* (※ v138: `InputManager` が `gameState.ui.targeting` をセットする) */
    cursor: crosshair;
}
.player-info.valid-target { /* (※ v138: ライフへのターゲット) */
    box-shadow: 0 0 15px #ff4444 !important; 
    border-color: #ff4444 !important;
}
.selection-item { position: relative; } /* (※ 順序バッジの基準) */
.selection-order-badge { /* ★ 順序付き選択(アルテラ等): タッチ順の番号=山札の上から何枚目 */
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1c40f;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: 1px solid #fff;
}
.card-ability-text { /* (※ v138: `card-data.js` の `text` を表示) */
    position: absolute; 
    bottom: 4px; 
    left: 0; 
    right: 0; 
    font-size: 7px;
    padding: 2px; 
    background: rgba(0, 0, 0, 0.75); 
    text-align: center; 
    display: none; /* ★ v173: 非選択時は非表示 */
}
.card.selected .card-ability-text {
    display: block; /* ★ v173: 選択時のみ表示 */
}