/* style.css */
/* v138: 最終形態の外観 */
/* ★ v174 (2026-07-22) UI刷新: 末尾の「v174」セクションに カード裏面/カードフレーム/中央HUD/
   リソースラベル/ログ/エフェクト層(fx-layer.js) のスタイルを追加 */

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; /* 手札エリアの最小高さを確保 */
}
/* ★ 2026-08-07(ユーザー要望): 相手手札は0枚でも高さを変えない
   (裏面カード100px+padding16=116px に固定。0枚時の盤面ガタつき防止) */
#opponent-hand { min-height: 116px; }
/* ★ v176追補: 選択時の浮き上がり(translateY+scale)が overflow-y:hidden に
   刈られないよう、自分の手札だけ上に浮き上がり分の余白を確保する */
#player-hand-container { padding-top: 22px; }

/* --- 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: 44px; /* ★ ベータ準備(2026-08-02): 上に操作ヘルプタブのスペースを確保 */
    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: 非選択時は非表示 */
}
/* ★ v176追補(2026-07-25): 選択時の効果表示は #ability-bubble(body直下)が担う。
   見た目は従来と同じ「カードの名前の上に重なるカード幅の帯」だが、実体を
   カードの外に置くことで枠・手札エリアのoverflowに縛られず長文でも伸びられる。
   カード内の .card-ability-text は文面の置き場(常に非表示。モーダルのsublabelは
   インラインstyleで表示しているので影響なし) */



/* ===================================================================
   ★ v174 UI刷新 (2026-07-22)
   =================================================================== */

