* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
 * hidden 屬性的保險（與 home.css 同一條，理由見那邊的完整說明）。
 * [hidden] 的 display:none 來自瀏覽器預設樣式，作者端任何 display 都會蓋掉它，
 * 結果是 element.hidden = true 但畫面照樣顯示，而且不會有任何錯誤。
 */
[hidden] { display: none !important; }

/* 統一卡片 / 槽位尺寸 (接近 63x88mm 比例 ~1:1.4) */
:root {
    --card-width: min(6vw, 7.2vh, 86px);
    --card-height: calc(var(--card-width) * 1.4);
    /* 手牌專用尺寸：比棋盤用卡稍大 */
    --hand-card-width: min(8vw, 9.5vh, 112px);
    --hand-card-height: calc(var(--hand-card-width) * 1.4);
    /* 橫置時卡片水平佔寬 = card-height，需要的最小間距 = card-height - card-width */
    --rest-gap: calc(var(--card-height) - var(--card-width) + 6px);
    --slot-border: 2px dashed rgba(100, 116, 139, 0.4);
    --slot-radius: 6px;
    --slot-bg: rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #020617;
    /* 觸控基本衛生（桌機無副作用）：
       manipulation 關掉雙擊縮放 —— 版面是 overflow:hidden 又不能平移，
       誤觸放大之後玩家縮不回來。順帶消掉 300ms 點擊延遲。 */
    touch-action: manipulation;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    color: #e2e8f0;
    /* 3D 透視原點：從身體看棋盤 */
    perspective: 1200px;
    perspective-origin: 50% 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-container {
    display: flex;
    flex-direction: column;
    /* 長按盤面是「檢視卡片」的手勢，不要變成選字或跳出系統選單 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    max-width: 1500px;
    height: 110%;
    /* 3D 傾斜棋盤 */
    transform: rotateX(28deg) scale(0.93) translateY(-2%);
    transform-style: preserve-3d;
    transform-origin: center center;
    /* 棋盤外觀 */
    background:
        linear-gradient(rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95)),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 10px);
    border-radius: 20px;
    box-shadow:
        0 60px 120px rgba(0,0,0,0.9),
        inset 0 0 0 2px rgba(56, 189, 248, 0.15),
        inset 0 0 40px rgba(0,0,0,0.8);
    border: 1px solid #1e293b;
}

/* 遊戲標題和狀態 */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    background: linear-gradient(to bottom, rgba(2,6,23,0.7), transparent);
    z-index: 50;
    height: 40px;
    transform: translateZ(2px);
    flex-shrink: 0;
}

.game-header h1 {
    color: #f1f5f9;
    font-size: 1.3em;
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.game-info {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    font-size: 0.95em;
    font-weight: bold;
    color: #94a3b8;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* 登入狀態列（首頁對戰畫面 + 組牌工具共用） */
.ua-auth-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}

.ua-user-name {
    color: #f1f5f9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

#ua-login-btn,
#ua-logout-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    background: #e2e8f0;
    color: #2d3748;
    transition: all 0.2s ease;
}

#ua-login-btn:hover,
#ua-logout-btn:hover {
    background: #cbd5e0;
}

/* 玩家區域 */
.player-area {
    background: transparent;
    border-radius: 0;
    padding: 0 16px;
    margin: 0;
    box-shadow: none;
    border-top: 1px solid rgba(51,65,85,0.3);
    border-bottom: 1px solid rgba(51,65,85,0.3);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    flex: 1;
}

/* 不旋轉對手區域 */
.player-area.opponent {
    transform: none;
}

/* Floating Player Info — 面向鏡頭彈出 */
.player-info {
    position: absolute;
    top: 20px;
    left: 16px;
    transform: rotateX(-28deg) translateZ(40px);
    transform-origin: bottom center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    min-width: 100px;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid #0ea5e9;
    border-radius: 8px;
    text-align: center;
    z-index: 20;
    box-shadow: 0 15px 25px rgba(0,0,0,0.6), inset 0 0 10px rgba(14, 165, 233, 0.3);
}

.player-area.opponent .player-info {
    border-color: #ef4444;
    box-shadow: 0 15px 25px rgba(0,0,0,0.6), inset 0 0 10px rgba(239, 68, 68, 0.3);
}

/* 玩家的 player-info 在 HTML 中排在 zones-container 之後，位置用 absolute */
.player .player-info {
    order: unset;
}

.player-info h3 {
    font-size: 0.9em;
    color: #e2e8f0;
    margin: 0 0 4px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    text-align: center;
}

.life-info {
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.player-area.opponent .life-info { color: #fca5a5; }
.player-area.player .life-info { color: #93c5fd; }

/* 區域容器 — 3 欄 (1fr 5fr 1fr) × 3 行 */

.zones-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 5fr 1.6fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    padding: 4px 8px 4px 120px; /* 左側留空給 floating player-info */
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    transform-style: preserve-3d;
}

/* 中心欄 (col 2) */
.front-line  { grid-column: 2; }
.energy-line { grid-column: 2; }
.hand-area   { grid-column: 2; }

/* 左欄 (col 1) */
.deck-station { grid-column: 1; }
.remove-zone  { grid-column: 1; }
.outside-zone { grid-column: 1; }

/* 右欄 (col 3) */
.life-zone         { grid-column: 1; }
.action-point-zone { grid-column: 3; }
/* 牌庫/場外移到右欄 */
.deck-station  { grid-column: 3; }
.outside-zone  { grid-column: 3; }
/* 除外留在左欄 */
.remove-zone   { grid-column: 1; }

/* === 玩家 (player): 前線最上靠近中央，手牌最下 === */
.player .front-line    { grid-row: 1; }
.player .energy-line   { grid-row: 2; }
.player .hand-area     { grid-row: 3; }
/* 牌庫 → 右欄 row 1；場外 → 右欄 row 2 */
.player .deck-station  { grid-row: 1; }
.player .outside-zone  { grid-row: 2; }
/* 除外 → 左欄 row 3（原場外位置）*/
.player .remove-zone   { grid-row: 3; }
/* 生命值 → 左欄 row 1-2（原牌庫+除外位置）*/
.player .life-zone     { grid-row: 1 / span 2; }
.player .action-point-zone { grid-row: 3; }

/* === 對手 (opponent): 手牌最上(遠號)，前線最下靠近中央 === */
.opponent .hand-area     { grid-row: 1; }
.opponent .energy-line   { grid-row: 2; }
.opponent .front-line    { grid-row: 3; }
/* 牌庫 → 右欄 row 2；場外 → 右欄 row 3 */
.opponent .deck-station  { grid-row: 2; }
.opponent .outside-zone  { grid-row: 3; }
/* 除外 → 左欄 row 1（原場外位置）*/
.opponent .remove-zone   { grid-row: 1; }
/* 生命值 → 左欄 row 2-3（原牌庫+除外位置）*/
.opponent .life-zone     { grid-row: 2 / span 2; }
.opponent .action-point-zone { grid-row: 1; }

.zone-panel {
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.6);
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform-style: preserve-3d;
}

/* 手牌區允許卡片向上浮出 */
.hand-area.zone-panel,
.hand-area {
    overflow: visible !important;
}

.zone-panel h4 {
    margin: 0;
    font-size: 0.7em;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    margin-bottom: 2px;
}

.life-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.front-line {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.front-line .battle-positions {
    flex: 1;
    justify-content: center;
}
.energy-line { text-align: center; }
.hand-area { text-align: center; min-width: 0; }

.deck-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.deck-station h4 {
    margin-bottom: 0;
}

.remove-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.outside-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.action-point-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.action-point-slots {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.action-point-slot {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--slot-radius);
    background: transparent;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8em;
    color: #718096;
    overflow: visible;
    transition: all 0.3s ease;
}

.action-point-slot::before,
.action-point-slot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: var(--slot-border);
    border-radius: var(--slot-radius);
    background: var(--slot-bg);
    pointer-events: none;
    transition: all 0.3s ease;
}

.action-point-slot::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
}

.action-point-slot:hover::before,
.action-point-slot:hover::after {
    border-color: #f6ad55;
    background: rgba(246, 173, 85, 0.12);
}

