/* ==========================================================================
   online-forfeit.css — 斷線／閒置倒數藥丸（2026-08-19）
   ==========================================================================
   設計要求：藥丸出現時「原地取代」中央的回合文字，而且完全不影響 game-info
   裡任何元素的尺寸與位置。

   做法：
     ① 原本的回合文字改用 visibility:hidden ——「保留佔位、只是看不見」，
        所以那一列的高度、左右玩家區塊的寬度全部維持原樣，一個像素都不動。
     ② 藥丸用 absolute 疊在同一個位置，脫離文件流 → 不會把任何東西推開。
     ③ 允許水平方向溢出 .turn-indicator（文案較長時會蓋到左右玩家區塊一點），
        但用 max-width 夾住，確保不會撐破頁面產生橫向捲動。
   ========================================================================== */

#online-battle .turn-indicator {
    position: relative;
}

/* 藥丸顯示中：原文字保留佔位但隱形（不是 display:none —— 那會讓整列縮高） */
#online-battle .turn-indicator.has-forfeit-pill > #online-player-turn {
    visibility: hidden;
}

.forfeit-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;                       /* 疊在最上層，蓋過左右玩家資訊 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eceff1;
    color: #607d8b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    /* 夾住寬度：可以蓋到左右元素，但絕不撐破頁面 */
    max-width: min(420px, 88vw);
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
    pointer-events: none;              /* 純提示，不攔截點擊 */
}

