:root {
    --primary-color: #e4007f;
    /* ラブライブ！ピンク */
    --accent-color: #0099ff;
    /* エネルギーブルー */
    --bg-color: #f0f2f5;
    --text-color: #333;

    /* カードサイズ比率 */
    --card-ratio-p: 0.714;
    /* 縦向き: 63mm / 88mm */
    --card-ratio-l: 1.400;
    /* 横向き: 88mm / 63mm */

    /* セーフエリア */
    --safe-top: max(8px, env(safe-area-inset-top));
    --safe-bottom: max(8px, env(safe-area-inset-bottom));
    --header-height: 40px;

    /* ハート色定義 */
    --color-heart-pk: #ff99cc;
    /* 桃 */
    --color-heart-r: #ff5555;
    /* 赤 */
    --color-heart-y: #ffdd44;
    /* 黄 */
    --color-heart-g: #66dd66;
    /* 緑 */
    --color-heart-b: #44aaff;
    /* 青 */
    --color-heart-p: #cc99ff;
    /* 紫 */
    --color-heart-w: #bbbbbb;
    /* 白/無色 */
    --color-heart-all: linear-gradient(135deg, #ff99cc 0%, #ffdd44 50%, #44aaff 100%);
    /* 虹/ALL */

    /* カード基本サイズ */
    --card-width: 57px;
    /* 63mm相当 */
    --card-height: 80px;
    /* 88mm相当 */
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    user-select: none;
}

#app-container {
    width: 100%;
    height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ============================
   共通viewスタイル
   ============================ */
.view {
    width: 100%;
    height: 100%;
    display: none;
    /* 初期状態は非表示 */
    flex-direction: column;
}

/* ============================
   メニュー画面 (Luxury Dark Mode)
   ============================ */
#menu-view {
    align-items: center;
    justify-content: center;
    /* 高級感のある深いグレーの放射グラデーション */
    background: radial-gradient(circle at center, #2c2c2c 0%, #1a1a1a 100%);
    position: relative;
}

/* タイトルにピンクの光彩（ネオン風）をプラス */
#menu-view h1 {
    color: #ffffff;
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(228, 0, 127, 0.5), 0 0 20px rgba(228, 0, 127, 0.3);
    font-weight: 800;
}