.action-point-slot .card {
    width: 100% !important;
    height: 100% !important;
    cursor: default;
    font-size: 0.6em;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    padding: 0 !important;
}

/* AP 卡：隱藏卡號/名稱/費用/數值，只剩圖片
   —— 但沒有圖的時候（試用帳號還沒上傳這張卡的圖）不能藏，否則只剩一塊空白色塊。
   下面另外四處（能量線／前線／手牌／區域彈窗）同理，:not(.no-image) 一律要帶。 */
.action-point-slot .card:not(.no-image) .card-cost,
.action-point-slot .card:not(.no-image) .card-name,
.action-point-slot .card:not(.no-image) .card-stats {
    display: none !important;
}

/* AP 卡圖片填滿整個槽 */
.action-point-slot .card .card-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--slot-radius);
    overflow: hidden;
}

.action-point-slot .card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 橫置（已使用）卡片 */
.action-point-slot .card.used {
    transform: rotate(90deg);
    transform-origin: center center;
}

/* 手牌區域 */
.hand-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hand-area .zone-panel {
    overflow: visible;
}

.hand-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    padding: 8px 6px 4px;
    /* 不用滾動條，卡片平鋪平排 */
    overflow: visible;
    position: relative;
    width: 100%;
}

.hand-cards.hidden .card {
    background: #4a5568 !important;
}

.hand-cards.hidden .card * {
    display: none;
}

/* 對手手牌（hidden）壓縮為小卡背，不展開完整高度 */
.hand-cards.hidden {
    gap: 2px;
    overflow: hidden;
}

.hand-cards.hidden .card {
    width: calc(var(--card-width) * 0.65) !important;
    height: calc(var(--card-height) * 0.65) !important;
    min-height: unset !important;
}

/* 戰鬥區域 */

.battle-positions {
    display: flex;
    gap: var(--rest-gap);
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    flex-wrap: nowrap;
    padding-top: 4px;
    transform-style: preserve-3d;
}

.battle-position {
    width: var(--card-width);
    height: var(--card-height);
    border: var(--slot-border);
    border-radius: var(--slot-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #718096;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--slot-bg);
    /* 指定格子時的「擠掉」角標用絕對定位 */
    position: relative;
}


.battle-position:hover {
    border-color: rgba(66, 153, 225, 0.4);
    background: rgba(66, 153, 225, 0.08);
    transform: translateZ(15px) scale(1.05);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    cursor: pointer;
}

/* 前線/能量線卡片：只顯示圖片，隱藏文字資訊 */
.battle-position .card,
.energy-slot .card {
    position: relative;
}

.battle-position .card:not(.no-image) .card-cost,
.battle-position .card:not(.no-image) .card-name,
.battle-position .card:not(.no-image) .card-stats {
    display: none !important;
}

.battle-position .card .card-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--slot-radius);
    overflow: hidden;
    margin-bottom: 0;
}

.battle-position .card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 生命值／能量區域 */
/* 生命值堆疊：橫置狀態，card-width/height 互換 */
.life-cards {
    --life-stack-gap: clamp(8px, 1.2vw, 16px);
    position: relative;
    /* 橫置後寬 = card-height，高 = card-width + 堆疊偏移 */
    width: var(--card-height);
    height: calc(var(--card-width) + 6 * var(--life-stack-gap));
    margin-top: 2px;
}

.life-card {
    position: absolute;
    top: calc(var(--stack-index, 0) * var(--life-stack-gap));
    left: 50%;
    /* 橫置：先置中再旋轉 90 度 */
    transform: translateX(-50%) rotate(90deg);
    width: var(--card-width);
    height: var(--card-height);
    border-radius: 12px;
    background-color: #2d1b69;
    background-image: 
        url('../images/card-back/union-arena-card-back.jpg'),
        linear-gradient(135deg, #667eea 0%, #764ba2 50%, #2d1b69 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.life-card::after {
    /* 圖片載入成功時不顯示文字 */
    content: "";
}

/*
 * 被效果翻到正面的生命值（SMD-1-008〈真霜平助〉等）。
 * 正面向上的生命值是公開資訊，要看得到牌面 —— 所以蓋掉 .life-card 寫死的卡背圖，
 * 並恢復 .card 自己的排版（.life-card 的 flex 置中會把卡面元件擠成一團）。
 * pointer-events 也要收回來，長按／右鍵才叫得出卡片詳情。
 */
.life-card.life-card-faceup {
    background-image: none;
    background-color: transparent;
    display: block;
    pointer-events: auto;
    border-color: #f6c744;
    box-shadow: 0 0 0 2px rgba(246, 199, 68, 0.55), 0 6px 12px rgba(0, 0, 0, 0.25);
}

.life-card:last-child {
    box-shadow: 0 8px 18px rgba(229, 62, 62, 0.35);
}

.energy-positions {
    display: flex;
    gap: var(--rest-gap);
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    flex-wrap: nowrap;
    padding-top: 4px;
    transform-style: preserve-3d;
}

.energy-slot {
    width: var(--card-width);
    height: var(--card-height);
    border: var(--slot-border);
    border-radius: var(--slot-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slot-bg);
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

.energy-slot .card {
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
    font-size: 0.6em;
    padding: 0 !important;
}

/* 能量線卡片：只顯示圖片（沒有圖時改顯示文字，見上面 AP 卡那段說明） */
.energy-slot .card:not(.no-image) .card-cost,
.energy-slot .card:not(.no-image) .card-name,
.energy-slot .card:not(.no-image) .card-stats {
    display: none !important;
}

.energy-slot .card .card-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--slot-radius);
    overflow: hidden;
    margin-bottom: 0;
}

