/* ============================================================
   島嶼爭霸賽 網站設計稿：共用樣式
   - 手機優先（設計寬 375），min-width: 1024px 起是電腦版（設計寬 1280）
   - 顏色、字型、尺寸都在 :root
   - 狀態一律用 class 切換，規則見 design/README.md「狀態怎麼切」
   ============================================================ */

:root {
  /* 品牌色（跟 logo 一樣） */
  --bg: #0E0F13;
  --lime: #C6F432;
  --pink: #FF3D8B;

  /* 介面色 */
  --surface: #17191F;
  --surface-2: #20232B;
  --surface-3: #2B2F3A;
  --line: #3A3F4C;
  --text: #F2F3F5;
  --muted: #A3A8B4;
  --ink: #0E0F13;
  --disabled: #8A90A0;

  /* 狀態色：lime＝可以做／成功、pink＝比賽中／危險／錯誤、attn＝要注意（報到、倒數、等確認） */
  --ok: var(--lime);
  --live: var(--pink);
  --danger: var(--pink);
  --attn: #FFC53D;

  /* 按鈕立體感用的深色 */
  --lime-shade: #8DB51A;
  --pink-shade: #C41E62;
  --attn-shade: #C99119;

  /* 字型：中文 Noto Sans TC，英文和數字 Silkscreen（像素字，只用 16／24／32／48 這些 8 的倍數才清楚） */
  --font: "Noto Sans TC", system-ui, -apple-system, sans-serif;
  --font-px: "Silkscreen", "Noto Sans TC", monospace;

  /* 尺寸 */
  --tap: 48px;            /* 按鈕最小高度（規範 ≥ 44） */
  --gutter: 16px;
  --wrap: 1200px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; --topbar-h: 64px; }
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--font);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--lime); text-underline-offset: 3px; }
a:hover { color: #E2FF7A; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--lime); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 8px; color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-family: var(--font-px); font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- 像素缺角：四個角各挖掉一格，--n 是格子大小 ---------- */
.px, .btn, .card, .badge, .avatar, .meter, .cd-num, .step-num, .alert, .modal-box, .toast,
.menu, .faq details, .schedule, .switch-ui, .video, .stepper output, .code-chip, .tile, .empty,
.input, .tabs > a, .tabs > button, .table-wrap, .chip {
  clip-path: polygon(
    0 var(--n, 4px), var(--n, 4px) var(--n, 4px), var(--n, 4px) 0,
    calc(100% - var(--n, 4px)) 0, calc(100% - var(--n, 4px)) var(--n, 4px), 100% var(--n, 4px),
    100% calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) 100%,
    var(--n, 4px) 100%, var(--n, 4px) calc(100% - var(--n, 4px)), 0 calc(100% - var(--n, 4px))
  );
}

/* ---------- 鎖定框（logo 的四角框）：加在要強調的東西外面 ---------- */
.lockon { position: relative; }
.lockon::before {
  content: "";
  position: absolute;
  inset: calc(var(--lo-gap, 8px) * -1);
  pointer-events: none;
  --c: var(--lo-color, var(--text));
  --t: var(--lo-t, 4px);
  --l: var(--lo-l, 16px);
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right top / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) left bottom / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--t),
    linear-gradient(var(--c) 0 0) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
}
.lockon--lime { --lo-color: var(--lime); }
.lockon--pink { --lo-color: var(--pink); }
.lockon--attn { --lo-color: var(--attn); }
.lockon--blink::before { animation: blink 1.2s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes skel { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 像素圖示（12×12 格，只用 12／24／36px 才會清楚） ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.icon--sm { width: 12px; height: 12px; }
.icon--lg { width: 36px; height: 36px; }

/* ---------- 文字層級 ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font: 400 16px/1 var(--font-px);
  color: var(--lime);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dots3 { display: inline-flex; gap: 4px; }
.dots3 i { width: 8px; height: 8px; background: var(--lime); }
.dots3 i:last-child { background: var(--pink); }

.h1 {
  font-weight: 900;
  font-size: clamp(44px, 13vw, 96px);
  line-height: 1.08;
  letter-spacing: .02em;
  text-shadow: .06em .06em 0 var(--pink);
}
.h1--page { font-size: clamp(32px, 9vw, 48px); text-shadow: 3px 3px 0 var(--pink); }
.h2 { font-weight: 900; font-size: 26px; line-height: 1.3; text-shadow: 3px 3px 0 var(--pink); }
.h3 { font-weight: 900; font-size: 19px; line-height: 1.4; }
@media (min-width: 1024px) { .h2 { font-size: 34px; } .h3 { font-size: 21px; } }
.lead { color: var(--muted); font-size: 17px; }

/* ---------- 按鈕：主要／次要／危險，手機至少 48px 高 ---------- */
.btn {
  --n: 4px;
  --bg: var(--surface-3);
  --fg: var(--text);
  --shade: rgba(0, 0, 0, .35);
  --focus: var(--lime);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  padding: 10px 20px;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  font: 700 16px/1.25 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset -4px -4px 0 var(--shade);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--fg); filter: brightness(1.1); }
.btn:active { box-shadow: inset 4px 4px 0 var(--shade); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -7px; }
.btn--primary { --bg: var(--lime); --fg: var(--ink); --shade: var(--lime-shade); --focus: var(--ink); }
.btn--attn { --bg: var(--attn); --fg: var(--ink); --shade: var(--attn-shade); --focus: var(--ink); }
.btn--pink { --bg: var(--pink); --fg: var(--ink); --shade: var(--pink-shade); --focus: var(--ink); }
.btn--ink { --bg: var(--ink); --fg: var(--attn); --shade: #000; --focus: var(--attn); }
.btn--ghost { --bg: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--line), inset 4px 4px 0 rgba(0, 0, 0, .35); }
.btn--danger { --bg: transparent; --fg: var(--pink); --focus: var(--pink); box-shadow: inset 0 0 0 2px var(--pink); }
.btn--danger:active { box-shadow: inset 0 0 0 2px var(--pink), inset 4px 4px 0 rgba(0, 0, 0, .35); }
.btn--lg { --n: 6px; min-height: 64px; padding: 14px 24px; font-size: 19px; font-weight: 900; }
.btn--sm { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--square { width: var(--tap); padding: 0; font: 400 24px/1 var(--font-px); }
.btn:disabled, .btn[aria-disabled="true"] {
  --bg: var(--surface-2); --fg: var(--disabled);
  box-shadow: inset 0 0 0 2px var(--surface-3);
  cursor: not-allowed; filter: none;
}
.btn-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .btn-row { flex-direction: row; flex-wrap: wrap; } }

/* ---------- 狀態徽章 ---------- */
.badge {
  --n: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 10px;
  background: var(--surface-3); color: var(--text);
  font: 700 13px/1.2 var(--font);
  white-space: nowrap;
}
.badge--ok { background: var(--lime); color: var(--ink); }
.badge--live { background: var(--pink); color: var(--ink); }
.badge--attn { background: var(--attn); color: var(--ink); }
.badge--muted { background: var(--surface-3); color: var(--muted); }
.badge--line { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.pxdot { display: inline-block; width: 8px; height: 8px; flex: none; background: currentColor; }
.badge--live .pxdot, .badge--attn .pxdot, .pxdot--blink { animation: blink 1.2s steps(1) infinite; }

/* ---------- 卡片 ---------- */
.card { --n: 6px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); padding: 20px; }
.card--hi { box-shadow: inset 0 0 0 2px var(--lime); }
.card--attn { box-shadow: inset 0 0 0 2px var(--attn); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
@media (min-width: 1024px) { .card { padding: 28px; } }

.grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .grid { gap: 24px; } }

/* ---------- 頭像（真資料換成 <img>，大小、缺角不變） ---------- */
.avatar {
  --n: 3px;
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  background: var(--av, var(--surface-3)); color: var(--ink);
  font: 400 16px/1 var(--font-px);
  object-fit: cover;
}
.avatar--sm { width: 32px; height: 32px; --n: 2px; }
.avatar--lg { width: 56px; height: 56px; font-size: 24px; }
.avatar--empty { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }

/* ---------- 名額進度條（--p 是百分比） ---------- */
.meter { --n: 2px; position: relative; height: 16px; background: var(--surface-3); }
.meter > span { display: block; height: 100%; width: var(--p, 0%); background: var(--lime); }
.meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, var(--surface) 10px 12px); }
.meter--full > span { background: var(--attn); }

/* ---------- 提示框（錯誤／注意／成功） ---------- */
.alert {
  --n: 4px;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line);
}
.alert > .icon { margin-top: 2px; }
.alert-title { font-weight: 900; }
.alert-body { color: var(--muted); font-size: 15px; }
.alert-body + .btn, .alert .btn { margin-top: 12px; }
.alert--error { box-shadow: inset 0 0 0 2px var(--pink); }
.alert--error > .icon { color: var(--pink); }
.alert--attn { box-shadow: inset 0 0 0 2px var(--attn); }
.alert--attn > .icon { color: var(--attn); }
.alert--ok { box-shadow: inset 0 0 0 2px var(--lime); }
.alert--ok > .icon { color: var(--lime); }

/* ---------- 空狀態、載入中 ---------- */
.empty {
  --n: 4px;
  display: grid; justify-items: center; gap: 10px;
  padding: 32px 20px;
  text-align: center; color: var(--muted);
  background:
    linear-gradient(90deg, var(--line) 50%, transparent 0) top / 16px 2px repeat-x,
    linear-gradient(90deg, var(--line) 50%, transparent 0) bottom / 16px 2px repeat-x,
    linear-gradient(var(--line) 50%, transparent 0) left / 2px 16px repeat-y,
    linear-gradient(var(--line) 50%, transparent 0) right / 2px 16px repeat-y;
}
.empty .icon { color: var(--line); }
.skel { background: var(--surface-3); animation: skel 1.2s steps(1) infinite; }
.skel-line { height: 16px; margin: 10px 0; }
.skel-line--short { width: 40%; }
.skel-block { height: 160px; }

/* ---------- 倒數計時 ---------- */
.countdown-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.countdown-digits { display: flex; gap: 8px; }
.cd-unit { display: grid; justify-items: center; gap: 6px; }
.cd-num {
  --n: 4px;
  min-width: 64px; padding: 12px 8px;
  background: var(--surface-2); box-shadow: inset 0 -4px 0 var(--surface-3);
  font: 400 32px/1 var(--font-px); text-align: center; color: var(--attn);
}
.cd-lbl { font-size: 13px; color: var(--muted); font-weight: 700; }
@media (min-width: 1024px) { .cd-num { min-width: 88px; font-size: 48px; padding: 16px 10px; } }

/* ---------- 開關（通知設定） ---------- */
.switch { display: flex; align-items: center; gap: 14px; min-height: var(--tap); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { --n: 3px; position: relative; width: 60px; height: 32px; flex: none; background: var(--surface-3); }
.switch-ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: var(--muted); }
.switch input:checked + .switch-ui { background: var(--lime); }
.switch input:checked + .switch-ui::after { left: 32px; background: var(--ink); }
.switch input:focus-visible + .switch-ui { outline: 3px solid var(--pink); outline-offset: 3px; }
.switch-text { display: grid; }
.switch-text b { font-weight: 700; }
.switch-text span { color: var(--muted); font-size: 14px; }

/* ---------- 對話框、提示訊息（toast） ---------- */
.modal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: end center;
  padding: 16px;
  background: rgba(5, 6, 8, .78);
}
.modal-box {
  --n: 6px;
  width: min(100%, 440px);
  padding: 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
}
.modal-box--danger { box-shadow: inset 0 0 0 2px var(--pink); }
.modal-box .h3 { margin-bottom: 8px; }
.modal-box p:not(.error-msg) { color: var(--muted); }
.modal-actions { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 24px; }
@media (min-width: 768px) {
  .modal { place-items: center; }
  .modal-actions { flex-direction: row; justify-content: flex-end; }
}
.toast {
  --n: 4px;
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--lime);
  font-weight: 700;
}
.toast .icon { color: var(--lime); }
.toast--error { box-shadow: inset 0 0 0 2px var(--pink); }
.toast--error .icon { color: var(--pink); }
@media (min-width: 1024px) { .toast { left: auto; right: 32px; bottom: 32px; width: 380px; } }

