:root {
  --mint: rgb(182, 237, 190);
  --wood: #8a5a2b;
  --ink: #4a3423;
  --font: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Heiti TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--mint); font-family: var(--font); color: var(--ink); }

/* ---------- 場景 ---------- */
#wrap { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; }
#base { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; display: block; }
#layers img { position: absolute; transition: opacity .6s ease; pointer-events: none; }
#layers img.hide { opacity: 0; }
#layers img.busy { animation: bob 1.6s ease-in-out infinite; }
#layers img.idle { transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* 煙霧 */
.puff { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(255,255,255,.8);
  animation: puff .9s ease-out forwards; pointer-events: none; z-index: 2000; }
@keyframes puff { 0% { transform: scale(.3); opacity: .95; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; } }

/* 腳印 */
.paw { position: absolute; width: 9px; height: 7px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: rgba(110, 70, 35, .55); z-index: 1;
  animation: paw 2.6s ease-in forwards; pointer-events: none; }
@keyframes paw { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 黑板 ---------- */
#board { position: absolute; left: 671px; top: 84px; width: 326px; height: 95px; color: #f4f1e6;
  text-shadow: 0 0 1px rgba(255,255,255,.5); z-index: 3000; line-height: 1; }
#board-title { font-size: 13px; text-align: center; height: 17px; letter-spacing: 1px; color: #fff7c2; }
.brow { display: grid; grid-template-columns: 14px 70px 76px 1fr; align-items: baseline; height: 15.5px; font-size: 13px; white-space: nowrap; }
.brow .rk { color: #fff7c2; }
.brow .net { text-align: right; padding-right: 6px; }
.brow .neg { color: #ffb3b3; }
.brow .sub { font-size: 9.5px; color: #cfe3d4; overflow: hidden; }
.brow .tag { font-size: 9px; color: #3b2a12; background: #ffd75e; border-radius: 3px; padding: 1px 2px; margin-left: 2px; vertical-align: 1px; }
.brow.miss { color: #b9cdbf; }

/* ---------- 公告欄 ---------- */
#sign { position: absolute; left: 362px; top: 205px; width: 198px; height: 92px;
  transform-origin: 0 0; transform: skewY(-20.24deg); z-index: 3000; }
#sign-inner { position: absolute; inset: 8px 12px 6px 12px; font-size: 12px; line-height: 1.28; color: #3d2410;
  text-shadow: 0 1px 0 rgba(255,220,170,.4); white-space: nowrap; overflow: hidden; }
#sign-inner .hd { font-weight: bold; font-size: 13px; }
#sign-inner .hd b { color: #b3261e; }
#sign-inner .t { color: #7a4a20; font-size: 11px; margin-right: 3px; }

/* ---------- 錦旗、彩帶 ---------- */
.award-group { position: absolute; display: flex; gap: 4px; align-items: flex-start; transform: translateX(-50%); z-index: 2500; }
.pennant { position: relative; width: 28px; padding-top: 4px; }
.pennant .rod { position: absolute; left: -3px; right: -3px; top: 0; height: 4px; border-radius: 2px; background: #7b4a1e; }
.pennant .rod::before { content: ""; position: absolute; left: 50%; top: -9px; width: 14px; height: 9px; margin-left: -7px;
  border: 1.5px solid #7b4a1e; border-bottom: none; border-radius: 7px 7px 0 0; }
.pennant .cloth { writing-mode: vertical-rl; text-orientation: upright; font-size: 12px; font-weight: bold; letter-spacing: 0;
  line-height: 28px; padding: 4px 0 13px; width: 28px; display: flex; align-items: center; justify-content: flex-start;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.pennant.gold .cloth { background: linear-gradient(90deg, #d99a12, #ffd95a 50%, #d99a12); color: #8a1c10; }
.pennant.silver .cloth { background: linear-gradient(90deg, #9aa3ad, #eef2f6 50%, #9aa3ad); color: #2c3e66; }
.ribbon { position: relative; width: 74px; height: 50px; }
.ribbon svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ribbon .lbl { position: absolute; left: 13px; right: 13px; top: 24px; height: 15px; background: #e8443a; color: #fff;
  font-size: 10.5px; font-weight: bold; text-align: center; line-height: 15px; border-radius: 2px; }
.ribbon .lbl::before, .ribbon .lbl::after { content: ""; position: absolute; top: 3px; border: 6px solid #c22f27; }
.ribbon .lbl::before { left: -8px; border-left-color: transparent; }
.ribbon .lbl::after { right: -8px; border-right-color: transparent; }

/* ---------- 忙碌泡泡 ---------- */
.bubble { position: absolute; z-index: 2800; background: #fff; border: 2px solid #5b3b22; border-radius: 9px;
  padding: 2px 7px; font-size: 12px; font-weight: bold; white-space: nowrap; color: #3d2410;
  transition: opacity .5s; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.bubble::after { content: ""; position: absolute; left: 6px; bottom: -7px; width: 8px; height: 8px; background: #fff;
  border-right: 2px solid #5b3b22; border-bottom: 2px solid #5b3b22; transform: skewX(30deg) rotate(45deg); }
.bubble .dots::after { content: "…"; display: inline-block; animation: dots 1.4s steps(4) infinite; width: 1em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1em; } }
.bubble.hide { opacity: 0; }

/* ---------- 下方面板 ---------- */
#offline { background: #ffe1a8; color: #6b3a00; text-align: center; padding: 8px; font-size: 14px; font-weight: bold; }
#panel { max-width: 960px; margin: 0 auto; padding: 8px 12px 40px; }
#updated { text-align: center; font-size: 13px; color: #3f6b48; margin: 4px 0 10px; }
details { background: #fffaf0; border: 2px solid #c8935a; border-radius: 12px; margin: 10px 0; overflow: hidden; }
summary { cursor: pointer; padding: 10px 14px; font-weight: bold; font-size: 16px; background: #f4dfbf; list-style: none; }
summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }
details > *:not(summary) { margin-left: 12px; margin-right: 12px; }
#rank-title { font-weight: bold; margin-top: 10px; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
table { border-collapse: collapse; font-size: 14px; white-space: nowrap; }
th, td { padding: 6px 9px; border-bottom: 1px solid #ead7bb; text-align: right; }
th { background: #fbefd9; font-size: 13px; }
td.l, th.l { text-align: left; }
td.neg { color: #c0392b; }
td .tag { font-size: 11px; background: #ffd75e; border-radius: 3px; padding: 0 3px; margin-left: 3px; }
td .award { font-size: 11px; border-radius: 3px; padding: 0 3px; margin-left: 3px; color: #fff; }
.aw-net { background: #d99a12; } .aw-pf { background: #8a96a3; } .aw-up { background: #e8443a; }
#warnings { color: #b3261e; font-size: 14px; padding-left: 20px; }
#warnings:empty { display: none; }
ul { padding-left: 20px; }
li { margin: 4px 0; font-size: 14px; }
h3 { font-size: 15px; margin: 10px 12px 0; }
.st-busy { color: #1d7a3a; font-weight: bold; }
.st-idle { color: #8a7a6a; }
.muted { color: #8a7a6a; font-size: 12px; }