.energy-slot .card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 牌庫和棄牌堆 */
.deck-count {
    width: var(--card-width);
    height: var(--card-height);
    background-color: #2d1b69;
    background-image: 
        url('../images/card-back/union-arena-card-back.jpg'),
        linear-gradient(135deg, #667eea 0%, #764ba2 50%, #2d1b69 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--slot-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.05em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 4px auto;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.deck-count::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: calc(var(--slot-radius) - 2px);
    transition: background 0.3s ease;
}

.deck-count:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

.deck-count span {
    position: relative;
    z-index: 1;
}

.zone-count {
    width: var(--card-width);
    height: var(--card-height);
    background: #2d3748;
    color: white;
    border: var(--slot-border);
    border-radius: var(--slot-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    margin: 4px auto;
    cursor: default;
}

/* 卡片樣式 */
.card {
    width: var(--card-width);
    height: var(--card-height);
    background: #1e293b;
    border: 2px solid #475569;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-size: 0.7em;
    color: #e2e8f0;
}

.card:hover {
    transform: translateY(-5px) translateZ(15px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.card.character {
    border-color: #48bb78;
    box-shadow: 0 0 0 1px rgba(72,187,120,0.3) inset;
}

.card.event {
    border-color: #4299e1;
    box-shadow: 0 0 0 1px rgba(66,153,225,0.3) inset;
}

/* 卡背樣式 */
/* 面朝下的卡：就畫成卡背。
   舊版是 `background: none !important`，改由各區域自己貼圖——但實際上只有
   生命值區與牌庫有貼（而且它們根本不用這個 class），凡是真的加了 .card-back
   的地方（對手手牌、選擇面板的蓋牌選項）都變成透明白框。
   choice.css 曾為此在自己那邊補貼一次圖，那是繞過症狀；根因在這裡。 */
.card-back {
    background-color: #2d1b69 !important;
    background-image:
        url('../images/card-back/union-arena-card-back.jpg'),
        linear-gradient(135deg, #667eea 0%, #764ba2 50%, #2d1b69 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    cursor: default !important;
}

.card-back:hover {
    transform: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.card-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: #e2e8f0;
}

.card-img-wrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 34px); /* 留空間給名稱與費用與下方數值 */
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a202c;
}

.card-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.card.no-image {
    background: linear-gradient(135deg,#2d3748,#4a5568);
    color: #f7fafc;
}

/*
 * 沒有卡圖的卡（試用帳號自備卡圖，缺哪張就是哪張沒有）。
 *
 * 原本 .no-image 只是「偶爾一張載不出來」的退路，樣式沒有為它認真設計過；
 * 試用模式下這會是常態，而且盤面格子只有 47×66，卡名擠不下就等於看不懂
 * 自己在打什麼。這一組是讓文字在最小的格子裡也讀得出來：
 *   - 卡名允許折兩行後截斷（截斷比壓成一條線好認，完整名稱在 tooltip 裡）
 *   - 數值不再絕對定位到底部，改成跟著卡名往下排，小格子才不會疊在一起
 */
.card.no-image .card-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.62em;
    line-height: 1.25;
    margin: 0;
    padding: 2px 3px 0;
    font-weight: 600;
    word-break: break-word;
}

.card.no-image .card-stats {
    position: static;
    padding: 1px 3px 2px;
    font-size: 0.62em;
}

/* 大一點的地方（手牌、詳情、彈窗）給得起兩行以上，不必壓到 0.62em */
.hand-card-wrapper .card.no-image .card-name,
.zone-card-content .card.no-image .card-name {
    -webkit-line-clamp: 4;
    font-size: 0.72em;
}

/* 放大預覽 (hover 於手牌或戰鬥區) */
.card:hover .card-hover-preview {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.card-hover-preview {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--card-width) * 2.4);
    height: calc(var(--card-height) * 2.4);
    transform: translate(-50%, -50%) scale(.8);
    transform-origin: center center;
    transition: .18s ease;
    z-index: 1200;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
}

.card-hover-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background:#1a202c;
}

/* 詳情面板 Overlay */
.card-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.card-detail-modal {
    width: min(880px, 92%);
    max-height: 90vh;
    background: #1f2937;
    color: #f1f5f9;
    border-radius: 14px;
    box-shadow: 0 18px 48px -8px rgba(0,0,0,.55);
    position: relative;
    padding: 20px 26px 28px;
    font-size: 15px;
    line-height: 1.5;
    /* 捲動放在內容層而不是 modal 本身：
       .card-detail-close 是 position:absolute 貼在 modal 上，
       modal 自己會捲的話，捲到下面看效果文字時關閉鈕就跟著捲出畫面了。 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-detail-content {
    flex: 1 1 auto;
    overflow-y: auto;
    /* 留一點右邊距，文字不要貼著捲軸與關閉鈕 */
    padding-right: 6px;
}

.card-detail-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: #374151;
    border: none;
    color: #f8fafc;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}
.card-detail-close:hover { background:#4b5563; }

.card-detail-content h3 { margin:0 0 4px; font-size: 1.25em; }
.card-detail-meta { font-size: .85em; opacity:.85; margin-bottom: 10px; }
.card-detail-row { display:flex; gap:28px; flex-wrap:wrap; }
.card-detail-left { flex:0 0 260px; position:relative; }
.card-detail-left img {
    width:100%; aspect-ratio: 5 / 7; object-fit: contain;
    border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.45); background:#111;
}
.card-detail-right { flex:1 1 320px; min-width:260px; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.card-tags span { background:#374151; padding:4px 8px; border-radius:20px; font-size:.72rem; letter-spacing:.5px; }
/* 關鍵字的來源要分得出來，不然玩家不知道「不能阻擋」是這張卡本來就有的，
   還是對手這回合剛上的限制 —— 兩者的應對完全不同。 */
.card-tags span.kw-granted {
    background: #1e3a5f;
    color: #93c5fd;
    border: 1px solid #3b82f6;
}
.card-tags span.kw-granted::before { content: '＋'; opacity: .75; margin-right: 1px; }
/* 印在卡面上、但此刻不生效（失去效果／條件不成立／突襲框未啟用） */
.card-tags span.kw-inactive {
    background: #2a2f3a;
    color: #6b7280;
    text-decoration: line-through;
    text-decoration-color: rgba(156, 163, 175, .6);
}
.effect-block { background:#273549; padding:10px 12px; border-left:4px solid #4299e1; border-radius:6px; margin-bottom:10px; white-space:pre-wrap; }
.effect-block + .effect-block { border-color:#48bb78; }
/* 手機上 4 個徽章（能源/產能/AP/BP）合計會超過內容寬度，必須換行 */
.stat-badges { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px; }
.stat-badges .stat { background:#374151; padding:6px 10px; border-radius:8px; font-size:.8rem; min-width:70px; text-align:center; }
.stat-badges .stat strong { display:block; font-size:.75rem; opacity:.7; font-weight:600; }
.stat-badges .stat span { font-size:1rem; font-weight:600; }

@media (max-width: 680px) {
  .card-detail-row { flex-direction:column; align-items:center; }
  /* 只翻成直排而不限寬的話，卡圖會撐滿內容寬（375px 螢幕上約 293x410），
     光一張圖就吃掉可視高度的一半以上，文字全被推到捲軸下面。
     choice.css 對同一個元件已經這樣限寬，效果正確，這裡照同一套。 */
  .card-detail-left { flex:0 0 auto; width: min(190px, 52%); }
  .card-detail-right { min-width: 0; width: 100%; }

  /* 背景只剩左右各十幾 px，等於沒有「點背景關閉」可用；
     改成從底部升起的面板，上方整片都是關閉區。 */
  .card-detail-overlay { align-items: flex-end; }
  .card-detail-modal {
      width: 100%;
      max-height: 88vh;
      border-radius: 16px 16px 0 0;
      padding: 18px 16px 20px;
  }
  /* 手機的關閉鈕要好按 */
  .card-detail-close { width: 44px; height: 44px; top: 8px; right: 8px; }
}

/* 起手換牌預覽 */
.mulligan-hand-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding: 16px 12px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    max-height: 65vh;
    overflow: auto;
}

@media (max-width: 680px) {
    /* .modal > .modal-content > .mulligan-hand-preview 三層都能捲，
       手指一滑不知道在捲哪一層；手機上只讓最外層捲。 */
    .mulligan-hand-preview { max-height: none; overflow: visible; gap: 10px; padding: 10px 4px 8px; }
}

.mulligan-hand-preview .card {
    /* 換牌畫面卡片不受棋盤 card-width 限制，但要隨螢幕縮放：
       固定 110px 在 375px 螢幕上一排只放得下 2 張，7 張要 4 排 664px，
       塞進 65vh(528px) 的捲動區裡。clamp 後一排 3 張、3 排就放得下。 */
    width: clamp(68px, 19vw, 110px) !important;
    height: clamp(95px, 26.6vw, 154px) !important;
    font-size: 0.82em;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);
    transition: transform .18s, box-shadow .18s;
}

.mulligan-hand-preview .card:hover {
    transform: translateY(-8px) scale(1.06);
    box-shadow: 0 18px 36px -8px rgba(0,0,0,.6);
}

.mulligan-hand-preview .card .card-hover-preview { display: none; }

.card-cost {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #4a5568;
    color: white;
    border-radius: 50%;
    width: clamp(24px, calc(var(--card-width) * 0.22), 32px);
    height: clamp(24px, calc(var(--card-width) * 0.22), 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: bold;
}

.card-stats {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 0.6em;
    font-weight: bold;
}

.card-ap {
    color: #e53e3e;
}

.card-bp {
    color: #48bb78;
}

/* 遊戲控制 — 棋盤中線分隔帶 */
.game-controls {
    text-align: center;
    margin: 0;
    padding: 4px 16px 5px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.08), transparent);
    border-top: 2px solid rgba(56, 189, 248, 0.4);
    border-bottom: 2px solid rgba(56, 189, 248, 0.4);
    line-height: 1.4;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.15);
    transform: translateZ(2px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-controls button {
    background: #334155;
    color: white;
    border: 1px solid #475569;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.82em;
    cursor: pointer;
    margin: 0 3px;
    transition: all 0.2s ease;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.game-controls button:hover {
    background: #475569;
    transform: translateY(-1px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.4);
}

.game-controls button:disabled {
    background: #4a5568;
    color: #94a3b8;
    cursor: not-allowed;
    opacity: .6;
    transform: none;
}

/* ===== 階段進度條 ===== */
.phase-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.phase-track {
    display: flex;
    align-items: center;
    gap: 2px;
}
.phase-track.is-hidden { display: none; }

.phase-chip {
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 2px 9px;
    border-radius: 999px;
    color: #64748b;
    border: 1px solid transparent;
    transition: all .2s ease;
}

.phase-chip.done {
    color: #475569;
}

.phase-chip.current {
    color: #041016;
    background: #38bdf8;
    border-color: #7dd3fc;
    box-shadow: 0 0 12px rgba(56, 189, 248, .7);
}

.phase-sep {
    color: #334155;
    font-size: 0.7em;
}

#phase-description {
    display: inline-block;
    margin: 0;
    line-height: 1.4;
    color: #7dd3fc;
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: .5px;
}

/* ===== 階段提示（現在該做什麼） ===== */
.phase-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 5px 16px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.25);
}

/* 需要玩家做「要／不要」決定的階段（Extra Draw、移動）加強提示 */
.phase-prompt.needs-decision {
    background: rgba(250, 204, 21, 0.09);
    border-color: rgba(250, 204, 21, 0.55);
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.18);
}

.phase-prompt-body {
    text-align: left;
    max-width: 620px;
}

.phase-prompt-title {
    font-size: 0.86em;
    font-weight: bold;
    color: #f1f5f9;
    line-height: 1.3;
}

.phase-prompt.needs-decision .phase-prompt-title {
    color: #fde68a;
}

.phase-prompt-hint {
    font-size: 0.72em;
    color: #94a3b8;
    line-height: 1.35;
}

.phase-prompt-hint:empty {
    display: none;
}

.phase-prompt-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    /* 戰鬥中最多同時出現 取消／不阻擋／直接攻擊玩家／下一階段／結束回合，
       按鈕又都是 white-space:nowrap；不換行的話在窄螢幕會被推出畫面，
       而且一路到 body 都是 overflow:hidden，捲不到也點不到。 */
    flex-wrap: wrap;
    justify-content: center;
}