/* --- 6. カード裏面(採用: グランド・ダイヤ+外周墨流し。defs は index.html) --- */
.card-back { background: radial-gradient(ellipse 90% 60% at 50% 40%, #231a44, #0f0c24 75%); border-color: rgba(120,90,180,.65); cursor: default; }
.card-back svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-frame { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%,-50%) rotate(45deg); border: 2px solid rgba(160,130,230,.75); box-shadow: 0 0 12px rgba(140,100,220,.5); }
.cb-gem { position: absolute; top: 50%; left: 50%; width: 23px; height: 23px; transform: translate(-50%,-50%) rotate(45deg); background: conic-gradient(from 20deg,#c9a8ff,#5a34a8,#e6d4ff,#6f42c4,#a87ef0,#4e2c96,#c9a8ff); border: 1px solid rgba(235,220,255,.85); box-shadow: 0 0 7px rgba(160,120,240,.7); }
.cb-shine { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%) rotate(45deg); background: linear-gradient(135deg,rgba(255,255,255,.95),rgba(220,190,255,.25) 60%); }

/* --- 7. カードフレーム(名前帯+ジェムスロット) --- */
.card-namebar { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 3px 3px; background: linear-gradient(transparent, rgba(4,8,20,.92) 55%); display: flex; flex-direction: column; gap: 1px; z-index: 2; pointer-events: none; }
.card-namebar .card-name { margin-top: 0; }
.gem-pips { display: flex; justify-content: center; gap: 3px; }
.gem-pip { width: 7px; height: 7px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #e0a0ff, #7a3aaa); border: 1px solid rgba(240,200,255,.8); box-shadow: 0 0 4px rgba(200,120,240,.8); }
.gem-pip.empty { background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.3); box-shadow: none; }
.gem-pip-num { font-size: 9px; font-weight: 800; color: #d79af0; display: flex; align-items: center; gap: 3px; }
.card-cost { width: 22px; height: 22px; font-size: 13px; background: rgba(4,10,24,.8); }
/* ★ v176追補: 効果テキストは名前帯の中(名前の上)に積む。bottom固定値だと
   名前が2行に折り返したとき重なっていた(renderer.js createCardDOM が帯内に挿入) */
.card-namebar .card-ability-text { position: static; margin-bottom: 2px; border-radius: 4px; }

/* --- 8. 中央HUD(重なり解消。フェイズ名は renderer.js updatePhaseIndicator が唯一の情報源) --- */
.player-info { width: 168px; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 10px; background: rgba(0,0,0,.45); }
#opponent-info { border-color: rgba(190,80,120,.5); }
#player-info { border-color: rgba(70,160,195,.5); }
.player-info .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#opponent-life { color: #ff6a6a; }
#player-life { color: #5fd6ff; }
.life { font-size: 22px; font-variant-numeric: tabular-nums; }
.phase-indicator { position: static; transform: none; border-radius: 99px; padding: 3px 14px; font-size: 12px; }

/* --- 9. リソースラベル --- */
.resource-display { height: 56px; gap: 1px; }
.resource-display svg { width: 13px; height: 13px; opacity: .45; }
.resource-label { font-size: 7.5px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.55); }

/* --- 10. ログ(空なら非表示。fx-layer が主要イベントを書き込む) --- */
.log-container { width: 200px; height: auto; max-height: 120px; font-size: 10.5px; background: rgba(4,6,16,.72); backdrop-filter: blur(4px); }
.log-container:empty { display: none; }

/* --- 11. エフェクト層(fx-layer.js が生成する fixed オーバーレイ) --- */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 95; }

/* --- 12. 操作ヘルプタブ(ログの上・ベータ準備 2026-08-02) --- */
#help-tab-button {
    position: fixed; top: 10px; left: 10px; z-index: 60;
    background: rgba(4, 6, 16, 0.8); color: #cfe4ff;
    border: 1px solid rgba(120, 170, 255, 0.35); border-radius: 8px;
    font-size: 11px; padding: 4px 10px; cursor: pointer;
}
#help-panel {
    display: none; position: fixed; top: 40px; left: 10px; z-index: 120;
    width: 260px; max-width: calc(100vw - 20px); max-height: calc(100vh - 60px); overflow-y: auto;
    background: rgba(6, 10, 26, 0.96); border: 1px solid rgba(120, 170, 255, 0.4);
    border-radius: 10px; padding: 10px 12px; color: #e8f2ff; font-size: 11.5px;
}
#help-panel.open { display: block; }
#help-panel .hp-title { font-weight: 700; color: #9fd8ff; margin-bottom: 4px; }
#help-panel .hp-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px 0; padding: 0; line-height: 1.45; }
#surrender-button {
    width: 100%; background: rgba(160, 40, 40, 0.85); color: #fff;
    border: none; border-radius: 6px; padding: 6px; font-size: 12px; cursor: pointer;
}
#surrender-button:hover { background: rgba(190, 50, 50, 0.95); }
#feedback-text {
    width: 100%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px; color: #fff; font-size: 11px; padding: 5px; resize: vertical;
}
.hp-fb-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
#feedback-send { background: #4f6ef7; color: #fff; border: none; border-radius: 6px; padding: 4px 14px; font-size: 11px; cursor: pointer; }
#feedback-status { font-size: 10px; color: #9fd8ff; }

/* ゲーム終了後の常設脱出ボタン(勝敗モーダルを消しても残る) */
#post-game-exit {
    position: fixed; top: 40px; right: 10px; z-index: 130;
    background: #4f6ef7; color: #fff; border: none; border-radius: 8px;
    padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#post-game-exit:hover { background: #6b84f9; }