/* ---------- 表單：欄位、輸入框、勾選框 ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field .label { font-weight: 700; }
.hint { color: var(--muted); font-size: 14px; }
.error-msg { display: flex; align-items: center; gap: 6px; color: var(--pink); font-size: 14px; font-weight: 700; }
.error-msg .icon { width: 12px; height: 12px; }
.input {
  --n: 3px;
  width: 100%; min-height: var(--tap);
  padding: 10px 14px;
  border: 0;
  background: var(--ink); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--line);
  font: 500 16px/1.4 var(--font);   /* 16px：iPhone 點進去才不會自動放大 */
}
.input::placeholder { color: #737A89; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime); }
.input.is-invalid, .field.is-invalid .input { box-shadow: inset 0 0 0 2px var(--pink); }
.input--code { font: 400 24px/1 var(--font-px); letter-spacing: .2em; text-transform: uppercase; text-align: center; }
textarea.input { min-height: 120px; resize: vertical; }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.char-count { justify-self: end; color: var(--muted); font-size: 13px; }

.check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding: 10px 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: 1px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.check-box .icon { display: none; width: 12px; height: 12px; color: var(--ink); }
.check input:checked + .check-box { background: var(--lime); box-shadow: none; }
.check input:checked + .check-box .icon { display: block; }
.check input:focus-visible + .check-box { outline: 3px solid var(--pink); outline-offset: 3px; }

/* 搜尋框（左邊放放大鏡圖示） */
.search { position: relative; }
.search > .icon { position: absolute; z-index: 1; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .input { padding-left: 48px; }

/* ---------- 分頁籤（項目切換、輪次切換） ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button {
  --n: 3px;
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 0; background: var(--surface-2); color: var(--muted);
  font: 700 15px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tabs > a:hover, .tabs > button:hover { color: var(--text); }
.tabs > [aria-selected="true"], .tabs > [aria-current="page"], .tabs > .is-active { background: var(--lime); color: var(--ink); }
.tabs > *:focus-visible { outline: 3px solid var(--pink); outline-offset: -5px; }

/* 小標籤（篩選、分類） */
.chip { --n: 2px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 700; }

/* ---------- 流程步驟（驗證、建隊：ol 加 at-1～at-5，或 li 加 is-done／is-current） ---------- */
.flow-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; counter-reset: fs; }
.flow-steps li { counter-increment: fs; position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.flow-steps li::before { content: counter(fs); position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; background: var(--surface-3); color: var(--muted); font: 400 16px/1 var(--font-px); }
.flow-steps li::after { content: ""; position: absolute; top: 15px; left: calc(50% + 16px); width: calc(100% - 30px); height: 2px; background: var(--surface-3); }
.flow-steps li:last-child::after { display: none; }
.flow-steps li.is-done,
.flow-steps.at-2 li:nth-child(-n+1), .flow-steps.at-3 li:nth-child(-n+2),
.flow-steps.at-4 li:nth-child(-n+3), .flow-steps.at-5 li:nth-child(-n+4) { color: var(--text); }
.flow-steps li.is-done::before,
.flow-steps.at-2 li:nth-child(-n+1)::before, .flow-steps.at-3 li:nth-child(-n+2)::before,
.flow-steps.at-4 li:nth-child(-n+3)::before, .flow-steps.at-5 li:nth-child(-n+4)::before { background: var(--lime); color: var(--ink); }
.flow-steps li.is-done::after,
.flow-steps.at-2 li:nth-child(-n+1)::after, .flow-steps.at-3 li:nth-child(-n+2)::after,
.flow-steps.at-4 li:nth-child(-n+3)::after, .flow-steps.at-5 li:nth-child(-n+4)::after { background: var(--lime); }
.flow-steps li.is-current,
.flow-steps.at-1 li:nth-child(1), .flow-steps.at-2 li:nth-child(2), .flow-steps.at-3 li:nth-child(3),
.flow-steps.at-4 li:nth-child(4), .flow-steps.at-5 li:nth-child(5) { color: var(--text); }
.flow-steps li.is-current::before,
.flow-steps.at-1 li:nth-child(1)::before, .flow-steps.at-2 li:nth-child(2)::before, .flow-steps.at-3 li:nth-child(3)::before,
.flow-steps.at-4 li:nth-child(4)::before, .flow-steps.at-5 li:nth-child(5)::before { background: var(--ink); color: var(--lime); box-shadow: inset 0 0 0 3px var(--lime); }

/* ---------- 表格（後台、名單）：窄螢幕可以左右滑 ---------- */
.table-wrap { --n: 6px; overflow-x: auto; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { padding: 12px 14px; border-bottom: 2px solid var(--surface-3); color: var(--muted); font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
.table td { padding: 10px 14px; border-bottom: 2px solid var(--surface-3); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .t-num { font-family: var(--font-px); white-space: nowrap; }
.table .t-actions { text-align: right; white-space: nowrap; }

/* ---------- 文章（規則、隱私說明） ---------- */
.prose { max-width: 46em; }
.prose h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 900; line-height: 1.4; text-shadow: 2px 2px 0 var(--pink); scroll-margin-top: calc(var(--topbar-h) + 72px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 24px 0 8px; font-size: 18px; font-weight: 900; }
.prose p { margin: 0 0 12px; color: #D7DAE0; }
.prose ul, .prose ol { display: grid; gap: 8px; margin: 0 0 16px; }
.prose li { position: relative; padding-left: 20px; color: #D7DAE0; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; background: var(--lime); }
.prose strong { color: var(--text); font-weight: 900; }

/* ---------- 側邊目錄（規則、後台）：手機是橫向滑動，電腦是左側固定 ---------- */
.side-layout { display: grid; gap: 24px; align-items: start; }
.sidenav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.sidenav::-webkit-scrollbar { display: none; }
.sidenav a { flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: var(--surface-2); color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sidenav a:hover { color: var(--text); }
.sidenav a[aria-current], .sidenav a.is-active { background: var(--lime); color: var(--ink); }
@media (min-width: 1024px) {
  .side-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .sidenav { position: sticky; top: calc(var(--topbar-h) + 24px); flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .sidenav a { background: none; }
  .sidenav a[aria-current], .sidenav a.is-active { background: none; color: var(--lime); box-shadow: inset 4px 0 0 var(--lime); }
}

/* ---------- 對話框、提示訊息的開關：<div class="modal" data-dialog="名稱">，加 is-open 才顯示 ---------- */
.modal[data-dialog]:not(.is-open),
.toast[data-toast]:not(.is-open) { display: none !important; }

/* ============================================================
   全站共用：公告橫幅、導覽列、底部分頁列、頁尾
   ============================================================ */
.banner { font-weight: 700; font-size: 15px; }
.banner-inner { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.banner-inner > span { flex: 1; }
.banner a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; font-weight: 900; }
.banner--reg { background: var(--lime); color: var(--ink); }
.banner--checkin { background: var(--attn); color: var(--ink); }
.banner--live { background: var(--pink); color: var(--ink); }
.banner--urgent { background: var(--text); color: var(--ink); }
.banner--urgent .icon { color: var(--pink); }

.topbar { position: sticky; top: 0; z-index: 40; background: rgba(14, 15, 19, .96); border-bottom: 2px solid var(--surface-3); }
.topbar-inner { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 18px; height: 28px; }
.brand-name { font-weight: 900; font-size: 18px; letter-spacing: .02em; text-shadow: 2px 2px 0 var(--pink); }
.mainnav { display: none; }
.account { margin-left: auto; display: flex; align-items: center; }
.btn-login { --n: 3px; min-height: 44px; padding: 8px 14px; font-size: 15px; }

.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .user-name { display: none; font-weight: 700; }
.user-menu .chev { color: var(--muted); }
.menu {
  --n: 4px;
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 232px; padding: 6px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line);
}
.menu a, .menu button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 0; background: none; color: var(--text);
  font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--surface-3); color: var(--text); }
.menu .icon { color: var(--muted); }
.menu-sep { height: 2px; margin: 6px 0; background: var(--surface-3); }
.menu .is-danger { color: var(--pink); }
.menu .is-danger .icon { color: var(--pink); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--surface);
  border-top: 2px solid var(--surface-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--tabbar-h); }
.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 100%;
  color: var(--muted); text-decoration: none;
  font-size: 12px; font-weight: 700;
}
.tabbar a:hover { color: var(--text); }
.tabbar a[aria-current="page"] { color: var(--lime); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 4px; background: var(--lime); }
.tab-live-dot { position: absolute; top: 10px; right: calc(50% - 20px); width: 8px; height: 8px; background: var(--pink); animation: blink 1.2s steps(1) infinite; }

@media (min-width: 1024px) {
  .brand img { width: 20px; height: 31px; }
  .brand-name { font-size: 20px; }
  .mainnav { display: flex; gap: 4px; margin-left: 24px; }
  .mainnav a {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px;
    color: var(--muted); text-decoration: none; font-weight: 700;
  }
  .mainnav a:hover { color: var(--text); }
  .mainnav a[aria-current="page"] { color: var(--lime); box-shadow: inset 0 -4px 0 var(--lime); }
  .mainnav .tab-live-dot { position: static; }
  .user-menu .user-name { display: inline; }
  .tabbar { display: none; }
}

.footer { margin-top: 48px; padding: 32px 0 40px; border-top: 2px solid var(--surface-3); color: var(--muted); font-size: 14px; }
.footer-top { display: grid; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 900; }
.footer-brand img { width: 16px; height: 25px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: -12px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; color: var(--text); text-decoration: none; font-weight: 500; }
.footer-links a:hover { color: var(--lime); }
.disclaimer { margin-top: 16px; }
@media (min-width: 1024px) { .footer-top { grid-template-columns: auto 1fr; align-items: center; } .footer-links { justify-content: flex-end; } }

/* 區塊 */
.section { padding: 48px 0 8px; }
.sec-head { margin-bottom: 24px; }
.sec-head .lead { margin-top: 8px; }
@media (min-width: 1024px) { .section { padding: 80px 0 8px; } .sec-head { margin-bottom: 32px; } }

/* ============================================================
   狀態切換：容器沒有某狀態 class 時，把對應的 .when-* 藏起來
   ============================================================ */

/* 登入、身分（加在 <body>） */
body:not(.is-guest) .guest-only,
body:not(.is-user) .user-only,
body:not(.is-staff) .staff-only,
body:not(.is-verified) .when-verified,
body:not(.is-unverified) .when-unverified,
body:not(.is-expired) .when-expired { display: none !important; }

/* 公告橫幅（加在 <body>，同時只開一種） */
body:not(.banner-reg) .banner--reg,
body:not(.banner-checkin) .banner--checkin,
body:not(.banner-live) .banner--live,
body:not(.banner-urgent) .banner--urgent { display: none !important; }

/* 有直播時導覽列的「直播」旁邊亮紅點 */
body:not(.is-streaming) .tab-live-dot { display: none !important; }

/* 讀資料：.data 容器的直接子元素 */
.data:not(.is-loading) > .when-loading,
.data:not(.is-error) > .when-error,
.data:not(.is-empty) > .when-empty,
.data.is-loading > .when-ready,
.data.is-error > .when-ready,
.data.is-empty > .when-ready { display: none !important; }

/* ============================================================
   1. 首頁 index.html
   ============================================================ */
.hero {
  padding: 28px 0 40px;
  border-bottom: 2px solid var(--surface-3);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 2px, transparent 2px);
  background-size: 32px 32px;
}
.hero-grid { display: grid; gap: 28px; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-mark { width: 64px; flex: none; margin-top: 8px; }
.hero-tagline { margin-top: 14px; font-size: 18px; font-weight: 700; }
.hero-dates { margin-top: 4px; color: var(--muted); }
.hero-cta { display: grid; gap: 12px; margin-top: 24px; }
.hero-cta-note { color: var(--muted); font-size: 14px; }
.hero-art { display: none; }
.hero:not(.cta-login) .when-cta-login,
.hero:not(.cta-verify) .when-cta-verify,
.hero:not(.cta-mymatch) .when-cta-mymatch,
.hero:not(.cta-bracket) .when-cta-bracket,
.hero:not(.cta-live) .when-cta-live { display: none !important; }
@media (min-width: 768px) {
  .hero-cta { display: flex; flex-wrap: wrap; align-items: center; }
}
@media (min-width: 1024px) {
  .hero { padding: 80px 0 96px; }
  .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 64px; }
  .hero-mark { display: none; }
  .hero-art { display: grid; justify-items: center; }
  .hero-art img { width: 240px; }
  .hero-tagline { font-size: 22px; }
}

/* 項目卡 */
.event-card { display: flex; flex-direction: column; gap: 16px; }
.ev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ev-name { font: 400 32px/1 var(--font-px); text-transform: uppercase; letter-spacing: .02em; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.ev-count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 15px; color: var(--muted); }
.ev-count b { font: 400 24px/1 var(--font-px); color: var(--text); }
.ev-note { color: var(--muted); font-size: 14px; }
.ev-actions { margin-top: auto; }
.event-card:not(.is-upcoming) .when-upcoming,
.event-card:not(.is-open) .when-open,
.event-card:not(.is-full) .when-full,
.event-card:not(.is-checkin) .when-checkin,
.event-card:not(.is-live) .when-live,
.event-card:not(.is-ended) .when-ended { display: none !important; }
.event-card:not(.is-full) .when-full-count,
.event-card.is-full .hide-when-full { display: none !important; }
.event-card.is-open { box-shadow: inset 0 0 0 2px var(--lime); }
.event-card.is-checkin { box-shadow: inset 0 0 0 2px var(--attn); }
.event-card.is-live { box-shadow: inset 0 0 0 2px var(--pink); }

/* 直播中區塊、冠軍榜（加在 <body>：phase-reg／phase-live／phase-ended） */
body:not(.phase-live) .when-phase-live,
body:not(.phase-ended) .when-phase-ended { display: none !important; }
.video {
  --n: 6px;
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center; align-content: center; gap: 12px;
  background: #000;
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
}
.video .icon--lg { color: var(--pink); }
.live-layout { display: grid; gap: 16px; }
@media (min-width: 1024px) { .live-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; } }
.live-list { display: grid; gap: 10px; }
.live-item { display: grid; gap: 6px; padding: 14px 16px; text-decoration: none; color: var(--text); }
.live-item:hover { color: var(--text); box-shadow: inset 0 0 0 2px var(--pink); }
.live-item .vs { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.live-item .vs .num { color: var(--muted); }
.live-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; }

.champ-card { display: flex; align-items: center; gap: 16px; }
.champ-card .icon--lg { color: var(--lime); }
.champ-name { font-size: 24px; font-weight: 900; text-shadow: 2px 2px 0 var(--pink); }

/* 報名三步驟（.steps 加 progress-0～3，或在 li 加 is-done／is-current） */
.steps { display: grid; gap: 12px; }
.steps li {
  --n: 6px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
}
.step-num { --n: 3px; display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface-3); font: 400 24px/1 var(--font-px); }
.step-num .icon { display: none; }
.step-title { font-weight: 900; font-size: 17px; }
.step-desc { color: var(--muted); font-size: 15px; }
.step-flag { display: none; margin-top: 8px; }
.steps li.is-done .step-num,
.steps.progress-1 li:nth-child(-n+1) .step-num,
.steps.progress-2 li:nth-child(-n+2) .step-num,
.steps.progress-3 li .step-num { background: var(--lime); color: var(--ink); }
.steps li.is-done .step-num .n,
.steps.progress-1 li:nth-child(-n+1) .step-num .n,
.steps.progress-2 li:nth-child(-n+2) .step-num .n,
.steps.progress-3 li .step-num .n { display: none; }
.steps li.is-done .step-num .icon,
.steps.progress-1 li:nth-child(-n+1) .step-num .icon,
.steps.progress-2 li:nth-child(-n+2) .step-num .icon,
.steps.progress-3 li .step-num .icon { display: block; }
.steps li.is-current,
.steps.progress-0 li:nth-child(1),
.steps.progress-1 li:nth-child(2),
.steps.progress-2 li:nth-child(3) { box-shadow: inset 0 0 0 2px var(--lime); }
.steps li.is-current .step-flag,
.steps.progress-0 li:nth-child(1) .step-flag,
.steps.progress-1 li:nth-child(2) .step-flag,
.steps.progress-2 li:nth-child(3) .step-flag { display: inline-flex; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .steps li { padding: 24px; } }

/* 時程表（li 加 is-past／is-next） */
.schedule { --n: 6px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.schedule li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 16px 20px; }
.schedule li + li { border-top: 2px solid var(--surface-3); }
.sch-title { font-weight: 700; }
.sch-date { color: var(--muted); font-size: 15px; grid-column: 1; }
.sch-flag { grid-column: 2; grid-row: 1 / span 2; }
.schedule li.is-past .sch-title { color: var(--muted); }
.schedule li.is-next { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--lime); }
.schedule li:not(.is-next) .flag-next,
.schedule li:not(.is-past) .flag-past { display: none; }
.tbd { color: var(--attn); font-weight: 700; }
.home-two { display: grid; gap: 48px; }
@media (min-width: 1024px) { .home-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }

/* 贊助商（先預留） */
.sponsor-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sponsor-slot.empty { aspect-ratio: 3 / 2; align-content: center; padding: 12px; font-size: 14px; }
@media (min-width: 1024px) { .sponsor-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* 常見問題 */
.faq { display: grid; gap: 10px; }
.faq details { --n: 6px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 24px/1 var(--font-px); color: var(--lime); }
.faq details[open] summary::after { content: "-"; }
.faq summary:focus-visible { outline-offset: -6px; }
.faq .answer { padding: 0 18px 18px; color: var(--muted); }

/* ============================================================
   2. 我的報名 me.html
   ============================================================ */
.page-head { padding: 28px 0 24px; }
@media (min-width: 1024px) { .page-head { padding: 56px 0 32px; } }
.me-layout { display: grid; gap: 16px; align-items: start; }
.me-main, .me-side { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .me-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .me-main, .me-side { gap: 24px; }
}

/* 報到提醒（加在 <body>：show-checkin） */
body:not(.show-checkin) .checkin-alert { display: none !important; }
.checkin-alert { --lo-gap: 8px; --lo-l: 20px; margin: 8px; }
.gate { display: grid; justify-items: center; gap: 14px; padding: 40px 20px; text-align: center; }
.gate .icon--lg { color: var(--lime); }
.gate p { color: var(--muted); max-width: 32em; }
.next-data:not(.next-live) .when-next-live,
.next-data:not(.next-waiting) .when-next-waiting { display: none !important; }
.checkin-box { --n: 6px; display: grid; gap: 14px; padding: 22px 20px; background: var(--attn); color: var(--ink); }
.checkin-box .h3 { font-size: 21px; }
.checkin-time { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.checkin-time .num { font-size: 32px; line-height: 1; }
@media (min-width: 1024px) {
  .checkin-box { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 28px; }
  .checkin-box .btn { min-width: 240px; }
}

/* 我的下一場 */
.next-card { display: grid; gap: 16px; }
.next-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; text-align: center; }
.next-teams .team { font-size: 19px; font-weight: 900; overflow-wrap: anywhere; }
.next-teams .is-me { color: var(--lime); }
.next-teams .vs { font: 400 16px/1 var(--font-px); color: var(--pink); }
.next-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.next-box { --lo-gap: 0px; padding: 20px 12px; }

/* 項目狀態卡：加在 .ev 上（ev-unregistered／ev-closed／ev-registered／ev-checkin／ev-checkedin／ev-bracket／ev-live／ev-advanced／ev-out／ev-champion） */
.ev { display: grid; gap: 16px; }
.ev-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ev-title .ev-name { font-size: 24px; }
.ev-sub { color: var(--muted); font-size: 14px; }
.ev-body { display: grid; gap: 14px; }
.ev-status { display: grid; gap: 8px; }
.ev-status p { color: var(--muted); }
.ev-status p b { color: var(--text); }
.ev:not(.ev-unregistered) .when-unregistered,
.ev:not(.ev-closed) .when-closed,
.ev:not(.ev-registered) .when-registered,
.ev:not(.ev-checkin) .when-checkin,
.ev:not(.ev-checkedin) .when-checkedin,
.ev:not(.ev-bracket) .when-bracket,
.ev:not(.ev-live) .when-live,
.ev:not(.ev-advanced) .when-advanced,
.ev:not(.ev-out) .when-out,
.ev:not(.ev-champion) .when-champion,
.ev:not(.team-none) .when-team-none,
.ev:not(.team-partial) .when-team-partial,
.ev:not(.team-full) .when-team-full,
.ev:not(.team-partial):not(.team-full) .when-team,
.ev.ev-unregistered .track,
.ev.ev-closed .track { display: none !important; }
.ev.ev-checkin { box-shadow: inset 0 0 0 2px var(--attn); }
.ev.ev-live { box-shadow: inset 0 0 0 2px var(--pink); }
.ev.ev-champion { box-shadow: inset 0 0 0 2px var(--lime); }

/* 進度條：報名中 → 等待報到 → 已報到 → 對戰表公布 → 比賽中 → 結果 */
.track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.track li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.track li::before { content: ""; position: relative; z-index: 1; width: 16px; height: 16px; background: var(--surface-3); }
.track li::after { content: ""; position: absolute; top: 7px; left: calc(50% + 8px); width: calc(100% - 14px); height: 2px; background: var(--surface-3); }
.track li:last-child::after { display: none; }
.track .res { display: none; }
.track .res-default { display: inline; }
/* 做完的 */
.ev-checkin .track li:nth-child(-n+1),
.ev-checkedin .track li:nth-child(-n+2),
.ev-bracket .track li:nth-child(-n+3),
.ev-live .track li:nth-child(-n+4),
.ev-advanced .track li:nth-child(-n+5),
.ev-out .track li:nth-child(-n+5),
.ev-champion .track li:nth-child(-n+5) { color: var(--text); }
.ev-checkin .track li:nth-child(-n+1)::before,
.ev-checkedin .track li:nth-child(-n+2)::before,
.ev-bracket .track li:nth-child(-n+3)::before,
.ev-live .track li:nth-child(-n+4)::before,
.ev-advanced .track li:nth-child(-n+5)::before,
.ev-out .track li:nth-child(-n+5)::before,
.ev-champion .track li:nth-child(-n+5)::before,
.ev-checkin .track li:nth-child(-n+1)::after,
.ev-checkedin .track li:nth-child(-n+2)::after,
.ev-bracket .track li:nth-child(-n+3)::after,
.ev-live .track li:nth-child(-n+4)::after,
.ev-advanced .track li:nth-child(-n+5)::after,
.ev-out .track li:nth-child(-n+5)::after,
.ev-champion .track li:nth-child(-n+5)::after { background: var(--lime); }
/* 現在這一步 */
.ev-registered .track li:nth-child(1),
.ev-checkin .track li:nth-child(2),
.ev-checkedin .track li:nth-child(3),
.ev-bracket .track li:nth-child(4),
.ev-live .track li:nth-child(5),
.ev-advanced .track li:nth-child(6),
.ev-out .track li:nth-child(6),
.ev-champion .track li:nth-child(6) { color: var(--text); }
.ev-registered .track li:nth-child(1)::before,
.ev-checkin .track li:nth-child(2)::before,
.ev-checkedin .track li:nth-child(3)::before,
.ev-bracket .track li:nth-child(4)::before,
.ev-live .track li:nth-child(5)::before { background: var(--ink); box-shadow: inset 0 0 0 4px var(--lime); }
.ev-checkin .track li:nth-child(2)::before { box-shadow: inset 0 0 0 4px var(--attn); animation: blink 1.2s steps(1) infinite; }
.ev-live .track li:nth-child(5)::before { box-shadow: inset 0 0 0 4px var(--pink); }
.ev-advanced .track li:nth-child(6)::before,
.ev-champion .track li:nth-child(6)::before { background: var(--lime); }
.ev-out .track li:nth-child(6)::before { background: var(--muted); }
.ev-advanced .track .res-default,
.ev-out .track .res-default,
.ev-champion .track .res-default { display: none; }
.ev-advanced .track .res-advanced,
.ev-out .track .res-out,
.ev-champion .track .res-champion { display: inline; }

/* 隊伍小卡 */
.team-box { --n: 4px; display: grid; gap: 12px; padding: 16px; background: var(--surface-2); }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.team-name { font-size: 19px; font-weight: 900; }
.member-list { display: grid; gap: 8px; }
.member-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.member-list .avatar { width: 32px; height: 32px; font-size: 16px; --n: 2px; }
.member-list .empty-slot { color: var(--muted); }
.member-list .empty-slot .avatar { background: transparent; box-shadow: inset 0 0 0 2px var(--line); color: var(--line); }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--lime); }
.tag--muted { background: var(--surface-3); color: var(--muted); }
.code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.code-chip { --n: 3px; padding: 8px 14px; background: var(--ink); font: 400 24px/1 var(--font-px); letter-spacing: .12em; color: var(--lime); }

/* 帳號卡 */
.id-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.id-row + .id-row { border-top: 2px solid var(--surface-3); }
.id-info { flex: 1; min-width: 0; }
.id-label { font: 400 16px/1 var(--font-px); color: var(--muted); text-transform: uppercase; }
.id-name { margin-top: 6px; font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.id-meta { color: var(--muted); font-size: 14px; }
body:not(.server-joined) .when-server-joined,
body:not(.server-missing) .when-server-missing { display: none !important; }

/* 戰績 */
.records { display: grid; }
.rec { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; }
.rec + .rec { border-top: 2px solid var(--surface-3); }
.rec-result { --n: 3px; display: grid; place-items: center; width: 40px; height: 40px; font-weight: 900; background: var(--surface-3); color: var(--muted); }
.rec.is-win .rec-result { background: var(--lime); color: var(--ink); }
.rec-title { font-size: 14px; color: var(--muted); }
.rec-vs { font-weight: 700; overflow-wrap: anywhere; }
.rec-score { font: 400 24px/1 var(--font-px); }
.rec.is-loss .rec-score { color: var(--muted); }


/* ============================================================
   3. 單場比賽 match.html
   ============================================================ */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; font-weight: 700; }
.back-link:hover { color: var(--text); }
.match-head { padding: 12px 0 20px; }
.match-title { display: grid; gap: 12px; margin-top: 8px; }
.match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.match-layout { display: grid; gap: 16px; align-items: start; }
.match-main, .match-side { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .match-head { padding: 32px 0 32px; }
  .match-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
  .match-main, .match-side { gap: 24px; }
}

/* 比分板 */
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.side { display: grid; gap: 10px; justify-items: center; text-align: center; }
.side-tag { min-height: 24px; }
.side-name { font-size: 20px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.side.is-mine .side-name { color: var(--lime); }
.rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--surface-3); }
.side-members { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; font-size: 14px; color: var(--muted); }
.side-members li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.side-members b { color: var(--text); font-weight: 700; }
.score { display: grid; justify-items: center; gap: 8px; padding-top: 34px; }
.score-nums { display: flex; align-items: center; gap: 8px; font: 400 40px/1 var(--font-px); }
.score-sep { color: var(--muted); }
.score-bo { font-size: 13px; color: var(--muted); white-space: nowrap; }
.side .win-flag { display: none; }
@media (min-width: 1024px) {
  .scoreboard { gap: 24px; }
  .side-name { font-size: 28px; }
  .side-members { font-size: 15px; }
  .score-nums { font-size: 64px; gap: 16px; }
}
/* 結束後：勝方亮、敗方暗 */
.match-done .side.is-winner .win-flag { display: inline-flex; }
.match-done .side.is-loser,
.match-done .side-members.is-loser { opacity: .55; }

/* 選手操作 */
.player-panel { display: grid; gap: 16px; }
.enter-box { --lo-gap: 0px; --lo-l: 20px; padding: 14px; }
.alert.noshow { align-items: center; }
.noshow-time { margin-left: auto; font: 400 32px/1 var(--font-px); color: var(--attn); }
.score-nums--muted { color: var(--muted); }
body.match-tbd .hide-when-tbd,
body.match-bye .hide-when-bye { display: none !important; }
.report-form { display: grid; gap: 16px; }
.report-grid { display: grid; gap: 12px; }
.report-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-line label { font-weight: 700; }
.report-line label span { display: block; color: var(--muted); font-size: 14px; font-weight: 500; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper output { --n: 3px; display: grid; place-items: center; width: 56px; height: var(--tap); background: var(--ink); font: 400 24px/1 var(--font-px); color: var(--lime); }
.reported { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--surface-2); font-weight: 900; text-align: center; flex-wrap: wrap; }
.reported .num { font-size: 32px; line-height: 1; }

/* 情境（加在 <body>）：身分、比賽狀態、回報流程、裁判 */
body:not(.is-player) .player-only,
body:not(.is-viewer) .viewer-only,
body:not(.match-tbd) .when-match-tbd,
body:not(.match-waiting) .when-match-waiting,
body:not(.match-live) .when-match-live,
body:not(.match-done) .when-match-done,
body:not(.match-bye) .when-match-bye,
body:not(.match-active) .when-match-active,
body.match-done .hide-when-done,
body:not(.report-form) .when-report-form,
body:not(.report-invalid) .when-report-invalid,
body:not(.report-sent) .when-report-sent,
body:not(.report-confirm) .when-report-confirm,
body:not(.report-disputed) .when-report-disputed,
body:not(.referee-called) .when-referee-called,
body.referee-called .when-referee-idle,
body:not(.resolved-agree) .when-resolved-agree,
body:not(.resolved-referee) .when-resolved-referee { display: none !important; }