/* 階段切換時閃一下，把視線拉過來 */
.phase-prompt.phase-changed {
    animation: phase-prompt-flash .9s ease-out;
}

@keyframes phase-prompt-flash {
    0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, .9); }
    100% { box-shadow: 0 0 0 14px rgba(56, 189, 248, 0); }
}

.game-controls button.btn-primary:not(:disabled) {
    background: #0369a1;
    border-color: #0ea5e9;
}

.game-controls button.btn-primary:not(:disabled):hover {
    background: #0284c7;
}

.game-controls button.btn-accent:not(:disabled) {
    background: #b45309;
    border-color: #f59e0b;
    color: #fffbeb;
}

.game-controls button.btn-accent:not(:disabled):hover {
    background: #d97706;
}

.game-controls button.btn-ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #7c8cf0;
}

/* 次要工具列：字級縮小，視覺上退到階段提示後面 */
.control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
    opacity: .82;
}

.control-row button {
    font-size: 0.72em !important;
    padding: 3px 10px !important;
}

.speed-label {
    font-size: 0.7em;
    margin-left: 8px;
    color: #94a3b8;
}

.speed-label select {
    font-size: 1em;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 2px 4px;
}

/* ===== 可操作卡片提示外框 ===== */
.card.actionable {
    outline: 2px solid #facc15;
    outline-offset: 1px;
    box-shadow: 0 0 10px rgba(250, 204, 21, .65);
    animation: actionable-pulse 1.8s ease-in-out infinite;
}

.card.actionable-attack {
    outline-color: #f87171;
    box-shadow: 0 0 10px rgba(248, 113, 113, .7);
}

.card.actionable-move {
    outline-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, .7);
}

/* 指定突襲源：比其他提示更強烈（此時盤面只有這些卡能點） */
.card.actionable-raid {
    outline: 3px solid #fb923c;
    outline-offset: 2px;
    box-shadow: 0 0 16px rgba(251, 146, 60, .95);
    animation: actionable-raid-pulse 1.1s ease-in-out infinite;
}

@keyframes actionable-raid-pulse {
    0%, 100% { outline-offset: 2px; box-shadow: 0 0 16px rgba(251, 146, 60, .95); }
    50%      { outline-offset: 5px; box-shadow: 0 0 26px rgba(251, 146, 60, 1); }
}

/* ===== 場上格子的點擊範圍 =====
   點擊判定綁在格子上（render.js）：休息中的卡是 rotate(90deg)，
   命中框跟著轉成扁的（實測 58×36），而格子是 53×72 —— 綁在卡片上的話
   格子上下各有約 18px 點不到。能源線的卡幾乎都是休息狀態，整條線都會很難點。 */

.battle-position.slot-filled,
.energy-slot.slot-filled {
    cursor: pointer;
}

/* 空格沒有東西可點，不要給 pointer 的假訊號（指定目標模式另有規則） */
.battle-position:not(.slot-filled):not(.slot-target),
.energy-slot:not(.slot-filled):not(.slot-target) {
    cursor: default;
}

/* hover 回饋放在整格上，玩家看得到「點這裡」的範圍就是這一格 */
.battle-position.slot-filled:hover,
.energy-slot.slot-filled:hover {
    border-color: rgba(96, 165, 250, 0.85);
    background: rgba(96, 165, 250, 0.14);
}

/* 卡片自己不再位移：命中範圍已經是整格，位移只會讓游標在邊緣反覆進出而閃爍，
   而且 .card:hover 的 transform 會蓋掉休息中的旋轉 */
.battle-position .card:hover,
.energy-slot .card:hover {
    transform: none;
}

.battle-position .card.rested:hover,
.energy-slot .card.rested:hover {
    transform: rotate(90deg) scale(0.82);
}

/* ===== 指定格子（登場放置／移動目的地） ===== */

.battle-position.slot-target,
.energy-slot.slot-target {
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, .18);
    box-shadow: 0 0 16px rgba(56, 189, 248, .8);
    animation: slot-target-pulse 1.1s ease-in-out infinite;
    z-index: 5;
}

/* 該格已經有卡：點下去代表把它擠掉（登場→移除區／移動→之後指名移除） */
.battle-position.slot-target-occupied,
.energy-slot.slot-target-occupied {
    outline-color: #fb923c;
    border-color: #fb923c;
    background: rgba(251, 146, 60, .22);
    box-shadow: 0 0 16px rgba(251, 146, 60, .85);
}

.battle-position.slot-target-occupied::after,
.energy-slot.slot-target-occupied::after {
    content: '擠掉';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(154, 52, 18, .95);
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 6;
}

@keyframes slot-target-pulse {
    0%, 100% { outline-offset: 2px; }
    50%      { outline-offset: 5px; }
}

/* 已登記待執行的移動 */
.card.staged-move {
    outline: 2px dashed #38bdf8;
    outline-offset: 2px;
    opacity: .75;
}

.card.staged-move::after {
    content: '待移動';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(2, 132, 199, .95);
    color: #fff;
    font-size: 0.6em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 7;
}

/* 指定模式中把其他卡壓暗，只留可選的目標醒目 */
/* 指定模式壓暗其他卡；但攻擊者／阻擋者／可選目標必須維持醒目 ——
   防守方要看的就是它們。這些排除寫在 :not() 裡而不是另開一條 filter:none，
   因為這條選擇器的特異性是 (0,6,0)，另開的覆蓋規則壓不過它。 */
.targeting-mode .battle-position:not(.slot-target) .card:not(.actionable-raid):not(.actionable-block):not(.actionable-snipe):not(.actionable-pick):not(.picked):not(.combat-attacker):not(.combat-blocker):not(.staged-move),
.targeting-mode .energy-slot:not(.slot-target) .card:not(.actionable-raid):not(.actionable-block):not(.actionable-snipe):not(.actionable-pick):not(.picked):not(.combat-attacker):not(.combat-blocker):not(.staged-move) {
    filter: grayscale(.6) brightness(.6);
}

@keyframes actionable-pulse {
    0%, 100% { outline-offset: 1px; }
    50%      { outline-offset: 3px; }
}

