/* 觀看模式（1005，cityMain.js 的 watch*）：別人的回合在背景進行時的行動摘要列、棋子頭上小泡泡、「輪到你」提示。
   只新增元素的外觀，不覆寫既有元件。 */
#app header .watch-btn[data-mode=background] img, #app header .watch-btn[data-mode=fast] img { filter:none; }
#app header .watch-btn[data-mode=fast] { outline:2px solid #e0a32a; outline-offset:-2px; }

.watch-feed { position:absolute; z-index:5; top:calc(var(--header-h, 52px) + 10px); left:calc(var(--left-w, 0px) + 58px); display:flex; flex-direction:column; align-items:flex-start; gap:4px; max-width:min(300px, calc(100% - var(--left-w, 0px) - var(--right-w, 0px) - 80px)); pointer-events:none; }
.watch-feed:empty { display:none; }
.watch-chip { pointer-events:auto; display:flex; align-items:center; gap:5px; max-width:100%; min-height:30px; padding:2px 8px 2px 3px; font:inherit; font-size:13px; line-height:1.2; color:#3a2a1c; background:#fff8e9f0; border:2px solid #3a2a1c; border-left:5px solid var(--pc, #bba982); border-radius:6px; box-shadow:0 2px 0 #2a1a1055; cursor:pointer; text-align:left; animation:watch-in .22s ease-out; }
.watch-chip:hover { background:#fffdf6; }
.watch-chip .portrait { width:22px; height:22px; flex:none; }
.watch-chip .watch-ic { width:20px; height:20px; flex:none; image-rendering:pixelated; }
.watch-chip .watch-label { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:700; }
.watch-chip .watch-amt { flex:none; font-weight:900; color:#a03630; }
.watch-chip.gain .watch-amt { color:#2f7a3f; }
.watch-chip.mine { background:#fff1c4; border-color:#b8860b; border-left-color:var(--pc, #b8860b); box-shadow:0 0 0 2px #ffd400aa, 0 2px 0 #2a1a1055; animation:watch-in .22s ease-out, watch-glow 1.2s ease-in-out 3; }
.watch-chip.seen { opacity:.55; }
.watch-chip.seen.mine { opacity:.8; }
@keyframes watch-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } }
@keyframes watch-glow { 50% { box-shadow:0 0 0 4px #ffd400, 0 2px 0 #2a1a1055; } }

.watch-ping { position:absolute; z-index:6; transform:translate(-50%, -100%); display:flex; align-items:center; gap:3px; padding:1px 6px 1px 2px; font-size:13px; font-weight:900; color:#a03630; background:#fff8e9; border:2px solid #3a2a1c; border-radius:999px; pointer-events:none; animation:watch-ping 1.6s ease-out forwards; }
.watch-ping img { width:18px; height:18px; image-rendering:pixelated; }
.watch-ping.gain { color:#2f7a3f; }
.watch-ping.mine { border-color:#b8860b; background:#fff1c4; }
@keyframes watch-ping { 0% { opacity:0; margin-top:6px; } 15% { opacity:1; margin-top:0; } 75% { opacity:1; } 100% { opacity:0; margin-top:-18px; } }

.watch-toast { position:absolute; z-index:26; left:50%; top:calc(var(--header-h, 52px) + 54px); transform:translateX(-50%); padding:6px 18px; font-size:18px; font-weight:900; color:#fff8e9; background:#2f6b52; border:3px solid #1f4a3a; border-radius:10px; box-shadow:0 4px 0 #1a2a2288; pointer-events:none; animation:watch-toast 2.2s ease-out forwards; white-space:nowrap; }
.watch-toast.mode { font-size:15px; background:#5a3519; border-color:#3a2a1c; animation-duration:1.4s; }
@keyframes watch-toast { 0% { opacity:0; transform:translate(-50%, -8px); } 12% { opacity:1; transform:translate(-50%, 0); } 80% { opacity:1; } 100% { opacity:0; } }

@media (max-width:700px) {
  .watch-feed { top:52px; left:46px; max-width:calc(100% - 56px); } /* 避開「查看資訊」與左側記錄頁籤 */
  .watch-feed .watch-chip:nth-last-child(n+4) { display:none; } /* 手機只留最近 3 則 */
  .watch-toast { top:52px; font-size:16px; }
  main.info-open .watch-feed { display:none; }
}
@media (prefers-reduced-motion:reduce) { .watch-chip, .watch-chip.mine, .watch-ping, .watch-toast { animation:none; } }
.watch-chip.fading { opacity:0; transition:opacity .6s; }