/* 紀錄時間軸（加在 <body>：tl-open／tl-reported／tl-reported-b／tl-confirmed／tl-disputed／tl-judged／tl-await-report／tl-await-ref） */
body:not(.tl-open) .when-tl-open,
body:not(.tl-reported) .when-tl-reported,
body:not(.tl-reported-b) .when-tl-reported-b,
body:not(.tl-confirmed) .when-tl-confirmed,
body:not(.tl-disputed) .when-tl-disputed,
body:not(.tl-judged) .when-tl-judged,
body:not(.tl-await-report) .when-tl-await-report,
body:not(.tl-await-ref) .when-tl-await-ref { display: none !important; }
.timeline { display: grid; }
.tl { position: relative; display: grid; grid-template-columns: 56px 16px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.tl:last-child { padding-bottom: 0; }
.tl-time { font: 400 16px/1.5 var(--font-px); color: var(--muted); }
.tl-dot { width: 16px; height: 16px; margin-top: 4px; background: var(--lime); }
.tl::after { content: ""; position: absolute; left: 75px; top: 24px; bottom: 0; width: 2px; background: var(--surface-3); }
.tl:last-child::after { display: none; }
.tl-text b { font-weight: 700; }
.tl-text p { color: var(--muted); font-size: 14px; }
.tl.is-warn .tl-dot { background: var(--attn); }
.tl.is-danger .tl-dot { background: var(--pink); }
.tl.is-pending .tl-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.tl.is-pending .tl-text { color: var(--muted); }

/* 結果 */
.result-box { display: grid; gap: 12px; }
.result-winner { font-size: 24px; font-weight: 900; text-shadow: 2px 2px 0 var(--pink); }
.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.result-line dt { color: var(--muted); font-size: 14px; min-width: 72px; }
.result-line dd { font-weight: 700; }

/* ============================================================
   404 頁 404.html
   ============================================================ */
.nf { display: grid; justify-items: center; gap: 16px; padding: 48px 0 16px; text-align: center; }
.nf-mark { width: 72px; opacity: .45; }
.nf-code { font: 400 96px/1 var(--font-px); color: var(--lime); text-shadow: 6px 6px 0 var(--pink); }
.nf-text { color: var(--muted); max-width: 28em; }
.nf .btn-row { justify-content: center; width: 100%; }
@media (min-width: 768px) { .nf .btn-row { width: auto; } }

/* ============================================================
   元件總覽 components.html
   ============================================================ */
.cp-section { padding: 32px 0; border-top: 2px solid var(--surface-3); }
.cp-section > .h2 { margin-bottom: 20px; }
.cp-grid { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .cp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cp-label { margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cp-code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); }
.swatch { display: grid; gap: 6px; }
.swatch-chip { --n: 4px; height: 72px; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.swatch b { font-weight: 700; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.icon-cell { --n: 4px; display: grid; justify-items: center; gap: 8px; padding: 14px 8px; background: var(--surface); color: var(--text); font-size: 13px; }
.icon-cell span { color: var(--muted); }
.toast--static { position: static; width: auto; }
.cp-type-sample { display: grid; gap: 4px; padding: 12px 0; border-bottom: 2px solid var(--surface-3); }

/* ============================================================
   直播疊加畫面 overlay.html（OBS 瀏覽器來源：寬 1920、高 1080、背景透明）
   ============================================================ */
body.ov-page { min-width: 1920px; padding: 0; background: transparent; }
.ov { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.ov-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
body:not(.preview-bg) .ov-bg { display: none; }
.ov-bar { position: absolute; left: 40px; right: 40px; bottom: 40px; display: flex; align-items: stretch; gap: 16px; }
.ov-tag {
  --n: 6px;
  display: flex; align-items: center; gap: 18px; flex: none;
  padding: 16px 28px;
  background: var(--lime); color: var(--ink);
}
.ov-tag img { width: 28px; height: 44px; }
.ov-event { font: 400 32px/1 var(--font-px); text-transform: uppercase; }
.ov-round { font: 900 32px/1 var(--font); }
.ov-panel {
  --n: 6px;
  flex: 1; min-width: 0;
  padding: 16px 24px;
  background: rgba(14, 15, 19, .92);
  box-shadow: inset 0 0 0 3px var(--line);
  color: var(--text);
}
.ov-panel--live { box-shadow: inset 0 0 0 3px var(--pink); }
.ov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--muted); font: 700 20px/1 var(--font); }
.ov-head .px-en { font: 400 16px/1 var(--font-px); text-transform: uppercase; }
.ov-panel--live .ov-head { color: var(--pink); }
.ov-row { display: flex; align-items: center; gap: 14px; overflow: hidden; font-size: 30px; font-weight: 900; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ov-row + .ov-row { margin-top: 6px; }
.ov-row .vs { font: 400 24px/1 var(--font-px); color: var(--pink); }
.ov-row .sc { font: 400 32px/1 var(--font-px); color: var(--lime); }
.ov-row .rd { font-size: 22px; font-weight: 700; color: var(--muted); }
.ov-row .w { color: var(--lime); }
.ov-row .l { color: var(--muted); }
.ov-champ { position: absolute; inset: 0 0 180px; display: grid; place-items: center; }
.ov-champ-lock { --lo-gap: 0px; --lo-t: 8px; --lo-l: 56px; --lo-color: var(--lime); padding: 32px; }
.ov-champ-box { --n: 8px; display: grid; justify-items: center; gap: 16px; padding: 48px 96px; background: var(--bg); box-shadow: inset 0 0 0 4px var(--line); text-align: center; }
.ov-champ-box .icon { width: 72px; height: 72px; color: var(--attn); }
.ov-champ-kicker { font: 400 32px/1 var(--font-px); color: var(--lime); text-transform: uppercase; }
.ov-champ-name { font-size: 128px; font-weight: 900; line-height: 1.1; text-shadow: 8px 8px 0 var(--pink); }
.ov-champ-members { color: var(--muted); font-size: 32px; font-weight: 700; }
.ov-confetti i {
  position: absolute; top: -48px; left: var(--x);
  width: var(--s, 16px); height: var(--s, 16px);
  background: var(--c, var(--lime));
  animation: ov-fall var(--t, 3s) steps(30) var(--d, 0s) infinite;
}
@keyframes ov-fall { to { transform: translateY(1180px); } }
body:not(.ov-live) .when-ov-live,
body:not(.ov-idle) .when-ov-idle,
body:not(.ov-champion) .when-ov-champion,
body.ov-champion .hide-when-champion { display: none !important; }

/* ============================================================
   登入 login.html、Roblox 驗證 verify.html
   ============================================================ */
/* ============================================================
   頁面專用：Discord 登入 login.html、Roblox 帳號驗證 verify.html
   合併進 site.css 時整段貼到最後，再刪掉 HTML 裡連到這個檔案的那行
   ============================================================ */

/* ---------- 像素缺角（跟 site.css 同一個多邊形） ---------- */
.au-box, .au-gets-icon, .au-result-icon, .au-namefig-card, .au-found, .au-phrase span,
.au-howto-num, .au-sketch, .au-sk-av, .au-sk-btn {
  clip-path: polygon(
    0 var(--n, 4px), var(--n, 4px) var(--n, 4px), var(--n, 4px) 0,
    calc(100% - var(--n, 4px)) 0, calc(100% - var(--n, 4px)) var(--n, 4px), 100% var(--n, 4px),
    100% calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) 100%,
    var(--n, 4px) 100%, var(--n, 4px) calc(100% - var(--n, 4px)), 0 calc(100% - var(--n, 4px))
  );
}

/* ---------- 狀態切換（全部加在 <body>） ---------- */
/* login.html：au-start／au-first（+ agree-off／agree-on）／au-ok／au-cancel／au-fail／au-already */
body:not(.au-start) .when-au-start,
body:not(.au-first) .when-au-first,
body:not(.agree-off) .when-agree-off,
body:not(.agree-on) .when-agree-on,
body:not(.au-ok) .when-au-ok,
body:not(.au-cancel) .when-au-cancel,
body:not(.au-fail) .when-au-fail,
body:not(.au-already) .when-au-already,
body:not(.au-start):not(.au-cancel):not(.au-fail) .when-au-pre,
/* verify.html：vf-1～vf-4／vf-bound／vf-locked，錯誤另外加 err-* */
body:not(.vf-1) .when-vf-1,
body:not(.vf-2) .when-vf-2,
body:not(.vf-3) .when-vf-3,
body:not(.vf-4) .when-vf-4,
body:not(.vf-bound) .when-vf-bound,
body:not(.vf-locked) .when-vf-locked,
body:not(.err-notfound) .when-err-notfound,
body:not(.err-young) .when-err-young,
body:not(.err-taken) .when-err-taken,
body:not(.err-missing) .when-err-missing,
body:not(.err-busy) .when-err-busy,
body.err-notfound .hide-when-notfound,
body.err-young .hide-when-young,
body.err-taken .hide-when-taken { display: none !important; }

/* 帳號有問題時，找到的帳號外框改成粉紅 */
body.err-young .au-target,
body.err-taken .au-target { --lo-color: var(--pink); }

/* ---------- 版面：手機一欄，電腦主欄＋側欄 ---------- */
.au-layout { display: grid; gap: 16px; align-items: start; }
.au-main, .au-side { display: grid; gap: 16px; }
.au-panel { display: grid; gap: 20px; }
.au-panel .h2 { overflow-wrap: anywhere; }
.au-panel .alert-body b, .au-dialog p b { color: var(--text); }
.au-panel .error-msg { align-items: flex-start; }
.au-panel .error-msg .icon { margin-top: 5px; }
.au-side .prose ul { margin-bottom: 0; }
.au-narrow { max-width: 480px; }
@media (min-width: 1024px) {
  .au-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .au-main, .au-side { gap: 24px; }
  .au-panel { gap: 24px; }
}

/* 主要按鈕外面的鎖定框 */
.au-cta { --lo-gap: 0px; --lo-l: 20px; padding: 12px; }
@media (min-width: 1024px) { .au-cta { max-width: 480px; } }

/* 有底色的小框（帳號列、正在驗證的帳號） */
.au-box { --n: 4px; padding: 0 16px; background: var(--surface-2); }
.au-box .id-row { padding: 14px 0; }
.au-box--row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 64px; padding: 8px 8px 8px 16px; }
.au-box--row p { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }

/* ---------- 結果標題（成功、取消、失敗） ---------- */
.au-result { display: flex; align-items: center; gap: 16px; }
.au-result-icon { --n: 4px; display: grid; place-items: center; width: 64px; height: 64px; flex: none; background: var(--lime); color: var(--ink); }
.au-result-icon--muted { background: var(--surface-3); color: var(--muted); }
.au-result-icon--error { background: var(--pink); color: var(--ink); }
.au-result .lead { margin-top: 4px; }
.au-result .lead b { color: var(--text); }

/* ---------- 登入：會拿到什麼、不會拿到什麼 ---------- */
.au-gets { display: grid; gap: 14px; }
.au-gets li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.au-gets-icon { --n: 3px; display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface-3); color: var(--lime); }
.au-gets b { display: block; font-weight: 900; }
.au-gets p { color: var(--muted); font-size: 15px; }
.au-nots { display: grid; gap: 10px; }
.au-nots li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.au-nots .icon { color: var(--muted); }
.au-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }

/* 「下一步」區塊 */
.au-next { display: grid; gap: 12px; padding-top: 20px; border-top: 2px solid var(--surface-3); }
.au-next-label { font: 400 16px/1 var(--font-px); color: var(--lime); text-transform: uppercase; }
.au-next p.muted { max-width: 34em; }

/* ---------- 驗證：帳號名稱輸入框（前面固定一個 @） ---------- */
.au-handle { position: relative; }
.au-handle > span { position: absolute; z-index: 1; left: 14px; top: 50%; transform: translateY(-50%); font: 700 16px/1 var(--font); color: var(--muted); pointer-events: none; }
.au-handle .input { padding-left: 34px; }

/* 「顯示名稱 vs 帳號名稱」示意圖 */
.au-namefig { display: grid; gap: 8px; }
.au-namefig-card { --n: 4px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-2); }
.au-namefig-card .avatar { width: 48px; height: 48px; }
.au-namefig-lines { display: grid; gap: 8px; min-width: 0; }
.au-nf-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.au-nf-display { font-size: 18px; font-weight: 900; line-height: 1.2; }
.au-nf-handle { padding: 0 6px; font-weight: 700; box-shadow: 0 0 0 2px var(--attn); }
.au-namefig figcaption { color: var(--muted); font-size: 14px; }

/* ---------- 驗證：找到的帳號 ---------- */
.au-target { --lo-gap: 0px; --lo-l: 20px; padding: 10px; }
.au-found { --n: 4px; display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--surface-2); }
.au-avatar-xl { --n: 6px; width: 80px; height: 80px; font-size: 48px; }
.au-found-info { display: grid; gap: 8px; min-width: 0; }
.au-found-info dt { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.3; }
.au-found-info dd { font-weight: 700; overflow-wrap: anywhere; }
.au-found-info dd.au-found-display { font-size: 21px; font-weight: 900; line-height: 1.25; }
.au-found-info .badge { margin-left: 4px; vertical-align: 1px; }
@media (min-width: 1024px) {
  .au-avatar-xl { width: 96px; height: 96px; }
  .au-found { gap: 24px; padding: 20px 24px; }
  .au-found-info { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 32px; }
  .au-found-info dd.au-found-display { font-size: 24px; }
}

/* ---------- 驗證：4 個英文字 ---------- */
.au-code { --lo-gap: 0px; --lo-l: 20px; display: grid; gap: 14px; padding: 18px 14px; }
.au-code-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.au-phrase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.au-phrase span {
  --n: 3px;
  display: grid; place-items: center;
  min-height: 56px; padding: 8px;
  background: var(--ink); box-shadow: inset 0 -4px 0 var(--surface-3);
  font: 400 24px/1 var(--font-px); color: var(--lime);
}
@media (min-width: 768px) { .au-phrase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .au-code { padding: 22px 20px; }
  .au-phrase span { min-height: 72px; font-size: 32px; }
}
.au-why { color: var(--muted); font-size: 15px; }
.au-why b { color: var(--text); }