/* AP卡狀態樣式 —— render.js 會依可用/已橫置/未取得加上這三個 class。
   （舊引擎用的是 .ap-used/.ap-reset，隨舊版一起移除；已橫置與未取得
   兩種狀態原本就沒有樣式，這裡補上，讓 AP 列看得出剩幾點。）*/
.action-point-slot.ap-active {
    border-color: #48bb78;
    box-shadow: 0 0 8px rgba(72, 187, 120, 0.5);
}

.action-point-slot.ap-rested {
    border-color: #a0aec0;
    opacity: 0.55;
    box-shadow: none;
}

.action-point-slot.ap-unavailable {
    border-style: dashed;
    opacity: 0.3;
    box-shadow: none;
}

/* 卡背樣式 */
.card-back {
    background: linear-gradient(135deg, #2D1B69, #4A2C8A);
    border: 2px solid #6B46C1;
}

.card-back .card-img-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 模態對話框 */
.modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    /* 內容比視窗高時要留邊、並且整體可捲動，否則會上下各被切掉一截且捲不到 */
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: clamp(16px, 3vw, 30px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    /* min-width 不能是固定值：視窗比它窄時會撐破畫面 */
    min-width: min(400px, 100%);
    max-width: min(980px, 100%);
    /* 超過視窗高度就自己捲，不要溢出到畫面外 */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* 響應式設計 */
@media (max-width: 900px) {
    .game-container {
        transform: rotateX(15deg) scale(0.8);
    }
    .player-area {
        flex-direction: column;
    }
    .player-info {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-direction: row;
        min-width: auto;
        gap: 12px;
        padding: 6px 12px;
    }
    .zones-container {
        padding-left: 4px;
        grid-template-columns: 1fr 3fr 1fr;
    }
}

@media (max-width: 600px) {
    .game-container {
        transform: rotateX(10deg) scale(0.9);
    }
    .zones-container {
        grid-template-columns: 1fr 2fr 1fr;
    }
}

/* 動畫效果 */
@keyframes cardPlay {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1.1) rotate(5deg);
    }
}

.card.playing {
    animation: cardPlay 0.3s ease;
}

/* 手牌卡片包裝器 */
.hand-card-wrapper {
    position: relative;
    width: var(--hand-card-width);
    height: var(--hand-card-height);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    z-index: 1;
    transform-origin: bottom center;
    cursor: pointer;
}

/* Hover: 卡片向上偵出 */
.hand-card-wrapper:hover {
    transform: translateY(-10px) translateZ(20px) scale(1.06);
    z-index: 100;
}

.hand-card-wrapper .card {
    width: var(--hand-card-width) !important;
    height: var(--hand-card-height) !important;
}

/* 手牌卡片不顯示卡名、攻防數值，圖片填滿整張卡
   （沒有圖時要顯示文字——手牌看不懂等於沒法打，見上面 AP 卡那段說明） */
.hand-card-wrapper .card:not(.no-image) .card-name,
.hand-card-wrapper .card:not(.no-image) .card-stats {
    display: none;
}

/* AP 徽章：預設隱藏，手牌時顯示於右上角 */
.card-ap-badge {
    display: none;
}

.hand-card-wrapper .card .card-ap-badge {
    display: flex;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 20;
    font-size: clamp(9px, calc(var(--hand-card-width) * 0.12), 13px);
    font-weight: 900;
    color: #f6e05e;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    line-height: 1;
    pointer-events: none;
}

/* 手牌費用圓球：左上角，顏色對應卡片色 */
.hand-card-wrapper .card .card-cost {
    display: flex;
    position: absolute;
    top: 5px;
    left: 5px;
    right: auto;
    z-index: 20;
    width: clamp(18px, calc(var(--hand-card-width) * 0.22), 28px);
    height: clamp(18px, calc(var(--hand-card-width) * 0.22), 28px);
    font-size: clamp(10px, calc(var(--hand-card-width) * 0.13), 15px);
    font-weight: 900;
    color: #000;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    background: #aaa; /* 預設灰，被 data-color 覆蓋 */
}