.menu-buttons button {
    display: block;
    width: 240px;
    padding: 16px;
    margin: 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 郢顔ｴｰ縺ｪ蠅・阜邱・*/
    border-radius: 8px;
    /* 蟆代＠隗偵ｒ遶九※縺ｦ繧ｷ繝｣繝ｼ繝励↓ */
    /* 繝斐Φ繧ｯ繧貞渕隱ｿ縺ｫ縺励▽縺､縲∫ｫ倶ｽ捺─繧貞・縺吶げ繝ｩ繝・・繧ｷ繝ｧ繝ｳ */
    background: linear-gradient(145deg, #f00086, #c2006c);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

/* 繝帙ヰ繝ｼ/繧ｿ繝・・譎ゅ・謖吝虚繧貞ｰ代＠縺翫＠繧・ｌ縺ｫ */
.menu-buttons button:active {
    transform: scale(0.96);
    background: #e4007f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 繝舌・繧ｸ繝ｧ繝ｳ諠・ｱ縺ｮ繝・く繧ｹ繝医き繝ｩ繝ｼ隱ｿ謨ｴ */
#menu-view div[style*="color:#666"] {
    color: #888 !important;
    font-family: 'Georgia', serif;
    font-style: italic;
}


/* ============================
   シミュレーション画面 (Playmat)
   ============================ */
#simulation-view {
    background-color: #222;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

/* ヘッダーエリア */
.game-header {
    height: var(--header-height);
    background: #1a1a1a;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: white;
    flex-shrink: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phase-display {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ffd700;
    display: flex;
    align-items: center;
}

.header-menu-btn {
    background: #444;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
}

/* 繧ｵ繧､繝画桃菴懊・繧ｿ繝ｳ蜈ｱ騾・(螻ｱ譛ｭ/謗ｧ縺亥ｮ､繝懊ち繝ｳ縺ｫ繧ｵ繧､繧ｺ繧貞粋繧上○繧・ */
.side-op-btn {
    width: 90%;
    padding: 6px 0;
    margin: 2px 0;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Return繝懊ち繝ｳ: 謗ｧ縺医ａ縺ｪ繧ｰ繝ｬ繝ｼ */
.return-btn {
    background: #444;
    color: #ccc;
}

.return-btn:active {
    background: #555;
}

/* NEXT繝懊ち繝ｳ: 逶ｮ遶九◆縺帙ｋ (繝斐Φ繧ｯ縺ｮ蜈牙ｽｩ) */
.next-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, #ff4da6 100%);
    color: white;
    border: 1px solid #ff80c0;
    box-shadow: 0 0 12px rgba(228, 0, 127, 0.5);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.next-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 5px rgba(228, 0, 127, 0.8);
}

.next-btn:disabled {
    background: #333;
    border-color: #444;
    color: #666;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* --- style.css 縺ｮ菫ｮ豁｣邂・園 --- */

#playmat {
    width: 100%;
    flex: 1;
    display: grid;
    /* 蛻玲ｧ区・縺ｯ螟画峩縺ｪ縺・ 蟾ｦ(22%) | 荳ｭ螟ｮ(53%) | 蜿ｳ(25%) */
    grid-template-columns: 22% 53% 25%;

    /* 陦梧ｧ区・繧貞､画峩: 
       荳頑ｮｵ(諠・ｱ: 28%) 
       荳ｭ谿ｵ(繧ｹ繝・・繧ｸ/隗｣豎ｺ: 52%) 
       荳区ｮｵ(謇区惆: 20%) 
    */
    grid-template-rows: 28% 52% 20%;
    gap: 2px;

    /* 繧ｨ繝ｪ繧｢驟咲ｽｮ縺ｮ蜈･繧梧崛縺・*/
    grid-template-areas:
        "left info   info"
        /* 諠・ｱ繧剃ｸ€逡ｪ荳翫∈ */
        "left stage  right-top"
        /* 繧ｹ繝・・繧ｸ縺ｨ隗｣豎ｺ鬆伜沺繧剃ｸｭ谿ｵ縺ｸ */
        "hand hand   hand";
    /* 謇区惆縺ｯ荳€逡ｪ荳九・縺ｾ縺ｾ */

    overflow: hidden;
}

/* 蠅・阜邱壹・隕九◆逶ｮ繧定ｪｿ謨ｴ縺吶ｋ縺溘ａ縺ｮ蠕ｮ菫ｮ豁｣ */
.layout-preview {
    grid-area: info;
    border-top: none;
    /* 荳€逡ｪ荳翫・縺溘ａ荳頑棧縺ｯ荳崎ｦ・*/
    border-bottom: 1px solid #444;
}

.layout-stage,
.layout-right-top {
    /* 荳ｭ谿ｵ縺ｫ遘ｻ蜍輔＠縺溘◆繧√€∵ュ蝣ｱ縺ｮ蠅・阜縺ｨ驥阪↑繧矩Κ蛻・ｒ隱ｿ謨ｴ */
    border-top: none;
}


/* --- 繧ｨ繝ｪ繧｢縺斐→縺ｮ繧ｹ繧ｿ繧､繝ｫ --- */

/* --- 繧ｹ繝・・繧ｸ蜷郁ｨ医ワ繝ｼ繝郁｡ｨ遉ｺ繧ｨ繝ｪ繧｢ --- */
.area-stage-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    height: auto;
    min-height: 120px;
    flex: 1.5;
    background: rgba(0, 0, 0, 0.4);
    margin: 1px 4px;
    border-radius: 4px;
    border: 1px solid #444;
    overflow-y: auto;
}

/* 蛟句挨縺ｮ繝上・繝郁｡ｨ遉ｺ */
.stat-item {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}

/* 繧ｨ繝ｼ繝ｫ縺ｫ繧医ｋ繝懊・繝翫せ (+n) 縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.stat-bonus {
    color: #00ff00;
    /* 繝昴ず繝・ぅ繝悶↑螟牙喧縺ｪ縺ｮ縺ｧ邱醍ｳｻ縲√∪縺溘・繧ｨ繝ｼ繝ｫ縺｣縺ｽ縺城ｻ・牡邉ｻ */
    font-size: 0.7rem;
    margin-left: 4px;
    font-style: italic;
}

/* 譌｢蟄倥・ area-live-set 縺ｨ area-stage 縺ｮ豈皮紫繧貞ｰ代＠隱ｿ謨ｴ縺励※蜿弱∪繧翫ｒ濶ｯ縺上☆繧・*/
.area-live-set {
    flex: 4;
}

.area-stage {
    flex: 5.5;
}


/* 蟾ｦ繧ｨ繝ｪ繧｢: 謌仙粥繝ｩ繧､繝・/ 繧ｨ繝阪Ν繧ｮ繝ｼ */
.layout-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #333;
    padding: 2px;
    overflow: hidden;
}

/* 謌仙粥繝ｩ繧､繝悶お繝ｪ繧｢ */
.area-success-live {
    flex: 4;
    background: #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
    overflow: hidden;
}

.area-success-live-label {
    font-size: 0.65rem;
    color: #aaa;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.success-card-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow-y: auto;
}