/* ---------- 驗證：怎麼貼到「關於我」（自己畫的示意圖，不是 Roblox 畫面） ---------- */
.au-howto { display: grid; gap: 14px; }
.au-howto > li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: start; }
.au-howto-title { display: flex; align-items: flex-start; gap: 8px; font-weight: 900; line-height: 1.4; }
.au-howto-num { --n: 2px; display: grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--lime); color: var(--ink); font: 400 16px/1 var(--font-px); }
.au-howto-text p:not(.au-howto-title) { margin-top: 4px; color: var(--muted); font-size: 14px; }
@media (min-width: 1024px) {
  .au-howto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .au-howto > li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.au-sketch {
  --n: 4px;
  display: grid; align-content: start; gap: 6px;
  min-height: 96px; padding: 10px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line);
  overflow: hidden;
}
@media (min-width: 1024px) { .au-sketch { aspect-ratio: 4 / 3; } }
.au-sk-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.au-sk-row--end { justify-content: flex-end; }
.au-sk-bar { display: block; height: 6px; background: var(--surface-3); }
.au-sk-w30 { width: 30%; } .au-sk-w50 { width: 50%; } .au-sk-w70 { width: 70%; } .au-sk-w90 { width: 90%; }
.au-sk-grow { flex: 1; }
.au-sk-av { --n: 2px; display: block; width: 20px; height: 20px; flex: none; background: var(--muted); }
.au-sk-av--lg { width: 28px; height: 28px; background: var(--line); }
.au-sk-text { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.au-sk-field { padding: 4px 6px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--line); color: var(--lime); font-size: 12px; font-weight: 700; line-height: 1.3; }
.au-sk-btn { --n: 2px; display: inline-grid; place-items: center; min-height: 20px; padding: 2px 8px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.au-sk-btn--lg { min-height: 28px; padding: 4px 12px; }
.au-sk-icon { color: var(--text); }
.au-sk-ok { color: var(--lime); }
/* 要點的地方：琥珀黃框（框在外層，不能加缺角，不然框會被切掉） */
.au-sk-hl { display: inline-flex; padding: 2px; box-shadow: 0 0 0 2px var(--attn); }
.au-sk-center { display: grid; place-items: center; align-content: center; gap: 8px; height: 100%; }

/* ============================================================
   建立隊伍 team-new.html、隊伍 team.html、加入隊伍 team-join.html
   ============================================================ */
/* ============================================================
   5. 隊伍（BedWars）：team-new.html、team.html、team-join.html
   - 頁面專用樣式，合併進 site.css 時貼在「3. 單場比賽」後面，然後刪掉各頁的 parts/team.css 那行
   - 共用元件（.card .btn .alert .field .member-list .team-box .code-chip .tag .modal .toast…）都沿用 site.css
   ============================================================ */

/* 像素缺角：跟 site.css 同一個 polygon，給這幾頁新增的方框用 */
.tm-link {
  clip-path: polygon(
    0 var(--n, 4px), var(--n, 4px) var(--n, 4px), var(--n, 4px) 0,
    calc(100% - var(--n, 4px)) 0, calc(100% - var(--n, 4px)) var(--n, 4px), 100% var(--n, 4px),
    100% calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) calc(100% - var(--n, 4px)), calc(100% - var(--n, 4px)) 100%,
    var(--n, 4px) 100%, var(--n, 4px) calc(100% - var(--n, 4px)), 0 calc(100% - var(--n, 4px))
  );
}

/* ---------- 版面：手機一欄，電腦左寬右窄（跟我的報名一樣） ---------- */
.tm-page-head { padding-top: 12px; }
.tm-page-head .lead { margin-top: 12px; max-width: 34em; }
@media (min-width: 1024px) { .tm-page-head { padding-top: 32px; } }
.tm-layout { display: grid; gap: 16px; align-items: start; }
.tm-main, .tm-side { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .tm-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .tm-main, .tm-side { gap: 24px; }
}

/* 隊長標記：.tag 裡放皇冠圖示 */
.tm-cap { gap: 4px; }
.tm-empty-title { color: var(--text); }

/* ---------- 隊名欄位：提示和字數放同一行 ---------- */
.tm-field-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tm-field-foot .char-count { flex: none; }
.char-count.tm-over { color: var(--pink); font-weight: 700; }
.tm-namebox .error-msg { color: var(--pink); }   /* 對話框裡 .modal-box p 會把字變灰，這裡蓋回來 */
.tm-dialog-field { margin-top: 16px; }
.tm-danger-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--pink) !important; font-weight: 700; }

/* 組隊規則清單（沿用 .prose 的方塊項目符號，間距縮小一點） */
.prose .tm-rules { gap: 8px; margin: 0; }
.prose .tm-rules li { font-size: 15px; }
.tm-quota { margin: 16px 0 20px; }

/* ---------- 隊伍頁：隊名＋成員 ---------- */
.tm { display: grid; gap: 16px; }
@media (min-width: 1024px) { .tm { gap: 24px; } }
.tm-team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-team-name { margin-top: 4px; overflow-wrap: anywhere; }
.tm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* 成員列：頭像、名字（+ 標記），隊長看得到的按鈕在手機上換到第二行 */
.member-list.tm-members { gap: 0; margin-top: 8px; }
.member-list.tm-members li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px 12px;
  padding: 12px 0;
}
.member-list.tm-members li + li { border-top: 2px solid var(--surface-3); }
.member-list.tm-members .avatar { width: 40px; height: 40px; --n: 3px; }
.tm-member-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.tm-member-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.tm-note { margin-top: 12px; }
@media (min-width: 1024px) {
  .member-list.tm-members li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .tm-member-actions { grid-column: 3; }
}

/* ---------- 邀請：連結＋代碼（未滿員時外面加鎖定框） ---------- */
.tm-invite-wrap { --lo-gap: 8px; --lo-l: 20px; margin: 8px; }
.tm-invite { display: grid; gap: 20px; }
.tm-copy { display: grid; gap: 8px; }
.tm-copy-label { font-weight: 700; }
.tm-copy-line { display: grid; gap: 8px; }
.tm-link {
  --n: 3px;
  display: block; min-height: var(--tap); padding: 12px 14px;
  background: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  font-size: 15px; font-weight: 500; line-height: 1.5;
  overflow-wrap: anywhere;
}
.tm-link .tbd { font-weight: 700; }
@media (min-width: 768px) {
  .tm-copy-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
}

/* ---------- 報到小卡 ---------- */
.tm-checkin { display: grid; gap: 14px; }
.tm-checkin .card-head { margin-bottom: 0; }
.tm-checkin p { color: var(--muted); }
.tm-checkin p b { color: var(--text); }
.tm-checkin .checkin-time { color: var(--text); }
.tm-checkin .checkin-time .num { color: var(--attn); }

/* 隊長／隊員操作小卡 */
.tm-manage { display: grid; gap: 12px; }
.tm-manage p { color: var(--muted); font-size: 15px; }

/* ---------- 加入隊伍：邀請預覽卡 ---------- */
.tm-preview { display: grid; gap: 16px; }
.tm-preview-from { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
.tm-preview-code { color: var(--muted); font-size: 14px; }
.tm-preview-code .num { color: var(--text); }
.tm-join-box { --lo-gap: 0px; --lo-l: 20px; padding: 14px; }
.tm-actions { display: grid; gap: 12px; padding-top: 16px; border-top: 2px solid var(--surface-3); }
.tm-actions .alert .btn { margin-top: 12px; }
.tm-switch-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }

/* ============================================================
   狀態切換（容器沒有某狀態 class 時，把對應的 .when-* 藏起來）
   ============================================================ */

/* 建立隊伍 #new：new-ok／new-in-team／new-closed／new-full */
.tm-new:not(.new-ok) .when-new-ok,
.tm-new:not(.new-in-team) .when-new-in-team,
.tm-new:not(.new-closed) .when-new-closed,
.tm-new:not(.new-full) .when-new-full,
.tm-new.new-full .hide-when-new-full { display: none !important; }

/* 隊名欄位（建立隊伍表單、改隊名對話框）：name-ok／name-short／name-long／name-taken，送出中加 is-submitting */
.tm-namebox:not(.name-ok) .when-name-ok,
.tm-namebox:not(.name-short) .when-name-short,
.tm-namebox:not(.name-long) .when-name-long,
.tm-namebox:not(.name-taken) .when-name-taken,
.tm-namebox:not(.is-submitting) .when-submitting,
.tm-namebox.is-submitting .hide-when-submitting { display: none !important; }

/* 隊伍頁 #team
   身分 role-captain／role-member
   人數 size-1／size-3／size-4，另外加 team-partial（未滿員）／team-full（滿員）
   名單 is-locked + lock-closed（報名已截止）／lock-bracket（對戰表已排好）
   報到 ci-before／ci-open／ci-done */
.tm:not(.role-captain) .when-captain,
.tm:not(.role-member) .when-member,
.tm:not(.size-1) .when-size-1,
.tm:not(.size-3) .when-size-3,
.tm:not(.size-4) .when-size-4,
.tm.size-1 .hide-when-size-1,
.tm:not(.team-partial) .when-team-partial,
.tm:not(.team-full) .when-team-full,
.tm:not(.is-locked) .when-locked,
.tm.is-locked .hide-when-locked,
.tm:not(.lock-closed) .when-lock-closed,
.tm:not(.lock-bracket) .when-lock-bracket,
.tm:not(.is-locked) .when-locked-partial,
.tm:not(.team-partial) .when-locked-partial,
.tm:not(.ci-before) .when-ci-before,
.tm:not(.ci-open) .when-ci-open,
.tm:not(.ci-done) .when-ci-done { display: none !important; }
.tm.team-full .tm-invite-wrap { margin: 0; }
.tm.team-full .tm-invite-wrap::before { display: none; }
.tm.ci-open .tm-checkin { box-shadow: inset 0 0 0 2px var(--attn); }

/* 加入隊伍 #join
   打開方式 mode-invite（點邀請連結）／mode-code（輸入代碼）
   邀請結果 inv-ok／inv-joining／inv-full／inv-other／inv-same／inv-closed／inv-bad
   輸入代碼表單 #code-form：code-ok／code-short／code-invalid */
.tm-join:not(.mode-invite) .when-mode-invite,
.tm-join:not(.mode-code):not(.inv-bad) .when-code-form,
.tm-join:not(.inv-ok) .when-inv-ok,
.tm-join:not(.inv-joining) .when-inv-joining,
.tm-join:not(.inv-full) .when-inv-full,
.tm-join:not(.inv-other) .when-inv-other,
.tm-join:not(.inv-same) .when-inv-same,
.tm-join:not(.inv-closed) .when-inv-closed,
.tm-join:not(.inv-bad) .when-inv-bad,
.tm-join.inv-bad .hide-when-inv-bad,
/* when-inv-default＝邀請的那支隊伍（夜貓突擊隊）：隊伍已滿、已在這隊、連結無效時換成別的資料 */
.tm-join.inv-full .when-inv-default,
.tm-join.inv-same .when-inv-default,
.tm-join.inv-bad .when-inv-default,
.tm-code-form:not(.code-ok) .when-code-ok,
.tm-code-form:not(.code-short) .when-code-short,
.tm-code-form:not(.code-invalid) .when-code-invalid { display: none !important; }

/* 提示訊息的文字（.toast 加 msg-*，實作時只要一個 data-field="toast.message"） */
.toast:not(.msg-link) .when-msg-link,
.toast:not(.msg-code) .when-msg-code,
.toast:not(.msg-created) .when-msg-created,
.toast:not(.msg-joined) .when-msg-joined,
.toast:not(.msg-renamed) .when-msg-renamed,
.toast:not(.msg-kicked) .when-msg-kicked,
.toast:not(.msg-transferred) .when-msg-transferred,
.toast:not(.msg-checkin) .when-msg-checkin,
.toast:not(.msg-left) .when-msg-left,
.toast:not(.msg-disbanded) .when-msg-disbanded { display: none !important; }

/* 沒有隊伍的空狀態：手機上兩個按鈕一樣寬 */
.tm-empty-actions { justify-self: stretch; }
@media (min-width: 768px) { .tm-empty-actions { justify-content: center; } }

/* ============================================================
   對戰表 bracket.html
   ============================================================ */
/* ============================================================
   6. 對戰表 bracket.html（頁面專用，之後合併進 site.css 最後面）
   - 手機：輪次分頁＋直的一排比賽卡
   - 電腦（≥1024）：單淘汰樹狀圖，一欄一輪，欄和欄之間畫像素連接線
   - 比賽卡 .bk-m 可以給首頁直播區、後台控制台、我的報名重複用
   ============================================================ */

/* ---------- 狀態切換（加在 #bk） ---------- */
.bk:not(.event-bedwars) .when-event-bedwars,
.bk:not(.event-rivals) .when-event-rivals,
.bk:not(.bw-live) .when-bw-live,
.bk:not(.bw-champion) .when-bw-champion,
.bk:not(.search-idle) .when-search-idle,
.bk:not(.search-hit) .when-search-hit,
.bk:not(.search-miss) .when-search-miss,
.bk:not(.sync-ok) .when-sync-ok,
.bk:not(.sync-fail) .when-sync-fail { display: none !important; }

/* 手機版：只顯示選到的那一輪（加在 .bk-ev：sel-r1～sel-r7；RIVALS 另外加 sel-early＝第 1～3 輪、sel-late＝第 4 輪以後） */
@media (max-width: 1023.98px) {
  .bk-ev:not(.sel-r1) .when-sel-r1,
  .bk-ev:not(.sel-r2) .when-sel-r2,
  .bk-ev:not(.sel-r3) .when-sel-r3,
  .bk-ev:not(.sel-r4) .when-sel-r4,
  .bk-ev:not(.sel-r5) .when-sel-r5,
  .bk-ev:not(.sel-r6) .when-sel-r6,
  .bk-ev:not(.sel-r7) .when-sel-r7,
  .bk-ev:not(.sel-early) .when-sel-early,
  .bk-ev:not(.sel-late) .when-sel-late { display: none !important; }
}

/* ---------- 項目切換 ---------- */
.bk-evtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; overflow: visible; margin-bottom: 20px; }
.bk-evtabs > button { flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 8px 12px; }
.bk-evtab-name { font: 400 16px/1 var(--font-px); text-transform: uppercase; letter-spacing: .04em; }
.bk-evtab-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.bk-livedot { color: var(--pink); }
@media (min-width: 1024px) { .bk-evtabs { grid-template-columns: repeat(2, 200px); } }

/* ---------- 搜尋＋自動更新 ---------- */
.bk-tools { display: grid; gap: 12px; margin-bottom: 24px; }
.bk-search { display: grid; gap: 12px; }
.bk-search .input-row .search { flex: 1; min-width: 0; }
.bk-found { display: grid; gap: 10px; }
.bk-found-text { font-weight: 700; }
.bk-found-text .num { font-size: 16px; color: var(--attn); }
.bk-hitlist { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-hitlink { min-height: 44px; padding: 4px 12px; color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 2px var(--attn); }
.bk-hitlink:hover { color: var(--text); background: var(--surface-3); }
.bk-hitlink:focus-visible { outline: 3px solid var(--pink); outline-offset: -5px; }
.bk-hitlink .num { font-size: 16px; color: var(--attn); }
.bk-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 500; }
.bk-sync .num { font-size: 16px; color: var(--text); }
.bk-sync .icon { color: var(--lime); }
.bk-sync--fail .icon { color: var(--attn); }
.bk-sync--fail b { color: var(--attn); }
@media (min-width: 1024px) {
  .bk-tools { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; gap: 24px; }
  .bk-sync { justify-content: flex-end; margin-top: 32px; }
}