/* 各顏色圓球背景（不限手牌：調度預覽、場外檢視等處也要看得到費用） */
.card[data-color] .card-cost              { color: #000; }
.card[data-color="red"] .card-cost        { background: #e53e3e; }
.card[data-color="blue"] .card-cost       { background: #3182ce; }
.card[data-color="yellow"] .card-cost     { background: #d69e2e; }
.card[data-color="green"] .card-cost      { background: #38a169; }
.card[data-color="purple"] .card-cost     { background: #805ad5; }
.card[data-color="black"] .card-cost      { background: #4a5568; color: #fff; }
.card[data-color="white"] .card-cost      { background: #e2e8f0; }

.hand-card-wrapper .card .card-img-wrapper {
    height: 100%;
    margin-bottom: 0;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUpModal {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.zone-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2800;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px;
}

.zone-card-modal {
    width: min(960px, 94%);
    max-height: 88vh;
    background: #1f2937;
    color: #f8fafc;
    border-radius: 16px;
    box-shadow: 0 22px 52px -12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    padding: 20px 24px 24px;
    gap: 12px;
}

.zone-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.zone-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.zone-card-close {
    background: #374151;
    border: none;
    color: #f8fafc;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.zone-card-close:hover {
    background: #4b5563;
    transform: scale(1.04);
}

.zone-card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    overflow-y: auto;
    padding: 6px 2px 10px;
    max-height: calc(80vh - 140px);
}

.zone-card-content .card {
    /* 隨螢幕縮放：固定 110px 在 375px 螢幕上一排只放得下 2 張。
       下面 640px 斷點原本想改成 var(--card-width)，但那沒有 !important，
       永遠打不過這裡，而且 var(--card-width) 在手機只有 22.5px，改了更糟。 */
    width: clamp(72px, 20vw, 110px) !important;
    height: clamp(101px, 28vw, 154px) !important;
    font-size: 0.82em;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);
    transition: transform .18s, box-shadow .18s;
    position: relative;
    padding: 0 !important;
}

.zone-card-content .card:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 32px -8px rgba(0,0,0,.6);
}

/* 隱藏文字，圖片填滿（沒有圖時改顯示文字，見上面 AP 卡那段說明） */
.zone-card-content .card:not(.no-image) .card-cost,
.zone-card-content .card:not(.no-image) .card-name,
.zone-card-content .card:not(.no-image) .card-stats,
.zone-card-content .card:not(.no-image) .card-ap-badge {
    display: none !important;
}

.zone-card-content .card .card-img-wrapper {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--slot-radius);
    overflow: hidden;
    margin-bottom: 0;
}

.zone-card-content .card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zone-card-content .card .card-hover-preview {
    display: none;
}

.zone-card-empty {
    width: 100%;
    text-align: center;
    padding: 24px 0;
    color: #cbd5f5;
    font-size: 0.95rem;
    opacity: 0.85;
}

@media (max-width: 640px) {
    .zone-card-modal {
        padding: 16px 18px 20px;
    }
    .zone-card-content {
        justify-content: center;
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px 3px rgba(59, 130, 246, 0.6);
    }
    50% {
        box-shadow: 0 0 25px 5px rgba(59, 130, 246, 0.9);
    }
}

@keyframes target-pulse {
    0%, 100% {
        border-color: #3b82f6;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    }
    50% {
        border-color: #60a5fa;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.4));
    }
}

/* 遊戲狀態訊息 toast：固定在畫面上緣，不參與棋盤版面 */
.game-status-message {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    max-width: 70vw;
    background: rgba(30, 20, 2, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.9em;
    white-space: pre-line;
    color: #fbbf24;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
    pointer-events: none;
}

/* 本機雙人：換手交接畫面（不透明，蓋住整個盤面避免看到上一位玩家的手牌） */
.handoff-overlay {
    position: fixed;
    inset: 0;
    /* 必須高於其他所有 overlay（手牌預覽 4000、卡片詳情 2800…），否則會露出上一位玩家的牌 */
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

.handoff-box {
    text-align: center;
    padding: 40px 56px;
    background: linear-gradient(160deg, #14213a 0%, #0f172a 100%);
    border: 1px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.handoff-label {
    font-size: 0.85em;
    color: #64748b;
    letter-spacing: 2px;
}

.handoff-box h2 {
    margin: 10px 0 6px;
    font-size: 2em;
    color: #7dd3fc;
}

.handoff-sub {
    font-size: 0.85em;
    color: #94a3b8;
    margin-bottom: 24px;
}

.handoff-box button {
    font: inherit;
    font-size: 1em;
    padding: 12px 34px;
    border-radius: 8px;
    cursor: pointer;
    background: #0369a1;
    color: #f0f9ff;
    border: 1px solid #0ea5e9;
}

.handoff-box button:hover {
    background: #0284c7;
}

/* 標題列的模式標示 */
.mode-indicator {
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 999px;
    padding: 1px 10px;
}

.mode-indicator:empty {
    display: none;
}

@keyframes pending-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    }
    50% {
        box-shadow: 0 0 25px rgba(245, 158, 11, 0.9);
    }
}







/* 場外／移除區是公開區域，雙方都可以點開查看內容 */
.zone-panel.zone-viewable {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.zone-panel.zone-viewable:hover,
.zone-panel.zone-viewable:focus-visible {
    background: rgba(56, 189, 248, 0.14);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.55);
    outline: none;
}

.zone-card-empty {
    margin: 0;
    padding: 18px 4px;
    color: #94a3b8;
}

/* 費用圈：main.css 上方已經依「卡片顏色」上色，而必要能源的顏色與卡片顏色
   在 7953 張有需求的卡裡完全一致，唯一的例外是 5 張「任意色N」的卡 ——
   那幾張照卡片顏色塗成紅色會讓人以為需要紅能源，這裡改回中性灰。 */
.card .card-cost[data-req-color="any"],
.card .card-cost[data-req-color="multi"] {
    background: #4a5568;
    color: #fff;
}

/* 手牌中目前能源付不起的卡：費用圈加紅框。
   只看數字的話「綠1」在手上有 4 顆藍時看起來也該打得出來，
   實際上一顆綠都沒有 —— 這個標記讓玩家不必點下去才知道。
   選擇器要壓過上面的 .hand-card-wrapper .card .card-cost（它也設了 box-shadow）。 */
.hand-card-wrapper .card .card-cost.cost-unaffordable,
.card-cost.cost-unaffordable {
    box-shadow: 0 0 0 2px #f56565, 0 0 7px rgba(245, 101, 101, 0.9);
}

/* ═══════ 戰鬥中的角色標記 ═══════
   阻擋視窗只寫「選擇 1 張角色阻擋」時，防守方看不出對手打的是哪一張。
   攻擊者在盤面上直接標紅並持續脈動，一眼就能對上。 */
.card.combat-attacker {
    outline: 3px solid #ef4444;
    outline-offset: 2px;
    box-shadow: 0 0 18px 4px rgba(239, 68, 68, 0.75);
    animation: combat-attacker-pulse 1.1s ease-in-out infinite;
    z-index: 30;
}

@keyframes combat-attacker-pulse {
    0%, 100% { box-shadow: 0 0 14px 3px rgba(239, 68, 68, 0.6); }
    50%      { box-shadow: 0 0 26px 8px rgba(239, 68, 68, 0.95); }
}

/* 攻擊者角標：不靠顏色也能辨識（色弱／截圖轉灰階時） */
.card.combat-attacker::before {
    content: '攻擊中';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 31;
    pointer-events: none;
}

.card.combat-blocker {
    outline: 3px solid #38bdf8;
    outline-offset: 2px;
    box-shadow: 0 0 16px 3px rgba(56, 189, 248, 0.7);
    z-index: 30;
}

.card.combat-blocker::before {
    content: '阻擋中';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 8px;
    background: #38bdf8;
    color: #04263a;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 31;
    pointer-events: none;
}

/* 狙擊指定的目標 */
.card.combat-sniped {
    outline: 3px dashed #f59e0b;
    outline-offset: 2px;
}

/* ===== 阻擋：在盤面上點卡選擇（取代原本的全螢幕詢問視窗） =====
   詢問視窗會整片蓋住場地，防守方看不到是誰在攻擊。改成：
   攻擊者紅框（.combat-attacker），可阻擋的角色黃框閃爍。 */
.card.actionable-block {
    outline: 3px solid #facc15;
    outline-offset: 2px;
    box-shadow: 0 0 16px rgba(250, 204, 21, .95);
    animation: actionable-block-pulse 1.1s ease-in-out infinite;
}

@keyframes actionable-block-pulse {
    0%, 100% { outline-offset: 2px; box-shadow: 0 0 16px rgba(250, 204, 21, .95); }
    50%      { outline-offset: 5px; box-shadow: 0 0 26px rgba(250, 204, 21, 1); }
}

/* 攻擊指定模式：可狙擊的對手角色 */
.card.actionable-snipe {
    outline: 3px solid #fb7185;
    outline-offset: 2px;
    box-shadow: 0 0 16px rgba(251, 113, 133, .95);
    animation: actionable-block-pulse 1.1s ease-in-out infinite;
}


/* 下面壓著的背面向上卡片張數（CSM〈鏈鋸人〉等的發動條件會看這個）。
   跟 AP 徽章不同，這個在場上就要看得見，所以不預設隱藏。
   放左下角，避開右上的 AP 徽章與右下的 BP 數值。 */
.card-under-badge {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 20;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(20, 20, 28, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: clamp(8px, 0.55vw, 11px);
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
}

/* 卡片詳情：這張卡下面壓著的突襲源／背面向上卡 */
.card-detail-stack {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-detail-stack .stack-label {
    font-size: 12px;
    font-weight: 700;
    color: #a0aec0;
    margin-bottom: 4px;
}

.card-detail-stack .stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-detail-stack .stack-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    font-size: 12px;
    cursor: pointer;
}

.card-detail-stack .stack-card:hover {
    background: rgba(255, 255, 255, 0.14);
}

.card-detail-stack .stack-card img {
    width: 32px;
    height: auto;
    border-radius: 3px;
    display: block;
}

.card-detail-stack .stack-hidden {
    font-size: 12px;
    color: #a0aec0;
    font-style: italic;
}

/* 效果指定目標：可選的卡在盤面上亮起來，已選的再加一層明顯的標記。
   強度對齊突襲／阻擋（此時盤面只有這些卡能點），而且要讓「卡片本身」也亮 ——
   只有外框在閃的話，在一片變暗的盤面上還是很難一眼看出是哪幾張。 */
.card.actionable-pick {
    outline: 3px solid #63b3ed;
    outline-offset: 2px;
    box-shadow: 0 0 16px rgba(99, 179, 237, .95);
    filter: brightness(1.18) saturate(1.15);
    animation: pick-pulse 1.1s ease-in-out infinite;
}

@keyframes pick-pulse {
    0%, 100% { outline-offset: 2px; box-shadow: 0 0 16px rgba(99, 179, 237, .95); }
    50%      { outline-offset: 5px; box-shadow: 0 0 28px rgba(99, 179, 237, 1); }
}

.card.picked {
    outline: 3px solid #f6e05e !important;
    animation: none !important;
    box-shadow: 0 0 20px rgba(246, 224, 94, 0.95);
    filter: brightness(1.25) saturate(1.2);
}

.card.picked::after {
    content: '✓';
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 25;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f6e05e;
    color: #1a202c;
    font-size: 13px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

/* 場外／手牌區檢視器裡「可發動主起動」的卡（EVA〈碇 真嗣〉那種從場外跳回場上的效果） */
.card.actionable-activate {
    outline: 3px solid #68d391;
    outline-offset: 2px;
    box-shadow: 0 0 16px rgba(104, 211, 145, .95);
    filter: brightness(1.15) saturate(1.1);
    cursor: pointer;
}

/* 「查看的 N 張」：可選與不可選一起顯示（不可選的變灰） */
.choice-seen { margin-top: 8px; }
.choice-seen-title { font-size: 12px; color: #a0aec0; margin-bottom: 6px; }
.choice-seen-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-seen-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 72px; font-size: 11px; color: #e2e8f0; text-align: center;
}
.choice-seen-card img { width: 100%; border-radius: 4px; display: block; }
.choice-seen-card.not-selectable { opacity: .45; filter: grayscale(.8); }
.choice-seen-card.not-selectable::after { content: '不符合'; font-size: 10px; color: #a0aec0; }

/* ═══════ 左側戰鬥紀錄 ═══════
   固定在視窗左緣，刻意不放進 .game-container —— 那個容器有 rotateX(28deg)
   的 3D 傾斜，文字放進去會跟著歪掉。

   面板不是「蓋」在盤面上，而是靠 body 的 padding-left 把盤面推開：
   body 是 flex + justify-content:center，padding 會縮小內容區，
   棋盤自然在剩下的空間裡置中，不會被面板切掉左緣。 */
:root { --blog-width: 310px; --blog-stub: 28px; }

body.has-battle-log {
    padding-left: var(--blog-width);
    box-sizing: border-box;
    transition: padding-left 0.18s ease;
}
body.has-battle-log.battle-log-collapsed { padding-left: var(--blog-stub); }

.battle-log {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--blog-width);
    display: flex;
    flex-direction: column;
    background: rgba(10, 15, 28, 0.94);
    border-right: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.45);
    z-index: 60;
    transition: transform 0.18s ease;
}
/* 收合：整片滑出去，只留頭部那顆按鈕露在畫面邊緣 */
.battle-log.collapsed {
    transform: translateX(calc(-100% + var(--blog-stub)));
}
.battle-log.collapsed .battle-log-body,
.battle-log.collapsed .battle-log-head span { visibility: hidden; }

.battle-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    flex: 0 0 auto;
}
.battle-log-toggle {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1;
    padding: 3px 6px;
}
.battle-log-toggle:hover { background: rgba(148, 163, 184, 0.18); }

.battle-log-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 10px 12px;
    font-size: 0.78em;
    line-height: 1.55;
    color: #94a3b8;
    word-break: break-word;
}
.battle-log-body::-webkit-scrollbar { width: 8px; }
.battle-log-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.blog-line { padding: 1px 0; }
/* 誰做的：對手（AI）的動作要能一眼掃出來 */
.blog-line.blog-opp { border-left: 2px solid rgba(248, 113, 113, 0.55); padding-left: 6px; }
.blog-line.blog-you { border-left: 2px solid rgba(96, 165, 250, 0.5); padding-left: 6px; }

.blog-turn {
    margin-top: 10px;
    color: #e2e8f0;
    font-weight: 600;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding-top: 6px;
}
.blog-phase { color: #64748b; }
.blog-combat { color: #fbbf24; }
.blog-damage { color: #f87171; }
.blog-end { color: #4ade80; font-weight: 600; margin-top: 8px; }
.blog-warn { color: #f6ad55; }

/* 窄畫面把面板縮窄；要不要收起來交給 JS 依實際寬度決定，
   不用 media query 直接搬 transform —— 那會跟收合按鈕的狀態打架。 */
@media (max-width: 1250px) { :root { --blog-width: 250px; } }

/* ═══════════════════════════════════════════════════════════════
   手機直式版面
   ───────────────────────────────────────────────────────────────
   桌機的棋盤是「橫向」設計：3 欄 × 3 列 × 兩位玩家同時上畫面。
   直接塞進 375px 寬會出事，因為尺寸變數沒有下限：
       --card-width: min(6vw, 7.2vh, 86px)
   桌機是 7.2vh 勝出（51.8px），手機變成 6vw 勝出 → 22.5px，
   而且中央欄只有 147px、前線 4 格就要 135px，已經貼著下限，
   再怎麼調欄寬比例都放不大（9.6W + 88 ≤ 315 → W ≤ 23.6px，比現況還小）。

   所以直式改成單欄：兩側五個資訊區（生命/牌庫/場外/除外/AP）壓成一條
   狀態列，中央的前線/能源線/手牌吃滿整個寬度。這樣 W 可以到 47px。

   整段刻意只用 CSS 的 grid-area 覆寫，不動 DOM、不動 app.js/render.js。
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) and (orientation: portrait) {

    /* ── 1. 尺寸：改成有下限的 clamp ── */
    :root {
        /* 寬度：375px 寬 → 46.9px，前線 4 格共 261.8px，放得進 345px 的可用寬度。
           高度也要管：直式是把「兩位玩家的三排卡 + 控制列」全部塞進一個畫面，
           總高約 345 + 9.1W。只綁 vw 的話，寬一點的手機（461px）算出 W=57.6，
           總高 869 > 838，被壓縮的是手牌那一排 —— .hand-card-wrapper 的高度是
           固定的 var()，不會跟著縮，於是被 overflow-y:hidden 從上下切掉。
           6.4vh / 8vh 是從 W ≤ (vh-345)/9.1 反推的，375x812 的結果不變。 */
        --card-width: clamp(38px, min(12.5vw, 6.2vh), 60px);
        --hand-card-width: clamp(48px, min(15.6vw, 7.75vh), 72px);
    }

    /* ── 2. 拿掉 3D 傾斜 ──
       直式沒有多餘空間可以浪費在透視上，而且傾斜會讓每一格變成梯形，
       命中範圍跟看到的形狀對不上。 */
    body {
        perspective: none;
        height: 100vh;
        height: 100dvh;   /* 手機瀏覽器工具列會吃掉 100vh 的一截 */
    }

    .game-container {
        transform: none;
        height: 100%;      /* 桌機是 110%，多出來的部分在手機會被切掉且捲不到 */
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* ── 3. 戰鬥紀錄改成覆蓋式抽屜 ──
       它靠 body 的 padding-left 把棋盤推開，在 375px 螢幕上會吃掉 250px，
       棋盤只剩 128px。直式一律不讓它佔版面寬度。 */
    body.has-battle-log,
    body.has-battle-log.battle-log-collapsed {
        padding-left: 0;
    }

    /* 收合時整片滑出畫面外，只留一顆小箭頭浮在左緣中央。
       桌機留 28px 邊條無所謂，直式螢幕上那條會直接壓在生命值區與標題列上
       （body 的 padding-left 在這裡是 0，面板是「蓋」不是「推」）。 */
    .battle-log.collapsed { transform: translateX(-100%); }
    .battle-log.collapsed .battle-log-head {
        background: transparent;
        border-bottom: none;
        padding: 0;
        overflow: visible;
    }
    .battle-log.collapsed .battle-log-toggle {
        position: absolute;
        left: 100%;              /* 面板已經滑出去，這裡剛好是畫面左緣 */
        margin-left: 1px;        /* 補回 border-left:none 少掉的那 1px */
        top: 50%;
        margin-top: -18px;       /* 垂直置中：左緣中段是控制列的留白，壓不到東西 */
        width: 22px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.78);
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-left: none;
        border-radius: 0 8px 8px 0;
        font-size: 0.66em;
        visibility: visible;     /* 蓋掉 .collapsed 對 head 內容的隱藏 */
    }

    .battle-log {
        width: min(300px, 86vw);
        z-index: 3200;      /* 蓋在棋盤上而不是擠開它 */
    }

    /* ── 4. 單欄版面 ──
       狀態列一列五格，卡片列橫跨整排。
       玩家（下半）由中線往外：前線 → 能源線 → 手牌 → 狀態列
       對手（上半）由外往中線：狀態列 → 能源線 → 前線 */
    .player-area {
        flex-direction: column;
        padding: 0 4px;
    }

    /* .player-info 在 900px 斷點被放回文件流，會吃掉約 41px 的高度；
       直式改成左上角的小標籤，不佔版面。 */
    .player-info {
        position: absolute;
        top: 2px;
        left: 6px;
        z-index: 25;
        flex-direction: row;
        gap: 6px;
        min-width: 0;
        padding: 1px 6px;
        border-width: 1px;
        font-size: 0.62em;
    }
    .player-info h3 { border: none; padding: 0; margin: 0; font-size: 1em; width: auto; }

    .zones-container {
        padding: 2px 4px;
        gap: 2px;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto auto auto auto;
    }

    /* 12 條 grid 指派全部要覆寫 —— 只改一部分會讓某個區留在舊的列上，
       把整條軌道撐開。 */
    .player .front-line        { grid-area: 1 / 1 / auto / span 5; }
    .player .energy-line       { grid-area: 2 / 1 / auto / span 5; }
    .player .hand-area         { grid-area: 3 / 1 / auto / span 5; }
    .player .life-zone         { grid-area: 4 / 1; }
    .player .deck-station      { grid-area: 4 / 2; }
    .player .outside-zone      { grid-area: 4 / 3; }
    .player .remove-zone       { grid-area: 4 / 4; }
    .player .action-point-zone { grid-area: 4 / 5; }

    .opponent .life-zone         { grid-area: 1 / 1; }
    .opponent .deck-station      { grid-area: 1 / 2; }
    .opponent .outside-zone      { grid-area: 1 / 3; }
    .opponent .remove-zone       { grid-area: 1 / 4; }
    .opponent .action-point-zone { grid-area: 1 / 5; }
    .opponent .energy-line       { grid-area: 2 / 1 / auto / span 5; }
    .opponent .front-line        { grid-area: 3 / 1 / auto / span 5; }
    /* 手牌張數是重要的公開資訊（決定對手能不能擋、能不能發動效果），原本
       想「張數已經寫在標題裡」所以整區藏起來，但標題 <h4>手牌(n)</h4>
       正是 .hand-area 自己的子元素——藏整個 .hand-area 連標題也一起藏掉，
       玩家完全看不到對手有幾張手牌。改成只藏卡背那排（.hand-cards，本來
       就是背面朝上，看不出內容，純粹佔版面），留標題可見。 */
    .opponent .hand-area {
        display: block;
        grid-area: 4 / 1 / auto / span 5;
        padding: 1px 2px;
    }
    .opponent .hand-area .hand-cards { display: none; }

    /* ── 5. 狀態列的內容壓縮 ── */
    .zone-panel { padding: 1px 2px; }
    .zone-panel h4 { font-size: 0.5em; letter-spacing: 0; margin-bottom: 1px; }

    /* 生命值：7 張橫置堆疊（66×95）→ 一排小指示 */
    .life-cards {
        position: static;
        display: flex;
        gap: 2px;
        width: auto;
        height: auto;
        align-items: center;
        justify-content: center;
        margin-top: 0;
    }
    .life-card {
        position: static;
        transform: none;
        width: 5px;
        height: 15px;
        background-image: none;
        background-color: #a78bfa;
        border: none;
        border-radius: 2px;
        box-shadow: none;
        pointer-events: none;
    }

    /* 牌庫／場外／除外：卡片大小 → 數字徽章 */
    .deck-count,
    .zone-count {
        width: auto;
        min-width: 26px;
        height: 20px;
        background-image: none;
        background-color: #2d3748;
        border: 1px solid rgba(148, 163, 184, 0.5);
        font-size: 0.72em;
        padding: 0 4px;
    }

    .action-point-slots { gap: 2px; padding: 0 4px; }
    .action-point-slot { width: 13px; height: 19px; font-size: 0.46em; }

    /* 休息中的卡是 rotate(90deg)，轉完比格子寬 (card-height - card-width)/2 ≈ 9px，
       最外側那張會凸出整排之外被 .zone-panel 的 overflow:hidden 削掉一角。
       給整排留出那個凸出量。 */
    .battle-positions,
    .energy-positions { padding: 0 10px; }

    /* ── 6. 手牌：橫向捲動 ──
       手牌本來是 nowrap + flex-shrink:0，7 張要 456px 卻只有約 305px，
       會往兩側溢出壓在別的區上，最外側還會被切掉點不到。
       捲動放在 .hand-cards（不是 .hand-area —— 那裡有 overflow:visible !important）。 */
    .hand-cards {
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        padding: 3px 6px;
        gap: 4px;
    }
    .hand-card-wrapper { scroll-snap-align: center; }

    /* 手牌那一列是 grid 的 auto 軌道，空間不夠時它會被壓縮，但 .hand-card-wrapper
       的高度是固定的 var(--hand-card-height)，不會跟著縮 —— 結果就是卡片被
       overflow-y:hidden 從上下切掉。給整區一個等於卡高的下限，讓它跟其他列
       競爭空間而不是被無聲裁掉。 */
    .player .hand-area { min-height: calc(var(--hand-card-height) + 20px); }
    /* hover 上抬在觸控裝置上不會發生，卻會被 overflow-x 的捲動框切掉 */
    .hand-card-wrapper:hover { transform: none; }

    /* 放大鏡預覽是 :hover 專用，觸控永遠看不到，留著只是多幾十個 <img> */
    .card-hover-preview { display: none; }

    /* ── 7. 中央控制列瘦身 ── */
    .game-controls { padding: 2px 6px 3px; gap: 2px; }
    .phase-track { display: none; }        /* 階段名稱在提示標題裡已經有了 */
    .phase-prompt { padding: 3px 8px; gap: 6px; }
    .phase-prompt-title { font-size: 0.78em; }
    .phase-prompt-hint { font-size: 0.66em; }
    .control-row .speed-label { display: none; }
    .control-row button { font-size: 0.66em !important; padding: 4px 8px !important; min-height: 30px; }

    /* 階段主按鈕（下一階段／結束回合／取消／執行移動）是對局中一直要按的，
       給它接近 44px 的高度；次要工具列很少用，維持小尺寸換取垂直空間。 */
    .phase-prompt-actions button { min-height: 40px; padding: 6px 12px; font-size: 0.78em; }

    /* iPhone 底部的 home indicator 會壓在手牌上（配合 viewport-fit=cover） */
    .player .zones-container { padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }

    /* ── 8. 頂部列瘦身 ──
       標題 + 回合資訊 + 登入列在 375px 放不下，會整排被推出畫面右側。
       登入是首頁的事，對局中不需要；標題也只是裝飾。 */
    .game-header {
        height: auto;
        min-height: 26px;
        padding: 2px 8px;
        gap: 6px;
    }
    .game-header h1 { display: none; }
    .game-header .ua-auth-row { display: none; }
    .game-info {
        gap: 8px;
        font-size: 0.62em;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-width: 0;
    }
}

/* ───────────────────────────────────────────────────────────────
   矮螢幕（≤700px 高）的直式版面
   實測 360x640：每個玩家分到 252px，但前線/能量線各需要
       h4(11+1) + 格子(55.5) + padding(2) = 69.5
   加上手牌 91.4、狀態列 48、間隙 10 → 288，短少 36。
   卡片尺寸已經卡在 clamp 的下限（W≈40），再縮就不能看了，
   所以省的是「非卡片」的部分：兩個標題 24 + 狀態列 12 + 控制列留白。
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 700px) {
    /* 前線/能量線的標題讓位。兩排的相對位置本身就是規則
       （靠中線的是前線），這在實體遊戲也是一樣的擺法。
       手牌與狀態列的標題保留 —— 那裡的數字（手牌張數、牌庫數）才是資訊。 */
    .player .front-line > h4,
    .player .energy-line > h4,
    .opponent .front-line > h4,
    .opponent .energy-line > h4 { display: none; }

    /* 狀態列再壓一階 */
    .life-card { height: 11px; width: 4px; }
    .deck-count, .zone-count { height: 16px; min-width: 22px; font-size: 0.66em; }
    .action-point-slot { width: 11px; height: 15px; }
    .zone-panel h4 { font-size: 0.46em; margin-bottom: 0; }

    /* 最後 3px：軌道間隙與面板的上下內距 */
    .zones-container { gap: 1px; padding: 1px 4px; }
    .player .front-line, .player .energy-line,
    .opponent .front-line, .opponent .energy-line { padding-top: 0; padding-bottom: 0; }

    /* 控制列的留白 */
    .game-controls { padding: 1px 4px 2px; }
    .phase-prompt { padding: 2px 6px; }
    .phase-prompt-actions button { min-height: 34px; padding: 4px 10px; }
    .control-row button { min-height: 26px; padding: 2px 6px !important; }
}