/* 蛟句挨縺ｮ謌仙粥繝ｩ繧､繝悶き繝ｼ繝峨せ繝ｭ繝・ヨ */
.success-live-slot {
    width: 90%;
    aspect-ratio: var(--card-ratio-l);
    /* 讓ｪ髟ｷ */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.success-slot-placeholder {
    width: 90%;
    aspect-ratio: var(--card-ratio-l);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-slot-placeholder::after {
    content: "Live";
    color: rgba(255, 255, 255, 0.1);
    font-size: 0.6rem;
}

/* 繧ｨ繝阪Ν繧ｮ繝ｼ繧ｨ繝ｪ繧｢ */
.area-energy {
    flex: 6;
    background: #3a3a3a;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 5px;
}

.energy-count {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-align: center;
}

.energy-gauge {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    background: #222;
    padding: 2px;
    border-radius: 4px;
}

.energy-segment {
    width: 100%;
    flex: 1;
    background-color: #444;
    border-radius: 1px;
    transition: background-color 0.2s;
    border: 1px solid #333;
}

.energy-segment.active {
    background-color: var(--accent-color);
    box-shadow: 0 0 4px var(--accent-color);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 繝｡繧､繝ｳ荳企Κ繧ｨ繝ｪ繧｢: 繝ｩ繧､繝悶そ繝・ヨ / 繧ｹ繝・・繧ｸ */
.layout-stage {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.area-live-set {
    flex: 4;
    background: #3b4a3b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.area-stage {
    flex: 6;
    background: #4a3b3b;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 2px;
}

.stage-slot {
    width: 30%;
    aspect-ratio: var(--card-ratio-p);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.stage-slot-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    font-weight: bold;
}

/* 蜿ｳ荳翫お繝ｪ繧｢: 隗｣豎ｺ / 螻ｱ譛ｭ / 謗ｧ縺亥ｮ､ */
.layout-right-top {
    grid-area: right-top;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 隗｣豎ｺ鬆伜沺蜀・・繧｢繧､繝・Β・医お繝ｼ繝ｫ繧ｫ繝ｼ繝峨↑縺ｩ・・*/
/* 窶ｻ蠕梧婿縺ｮOptimized繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ縺ｧ蜀榊ｮ夂ｾｩ縺吶ｋ縺溘ａ縲√％縺薙・蜑企勁縺ｾ縺溘・遨ｺ縺ｫ縺吶ｋ */

.area-deck-trash {
    flex: 1;
    background: #2a2a2a;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 2px 0;
}

.info-btn {
    width: 90%;
    padding: 4px 0;
    background: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 0.65rem;
    text-align: center;
    cursor: pointer;
}

.deck-count {
    color: #88ff88;
}

.trash-count {
    color: #aaa;
}

/* ============================
   諠・ｱ繝励Ξ繝薙Η繝ｼ繧ｨ繝ｪ繧｢ (繧ｫ繝ｼ繝芽ｩｳ邏ｰ)
   ============================ */
/* style.css 縺ｮ菫ｮ豁｣・壹・繝ｬ繝薙Η繝ｼ繧ｨ繝ｪ繧｢蜈ｱ騾壹せ繧ｿ繧､繝ｫ */

.layout-preview {
    grid-area: info;
    background: #252525;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    padding: 6px 8px;
    color: white;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* gap繧・縺ｫ縺励※繧､繝ｳ繝ｩ繧､繝ｳ縺ｮmargin縺ｧ蛻ｶ蠕｡ */
    overflow-y: auto;
}

/* 繝倥ャ繝€繝ｼ・壼錐蜑阪→ID縺ｮ讓ｪ荳ｦ縺ｳ + 閾ｪ蜍慕ｸｮ蟆・*/
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
    margin-bottom: 2px;
    container-type: inline-size;
    /* 邵ｮ蟆上・蝓ｺ貅・*/
    overflow: hidden;
}

.preview-name {
    font-weight: bold;
    color: var(--primary-color);
    font-size: clamp(0.7rem, 4.5cqi, 0.9rem);
    /* 閾ｪ蜍慕ｸｮ蟆・*/
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-right: 5px;
}

.preview-rarity {
    font-size: 0.7rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.preview-subinfo {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 2px;
}

.preview-stat-pill {
    background: #333;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid #555;
}

.preview-text-box {
    background: #1a1a1a;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    flex: 1;
    overflow-y: auto;
    border: 1px solid #333;
}


/* 繝上・繝郁牡蛻・￠繧ｯ繝ｩ繧ｹ */
.icon-heart {
    display: inline-block;
    font-style: normal;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 1.1em;
}

.icon-heart-Pk {
    color: var(--color-heart-pk);
}

.icon-heart-R {
    color: var(--color-heart-r);
}

.icon-heart-Y {
    color: var(--color-heart-y);
}

.icon-heart-G {
    color: var(--color-heart-g);
}

.icon-heart-B {
    color: var(--color-heart-b);
}

.icon-heart-P {
    color: var(--color-heart-p);
}

.icon-heart-W {
    color: var(--color-heart-w);
}

.icon-heart-All {
    background: var(--color-heart-all);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 繧ｨ繝阪Ν繧ｮ繝ｼ繧｢繧､繧ｳ繝ｳ 縲職縲・*/
.icon-e {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    background: var(--accent-color);
    color: white;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: bold;
    vertical-align: middle;
    margin: 0 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.icon-e::before {
    content: "E";
}

/* 手札エリア */
.layout-hand {
    grid-area: hand;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* PCでもスクロール可能にする */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

.layout-hand::-webkit-scrollbar {
    height: 8px;
    /* PC向けに少し太く */
    background: #222;
}

.layout-hand::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.layout-hand::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* 復活: 相手エリアのレイアウト定義（これが消えていたためサイズがおかしくなっていました） */
.opponent-container-flex {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.opponent-board {
    flex: 1;
    display: flex;
    /* 上下に配置 */
    flex-direction: column;
    padding: 2px;
    gap: 2px;
    height: 100%;
    /* 高さ確保 */
}

.opponent-live-area {
    flex: 4;
    /* 高さ比率 4 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* 必須: 相手カードを横並びにするためのコンテナ定義 */
}

.opponent-live-area,
.opponent-stage {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

/* 相手側のライブスロット用スタイル */
.opponent-live-slot {
    width: 32%;
    aspect-ratio: var(--card-ratio-p);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 相手側のメンバースロット用スタイル */
.opponent-member-slot {
    width: 32%;
    aspect-ratio: var(--card-ratio-p);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ラッパー定義：サイズを確保し、中身のabsolute配置の基準にする */
.rotate-left-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    /* 回転させたい場合はここでtransformを指定するが、現状はサイズ確保のみ */
}

/* スロット内のカード画像サイズ調整 */
.opponent-live-slot .card-obj,
.opponent-member-slot .card-obj {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    /* 枠に合わせて引き伸ばす */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
}

/* カード裏面スタイル */
.card-back {
    /* 両方の拡張子を指定して保険をかける（CSSでは不可だが、実在する方を優先したい） */
    /* 一般的には存在する方を指定する。back.pngがあるならそれを使う */
    background-image: url('img/back.png');
    background-size: 100% 100%;
    /* 前回修正の適用 */
    background-position: center;
    background-color: #333;
}

.hand-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 10px;
    height: 100%;
    margin: 0;
}

/* 謇区惆繧ｫ繝ｼ繝・*/
.card-in-hand {
    height: 90%;
    aspect-ratio: var(--card-ratio-p);
    width: auto;
    flex-shrink: 0;
    min-width: 0;

    background: white;
    border-radius: 4px;

    background-size: cover;
    background-position: center;

    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5);
    border: 1px solid #888;
    position: relative;

    transition: transform 0.1s, border-color 0.1s;
    margin-right: 6px;
    cursor: pointer;
}

.card-in-hand .card-face {
    pointer-events: none;
}

.card-in-hand:last-child {
    margin-right: 0;
}

.card-in-hand.selected {
    border: 3px solid #ffff00;
    transform: translateY(-10px);
    z-index: 100;
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
}

.card-in-hand:active {
    transform: translateY(-5px);
}

/* ============================
   Component: Card Objects
   ============================ */
.card-obj {
    background-size: cover;
    background-position: center;
}

.card-face {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* 繝ｩ繧､繝悶き繝ｼ繝峨・蝗櫁ｻ｢ (謇区惆蜀・｡ｨ遉ｺ逕ｨ: 90蠎ｦ蝗櫁ｻ｢) */
.card-live-rotate {
    transform: rotate(90deg) scale(1.41);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 繝｡繝ｳ繝舌・繧ｨ繝阪Ν繧ｮ繝ｼ繝舌ャ繧ｸ */
.member-energy-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--accent-color);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

.member-energy-badge::before {
    content: "E";
    font-size: 0.6rem;
    margin-right: 1px;
}

/* ============================
   Component: Toast
   ============================ */
#toast-container {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    z-index: 2000;
    width: 90%;
    max-width: 300px;
}

.toast {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* ============================
   Component: Modal (Mulligan)
   ============================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-window {
    background: #2a2a2a;
    color: white;
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    border-radius: 8px;
    border: 1px solid #555;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    background: #444;
    padding: 12px;
    font-weight: bold;
    border-bottom: 1px solid #555;
    text-align: center;
}

.modal-body {
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    background: #222;
}

.modal-footer {
    padding: 12px;
    border-top: 1px solid #555;
    background: #333;
    display: flex;
    justify-content: center;
}

.mulligan-hand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.mulligan-card-item {
    width: 28%;
    aspect-ratio: var(--card-ratio-p);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    border: 2px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.1s;
}

.mulligan-card-item .card-face {
    pointer-events: none;
}

.mulligan-card-item.selected {
    border-color: #ff4444;
    opacity: 0.6;
}

.mulligan-card-item.selected::after {
    content: "戻す";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #ff4444;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

/* [New] 相手ターンオーバーレイ: 非表示に変更（操作はJSでガード） */
.opponent-turn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px 40px;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
    /* クリック透過 */
    display: none !important;
    /* 常に非表示 */
}

/* 相手ターン中のNEXTボタン (WAIT) */
.next-btn.disabled-by-turn {
    background: #555;
    border-color: #666;
    color: #aaa;
    cursor: wait;
    opacity: 0.7;
    box-shadow: none;
}

.modal-action-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.modal-action-btn:active {
    transform: scale(0.98);
}


/* ============================
   Optimized: Rotations & Wrappers & Resolution (FINAL)
   縺薙％繧医ｊ荳九・驥崎､・＠縺溯ｨ倩ｿｰ繧貞炎髯､縺励€√％縺ｮ繝悶Ο繝・け縺ｮ縺ｿ繧呈ｭ｣縺ｨ縺励∪縺・
   ============================ */

/* 1. 繝ｩ繧､繝悶せ繝ｭ繝・ヨ・医・繝・ヨ縺ｮ譫・峨∈縺ｮ螳悟・繝輔ぅ繝・ヨ螳夂ｾｩ */
.live-slot {
    width: 32%;
    aspect-ratio: var(--card-ratio-l);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 繝｡繝ｳ繝舌・繧ｫ繝ｼ繝峨ｒ蛟偵＠縺ｦ譫荳€譚ｯ縺ｫ縺吶ｋ險育ｮ礼畑繝ｩ繝・ヱ繝ｼ */
.live-slot .rotate-left-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.live-slot .rotate-left-wrapper .card-face {
    width: 71.43% !important;
    height: 140% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    background-size: 100% 100% !important;
    object-fit: fill !important;
    border-radius: 4px;
}

/* 繝ｩ繧､繝悶き繝ｼ繝会ｼ亥・縺九ｉ讓ｪ蜷代″逕ｻ蜒擾ｼ峨ｒ縺昴・縺ｾ縺ｾ蠎・￡繧・*/
.live-slot>.card-face {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% 100% !important;
    object-fit: fill !important;
}

/* 2. 隗｣豎ｺ鬆伜沺・医お繝ｼ繝ｫ陦ｨ遉ｺ・峨・譁ｰ莉墓ｧ伜・讒狗ｯ・*/
.area-resolution {
    flex: 2;
    background: #1a1a2e;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    padding-top: 25px;
    border: 1px solid #333;
}

#resolution-container {
    width: 100%;
    height: calc(100% - 25px);
    position: relative;
    margin-top: 5px;
}

.res-card-item {
    position: absolute;
    left: 50%;
    width: 85%;
    aspect-ratio: 1.400;
    transform: translateX(-50%);
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
    pointer-events: auto;
}

.res-card-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background-color: #222;
}

/* 繝｡繝ｳ繝舌・・夂ｸｦ髟ｷ繧貞承縺ｫ90蠎ｦ蝗櫁ｻ｢ */
.res-rotate-member img {
    width: 71.43%;
    height: 140%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 繝ｩ繧､繝厄ｼ壼・縲・ｨｪ蜷代″繧・80蠎ｦ蝗櫁ｻ｢ */
.res-rotate-live img {
    transform: rotate(180deg);
}

.res-rotate-none img {
    transform: none;
}

/* 3. 讓呎ｺ門屓霆｢・医せ繝・・繧ｸ逕ｨ縺ｪ縺ｩ・峨・險ｭ螳・*/
.rotate-left-wrapper:not(.live-slot *) .card-face {
    width: 71.43%;
    height: 100%;
    transform: rotate(-90deg);
    transform-origin: center;
}

/* --- 繧｢繧､繧ｳ繝ｳ逕ｻ蜒上せ繧ｿ繧､繝ｫ --- */
/* 繝・く繧ｹ繝医ｄ繧ｹ繝壹ャ繧ｯ谺・↓蝓九ａ霎ｼ繧€繧｢繧､繧ｳ繝ｳ縺ｮ蜈ｱ騾夊ｨｭ螳・*/
.icon-img {
    display: inline-block;
    height: 1.3em;
    /* 譁・ｭ励・鬮倥＆縺ｫ蜷医ｏ縺帙ｋ */
    width: auto;
    vertical-align: middle;
    object-fit: contain;
    margin: 0 1px;
}

/* 繧ｰ繝ｬ繝ｼ繝上・繝茨ｼ・・峨・繧ｹ繧ｿ繧､繝ｫ荳頑嶌縺・*/
.heart-w {
    background-color: var(--color-heart-w);
    border: 1px solid #888;
    /* 阮・＞繧ｰ繝ｬ繝ｼ縺縺ｨ閭梧勹縺ｫ貅ｶ縺代ｋ縺ｮ縺ｧ譫邱壹ｒ蠑ｷ隱ｿ */
}

/* style.css 縺ｮ譛€蠕後↓霑ｽ蜉 */
.resolution-summary {
    position: absolute;
    top: 2px;
    right: 4px;
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 25;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 1px 4px;
}

.res-count-item {
    display: flex;
    align-items: center;
    font-size: 0.65rem;
    color: #fff;
    font-weight: bold;
}

.heart-icon {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    vertical-align: middle;
    margin-right: 2px;
}

/* 繝上・繝医・濶ｲ・・SS螟画焚繧剃ｽｿ逕ｨ・・*/
.color-pk {
    background-color: var(--color-heart-pk);
}

.color-r {
    background-color: var(--color-heart-r);
}

.color-y {
    background-color: var(--color-heart-y);
}

.color-g {
    background-color: var(--color-heart-g);
}

.color-b {
    background-color: var(--color-heart-b);
}

.color-p {
    background-color: var(--color-heart-p);
}

.color-w {
    background-color: var(--color-heart-w);
}

/* --- STATUS Panel Dashboard layout --- */
.stat-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
    margin-bottom: 4px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.stat-cell {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
}

.stat-cell.goal-met {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
}

.stat-cell.goal-unmet {
    border-color: rgba(255, 0, 0, 0.2);
}

.stat-val-current {
    font-weight: 800;
    color: #fff;
}

.stat-val-target {
    color: #aaa;
}

.goal-met .stat-val-current {
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.goal-met .stat-val-target {
    color: #008800;
}

.stat-cell.color-w-cell .heart-icon {
    background-color: #888;
    border: 1px solid #aaa;
}

.stat-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
    margin-bottom: 4px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.stat-cell {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
}

/* 蠢・ｦ∵焚繧呈ｺ€縺溘＠縺滓凾縺ｮ蠑ｷ隱ｿ陦ｨ遉ｺ */
.stat-cell.goal-met {
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.3);
}

.stat-cell.goal-unmet {
    border-color: rgba(255, 0, 0, 0.2);
}

.stat-val-current {
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
}

.stat-val-sep {
    color: #666;
    margin: 0 1px;
    font-size: 0.7rem;
}

.stat-val-target {
    font-size: 0.75rem;
    color: #aaa;
}

/* W蟆ら畑縺ｮ繧ｹ繧ｿ繧､繝ｫ隱ｿ謨ｴ */
.stat-cell.color-w-cell .heart-icon {
    background-color: #888;
    border: 1px solid #aaa;
}

.goal-met .stat-val-current {
    color: #00ff00;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.goal-met .stat-val-target {
    color: #008800;
}

.stat-special-group {
    display: flex;
    gap: 8px;
}

.stat-row-status,
.stat-row-hearts,
.stat-row-special,
.stat-row-target {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 18px;
}

.stat-row-status {
    justify-content: space-between;
    border-bottom: 1px solid #444;
    margin-bottom: 2px;
}

.stat-label-main {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: bold;
}

.stat-row-hearts {
    justify-content: flex-start;
    gap: 15px;
}

.stat-row-special {
    justify-content: space-between;
    border-top: 1px solid #333;
    padding-top: 2px;
}

.stat-items-right {
    display: flex;
    gap: 8px;
}

.stat-row-target {
    background: rgba(255, 255, 0, 0.1);
    border-radius: 2px;
    margin-top: 2px;
    padding: 1px 4px;
    flex-wrap: wrap;
}

.stat-label-small {
    font-size: 0.6rem;
    color: #ffd700;
    margin-right: 4px;
}

.stat-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
}

.stat-item img {
    margin-right: 2px;
}

/* 繧ｫ繝ｼ繝我ｸ€隕ｧ陦ｨ遉ｺ逕ｨ縺ｮ繧ｰ繝ｪ繝・ラ */
.card-grid-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
}

.card-grid-item {
    width: 100%;
    /* 繧ｳ繝ｳ繝・リ縺ｮ繧ｵ繧､繧ｺ縺ｯ邵ｦ蜷代″(Portrait)縺ｧ蝗ｺ螳・*/
    aspect-ratio: var(--card-ratio-p);
    border-radius: 4px;
    border: 1px solid #555;
    position: relative;
    overflow: hidden;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 繧ｰ繝ｪ繝・ラ蜀・き繝ｼ繝牙・騾夲ｼ夊レ譎ｯ逕ｻ蜒上→縺励※繝輔ぅ繝・ヨ縺輔○繧・*/
.card-grid-item .card-face-grid {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
}

/* 繝ｩ繧､繝悶き繝ｼ繝峨・陦ｨ遉ｺ・壽焔譛ｭ縺ｮ card-live-rotate 縺ｨ蜷後§繝ｭ繧ｸ繝・け */
.card-grid-item.is-live .card-face-grid {
    transform: rotate(90deg) scale(1.41);
    background-size: contain;
    background-repeat: no-repeat;
}


/* 繝ｩ繧､繝匁・蜉滓凾縺ｮ繝斐Φ繧ｯ逋ｺ蜈峨い繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
.success-selection-highlight {
    border: 3px solid #ff00ff !important;
    box-shadow: 0 0 15px #ff00ff !important;
    cursor: pointer;
    animation: success-glow 1s infinite alternate ease-in-out;
    z-index: 50;
}

@keyframes success-glow {
    from {
        box-shadow: 0 0 5px #ff00ff;
        border-color: #ff00ff;
        filter: brightness(1.0);
    }

    to {
        box-shadow: 0 0 20px #ff66ff;
        border-color: #ffccff;
        filter: brightness(1.2);
    }
}

/* 起動ボタンのスタイル */
.activate-btn {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #2ecc71, #27ae60);
    color: white;
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 100 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.activate-btn:hover {
    background: linear-gradient(to bottom, #27ae60, #219150);
    transform: translateX(-50%) scale(1.05);
}

.activate-btn:active {
    transform: translateX(-50%) scale(0.95);
}

.activate-btn.disabled {
    background: #7f8c8d;
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

/* カード選択モーダル用 */
.card-selection-item {
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.card-selection-item.selected {
    border-color: #00ff00;
    box-shadow: 0 0 10px #00ff00;
    transform: scale(1.05);
}

.card-selection-item.selected::after {
    content: '\2713';
    position: absolute;
    top: 5px;
    right: 5px;
    background: #00ff00;
    color: black;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

/* ============================
   カード選択モーダル ボタンスタイル
   ============================ */
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.modal-btn {
    padding: 12px 32px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-btn.confirm {
    background: linear-gradient(145deg, #f00086, #c2006c);
    color: white;
}

.modal-btn.confirm:hover {
    background: linear-gradient(145deg, #ff1a94, #d1007a);
    transform: translateY(-2px);
}

.modal-btn.confirm:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
}

.modal-btn.cancel {
    background: linear-gradient(145deg, #444, #333);
    color: white;
}

.modal-btn.cancel:hover {
    background: linear-gradient(145deg, #555, #444);
    transform: translateY(-2px);
}


/* カード選択モーダルのタイトルスタイル */
#card-selection-title {
    color: white;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
    text-align: center;
    font-weight: normal;
}

#card-selection-modal .modal-content {
    background: rgba(30, 30, 30, 0.98);
    border-radius: 12px;
    padding: 20px;
}

#card-selection-modal .modal-content h3 {
    color: white;
    font-size: 0.95rem;
    margin: 0 0 12px 0;
    font-weight: normal;
}

/* ============================
   回転表示用ラッパー (成功ライブ・相手ライブエリアなど)
   ============================ */
.rotate-left-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* ラッパー自体はクリック透過 */
}

/* CSSキャッシュや古いJSが残っている場合の対策:
   一旦削除（JS側で制御するため） */
.opponent-live-slot .rotate-left-wrapper,
.opponent-member-slot .rotate-left-wrapper {
    /* 必要に応じて再定義 */
}

.opponent-live-slot .rotate-left-wrapper .card-obj,
.opponent-member-slot .rotate-left-wrapper .card-obj {
    /* 必要に応じて再定義 */
}

.rotate-left-wrapper .card-face {
    transform: rotate(-90deg) scale(0.7);
    /* 左に90度回転して横向きにし、枠に収まるよう縮小 */
    width: var(--card-height) !important;
    /* 縦横入れ替えるため */
    height: var(--card-width) !important;
    max-width: none;
    max-height: none;
    pointer-events: auto;
    /* カード自体はクリック有効 */
}

/* ============================
   PC向けレスポンシブ対応
   ============================ */

/* PC画面（幅600px以上）でシミュレーション画面を制限 */
@media screen and (min-width: 600px) {

    /* シミュレーション画面全体をスマホサイズに制限 */
    #simulation-view {
        max-width: 480px;
        margin: 0 auto;
        border-left: 1px solid #444;
        border-right: 1px solid #444;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }

    /* 背景を維持するためのボディ設定 */
    body {
        background-color: #111;
    }

    /* アプリコンテナもセンタリング対応 */
    #app-container {
        background-color: #111;
    }

    /* メニュー画面も同様に制限 */
    #menu-view {
        max-width: 480px;
        margin: 0 auto;
    }

    /* PC向け: モーダルサイズを適切に制限 */
    .modal-window,
    .modal-content {
        max-width: 400px !important;
        width: 90% !important;
    }

    .modal-overlay {
        padding: 20px;
    }
}

/* より大きなPC画面（幅900px以上）での微調整 */
@media screen and (min-width: 900px) {
    #simulation-view {
        max-width: 420px;
        /* 少し細めにしてスマホ感を強調 */
    }
}

/* ============================
   オンライン対戦用スタイル
   ============================ */

#playmat.online-mode {
    display: grid;
    /* 左右幅をソロモードと同じ比率に（中央は可変） */
    grid-template-columns: 22% 1fr 25%;
    /* 高さ: 相手(auto), 情報(最低200px確保), ステージ(1fr), 手札(140px固定) */
    grid-template-rows: auto minmax(200px, 25%) 1fr 140px;
    grid-template-areas:
        "opponent opponent opponent"
        "left info right-top"
        "left stage right-top"
        "hand hand hand";
}

/* 情報エリア行（非表示要素だがGridエリア定義用） */
#playmat.online-mode>.layout-opponent {
    grid-area: opponent;
}

#playmat.online-mode>.layout-left {
    grid-area: left;
    grid-row: 2 / 4;
    /* 情報行とステージ行を占有 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#playmat.online-mode .layout-right-top {
    grid-area: right-top;
    grid-row: 2 / 4;
    /* 情報行とステージ行を占有 */
}

/* 相手盤面エリア */
.layout-opponent {
    grid-area: opponent;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2a2a4a 0%, #1a1a2a 100%);
    border-bottom: 2px solid #5566aa;
    padding: 4px;
    gap: 4px;
}

/* 相手情報バー */
.opponent-info-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #aabbcc;
}

.opp-info-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.opp-info-item.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
}

.opp-info-item.clickable:hover {
    color: #ffffff;
}

/* 相手盤面エリア（全体を180度回転して対面表示） */
.opponent-container-flex {
    position: relative;
    /* 子要素の絶対配置基準 */
    display: flex;
    justify-content: center;
    /* 盤面を中央に */
    align-items: center;
    width: 100%;
    transform: rotate(180deg);
    /* 親で一括回転 */
    flex: 1;
}

.opponent-board {
    display: flex;
    flex-direction: column;
    /* 回転は親で行うため削除 */
    gap: 4px;
    width: 80%;
    /* 幅を制限して中央揃えを明確に */
    max-width: 600px;
    margin-bottom: 4px;
    /* 情報バーとの間隔 */
}

/* 敵エネルギー表示 */
.opponent-energy-area {
    position: absolute;
    left: 5px;
    /* 回転世界での左 ＝ 画面上の右端、5pxに調整して場にかぶらないように */
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    /* 正位置に回転 */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    font-size: 0.8rem;
}

.opp-energy-label {
    font-size: 0.7rem;
    color: #aaa;
}

.opp-energy-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

.opponent-energy-area .energy-icon {
    display: none;
    /* アイコン非表示 */
}

.opponent-energy-area #opp-energy-count {
    font-size: inherit;
}

/* 相手ライブエリア */
.opponent-live-area {
    display: flex;
    flex-direction: row-reverse;
    /* 左右反転 */
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.opponent-live-slot {
    width: 14%;
    /* 少し小さく */
    aspect-ratio: var(--card-ratio-l);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 相手のカード表示（裏面含む） */
.opponent-live-slot .card-face {
    width: 100%;
    height: 100%;
    background-size: contain !important;
    /* 強制適用 */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
}

/* 裏面画像の場合、90度回転（ユーザー調整） */
.opponent-live-slot .card-back {
    transform: rotate(90deg);
    /* 90度回転してフィットさせるための補正（必要に応じて調整） */
    object-fit: contain;
}

/* 相手メンバーエリア */
.opponent-stage {
    display: flex;
    flex-direction: row-reverse;
    /* 左右反転（LEFTが相手の右手側にあるように） */
    justify-content: center;
    gap: 8px;
    flex: 1.2;
}

.opponent-member-slot {
    width: 14%;
    /* 少し小さく */
    aspect-ratio: var(--card-ratio-p);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.opponent-member-slot .card-face {
    width: 100%;
    height: 100%;
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
}

.opponent-member-slot.wait .card-face {
    transform: rotate(90deg);
    opacity: 0.7;
}

/* オンラインモード時のエリア調整（縮小解除） */
#playmat.online-mode .area-energy {
    /* 縮小設定を削除 */
    flex: 1;
    min-height: 0;
}

#playmat.online-mode .energy-gauge {
    /* max-height制限を緩和 */
    max-height: 100%;
}

#playmat.online-mode .area-success-live {
    /* 縮小設定を削除 */
    flex: 1;
    min-height: 0;
}

#playmat.online-mode .success-card-container {
    /* 横並びは維持するが、サイズは維持 */
    flex-direction: column;
    /* 縦並びに戻す */
    gap: 2px;
    flex-wrap: nowrap;
    overflow-y: auto;
    max-height: none;
    /* 高さ制限を削除し、エリア一杯に使う */
    flex: 1;
    /* 親に合わせて伸長 */
}

#playmat.online-mode .success-slot-placeholder,
#playmat.online-mode .success-card-container .card-face {
    /* サイズ強制縮小を削除 */
    width: 100%;
    /* 親に合わせる */
    height: auto;
    aspect-ratio: var(--card-ratio-l);
}

#playmat.online-mode .area-resolution {
    /* 縮小設定を削除 -> 拡張 */
    flex: 1;
    /* 固定解除して伸ばす */
    min-height: 150px;
    /* ある程度の高さを確保 */
    display: flex;
    flex-direction: column;
}

#playmat.online-mode .resolution-slot {
    /* max-height制限を削除 */
    max-height: none;
    flex: 1;
    /* エリア一杯に広げる */
}

#playmat.online-mode .resolution-slot {
    max-height: 80px;
}