#fx-layer > div { position: fixed; pointer-events: none; }
.fx-ring { border: 2px solid rgba(120,220,200,.85); border-radius: 50%; animation: fxRing .7s ease-out forwards; }
@keyframes fxRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.card.fx-summon { animation: fxSummonIn .5s cubic-bezier(.2,.8,.3,1); }
@keyframes fxSummonIn { 0% { opacity: 0; transform: scale(.55) translateY(12px); } 55% { opacity: 1; transform: scale(1.07); } 100% { transform: scale(1); } }
.card.fx-ability { animation: fxAbility .8s cubic-bezier(.3,0,.3,1); }
@keyframes fxAbility { 0% { filter: brightness(1); } 30% { transform: scale(1.1); filter: brightness(1.7); } 100% { transform: scale(1); filter: brightness(1); } }
.fx-clone { border-radius: 6px; background-size: cover; background-position: center; }
.fx-to-hand { box-shadow: 0 0 14px rgba(80,170,230,.8); animation: fxToHand .8s ease-in forwards; }
@keyframes fxToHand { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-48px) scale(.85); } }
.fx-to-gem { box-shadow: 0 0 14px rgba(255,90,60,.7); animation: fxToGem .7s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes fxToGem { 0% { opacity: 1; transform: perspective(400px) rotateY(0); } 85% { opacity: 1; transform: perspective(400px) rotateY(90deg); } 100% { opacity: 0; } }
.fx-gem-pop { width: 22px; height: 22px; transform: rotate(45deg); background: radial-gradient(circle at 35% 30%, #ffb08a, #c03818); border: 2px solid rgba(255,200,170,.9); box-shadow: 0 0 14px rgba(255,100,50,.9); animation: fxGemPop 1s ease-out forwards; }
@keyframes fxGemPop { 0%, 55% { opacity: 0; transform: rotate(45deg) scale(.3); } 70% { opacity: 1; transform: rotate(45deg) scale(1.2); } 85% { opacity: 1; transform: rotate(45deg) scale(1); } 100% { opacity: 0; } }
.fx-to-mana { animation: fxToMana .8s cubic-bezier(.5,0,.6,1) forwards; }
@keyframes fxToMana { 0% { opacity: 1; filter: none; } 60% { filter: sepia(1) hue-rotate(60deg) saturate(2) brightness(1.15); } 100% { opacity: 0; transform: translateY(44px) scale(.85); filter: sepia(1) hue-rotate(60deg) saturate(2) brightness(1.3); } }
.fx-to-grave { animation: fxToGrave .8s cubic-bezier(.6,0,.7,1) forwards; }
@keyframes fxToGrave { 0% { opacity: 1; filter: none; } 60% { filter: brightness(.45) saturate(.4); } 100% { opacity: 0; transform: translateY(38px); filter: brightness(.05); } }
.fx-to-exile { animation: fxToExile .8s ease-in forwards; }
@keyframes fxToExile { 0% { opacity: 1; filter: none; } 100% { opacity: 0; filter: grayscale(1) brightness(1.6); transform: scale(1.08); } }
.fx-seal { border: 2px solid rgba(255,250,230,.95); box-shadow: 0 0 14px rgba(255,245,200,.8), inset 0 0 8px rgba(255,245,200,.5); animation: fxSeal .9s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes fxSeal { 0% { opacity: 0; transform: rotate(45deg) scale(1.9); } 40% { opacity: 1; transform: rotate(45deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.player-info.fx-hit { animation: fxHitShake .5s; }
@keyframes fxHitShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fx-dmg { font-weight: 900; font-size: 20px; color: #ff5a5a; text-shadow: 0 0 8px rgba(255,60,60,.8); animation: fxDmg 1.1s ease-out forwards; }
.fx-dmg.fx-heal { color: #7ae8a0; text-shadow: 0 0 8px rgba(80,220,140,.8); }
@keyframes fxDmg { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-8px) scale(1.15); } 80% { opacity: 1; transform: translateY(-26px) scale(1); } 100% { opacity: 0; transform: translateY(-36px); } }

/* ============================================================
   ★ v176 (2026-07-25): スマホ縦持ちレイアウト(CSSのみ・DOM/エンジン不変)
   v175のレターボックス縮小はユーザー却下につき撤去。
   縮小ではなく、縦画面(幅700px以下)に合わせて各行を組み直す:
   - 盤面は 100dvh(モバイルブラウザのURLバー対応)
   - カードは指で押せる下限を守って小型化(手札64px/場56px/相手手札の裏面30px)
   - 手札は横スクロール(少枚数のときは中央寄せ = margin:auto トリック)
   - ターン終了/パスは手札の上に退避(手札との重なり回避)
   ============================================================ */
@media (max-width: 700px) {
    .game-board {
        height: 100vh;
        height: 100dvh;
        padding: 4px;
        gap: 3px;
        overflow: hidden; /* ★ v177取込時: 端の装飾(CTAリング等)による横スクロールを防ぐ */
    }

    /* 相手手札: 小さな裏面の帯(裏面30pxなら10枚でも収まるので中央寄せのまま)。
       ★ 2026-08-07: 0枚でも高さ固定(裏面42px+padding6=48px。ガタつき防止) */
    #opponent-hand { padding: 3px; min-height: 48px; justify-content: center; }
    #opponent-hand .card { min-width: 30px; width: 30px; height: 42px; border-width: 1px; border-radius: 4px; }
    #opponent-hand .cb-frame { width: 15px; height: 15px; border-width: 1px; }
    #opponent-hand .cb-gem { width: 10px; height: 10px; }
    #opponent-hand .cb-shine { width: 4px; height: 4px; }

    /* フィールド行: 脇のリソース列を細く */
    .field-row { grid-template-columns: 44px 1fr 44px; gap: 3px; }
    .resource-container { padding: 4px 0; gap: 4px; }
    .resource-display { width: 42px; height: 46px; }
    .resource-display svg { width: 11px; height: 11px; }
    .resource-count { font-size: 11px; }
    .resource-label { font-size: 7px; }

    /* 場のカード: 折り返し2段(4体×2段=8体まで一望。9体以上は縦スクロール) */
    #opponent-field, #player-field {
        flex-wrap: wrap;
        align-content: center;
        overflow-x: hidden;
        overflow-y: auto;
    }
    /* 2段目が生まれたら上寄せ(スクロール挙動を安定させる) */
    #opponent-field:has(.card:nth-child(5)), #player-field:has(.card:nth-child(5)) {
        align-content: flex-start;
    }
    /* 空きエリアタッチ(盤面タッチ=UI_BOARD_CLICKED)の確保: 8体以上かつ最終行まで
       4の倍数でピッタリ埋まっているとき(8体・12体…)だけ下に1カード分の余白。
       9〜11体などは最終行に空きスロットがあるので余白不要(ユーザー裁定)。
       判定は renderer.js renderField が .field-full-rows クラスで刻む(端末非依存) */
    #opponent-field.field-full-rows,
    #player-field.field-full-rows {
        padding-bottom: 88px;
    }
    #opponent-field .card, #player-field .card { min-width: 56px; width: 56px; height: 78px; }
    .card-name { font-size: 8px; }
    .card-cost { width: 18px; height: 18px; font-size: 11px; }
    .gem-pip { width: 6px; height: 6px; gap: 2px; }

    /* 中央HUD: 全体を細身に */
    .player-info-container { gap: 3px; }
    .deck-graveyard-container { gap: 3px; }
    .deck-graveyard-container .resource-display { width: 38px; height: 44px; }
    .player-info { width: auto; min-width: 120px; max-width: 150px; padding: 3px 8px; gap: 5px; }
    .player-info .name { font-size: 11px; }
    .life { font-size: 17px; }
    .phase-indicator { font-size: 10px; padding: 2px 10px; }

    /* 手札: 横スクロール(少枚数なら中央寄せ)。上余白=浮き上がりの逃げ場 */
    .hand-area { padding: 4px; min-height: 96px; justify-content: flex-start; }
    #player-hand-container { padding-top: 18px; min-height: 110px; }
    #player-hand-cards { margin: 0 auto; }
    #player-hand-cards .card, .resource-card-view { min-width: 62px; width: 62px; height: 87px; }
    #hand-view-title { font-size: 9px; }

    /* ボタン: 手札の上に退避(手札との重なり回避) */
    .action-button { right: 4px; bottom: 104px; }
    .action-button button { padding: 8px 14px; font-size: 13px; }
    .priority-buttons { left: 4px; bottom: 104px; gap: 4px; }
    .priority-buttons button { padding: 6px 10px; font-size: 12px; }

    /* ★ 2026-08-05: 左上は「操作ボタン→説明(選択時)→ログ」の縦積みに統一
       (操作ボタンとログが top:2/10 で被っていた+吹き出しの定位置化) */
    #help-tab-button { top: 2px; left: 2px; padding: 3px 8px; font-size: 10px; }

    /* ログ: 操作ボタンの下の極小表示(選択中は renderer が吹き出しの下へ押し下げる) */
    .log-container { top: 30px; left: 2px; width: 96px; max-height: 62px; font-size: 9px; padding: 4px; opacity: .9; }

    /* モーダル: 画面幅に収める */
    .modal-content { padding: 14px; max-width: 94vw; max-height: 88vh; overflow-y: auto; }

    /* 効果テキストの見切れ対策: スマホではカード内の極小テキストを出さず、
       body直下の独立吹き出し(#ability-bubble)に同じ内容を出す(renderer.jsが管理)。
       ※ カード内のfixed吹き出しはiOS Safariがスクロールコンテナ内のfixedを
          正しく浮かせられないバグで見えなかったため、DOMごと外に出した。
       浮き上がり(transform)は従来どおり */
    .card .card-ability-text { display: none !important; }
}

/* ★ v176追補: 選択カードの効果吹き出し(body直下・スマホ専用。renderer.js renderAll が
   内容と座標を管理し、選択カードの真上に出す。表示の仕方は従来と同じ「カードの所に出る」。
   タッチは素通し(pointer-events: none) */
#ability-bubble {
    display: none;
    position: fixed;
    width: 176px;
    font-size: 10px;
    line-height: 1.45;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(6, 10, 26, 0.94);
    border: 1px solid rgba(120, 170, 255, 0.35);
    color: #fff;
    text-align: left;
    white-space: pre-wrap;
    pointer-events: none;
    z-index: 80;
}
/* PCでは従来のカード内表示に寄せる(カード幅・小さめフォント・薄い角丸) */
@media (min-width: 701px) {
    #ability-bubble { font-size: 8px; line-height: 1.4; padding: 3px 4px; border-radius: 4px; border-color: rgba(255, 255, 255, 0.15); }
}


/* ===================================================================
   ★ v177 UI刷新 (2026-07-25): リソース=固有シェイプ + ゾーン着弾/退出エフェクト
   デザイン出典: UI改善案.dc.html ターン11(11a)/ターン12(12a・12b)
   =================================================================== */
.resource-display { background: none; border: none; border-radius: 0; width: 56px; height: auto; gap: 2px; padding: 0; }
.resource-display:active .rz-svg { filter: brightness(1.4); }
.resource-display svg.rz-svg { width: 52px; height: 48px; overflow: visible; }
.rz-num { font-weight: 800; font-family: 'Inter', sans-serif; }
/* ★ 2026-07-25 ユーザー要望: 自分側だけ山札と除外の位置を入れ替え(=除外・墓地・山札の並び)。
   相手側はそのまま(山札・墓地・除外)。DOMは動かさずflexのorderで実現(index/net共通) */
#player-exile-display { order: 1; }
#player-graveyard-display { order: 2; }
#player-deck-display { order: 3; }
.rz-exile-ring { transform-origin: 28px 26px; animation: rzSpin 24s linear infinite; }
@keyframes rzSpin { to { transform: rotate(360deg); } }
/* 旧アイコンサイズ指定(v174)の打ち消し */
.resource-display svg.rz-svg { opacity: 1; }

/* --- ゾーン着弾(イン): シェイプ明滅 + ミニカード落下(0.3秒) --- */
.rz-svg.fx-zone-pulse { animation: fxZonePulse .5s ease-out; }
@keyframes fxZonePulse { 0% { filter: brightness(1); } 25% { filter: brightness(2) saturate(1.4); } 100% { filter: brightness(1); } }
/* --- ゾーン退出(アウト): 暗転(0.4秒) --- */
.rz-svg.fx-zone-dim { animation: fxZoneDim .55s ease-out; }
@keyframes fxZoneDim { 0% { filter: brightness(.5) saturate(.5); } 55% { filter: brightness(.6) saturate(.6); } 100% { filter: brightness(1); } }
/* ミニカード(裏面姿)の落下/飛び出し。fx-layer.js が生成 */
.fx-zone-ghost { width: 22px; height: 30px; border-radius: 3px; background: radial-gradient(ellipse at 50% 40%, #2a1f4e, #12102a); border: 1px solid rgba(160,130,230,.8); }
.fx-zone-ghost::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid rgba(190,160,250,.7); }
.fx-zone-ghost.in { animation: fxZoneGhostIn .3s ease-in forwards; }
@keyframes fxZoneGhostIn { 0% { opacity: 0; transform: translateY(-50px) scale(.95); } 12% { opacity: 1; } 82% { opacity: 1; transform: translateY(-6px) scale(.5); } 100% { opacity: 0; transform: translateY(0) scale(.25); } }
.fx-zone-ghost.out { animation: fxZoneGhostOut .35s ease-out forwards; }
@keyframes fxZoneGhostOut { 0% { opacity: 0; transform: translateY(0) scale(.25); } 25% { opacity: 1; transform: translateY(-12px) scale(.5); } 100% { opacity: 0; transform: translateY(-50px) scale(.95); } }

/* スマホ(700px以下): シェイプ縮小 */
@media (max-width: 700px) {
    .resource-display { width: 44px; height: auto; background: none; border: none; }
    .resource-display svg.rz-svg { width: 40px; height: 37px; }
    /* ★ 中央HUDのチップは38px(44pxだと3個+名前プレートで横402px>375pxになり盤面がはみ出す) */
    .deck-graveyard-container .resource-display { width: 38px; }
    .deck-graveyard-container svg.rz-svg { width: 34px; height: 31px; }
}


/* --- ★ v178 (2026-07-25/14e採用): セットフェイズの未チャージ誘導 ---
   マナ=3結晶が別周期で浮遊 / ジェム=ファセットの光が移ろう+輪郭呼吸 / 両方にソナーリング。
   タイミング(2.2/2.8/2.5秒・リング2.2秒・ジェム側1.1秒遅れ)はユーザー調整済み — 勝手に変えない */
/* 静止時のファセット: 薄い固定ハイライト */
.rz-facet { opacity: 0; }
.rz-facet-3 { opacity: .28; }
.resource-display.rz-cta { position: relative; }
.resource-display.rz-cta::before { content: ''; position: absolute; top: 0; left: 50%; width: 46px; height: 42px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(245,213,74,.22), transparent 70%); animation: rzCtaGlow 2.6s ease-in-out infinite; pointer-events: none; }
#player-gem-display.rz-cta::before { background: radial-gradient(circle, rgba(200,120,240,.24), transparent 70%); animation-delay: 1.3s; }
/* ソナーリング */
.resource-display.rz-cta::after { content: ''; position: absolute; top: 2px; left: 50%; width: 44px; height: 40px; border: 1.5px solid rgba(245,213,74,.7); border-radius: 50%; animation: rzCtaRing 2.2s ease-out infinite; pointer-events: none; opacity: 0; }
#player-gem-display.rz-cta::after { border-color: rgba(200,120,240,.7); animation-delay: 1.1s; }
#player-mana-display.rz-cta svg.rz-svg { filter: drop-shadow(0 0 4px rgba(245,213,74,.55)); }
#player-gem-display.rz-cta svg.rz-svg { filter: drop-shadow(0 0 4px rgba(200,120,240,.55)); }
/* マナ: 結晶の個別浮遊 */
.rz-cta .rz-crys { transform-box: fill-box; transform-origin: center; }
.rz-cta .rz-crys-c { animation: rzCrysA 2.2s ease-in-out infinite; }
.rz-cta .rz-crys-l { animation: rzCrysB 2.8s .3s ease-in-out infinite; }
.rz-cta .rz-crys-r { animation: rzCrysA 2.5s 1.1s ease-in-out infinite; }
/* ジェム: 光の移ろい */
.rz-cta .rz-gem-edge { animation: rzGemEdge 2.6s ease-in-out infinite; }
.rz-cta .rz-facet-1 { animation: rzFacet1 2.6s infinite; }
.rz-cta .rz-facet-2 { animation: rzFacet2 2.6s infinite; }
.rz-cta .rz-facet-3 { animation: rzFacet3 2.6s infinite; }
.resource-display.rz-cta .resource-label { color: rgba(255,255,255,.9); }
@keyframes rzCtaGlow { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
@keyframes rzCtaRing { 0% { opacity: .8; transform: translateX(-50%) scale(.55); } 70%, 100% { opacity: 0; transform: translateX(-50%) scale(1.25); } }
@keyframes rzCrysA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes rzCrysB { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(1px); } }
@keyframes rzFacet1 { 0%, 55%, 100% { opacity: .08; } 20%, 35% { opacity: .42; } }
@keyframes rzFacet2 { 0%, 35%, 90%, 100% { opacity: .08; } 55%, 70% { opacity: .4; } }
@keyframes rzFacet3 { 0%, 15%, 70%, 100% { opacity: .28; } 40%, 50% { opacity: .06; } }
@keyframes rzGemEdge { 0%, 100% { stroke: rgba(224,160,255,.55); } 45% { stroke: rgba(240,216,255,.95); } }

/* --- ★ v179 (2026-07-26): ターン終了ボタン=六角+ガンメタル縁+光沢(15c採用。ユーザー調整済み) --- */
.et-btn { position: relative; padding: 3px; border: none; background: linear-gradient(180deg,#3a3038,#16101a 55%,#241c28); clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%); filter: drop-shadow(0 1px 4px rgba(0,0,0,.7)); cursor: pointer; }
.et-btn:hover { filter: drop-shadow(0 0 8px rgba(255,90,110,.55)); }
.et-btn:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }
.et-inner { position: relative; overflow: hidden; display: block; padding: 8px 28px; background: linear-gradient(170deg,#7a1f2e,#3d0e16 80%); box-shadow: inset 0 1px 0 rgba(255,150,160,.35); clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%); }
.et-btn:active .et-inner { background: linear-gradient(170deg,#5c1723,#2a0a10 80%); }
.et-shine { position: absolute; top: 0; left: 0; width: 36px; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,200,205,.28),transparent); animation: etShine 3.2s ease-in-out infinite; }
.et-btn:disabled .et-shine { display: none; }
.et-label { position: relative; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #ffd9dd; text-shadow: 0 1px 2px #000; }
@keyframes etShine { 0% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@media (max-width: 700px) {
    .action-button .et-btn { padding: 2.5px; }
    .action-button .et-inner { padding: 7px 16px; }
    .et-label { font-size: 12px; }
}

/* --- ★ v180 (2026-08-02): ジェム装着演出(16c採用)。0.3秒以内・中心=新ピップ座標。ユーザー裁定 --- */
.fx-gem-ray { position: fixed; width: 1.5px; height: 12px; margin: -6px 0 0 -.75px; background: linear-gradient(rgba(240,216,255,.9), rgba(224,160,255,0)); animation: fxGemRay .18s ease-in forwards; pointer-events: none; opacity: 0; }
@keyframes fxGemRay { 0% { opacity: 0; transform: rotate(var(--ra)) translateY(-34px) scaleY(1); } 35% { opacity: .9; } 100% { opacity: 0; transform: rotate(var(--ra)) translateY(-9px) scaleY(.25); } }
.fx-gem-flash { position: fixed; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,245,255,.95), rgba(220,160,255,.5) 45%, transparent 72%); animation: fxGemFlash .3s ease-out forwards; pointer-events: none; opacity: 0; }
@keyframes fxGemFlash { 0%, 55% { opacity: 0; transform: scale(.3); } 68% { opacity: 1; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.7); } }
.gem-pip.fx-pip-lit, .fx-pip-lit { animation: fxPipLit .35s ease-out; }
@keyframes fxPipLit { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }

/* ★ 演出同期(2026-08-06): 退場演出中、実カードはクローンに代役させて隠す
   (盤面の枠は再描画まで詰めない。visibilityなのでレイアウトは維持される) */
.card.fx-vanish { visibility: hidden !important; }

/* --- ★ v181 (2026-08-04): ターン開始カットイン(17a+18a/18d採用。全体1.4秒・pointer-events:none) --- */
#fx-turn-cutin { position: fixed; inset: 0; pointer-events: none; z-index: 96; display: flex; align-items: center; justify-content: center; }
#fx-turn-cutin .tc-band { position: absolute; left: 0; right: 0; top: 50%; height: 70px; margin-top: -35px; animation: tcBand 1.4s cubic-bezier(.2,.8,.3,1) forwards; }
.tc-mine .tc-band { background: linear-gradient(180deg,rgba(46,150,185,.34),rgba(18,60,82,.12) 45%,rgba(12,40,58,.1) 60%,rgba(46,150,185,.22)),linear-gradient(90deg,rgba(6,20,28,0),rgba(6,24,34,.92) 18%,rgba(6,24,34,.92) 82%,rgba(6,20,28,0)); border-top: 1px solid rgba(90,200,235,.5); border-bottom: 1px solid rgba(90,200,235,.5); }
.tc-enemy .tc-band { background: linear-gradient(180deg,rgba(200,70,105,.32),rgba(80,22,38,.12) 45%,rgba(55,14,26,.1) 60%,rgba(200,70,105,.2)),linear-gradient(90deg,rgba(28,6,14,0),rgba(36,6,16,.92) 18%,rgba(36,6,16,.92) 82%,rgba(28,6,14,0)); border-top: 1px solid rgba(235,110,145,.5); border-bottom: 1px solid rgba(235,110,145,.5); }
.tc-band { overflow: hidden; }
.tc-streak { position: absolute; top: 0; left: 0; width: 40%; height: 100%; animation: tcStreak 1.4s .05s ease-out forwards; opacity: 0; }
.tc-mine .tc-streak { background: linear-gradient(90deg,transparent,rgba(120,220,250,.16),transparent); }
.tc-enemy .tc-streak { background: linear-gradient(90deg,transparent,rgba(250,140,170,.14),transparent); }
.tc-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tc-word { height: 44px; animation: tcMain 1.4s cubic-bezier(.2,.8,.3,1) forwards; }
.tc-glyphs { filter: drop-shadow(0 0 8px rgba(90,200,235,.6)); }
.tc-enemy .tc-glyphs { filter: drop-shadow(0 0 8px rgba(235,110,145,.6)); }
.tc-sub { font-family: 'Shippori Mincho', serif; font-size: 14px; font-weight: 800; letter-spacing: .42em; text-indent: .42em; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tcSub 1.4s forwards; }
.tc-mine .tc-sub { background-image: linear-gradient(180deg,#fff,#c0e8f8 50%,#7cc4e0); filter: drop-shadow(0 0 6px rgba(90,200,235,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.9)); }
.tc-enemy .tc-sub { background-image: linear-gradient(180deg,#fff,#fad0da 50%,#e896ac); filter: drop-shadow(0 0 6px rgba(235,110,145,.5)) drop-shadow(0 1px 1px rgba(0,0,0,.9)); }
@keyframes tcBand { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 82% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes tcStreak { 0% { opacity: 0; transform: translateX(-160%) skewX(-25deg); } 18% { opacity: 1; } 45%, 100% { opacity: 0; transform: translateX(260%) skewX(-25deg); } }
@keyframes tcMain { 0% { opacity: 0; transform: translateX(-60px); } 14% { opacity: 1; transform: translateX(6px); } 20% { transform: translateX(0); } 78% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(50px); } }
@keyframes tcSub { 0%, 6% { opacity: 0; transform: translateX(40px); } 15% { opacity: 1; transform: translateX(-4px); } 20% { transform: translateX(0); } 78% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(-40px); } }
@media (max-width: 700px) { .tc-word { height: 32px; } #fx-turn-cutin .tc-word { width: auto !important; max-width: 86vw; } .tc-sub { font-size: 12px; } #fx-turn-cutin .tc-band { height: 56px; margin-top: -28px; } }