:root {
  --bg: #140d24; --bg2: #1f1538; --card: #281c47; --line: #3b2d63;
  --text: #f4f0ff; --muted: #a99bd0; --accent: #ffcc4d; --pink: #ff5d8f;
  --ok: #3ddc84; --bad: #ff5b5b; --blue: #4fb3ff;
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
body { min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 16px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
a { color: var(--blue); }

/* 登入頁 */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px;
  background: radial-gradient(circle at 30% 20%, #4a2a8a, var(--bg) 60%); }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 22px;
  width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.login-logo { font-size: 56px; }
.login-card h1 { margin: 6px 0 4px; }
.login-card p { color: var(--muted); margin: 0 0 18px; }
.login-card input { width: 100%; padding: 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); font-size: 22px; text-align: center; letter-spacing: 4px; }
.login-card button, .btn { margin-top: 14px; width: 100%; padding: 14px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), #ff9a3d); color: #fff; font-size: 18px; font-weight: 700; }
.login-err { color: var(--bad); margin-top: 10px; }

/* 通用 */
.btn.sm { width: auto; padding: 8px 14px; font-size: 15px; margin: 0; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.green { background: linear-gradient(135deg, #1fbf6a, #3ddc84); }
.btn.red { background: linear-gradient(135deg, #e0344a, #ff6b6b); }
.btn.blue { background: linear-gradient(135deg, #2a7ce0, #4fb3ff); }
.btn.gray { background: #4a3f6b; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 10px; font-size: 17px; }
.field { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > .grow { flex: 1; min-width: 0; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #3b2d63; color: var(--muted); vertical-align: middle; font-weight: 500; }
.tag.lead { background: #5a4410; color: var(--accent); }
.tag.last { background: #4a1d2a; color: #ff9aa9; }
.tag.me { background: #173d5c; color: #9fd6ff; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); display: inline-block; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--accent); }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(30px); opacity: 0;
  background: #000c; color: #fff; padding: 12px 18px; border-radius: 12px; transition: .25s; z-index: 99;
  max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 計分板 */
.sb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg2);
  margin-bottom: 8px; border-left: 6px solid var(--c); }
.sb-row.mine { box-shadow: 0 0 0 2px var(--c) inset; }
.sb-rank { font-size: 22px; font-weight: 800; width: 34px; flex: none; text-align: center; color: var(--muted); }
.sb-main { flex: 1; min-width: 0; }
.sb-name { font-weight: 700; font-size: 17px; }
.sb-bar { height: 7px; background: #0003; border-radius: 9px; margin: 6px 0 4px; overflow: hidden; }
.sb-bar i { display: block; height: 100%; background: var(--c); border-radius: 9px; transition: width .6s; }
.sb-members { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sb-members .off { opacity: .4; text-decoration: line-through; }
.sb-score { font-size: 30px; font-weight: 800; min-width: 44px; text-align: right; }

/* 表格 */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 12px; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-win { color: var(--ok); font-weight: 700; } .st-tie { color: var(--accent); } .st-early { color: #ff9aa9; }
.st-bad { color: var(--bad); }

/* 這一題得分的隊伍：凸出來 */
.sb-row { position: relative; transition: box-shadow .3s; }
.sb-row.scored { transform: scale(1.04); z-index: 2; background: color-mix(in srgb, var(--c) 28%, var(--bg2));
  box-shadow: 0 0 0 3px var(--c), 0 8px 30px color-mix(in srgb, var(--c) 55%, transparent); animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1.04); } }
.sb-plus { font-size: 26px; font-weight: 900; color: var(--c); background: #0006; border-radius: 10px; padding: 2px 10px; animation: pop .6s ease-out; }
.sb-members .hit-name { color: var(--text); font-weight: 800; }

.sb-rank .crown { display: inline-block; font-size: .95em; animation: crownBob 1.6s infinite ease-in-out; }
@keyframes crownBob { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-3px) rotate(8deg); } }