#playmat.online-mode .area-stage-stats {
    flex: 1;
    /* min-height: 0 を削除し、中身のサイズを尊重 */
}

/* ============================
   オンラインマッチングモーダル
   ============================ */

.online-modal-content {
    background: linear-gradient(180deg, #1e1e2e 0%, #0e0e1e 100%);
    border: 2px solid #5566aa;
    border-radius: 16px;
    padding: 32px 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: visible;
    /* スクロールバー抑制 */
}

.online-modal-content .modal-title {
    font-size: 1.5rem;
    margin-bottom: 28px;
    background: linear-gradient(90deg, #7788cc, #aabbff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-shadow: 0 0 20px rgba(85, 102, 170, 0.3);
}

.online-match-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.online-action-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

.online-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    max-width: 240px;
}

.online-btn.create-btn {
    background: linear-gradient(135deg, #5566aa 0%, #7788cc 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(85, 102, 170, 0.4);
}

.online-btn.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(85, 102, 170, 0.6);
}

.online-btn.join-btn {
    background: linear-gradient(135deg, #44aa66 0%, #66cc88 100%);
    color: white;
    padding: 12px 16px;
    width: auto;
    min-width: 80px;
    flex: 0 0 auto;
    /* サイズ固定 */
    white-space: nowrap;
    flex: 1;
    /* 横並び時に均等幅 */
}

.online-btn.cancel-btn {
    background: #444;
    color: #aaa;
    margin-top: 0;
    width: auto;
    /* マージン削除 */
    flex: 1;
    /* 横並び時に均等幅 */
}

.online-btn.cancel-btn:hover {
    background: #555;
    color: #fff;
}

.online-separator {
    color: #666;
    font-size: 0.85rem;
    position: relative;
    width: 100%;
    text-align: center;
}

.online-separator::before,
.online-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: #444;
}

.online-separator::before {
    left: 10%;
}

.online-separator::after {
    right: 10%;
}

.room-code-input-group {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    /* 親要素に合わせる */
    justify-content: center;
}

#room-code-input {
    flex: 1;
    padding: 12px;
    border: 2px solid #555;
    border-radius: 8px;
    background: #222;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 4px;
    font-weight: bold;
}