.forfeit-pill i { font-size: 11px; opacity: .85; flex: 0 0 auto; }
.forfeit-pill .cd { font-variant-numeric: tabular-nums; color: #455a64; }

/* 最後 15 秒：提醒一下，但不刺眼 */
.forfeit-pill.urgent { background: #fff3e0; color: #e65100; }
.forfeit-pill.urgent .cd { color: #bf360c; }

/* 輪到「自己」沒落子 —— 唯一一種「你會輸」的倒數，用紅色區隔 */
.forfeit-pill.mine { background: #fdecea; color: #c0392b; }
.forfeit-pill.mine .cd { color: #a93226; }

/* 手機：空間更小，只留圖示與秒數（完整文案已經在聊天室裡） */
@media (max-width: 640px) {
    .forfeit-pill {
        font-size: 12px;
        padding: 3px 10px;
        max-width: 92vw;
    }
}

/* ── 觀戰頁 ──────────────────────────────────────────────
   觀戰頁沒有「輪到你了」，藥丸改為附加顯示，不取代任何東西。 */
.spectate-forfeit-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    background: #eceff1;
    color: #607d8b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spectate-forfeit-pill.urgent { background: #fff3e0; color: #e65100; }
.spectate-forfeit-pill .cd { font-variant-numeric: tabular-nums; }

/* ── 重整後的詢問視窗 ────────────────────────────────── */
.resume-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 20px;
}
.resume-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
}
/* 上下留白要「看起來」一樣，不是 padding 數值一樣。
   標題是文字，行高比字高多出來的部分有一半會變成看不見的空白（half-leading）疊在
   padding 上；按鈕是實心方塊，邊界就是視覺邊界。
   實測原本上緣視覺留白 29.1px、下緣 22px，差 7.1px —— 肉眼看得出來。
   這裡把標題行高收成 1.4（half-leading ≈ 3.4px），上 padding 反向補償成 21px，
   兩邊的視覺留白就都是 24px。 */
.resume-modal-body { padding: 21px 24px 18px; }
.resume-modal-body h4 {
    font-size: 17px; font-weight: 700; color: #20332a; margin: 0 0 8px;
    line-height: 1.4;
}
.resume-modal-body p { font-size: 14px; color: #5a6672; margin: 0; line-height: 1.6; }
.resume-modal-warn {
    margin-top: 12px;
    font-size: 13px;
    color: #a93226;
    background: #fdecea;
    border-radius: 6px;
    padding: 9px 12px;
    display: flex;
    gap: 8px;
    line-height: 1.55;
}
/* 🎨 [2026-08-26] 警示列的圖示：內嵌 SVG，各家瀏覽器長得一致。
   垂直位置用「(第一行行高 − 圖示高) ÷ 2」算，跟文字的視覺中線對齊；
   原本 <i> 的 margin-top:2px 是硬喬出來的，換字級或換語系就會歪掉。
   stroke 吃 currentColor → 警示列在紅（.resume-modal-warn）與藍（.rm-warn-soft）
   之間切換時，圖示自動跟著變色。 */
.resume-modal-warn { align-items: flex-start; }
.resume-modal-warn .rm-warn-icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    margin-top: calc((1.55em - 1.05em) / 2);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    /* 視覺補正：只對齊行框中心，圖示看起來會略高於文字，往下推一點點才正。
       ⚠️ 這個值是「放大到 46px 後逐級目視比對」定出來的（0.04 偏高、0.08 偏低），
          日文／中文／歐文三種都確認過。不要改用 canvas measureText 去推算 ——
          canvas 對 CJK 的字型 fallback 跟畫面上實際用的字型不一定相同，
          先前照它算出 0.17em，結果明顯偏低。
       用 transform 而不是 margin，才不會影響版面高度。 */
    transform: translateY(0.06em);
}
/* 舊的字型圖示規則保留：其他地方若還有 <i> 不受影響 */
.resume-modal-warn i { margin-top: 2px; flex: 0 0 auto; }
/* 開局未成形的那些局：離開不會判負，警告改成中性的說明色，不要嚇人 */
.resume-modal-warn.rm-warn-soft { color: #1f6a4a; background: #e9f3ee; }
.resume-modal-acts { display: flex; gap: 10px; padding: 0 24px 24px; }
.resume-modal-acts button {
    flex: 1;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 14px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    min-height: 44px;
}
.resume-modal-acts .rm-primary { background: #1b8050; color: #fff; }
.resume-modal-acts .rm-primary:hover { background: #15683f; }
.resume-modal-acts .rm-ghost { background: #eceff1; color: #5a6672; }
.resume-modal-acts .rm-ghost:hover { background: #dde3e6; }

@media (max-width: 400px) {
    .resume-modal-acts { flex-direction: column; }
}


/* 🔁 [2026-08-26] 「再來一局」按鈕的文字會隨語系與倒數秒數大幅變長
   （最短：中文「接受再來一局（60）」10 字；最長：法文「En attente de l'adversaire… (60)」32 字）。
   讓它自己折行沒問題，但預設的 flex 收縮會連帶壓扁旁邊的「返回大廳」——
   日文實測被擠成「ロビーに戻／る」斷字。
   作法：次要按鈕固定寬度不收縮，多出來的字由主要按鈕自己吸收；
   真的排不下時整列換行改成上下堆疊（手機版本來就是堆疊的，不受影響）。 */
.game-end-buttons { flex-wrap: wrap; }
.game-end-buttons #online-back-home { flex: 0 0 auto; white-space: nowrap; }
.game-end-buttons #online-play-again { min-width: 0; }

/* 極窄螢幕（iPhone SE 等 ≤360px）：結束覆蓋層跟著棋盤是正方形的，高度 = 螢幕寬。
   原本的字只用掉 291～299px，餘裕約 21px；但「等待對手同意…（60）」這類長標籤
   會折行，把卡片推到 321～328px 而溢出棋盤邊緣（實測日文 +1.7px、義大利文 +8.2px）。
   收窄卡片內距換回 24px 垂直空間，兩者都能裝下。 */
@media (max-width: 360px) {
    /* 再收一階：狀態列若因裝置字型或使用者放大系統字級而折成兩行，會多 18px；
       單行時餘裕只有 12.8px，不夠。這裡多騰出 14px，兩行也裝得下。 */
    #online-battle .game-end-content { padding: 14px; }
    #online-battle .game-end-buttons { margin-top: 10px; }
}

/* 🔁 [2026-08-26] 我方已按下「再玩一次」時的狀態。
   按鈕維持各語系原本的文字，只是反灰不能按 —— 沿用本站既有的 disabled 風格
   （對齊 #join-game:disabled：灰底、not-allowed、擋掉 hover 變色）。 */
#online-play-again:disabled,
#online-play-again.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    opacity: .7;
    pointer-events: none;
}

/* 等待對手同意的那句話與倒數，放在兩顆按鈕下方。
   上下都留呼吸空間：上方與按鈕列拉開，下方靠卡片本身的 padding。 */
.game-end-content .rematch-status {
    display: none;
    margin: 16px auto 2px;
    max-width: 34ch;              /* 長語系折行時不要拉成一條細長字串 */
    font-size: 13px;
    line-height: 1.5;
    color: #5a6672;
    text-align: center;
    font-variant-numeric: tabular-nums;   /* 倒數跳動時字寬不變，不會左右抖 */
}
.game-end-content .rematch-status.is-on { display: block; }

@media (max-width: 360px) {
    .game-end-content .rematch-status { margin-top: 10px; font-size: 12px; }
}