/* ---------- 項目資訊、登入提示 ---------- */
.bk-evhead { display: grid; gap: 6px; margin-bottom: 20px; }
.bk-evstate { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; }
.bk-evstate b { font-weight: 900; }
.bk-evmeta { color: var(--muted); font-size: 15px; }
.bk-evmeta b { color: var(--text); }
.bk-evnote { color: var(--muted); font-size: 14px; }
.bk-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: -8px 0 16px; color: var(--muted); font-size: 14px; }
.bk-guest a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- 冠軍橫幅（外層 .lockon 不能裁切，裡面的 .bk-champ-box 才有缺角） ---------- */
.bk-champ { --lo-gap: 8px; --lo-l: 20px; margin: 8px 8px 32px; }
.bk-champ-box {
  --n: 6px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--lime);
}
.bk-champ-box > .icon--lg { color: var(--lime); }
.bk-champ-box .kicker { margin-bottom: 4px; }
.bk-champ-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 28px; font-weight: 900; line-height: 1.2; text-shadow: 3px 3px 0 var(--pink); overflow-wrap: anywhere; }
.bk-champ-name .tag { text-shadow: none; }
.bk-champ-info { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
.bk-champ-info b { color: var(--text); }
.bk-champ-info .num { font-size: 16px; color: var(--lime); }
.bk-champ-actions { grid-column: 1 / -1; margin-top: 12px; }
@media (min-width: 1024px) {
  .bk-champ-box { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 24px; padding: 28px 32px; }
  .bk-champ-box > .icon--lg { grid-row: 1 / span 2; }
  .bk-champ-name { font-size: 40px; text-shadow: 4px 4px 0 var(--pink); }
  .bk-champ-info { grid-column: 2; }
  .bk-champ-actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- 我的路線（已登入才有） ---------- */
.bk-you { display: grid; gap: 14px; margin-bottom: 24px; padding: 16px; }
.bk-you-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.bk-you-name { font-size: 18px; font-weight: 900; color: var(--lime); }
.bk-you-state { color: var(--muted); font-size: 15px; }
.bk-you-state b { color: var(--text); }
.bk-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-route li { display: flex; align-items: center; gap: 8px; }
.bk-route li > .icon { color: var(--muted); }
.bk-step { --n: 3px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; }
.bk-step:hover { color: var(--text); background: var(--surface-3); }
.bk-step:focus-visible { outline: 3px solid var(--pink); outline-offset: -5px; }
.bk-step .num { font-size: 16px; }
.bk-step.is-win .bk-step-res { color: var(--lime); }
.bk-step.is-loss .bk-step-res { color: var(--muted); }
.bk-step.is-now { box-shadow: inset 0 0 0 2px var(--pink); }
.bk-step.is-now .bk-step-res { display: inline-flex; align-items: center; gap: 6px; color: var(--pink); }
.bk-step.is-champ { background: var(--lime); color: var(--ink); }
.bk-step.is-champ:hover { color: var(--ink); background: var(--lime); }
@media (min-width: 1024px) {
  .bk-you { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding: 20px 24px; }
  .bk-you-head, .bk-route { grid-column: 1; }
  .bk-you > .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- 輪次分頁（只有手機）、分區切換 ---------- */
.bk-rtabs { margin-bottom: 16px; }
.bk-rtabs > button, .bk-regtabs > button { flex: 1 0 auto; justify-content: center; padding: 0 12px; }
.bk-rv .bk-rtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }   /* RIVALS 7 輪排兩行，選到的永遠看得到 */
.bk-rv .bk-rtabs > button { padding: 0 4px; }
.bk-regtabs .tag { background: var(--ink); color: var(--lime); }
.bk-regtabs > [aria-selected="false"] .tag { background: var(--lime); color: var(--ink); }
@media (min-width: 1024px) {
  .bk-rtabs, .bk-rv .bk-rtabs { display: none; }
  .bk-regtabs > button { flex: none; min-width: 88px; }
}

/* RIVALS：分區賽（第 1～3 輪）＋決賽階段（第 4 輪～決賽） */
.bk-stage-head { display: grid; gap: 12px; margin-bottom: 16px; }
.bk-stage-title { font-size: 20px; font-weight: 900; line-height: 1.3; text-shadow: 2px 2px 0 var(--pink); }
.bk-stage-note { margin-top: 4px; color: var(--muted); font-size: 14px; }
@media (min-width: 1024px) {
  .bk-stage + .bk-stage { margin-top: 40px; }
  .bk-stage-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .bk-stage-title { font-size: 24px; }
}

/* ---------- 比賽卡（整張是連結） ---------- */
.bk-m {
  --n: 4px;
  display: grid;
  padding: 8px 0;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bk-m:hover { color: var(--text); background: var(--surface-2); }
.bk-m:focus-visible { outline: 3px solid var(--pink); outline-offset: -7px; }
.bk-m-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; padding: 0 12px 6px; border-bottom: 2px solid var(--surface-3); }
.bk-m-id { font: 400 16px/1 var(--font-px); }
.bk-m-bo { color: var(--muted); font-size: 13px; font-weight: 700; }
.bk-m-head .badge { margin-left: auto; min-height: 24px; padding: 2px 8px; }
.bk-m-side { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; }
.bk-m-side + .bk-m-side { border-top: 2px solid var(--surface-3); }
.bk-m-name { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bk-m-from { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
.bk-m-score { min-width: 24px; font: 400 24px/1 var(--font-px); text-align: right; }

/* 勝方亮（左邊一條白線＋比分 lime）、敗方暗 */
.bk-m-side.is-winner { box-shadow: inset 4px 0 0 var(--text); }
.bk-m-side.is-winner .bk-m-name { font-weight: 900; }
.bk-m-side.is-winner .bk-m-score { color: var(--lime); }
.bk-m-side.is-loser { color: var(--muted); }
.bk-m-side.is-loser .bk-m-name { font-weight: 500; }
.bk-m-side.is-empty { color: var(--muted); }           /* 待定、輪空 */
.bk-m-side.is-empty .bk-m-name { font-weight: 500; }
.bk-m-side.is-pending .bk-m-score,
.bk-m.is-bye .bk-m-score { color: var(--muted); }

/* 比賽狀態（加在 .bk-m：is-tbd／is-waiting／is-live／is-done／is-bye） */
.bk-m.is-tbd, .bk-m.is-bye { background: var(--bg); box-shadow: inset 0 0 0 2px var(--surface-3); }
.bk-m.is-tbd:hover, .bk-m.is-bye:hover { background: var(--surface); }
.bk-m.is-waiting { box-shadow: inset 0 0 0 2px var(--attn); }
.bk-m.is-live { box-shadow: inset 0 0 0 2px var(--pink); }

/* 自己的場次（只有登入才標）：lime 框＋名字 lime＋「你」 */
body.is-user .bk-m.is-mine { box-shadow: inset 0 0 0 2px var(--lime); }
body.is-user .bk-m-side.is-me .bk-m-name { color: var(--lime); }

/* 搜尋結果：符合的場次加黃框，其他變淡 */
.bk.search-hit .bk-m.is-hit { box-shadow: inset 0 0 0 2px var(--attn); }
.bk.search-hit .bk-m:not(.is-hit) { opacity: .4; }

/* RIVALS 分區賽最後一欄：接到決賽階段 */
.bk-exit { --n: 3px; display: grid; gap: 2px; min-height: 64px; align-content: center; padding: 8px 12px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--surface-3); color: var(--text); text-decoration: none; }
.bk-exit:hover { color: var(--text); background: var(--surface); }
.bk-exit:focus-visible { outline: 3px solid var(--pink); outline-offset: -5px; }
.bk-exit .num { font-size: 16px; }
.bk-exit-sub { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }

/* ---------- 對戰表本體 ---------- */
.bk-tree { display: grid; gap: 24px; }
.bk-col { min-width: 0; }
.bk-col-head { margin-bottom: 12px; }
.bk-col-name { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; line-height: 1.3; text-shadow: 2px 2px 0 var(--pink); }
.bk-col-meta { color: var(--muted); font-size: 14px; }
.bk-list { display: grid; gap: 12px; }
.bk-col--exit { display: none; }

@media (min-width: 1024px) {
  /* 外框：可以自己左右捲（不會讓整頁左右捲），背景是首頁主視覺的格線 */
  .bk-board {
    --n: 6px;
    overflow-x: auto;
    padding: 24px;
    background-color: var(--bg);
    background-image:
      linear-gradient(var(--surface) 2px, transparent 2px),
      linear-gradient(90deg, var(--surface) 2px, transparent 2px);
    background-size: 32px 32px;
    box-shadow: inset 0 0 0 2px var(--surface-3);
  }
  .bk-tree { --gap: 32px; grid-auto-flow: column; grid-auto-columns: minmax(184px, 1fr); gap: 0 var(--gap); min-width: min-content; }
  .bk-tree--region { grid-template-columns: repeat(3, minmax(184px, 1fr)) minmax(136px, .6fr); }
  .bk-col { display: flex; flex-direction: column; }
  .bk-col--exit { display: flex; }
  .bk-col-head { min-height: 60px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--surface-3); }
  .bk-col-name { font-size: 18px; }
  .bk-col-meta { font-size: 13px; }
  .bk-list { flex: 1; display: flex; flex-direction: column; gap: 0; }

  /* 每一格平均分高度，下一輪的格子剛好是上一輪兩格的中間 */
  .bk-slot {
    --lc: var(--line); --lw: 2px;          /* 往下一輪的線 */
    --lc-in: var(--line); --lw-in: 2px;    /* 從上一輪接進來的線 */
    position: relative;
    flex: 1 1 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 5px 0;
  }
  .bk-slot::before, .bk-slot::after { content: ""; position: absolute; pointer-events: none; }
  /* 往下一輪：兩場一組，上面那場往下接、下面那場往上接，在中間會合 */
  .bk-slot::after { left: 100%; width: calc(var(--gap) / 2); border-right: var(--lw) solid var(--lc); }
  .bk-slot:nth-child(odd)::after { top: calc(50% - var(--lw) / 2); bottom: 0; border-top: var(--lw) solid var(--lc); }
  .bk-slot:nth-child(even)::after { top: 0; bottom: calc(50% - var(--lw) / 2); border-bottom: var(--lw) solid var(--lc); }
  /* 從上一輪接進來的橫線 */
  .bk-slot::before { right: 100%; top: calc(50% - var(--lw-in) / 2); width: calc(var(--gap) / 2); height: var(--lw-in); background: var(--lc-in); }
  .bk-col:first-child .bk-slot::before,
  .bk-col:last-child .bk-slot::after { display: none; }

  /* 自己的晉級路線：線變粗變 lime（path-in／path-out；冠軍狀態才連到決賽的加 -champ） */
  body.is-user .bk-slot.path-out,
  body.is-user .bk.bw-champion .bk-slot.path-out-champ { --lc: var(--lime); --lw: 4px; }
  body.is-user .bk-slot.path-in,
  body.is-user .bk.bw-champion .bk-slot.path-in-champ { --lc-in: var(--lime); --lw-in: 4px; }

  /* 電腦版卡片比較緊湊 */
  .bk-m { padding: 6px 0; }
  .bk-m-head { min-height: 28px; padding: 0 10px 4px; }
  .bk-m-side { min-height: 28px; padding: 0 10px; font-size: 15px; }
  .bk-m-score { min-width: 16px; font-size: 16px; }
  .bk-m-side .tag { min-height: 20px; padding: 0 6px; }
}

/* ---------- 載入中 ---------- */
.bk-skel { display: grid; gap: 16px; }
.bk-skel-input { height: 48px; }
.bk-skel-tabs { height: 44px; }
.bk-skel-tree { display: grid; gap: 12px; }
.bk-skel-col { display: grid; gap: 12px; }
.bk-skel-col:not(:first-child) { display: none; }
.bk-skel-card { --n: 4px; height: 112px; }
@media (min-width: 1024px) {
  .bk-skel-input { max-width: 460px; }
  .bk-skel-tabs { display: none; }
  .bk-skel-tree { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; min-height: 560px; }
  .bk-skel-col, .bk-skel-col:not(:first-child) { display: flex; flex-direction: column; justify-content: space-around; }
  .bk-skel-card { height: 92px; }
}

/* ---------- 還沒抽籤 ---------- */
.bk-empty { padding: 48px 20px; }
.bk-empty .h3 { color: var(--text); }
.bk-empty p { max-width: 30em; }
.bk-nowrap { white-space: nowrap; }
.bk-empty .btn-row { margin-top: 8px; }

/* ============================================================
   名單 entries.html、規則 rules.html、常見問題 faq.html、直播 live.html
   ============================================================ */
/* ============================================================
   第二批：8. 參賽名單 entries.html、9. 規則 rules.html、
           10. 直播 live.html、11. 常見問題 faq.html
   頁面專用樣式。合併進 site.css 時整段貼在最後面，然後刪掉各頁的 <link rel="stylesheet" href="css/parts/content.css">
   顏色只用 :root 變數；狀態一樣是「容器加 class，.when-* 才出現」
   ============================================================ */

/* ---------- 共用：搜尋框、搜尋結果列、空狀態標題、關鍵字標記、找不到答案框 ---------- */

/* type="search" 在 iOS 會變圓角、Chrome 會多一個藍色 ×，統一拿掉（清除用自己的按鈕） */
.search .input[type="search"] { -webkit-appearance: none; appearance: none; border-radius: 0; }
.search .input[type="search"]::-webkit-search-cancel-button { display: none; }
/* .input 有 clip-path 會自成一層，蓋掉放大鏡；把圖示拉到上面（合併時可直接改 site.css 的 .search > .icon） */
.search > .icon { z-index: 1; }

/* 搜尋結果列：「comet」找到 2 位 + 清除搜尋 */
.search-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; color: var(--muted); }
.search-meta b { color: var(--text); font-weight: 900; }

/* 空狀態裡的粗體標題（.empty 本身是灰字） */
.empty-title { color: var(--text); font-size: 17px; font-weight: 900; }

/* 搜尋關鍵字標記 */
.en mark, .fq mark { padding: 0 2px; background: var(--attn); color: var(--ink); }

/* 「找不到答案？到 Discord 問工作人員」（規則頁最後、常見問題最後） */
.help-box { display: grid; gap: 14px; }
.help-box > .icon--lg { color: var(--lime); }
.help-box p { margin: 4px 0 0; color: var(--muted); }
@media (min-width: 768px) {
  .help-box { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; }
}

/* 搜尋狀態（加在 .en、.fq）：沒有 class＝沒在搜尋、q-hit＝有結果、q-miss＝沒結果 */
.en:not(.q-hit) .when-q-hit,
.fq:not(.q-hit) .when-q-hit,
.en:not(.q-miss) .when-q-miss,
.fq:not(.q-miss) .when-q-miss,
.en.q-hit .hide-when-q,
.en.q-miss .hide-when-q,
.fq.q-hit .hide-when-q,
.fq.q-miss .hide-when-q { display: none !important; }


/* ============================================================
   8. 參賽名單 entries.html
   ============================================================ */

/* 項目（加在 .en）：en-rivals／en-bedwars */
.en:not(.en-rivals) .when-rivals,
.en:not(.en-bedwars) .when-bedwars { display: none !important; }

/* 上方：項目分頁籤 + 搜尋 */
.en-bar { display: grid; gap: 12px; margin-bottom: 20px; }
.en-tabs > a { flex: 1; justify-content: center; }
@media (min-width: 1024px) {
  .en-bar { grid-template-columns: auto minmax(0, 360px); justify-content: space-between; align-items: center; margin-bottom: 28px; }
  .en-tabs > a { flex: none; min-width: 140px; }
}

/* 總人數列 */
.en-count-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.en-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); }
.en-count b { font: 400 24px/1 var(--font-px); color: var(--text); }
.en-count .en-note { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.en-count .en-note--attn { color: var(--attn); font-weight: 700; }

/* RIVALS 選手卡：手機 2 欄、平板 3 欄、電腦 4 欄 */
.en-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.en-player {
  --n: 4px;
  display: flex; align-items: center; gap: 8px;
  min-height: 60px; padding: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
}
.en-player .avatar { width: 32px; height: 32px; --n: 2px; }
.en-pinfo { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.en-name { font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.en-player .skel-line { flex: 1; margin: 0; }
@media (min-width: 768px) { .en-players { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .en-players { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .en-player { gap: 10px; padding: 12px 16px; }
  .en-name { font-size: 15px; }
}

/* BedWars 隊伍卡：手機 1 欄、平板 2 欄、電腦 3 欄；成員 2×2 */
.en-teams { display: grid; gap: 12px; }
.en-team { display: grid; gap: 14px; align-content: start; }
.en-team-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.en-team-name { font-size: 19px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.en-team-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.en-members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.en-members li { gap: 8px; min-width: 0; }
.en-mname { display: block; min-width: 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.en-crown { color: var(--lime); }
.en-mname .en-crown { display: inline-block; margin-left: 4px; vertical-align: 0; }
.en-team-note { color: var(--muted); font-size: 14px; }
@media (min-width: 768px) { .en-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .en-teams { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* 登入後：自己的卡、自己的隊伍亮起來（卡片加 .is-me） */
body.is-user .en-player.is-me { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--lime); }
body.is-user .en-player.is-me .en-name,
body.is-user .en-members .is-me .en-mname { color: var(--lime); }
body.is-user .en-team.is-me { box-shadow: inset 0 0 0 2px var(--lime); }


/* ============================================================
   9. 規則 rules.html
   ============================================================ */
.ru-updated { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 15px; font-weight: 700; }
.ru-updated b { color: var(--text); }

/* 章節目錄：手機是黏在導覽列下面的橫向滑動列，電腦是左側固定（.sidenav 本身的樣式在 site.css） */
.ru-toc {
  position: sticky; top: var(--topbar-h); z-index: 30;
  padding-top: 10px; padding-bottom: 10px;
  background: var(--bg);
  border-bottom: 2px solid var(--surface-3);
}
.ru-toc-label { display: none; }
@media (min-width: 1024px) {
  .ru-toc { top: calc(var(--topbar-h) + 24px); z-index: auto; padding: 0; background: none; border: 0; }
  .ru-toc-label { display: block; margin: 20px 0 4px 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
  .ru-toc-label:first-child { margin-top: 0; }
}

/* 內文（.ru-main 包住：草稿提示、規則文章、最後的「還有問題」框） */
.ru-main { display: grid; gap: 32px; min-width: 0; max-width: 46em; }
.ru-doc { display: grid; gap: 48px; }
.ru-doc .ru-part-title { margin: 0 0 4px; font-size: 26px; text-shadow: 3px 3px 0 var(--pink); }
.ru-sec { padding-top: 24px; margin-top: 24px; border-top: 2px solid var(--surface-3); scroll-margin-top: calc(var(--topbar-h) + 72px); }
.ru-part-title + .ru-sec { margin-top: 8px; padding-top: 8px; border-top: 0; }
.ru-doc .ru-sec > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; font-size: 19px; }
.ru-no { --n: 2px; display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 6px; background: var(--surface-3); color: var(--lime); font: 400 16px/1 var(--font-px); }
.ru-ev { font: 400 24px/1 var(--font-px); text-transform: uppercase; letter-spacing: .02em; }
.ru-doc .ru-lead { color: var(--muted); }
.ru-doc .ru-ban > li::before { background: var(--pink); }
.ru-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

/* Bo 幾：三格 */
.ru-bo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.ru-bo > div { --n: 4px; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); text-align: center; }
.ru-bo .ru-bo-label { color: var(--muted); font-size: 14px; font-weight: 700; margin: 0; }
.ru-bo .ru-bo-num { font: 400 24px/1 var(--font-px); color: var(--lime); margin: 0; }
.ru-bo .ru-bo-sub { color: var(--muted); font-size: 13px; margin: 0; }
@media (min-width: 1024px) { .ru-bo { gap: 12px; max-width: 520px; } }

/* 載入中的目錄假資料 */
.ru-skel-toc { display: flex; gap: 4px; overflow: hidden; }
.ru-skel-toc .skel { flex: none; width: 88px; height: 44px; }
@media (min-width: 1024px) {
  .ru-skel-toc { flex-direction: column; }
  .ru-skel-toc .skel { width: 160px; height: 20px; margin: 12px 0; }
}


/* ============================================================
   11. 常見問題 faq.html
   ============================================================ */
.fq-search { margin-top: 20px; max-width: 520px; }
.fq-main { display: grid; max-width: 46em; }
.fq-group { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.fq-group + .fq-group { margin-top: 40px; }
.fq-title { margin-bottom: 14px; font-size: 22px; font-weight: 900; line-height: 1.4; text-shadow: 2px 2px 0 var(--pink); }
.fq .help-box { margin-top: 40px; }
.fq-results { max-width: 46em; }
.faq .answer > * + * { margin-top: 12px; }
.fq-list { display: grid; gap: 4px; }
.fq-list li { position: relative; padding-left: 18px; }
.fq-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; background: var(--lime); }


/* ============================================================
   10. 直播 live.html
   ============================================================ */

/* 直播（加在 <body>）：lv-on 直播中（再加 is-streaming）／lv-off 沒開播 */
body:not(.lv-on) .when-lv-on,
body:not(.lv-off) .when-lv-off { display: none !important; }

.lv-stream { display: grid; gap: 16px; align-content: start; }
.lv-player { --lo-gap: 6px; --lo-l: 20px; }
.lv-now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
/* 標題至少留 8em，放不下時「訂閱頻道」自己換到下一行，不要把標題擠成兩行 */
.lv-title { flex: 1 1 8em; min-width: 0; font-size: 19px; font-weight: 900; line-height: 1.3; }

/* 沒開播的畫面（class 不能跟 body 的狀態 lv-off 同名）：手機不用 16:9（內容放不下），電腦維持影片比例 */
.lv-offair {
  --n: 6px;
  display: grid; justify-items: center; align-content: center; gap: 12px;
  padding: 32px 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
  text-align: center;
}
.lv-offair > .icon--lg { color: var(--muted); }
.lv-next { font-size: 17px; font-weight: 700; }
.lv-offair .btn { margin-top: 4px; }
@media (min-width: 1024px) { .lv-offair { aspect-ratio: 16 / 9; } }

.lv-matches { display: grid; gap: 12px; align-content: start; }
.lv-skel-video { aspect-ratio: 16 / 9; }

/* ============================================================
   工作人員後台 admin.html
   ============================================================ */
/* ============================================================
   工作人員後台 admin.html（頁面專用）
   合併進 site.css 時放在「3. 單場比賽」後面；選擇器都用 .ad- 開頭
   狀態 class 的說明在 admin.html 的 <head> 下面
   ============================================================ */

/* ---------- 狀態切換：容器沒有某狀態 class 時，藏起對應的 .when-* ---------- */
/* 不是工作人員才看得到 403（工作人員看不到） */
body.is-staff .ad-nonstaff-only,
/* 有沒有待處理爭議（#admin-data 加 has-dispute） */
.ad-app:not(.has-dispute) .when-dispute,
.ad-app.has-dispute .when-no-dispute,
/* 總覽項目卡 */
.ad-ov-ev:not(.ph-off) .when-ph-off,
.ad-ov-ev:not(.ph-reg) .when-ph-reg,
.ad-ov-ev:not(.ph-checkin) .when-ph-checkin,
.ad-ov-ev:not(.ph-ready) .when-ph-ready,
.ad-ov-ev:not(.ph-live) .when-ph-live,
.ad-ov-ev:not(.ph-paused) .when-ph-paused,
.ad-ov-ev:not(.ph-ended) .when-ph-ended,
/* 比賽控制台 */
.ad-console-data:not(.is-paused) .when-paused,
.ad-match:not(.rp-waiting) .when-rp-waiting,
.ad-match:not(.rp-none) .when-rp-none,
.ad-match:not(.rp-sent) .when-rp-sent,
.ad-match:not(.rp-agreed) .when-rp-agreed,
.ad-match:not(.rp-disputed) .when-rp-disputed,
.ad-match:not(.is-called) .when-called,
.ad-recent-item:not(.is-locked) .when-locked,
.ad-recent-item.is-locked .when-unlocked,
/* 報名開關 */
.ad-reg-ev:not(.reg-on) .when-reg-on,
.ad-reg-ev:not(.reg-off) .when-reg-off,
.ad-reg-ev:not(.reg-locked) .when-reg-locked,
/* 報到 */
.ad-ck:not(.ck-off) .when-ck-off,
.ad-ck:not(.ck-on) .when-ck-on,
.ad-ck:not(.ck-done) .when-ck-done,
.ad-ck:not(.ck-locked) .when-ck-locked,
/* 對戰表 */
.ad-br:not(.br-none) .when-br-none,
.ad-br:not(.br-preview) .when-br-preview,
.ad-br:not(.br-ready) .when-br-ready,
.ad-br:not(.br-live) .when-br-live,
.ad-br:not(.br-paused) .when-br-paused,
.ad-br:not(.br-ended) .when-br-ended,
/* 公告 */
.ad-ann-form:not(.ann-normal) .when-ann-normal,
.ad-ann-form:not(.ann-urgent) .when-ann-urgent,
.ad-ann-form:not(.ann-invalid) .when-ann-invalid,
/* 設定 */
.ad-settings:not(.set-invalid) .when-set-invalid,
/* 對話框 */
.ad-dlg:not(.dlg-invalid) .when-dlg-invalid,
.ad-dlg:not(.to-open) .when-to-open,
.ad-dlg:not(.to-close) .when-to-close { display: none !important; }

/* 填錯時輸入框變粉紅框 */
.ad-ann-form.ann-invalid textarea.input,
.ad-settings.set-invalid .ad-link-field .input,
.ad-dlg.dlg-invalid .ad-link-field .input { box-shadow: inset 0 0 0 2px var(--pink); }

/* 這頁自己的小方塊也要像素缺角 */
.ad-slot, .ad-bo, .ad-draw-sum > div {
  clip-path: polygon(
    0 var(--n, 2px), var(--n, 2px) var(--n, 2px), var(--n, 2px) 0,
    calc(100% - var(--n, 2px)) 0, calc(100% - var(--n, 2px)) var(--n, 2px), 100% var(--n, 2px),
    100% calc(100% - var(--n, 2px)), calc(100% - var(--n, 2px)) calc(100% - var(--n, 2px)), calc(100% - var(--n, 2px)) 100%,
    var(--n, 2px) 100%, var(--n, 2px) calc(100% - var(--n, 2px)), 0 calc(100% - var(--n, 2px))
  );
}

/* ---------- 版面 ---------- */
.ad-whoami { margin-top: 12px; color: var(--muted); font-size: 15px; }
.ad-whoami b { color: var(--text); }
.ad-main { display: grid; gap: 56px; min-width: 0; }
.ad-sec { min-width: 0; scroll-margin-top: 64px; }   /* 手機上目錄會黏在導覽列下面，跳過去時讓出位置 */
.ad-skel-nav { display: flex; gap: 4px; overflow: hidden; }
.ad-skel-nav .skel-line { flex: none; width: 96px; height: 44px; margin: 0; }
@media (min-width: 1024px) {
  .ad-main { gap: 80px; }
  .ad-sec { scroll-margin-top: 0; }
  .ad-skel-nav { flex-direction: column; }
  .ad-skel-nav .skel-line { width: 100%; }
}

/* 側邊目錄：手機上黏在導覽列下面（比賽當天要一直切換） */
@media (max-width: 1023px) {
  .ad-sidenav {
    position: sticky; top: calc(var(--topbar-h) + 2px); z-index: 30;
    padding-top: 8px; padding-bottom: 8px;
    background: var(--bg);
    border-bottom: 2px solid var(--surface-3);
  }
  .ad-sidenav .icon { display: none; }
}
.ad-navcount {
  --n: 2px;
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 4px;
  background: var(--pink); color: var(--ink);
  font: 400 16px/1 var(--font-px);
}
@media (min-width: 1024px) { .ad-sidenav .ad-navcount { margin-left: auto; } }

/* 下拉選單（篩選用）：右邊放 chevron 圖示 */
.ad-select { position: relative; min-width: 0; }
.ad-select select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.ad-select > .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ad-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-filter-q { grid-column: 1 / -1; }
.ad-filters--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .ad-filters--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ad-filters:not(.ad-filters--3) { grid-template-columns: minmax(0, 1fr) 160px 200px; }
  .ad-filter-q { grid-column: auto; }
}
.ad-count { color: var(--muted); font-size: 14px; white-space: nowrap; }
.ad-count b { color: var(--text); }
.ad-more { margin-top: 16px; }
.ad-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ad-legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.ad-form-foot { display: flex; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 767px) { .ad-form-foot .btn { width: 100%; } }
.ad-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.ad-lock-why { display: block; font-weight: 500; }
.ad-attn-text { color: var(--attn); font-weight: 700; }
.ad-tlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }   /* 句子裡的連結也要 44px 高才好按 */
.ad-who { display: grid; line-height: 1.35; min-width: 0; }
.ad-who b { font-weight: 700; color: var(--text); white-space: nowrap; }
.ad-person .ad-who b { overflow: hidden; text-overflow: ellipsis; }
.ad-who span { color: var(--muted); font-size: 13px; }
.ad-mid { font: 400 16px/1 var(--font-px); color: var(--text); }
.ad-score { font: 400 24px/1 var(--font-px); white-space: nowrap; }

/* 開關：鎖住時 */
.ad-switch-locked { cursor: not-allowed; }
.ad-switch-locked .switch-ui { opacity: .5; }
.ad-switch-locked .switch-text b { display: flex; align-items: center; gap: 6px; }

/* ---------- 總覽 ---------- */
.ad-ov-ev { display: grid; gap: 16px; align-content: start; }
.ad-ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ad-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad-stat { --n: 3px; display: grid; align-content: start; gap: 8px; padding: 12px; background: var(--surface-2); }
.ad-stat dt { color: var(--muted); font-size: 14px; font-weight: 700; }
.ad-stat dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.ad-stat .num { font-size: 32px; line-height: 1; }
.ad-stat dd > span { color: var(--muted); font-size: 14px; }
/* 待處理爭議：有就整條粉紅、點了去控制台 */
.ad-dispute {
  --n: 4px;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 16px;
  background: var(--pink); color: var(--ink);
  font-weight: 900; text-decoration: none;
}
.ad-dispute:hover { color: var(--ink); filter: brightness(1.08); }
.ad-dispute:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.ad-dispute-label { display: flex; align-items: center; gap: 8px; }
.ad-dispute .num { font-size: 32px; line-height: 1; }
.ad-dispute-go { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ad-dispute.is-zero { background: var(--surface-2); color: var(--muted); font-weight: 700; }
.ad-dispute.is-zero .num { font-size: 24px; }
.ad-ov-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.ad-next {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding-top: 14px;
  border-top: 2px solid var(--surface-3);
  color: var(--lime); font-weight: 700; text-decoration: none;
}
p.ad-next { justify-content: flex-start; color: var(--text); }
p.ad-next .icon { color: var(--lime); }

/* ---------- 比賽控制台 ---------- */
.ad-con-bar { display: grid; gap: 12px; margin-bottom: 16px; }
.ad-rooms { --n: 4px; display: grid; gap: 8px; padding: 14px 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.ad-rooms-line { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.ad-rooms-num { font: 400 32px/1 var(--font-px); }
.ad-rooms-sub { color: var(--muted); font-size: 14px; }
.ad-rooms-sub b { color: var(--text); }
.ad-con-hint { color: var(--muted); font-size: 14px; }
.ad-console-data { display: grid; gap: 16px; }
@media (min-width: 768px) {
  .ad-con-bar { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: end; }
}

.ad-matches { display: grid; gap: 16px; align-items: start; }
.ad-pin { --lo-gap: 6px; --lo-l: 20px; margin: 6px; }
@media (min-width: 1024px) {
  .ad-matches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ad-pin { grid-column: 1 / -1; }
}

/* 場次卡（rp-* 狀態） */
.ad-match { display: grid; gap: 16px; align-content: start; padding: 16px; }
.ad-match.rp-disputed { box-shadow: inset 0 0 0 2px var(--pink); }
.ad-match-info, .ad-match-ops { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ad-match-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ad-match-title { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; font-weight: 700; }
.ad-match-title .ad-mid { font-size: 24px; }
.ad-bo { --n: 2px; padding: 2px 8px; box-shadow: inset 0 0 0 2px var(--line); font-size: 13px; }
.ad-sides { display: grid; gap: 10px; }
.ad-sides li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.ad-sides b { font-size: 18px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.ad-slot { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; background: var(--surface-3); font: 400 16px/1 var(--font-px); }
.ad-cap { color: var(--muted); font-size: 13px; }
.ad-meta { display: grid; gap: 8px; padding-top: 12px; border-top: 2px solid var(--surface-3); }
.ad-meta > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-meta dt { display: flex; align-items: center; gap: 6px; flex: none; width: 56px; color: var(--muted); font-size: 14px; font-weight: 700; }
.ad-meta dd { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; }
.ad-meta .num { font-size: 24px; line-height: 1; }
.ad-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ad-meta .tag { flex: none; }
.ad-called {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2); box-shadow: inset 4px 0 0 var(--attn);
  color: var(--attn); font-size: 14px; font-weight: 700;
}
.ad-called b { color: var(--text); }
.ad-called > span:last-child { margin-left: auto; color: var(--muted); }

/* 回報狀態框 */
.ad-rep { --n: 4px; display: grid; gap: 10px; padding: 14px; background: var(--surface-2); }
.ad-rep--attn { box-shadow: inset 0 0 0 2px var(--attn); }
.ad-rep--ok { box-shadow: inset 0 0 0 2px var(--lime); }
.ad-rep--danger { box-shadow: inset 0 0 0 2px var(--pink); }
.ad-rep-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 900; }
.ad-rep-title b { font-weight: 900; }
.ad-rep-title--muted { color: var(--muted); font-weight: 700; }
.ad-rep--attn .ad-rep-title > .icon { color: var(--attn); }
.ad-rep--ok .ad-rep-title > .icon { color: var(--lime); }
.ad-rep--danger .ad-rep-title { color: var(--pink); }
.ad-rep--danger .ad-rep-title b { color: var(--text); }
.ad-rep-title > .ad-score { margin-left: auto; }
.ad-rep-lines { display: grid; gap: 8px; }
.ad-rep-lines p { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-rep-lines p > span { color: var(--muted); font-size: 15px; }
.ad-rep-note { color: var(--muted); font-size: 14px; }
.ad-noshow { margin-left: auto; font: 400 32px/1 var(--font-px); color: var(--attn); }

/* 卡片上的按鈕：判 A 勝／判 B 勝（下面一行小字是隊名） */
.ad-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-judge { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 10px; }
.ad-judge span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 500; }
.ad-actions .btn--sm { padding: 8px 10px; gap: 8px; }

/* 有異議的置頂卡：電腦版左右兩欄 */
@media (min-width: 1024px) {
  .ad-match { padding: 20px; }
  .ad-match--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}

/* 剛結束（改判） */
.ad-recent { display: grid; gap: 8px; margin-top: 16px; }
.ad-recent-list { display: grid; margin-top: 4px; }
.ad-recent-item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-top: 2px solid var(--surface-3); }
.ad-recent-meta { color: var(--muted); font-size: 14px; }
.ad-recent-meta b { color: var(--text); }
.ad-recent-vs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; }
.ad-recent-vs > span:last-child { color: var(--muted); }
.ad-recent-vs .ad-score { font-size: 16px; }
.ad-rejudge { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }

/* ---------- 報名管理 ---------- */
.ad-reg-ev { display: grid; gap: 16px; align-content: start; }
.ad-entries .card-head { align-items: center; }
.ad-entries-hint { margin: 12px 0 16px; }
.ad-table td { white-space: nowrap; }
.ad-table tbody th { padding: 10px 14px; color: var(--text); font-size: 15px; font-weight: 400; }
.ad-table tbody tr:last-child th { border-bottom: 0; }
.ad-table .t-num { font-size: 16px; }
.ad-table .tag { margin-left: 4px; }

/* ---------- 報到管理 ---------- */
.ad-ev-tabs { margin-bottom: 12px; }
.ad-ck { display: grid; gap: 20px; }
.ad-ck-top { display: grid; gap: 16px; }
.ad-ck-lists { display: grid; gap: 24px; }
@media (min-width: 768px) {
  .ad-ck-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .ad-ck-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ad-list-box { display: grid; gap: 8px; align-content: start; }
.ad-list-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 900; }
.ad-list-n { --n: 2px; display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; background: var(--attn); color: var(--ink); font: 400 16px/1 var(--font-px); }
.ad-list-n--ok { background: var(--lime); }
.ad-people { display: grid; }
.ad-person { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 2px solid var(--surface-3); }
.ad-person .ad-who { flex: 1; }
.ad-time { font: 400 16px/1 var(--font-px); color: var(--muted); }
.ad-list-box > .btn { margin-top: 8px; }

/* ---------- 對戰表 ---------- */
.ad-br { display: grid; gap: 20px; }
.ad-br-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ad-br-body { display: grid; gap: 16px; }
.ad-draw-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-draw-sum > div { --n: 3px; padding: 12px; background: var(--surface-2); }
.ad-draw-sum dt { color: var(--muted); font-size: 14px; font-weight: 700; }
.ad-draw-sum dd { color: var(--muted); font-size: 14px; }
.ad-draw-sum .num { display: block; margin: 6px 0 4px; font-size: 32px; line-height: 1; color: var(--text); }
.ad-draw-line { color: var(--muted); }
.ad-draw-line b { color: var(--text); }
.ad-draw { display: grid; }
.ad-draw li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 0;
  border-top: 2px solid var(--surface-3);
  font-size: 15px; font-weight: 700;
}
.ad-draw li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-draw .ad-draw-vs { font: 400 16px/1 var(--font-px); color: var(--pink); text-align: center; }
.ad-draw .is-bye { color: var(--muted); font-weight: 500; }
@media (min-width: 1024px) { .ad-draw { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.ad-checklist { display: grid; gap: 8px; }
.ad-checklist li { display: flex; align-items: center; gap: 10px; }
.ad-checklist li > .icon { color: var(--lime); }
.ad-checklist li.is-todo > .icon { color: var(--attn); }
.ad-champ { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; }
.ad-champ .icon { color: var(--lime); }

/* ---------- 公告 ---------- */
.ad-ann-grid { display: grid; gap: 24px; }
@media (min-width: 1024px) { .ad-ann-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.ad-choices { display: grid; gap: 8px; }
.ad-choice {
  --n: 4px;
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  min-height: 64px; padding: 14px 16px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line);
  cursor: pointer;
}
.ad-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ad-radio { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.ad-choice input:focus-visible ~ .ad-radio { outline: 3px solid var(--pink); outline-offset: 3px; }
.ad-choice-text { display: grid; }
.ad-choice-text span { color: var(--muted); font-size: 14px; }
/* 選哪一種跟著 #ann-form 的 class（ann-normal／ann-urgent），預覽也一起換 */
.ad-ann-form.ann-normal .ad-choice--normal,
.ad-ann-form.ann-normal .ad-choice--normal .ad-radio { box-shadow: inset 0 0 0 2px var(--lime); }
.ad-ann-form.ann-urgent .ad-choice--urgent,
.ad-ann-form.ann-urgent .ad-choice--urgent .ad-radio { box-shadow: inset 0 0 0 2px var(--pink); }
.ad-ann-form.ann-normal .ad-choice--normal .ad-radio::after,
.ad-ann-form.ann-urgent .ad-choice--urgent .ad-radio::after { content: ""; position: absolute; inset: 6px; background: var(--lime); }
.ad-ann-form.ann-urgent .ad-choice--urgent .ad-radio::after { background: var(--pink); }

.ad-previews { display: grid; align-content: start; }
.ad-bpv-frame { --n: 4px; display: grid; margin-bottom: 20px; padding: 2px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); }
/* 橫幅預覽：一般公告是新的「公告」橫幅（建議合併成 site.css 的 .banner--notice），緊急公告跟全站的 .banner--urgent 一樣 */
.ad-bpv { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; font-size: 15px; font-weight: 700; }
.ad-bpv--notice { background: var(--surface-3); color: var(--text); }
.ad-bpv--notice .icon { color: var(--lime); }
.ad-bpv--urgent { background: var(--text); color: var(--ink); }
.ad-bpv--urgent .icon { color: var(--pink); }
.ad-bpv-page { display: grid; gap: 8px; padding: 14px; }
.ad-bpv-page i { display: block; height: 10px; background: var(--surface-2); }
.ad-bpv-page i:nth-child(1) { width: 40%; height: 16px; }
.ad-bpv-page i:nth-child(2) { width: 85%; }
.ad-bpv-page i:nth-child(3) { width: 60%; }
.ad-dc { --n: 4px; display: flex; gap: 12px; padding: 14px; background: var(--surface-2); }
.ad-dc-avatar { --n: 3px; display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--ink); }
.ad-dc-avatar img { width: 14px; height: 22px; }
.ad-dc-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ad-dc-time { color: var(--muted); font-size: 13px; }
.ad-dc-msg { overflow-wrap: anywhere; }
.ad-dc-urgent { color: var(--pink); }

.ad-ann-list { display: grid; }
.ad-ann { display: grid; justify-items: start; gap: 8px; padding: 14px 0; border-top: 2px solid var(--surface-3); }
.ad-ann:first-child { border-top: 0; }
.ad-ann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 14px; }
.ad-ann-text { font-weight: 500; }

/* ---------- 設定 ---------- */
.ad-set-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .ad-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-stepper { display: flex; align-items: center; gap: 6px; }
.input.ad-num-input {
  flex: none; width: 80px; height: var(--tap); padding: 0 8px;
  font: 400 24px/1 var(--font-px); text-align: center; color: var(--lime);
  -moz-appearance: textfield; appearance: textfield;
}
.ad-num-input::-webkit-outer-spin-button,
.ad-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ad-unit { margin-left: 6px; color: var(--muted); font-weight: 700; }
.ad-set-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

/* ---------- 操作紀錄 ---------- */
.ad-log { display: grid; margin-top: 8px; }
.ad-log-date { margin-top: 16px; padding: 8px 0; color: var(--muted); font-size: 15px; font-weight: 900; }
.ad-log-list { display: grid; }
.ad-log-item { display: grid; grid-template-columns: 60px 24px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; border-top: 2px solid var(--surface-3); }
.ad-log-time { font: 400 16px/1.5 var(--font-px); color: var(--muted); }
.ad-log-ic { color: var(--muted); }
.ad-log-item.is-judge .ad-log-ic { color: var(--lime); }
.ad-log-body b { font-weight: 700; }
.ad-log-detail { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

/* ---------- 對話框 ---------- */
.modal.ad-dlg { overflow-y: auto; }
.ad-dlg-kicker { margin-bottom: 4px; color: var(--muted); font-size: 14px; font-weight: 700; }
.ad-dlg-body { margin-top: 16px; }
.ad-dlg-preview { --n: 4px; display: grid; gap: 4px; padding: 12px 14px; background: var(--surface-2); font-size: 15px; }
.modal-box .ad-dlg-preview p { color: var(--text); }
.modal-box .ad-dlg-preview .ad-legend { margin: 0; color: var(--muted); font-size: 13px; }