#room-code-input:focus {
    outline: none;
    border-color: #5566aa;
}

/* 部屋コード表示 */
.room-code-display {
    text-align: center;
    padding: 16px;
    background: rgba(85, 102, 170, 0.2);
    border-radius: 8px;
    border: 1px solid #5566aa;
}

.room-code-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
}

.room-code-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(85, 102, 170, 0.8);
}

.waiting-message {
    color: #aaa;
    font-size: 0.9rem;
    margin-top: 8px;
}

.online-loading {
    color: #aaa;
    font-size: 0.9rem;
    padding: 20px;
}

.online-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #333;
    border-top-color: #5566aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.online-error {
    color: #ff6666;
    font-size: 0.9rem;
    padding: 16px;
    text-align: center;
}

/* ============================
   相手ターンオーバーレイ
   ============================ */

.opponent-turn-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    pointer-events: all;
}

.opponent-turn-message {
    background: rgba(0, 0, 0, 0.8);
    color: #aabbcc;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid #5566aa;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* ============================
   入力ロック状態
   ============================ */

.input-locked .card-in-hand,
.input-locked .stage-slot,
.input-locked .live-slot,
.input-locked .next-btn,
.input-locked .return-btn {
    pointer-events: none;
    opacity: 0.6;
}

/* 相手メンバー選択可能状態 */
.opponent-member-slot.selectable {
    border-color: #ffff00;
    box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    cursor: pointer;
}

.opponent-member-slot.selectable:hover {
    border-color: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}

.opponent-member-slot.selected {
    border-color: #00ff00;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.7);
}

/* ========================================== */
/* オンライン用スコア表示エリア */
/* ========================================== */
.opponent-score-area {
    position: absolute;
    right: 20px;
    /* 回転世界での右 ＝ 画面上の左端 */
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    /* 再回転して正位置に */

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    min-width: 80px;
}

.score-label {
    font-size: 0.7rem;
    color: #aaa;
    margin-bottom: 4px;
}

.score-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.score-name {
    font-size: 0.8rem;
    color: #ccc;
}

.score-value {
    font-size: 1rem;
    font-weight: bold;
    color: #00ffcc;
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.5);
}

/* 裏向きカード表示 */
.card-back {
    background-image: url('img/back.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}