/* 第一期｜台南市春節藝術家觀光形象大使選拔｜設計稿樣式
   視覺概念：廟埕紅榜 × 台江海面 × 金色鯨魚。報名編號像一支籤，結果像放紅榜。
   2026-10-20 起與第二期統一為深色舞台風：底色深海夜，卡片與欄位用深藍面板。 */

:root {
  /* 色票依 design/品牌視覺規範.md 第 2 節；與第二期網站共用同一組紅、金、藍。
     --paper 是頁面底、--pearl 是卡片面板（名稱沿用淺色版，值已改為深色）。
     *-soft 由色票混入面板色得到；--ok/--warn/--err 是表單狀態色，與第二期相同，不屬品牌色。 */
  --paper: #06111f;          /* 深海夜：頁面底 */
  --paper-2: #0c1d30;
  --pearl: #0c1d30;          /* 面板 */
  --ink: #f6efe2;            /* 珍珠白：主要文字 */
  --ink-2: color-mix(in srgb, #f6efe2 82%, #06111f);
  --muted: #a8b2c1;          /* 霧灰 */
  --line: #1d3249;
  --field-line: color-mix(in srgb, #a8b2c1 55%, #06111f); /* 欄位外框，對比 ≥3:1 */
  --red: #8c1d1f;            /* 府城紅 */
  --red-deep: #4e0f12;       /* 府城深紅 */
  --gold: #e8c57e;           /* 金鯨金 */
  --gold-dark: #8a6424;      /* 金鯨暗金：漸層暗部 */
  --gold-2: #e8c57e;         /* 金鯨金：只放在深色底上 */
  --gold-soft: color-mix(in srgb, #e8c57e 16%, #0c1d30);
  --foil: linear-gradient(135deg, #e8c57e 0%, #f6efe2 45%, #e8c57e 100%);
  --sea: #0e3350;            /* 台江深海 */
  --night: #06111f;          /* 深海夜 */
  --sea-2: #48a8ff;           /* 霓虹藍：連結 */
  --sea-soft: color-mix(in srgb, #0e3350 70%, #0c1d30);
  --t-black: #1c1b1f; --t-blue: #2f6db5; --t-beige: #d9c393; --t-silver: #8fa3b6; --t-purple: #5d2f86;
  --ok: #57d8a4;
  --ok-soft: color-mix(in srgb, #57d8a4 14%, #0c1d30);
  --warn: #ffb648;
  --warn-soft: color-mix(in srgb, #ffb648 14%, #0c1d30);
  --err: #ff6b78;
  --err-soft: color-mix(in srgb, #ff6b78 14%, #0c1d30);
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 14px 30px -18px rgba(0, 0, 0, .8);
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .01em;
}
a { color: var(--sea-2); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 設計稿模擬工具列 ---------- */
.simbar {
  background: #2a2838;
  color: #e9e5f2;
  font-size: 13px;
  padding: 8px 16px;
  display: flex;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
}
.simbar strong { color: var(--gold-2); font-weight: 600; }
.simbar .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.simbar button {
  border: 1px dashed #6d6884;
  background: transparent;
  color: #e9e5f2;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 12.5px;
}
.simbar button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }
.simbar .reset { margin-left: auto; text-decoration: underline; border: 0; }

/* ---------- 頁首 ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 239, 226, .94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--sea); display: grid; place-items: center; }
.brand-text { line-height: 1.2; }
.brand-text b { display: block; font-size: 15px; letter-spacing: .08em; }
.brand-text small { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a {
  text-decoration: none; color: var(--ink-2); font-size: 14px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
}
.nav a[aria-current="page"] { color: var(--red); font-weight: 700; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 560px) {
  .brand-text small { display: none; }
  .nav a { padding: 6px 7px; font-size: 13.5px; }
}

main { max-width: 1080px; margin: 0 auto; padding: 0 16px 80px; }
.page-head { padding: 28px 0 8px; }
.eyebrow { font-size: 12.5px; letter-spacing: .18em; color: var(--red); font-weight: 700; }
h1, h2, h3 { line-height: 1.3; margin: 0; letter-spacing: .03em; }
h1 { font-size: clamp(26px, 6vw, 38px); font-weight: 900; }
h2 { font-size: clamp(20px, 4.4vw, 26px); font-weight: 800; }
h3 { font-size: 17px; font-weight: 700; }
.lead { color: var(--ink-2); margin: 8px 0 0; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }

/* ---------- 首頁主視覺 ---------- */
.hero {
  position: relative;
  margin: 0 -16px;
  padding: 36px 20px 112px;
  color: #fff;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(232, 197, 126, .35), transparent 55%),
    var(--sea);
  overflow: hidden;
}
.hero-in { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; }
.hero .kicker { font-size: 13px; letter-spacing: .22em; color: var(--gold-2); }
.hero h1 { font-size: clamp(38px, 11vw, 76px); letter-spacing: .1em; margin-top: 8px; line-height: 1.12; }
.hero h1 span { display: block; color: var(--gold-2); }
.hero .sub { margin-top: 14px; font-size: 15px; color: var(--ink); max-width: 34em; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 13.5px;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; align-items: center; }
.hero-whale { position: absolute; right: -40px; top: 26px; width: min(62vw, 520px); opacity: .95; z-index: 1; }
.hero-waves { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; }
@media (max-width: 640px) { .hero-whale { opacity: .35; right: -90px; top: 80px; } }

.countdown { display: flex; gap: 8px; margin-top: 4px; }
.countdown div { background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px 10px; text-align: center; min-width: 56px; }
.countdown b { display: block; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 11px; color: #a8b2c1; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px -8px rgba(140, 29, 31, .8); }
.btn-primary:hover { background: var(--red-deep); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.btn-text { background: none; border: 0; color: var(--sea-2); font-weight: 600; cursor: pointer; padding: 4px 2px; text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------- 區塊與卡片 ---------- */
.section { margin-top: 36px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; border: 1px solid var(--line);
}
.track-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.track-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--red); }
.track-card.art::before { background: var(--sea-2); }
.track-card ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: 15px; }
.track-card .btn { align-self: flex-start; margin-top: 4px; }
.pill { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-weight: 600; }
.pill.red { background: color-mix(in srgb, var(--red) 12%, var(--pearl)); color: var(--red-deep); }
.pill.sea { background: var(--sea-soft); color: var(--sea); }
.pill.gold { background: var(--gold-soft); color: var(--gold); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }

/* 時程 */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--line); }
.timeline li:first-child { border-top: 0; }
.timeline .d { font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.timeline li.now .d { color: var(--red); }
.timeline li.now { background: linear-gradient(90deg, color-mix(in srgb, var(--red) 8%, var(--pearl)), transparent); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.timeline li.past { opacity: .55; }

/* 兩條路線 */
.routes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .routes { grid-template-columns: 1fr 1fr; } }
.route { border-radius: var(--radius); padding: 18px; }
.route.judge { background: #fff; border: 1.5px solid var(--sea-2); }
.route.pop { background: #fff; border: 1.5px solid var(--red); }
.route .num { font-size: 40px; font-weight: 900; line-height: 1; }
.route.judge .num { color: var(--sea-2); }
.route.pop .num { color: var(--red); }
.note {
  border-radius: var(--radius-s); padding: 12px 14px; font-size: 14.5px;
  background: var(--paper-2); color: var(--ink-2);
}
.note.warn { background: var(--warn-soft); color: #6b3d07; }
.note.err { background: var(--err-soft); color: #7a1a14; }
.note.ok { background: var(--ok-soft); color: #1d5434; }
.note.sea { background: var(--sea-soft); color: var(--sea); }

/* ---------- 表單 ---------- */
.form-shell { max-width: 680px; margin: 0 auto; }
.stepper { display: flex; gap: 4px; margin: 18px 0 6px; }
.stepper span { flex: 1; height: 6px; border-radius: 99px; background: var(--line); }
.stepper span.done { background: var(--gold); }
.stepper span.cur { background: var(--red); }
.step-label { font-size: 13px; color: var(--muted); }
.form-card { margin-top: 14px; }
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
.field > label, .field > .label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.req { color: var(--red); margin-left: 2px; }
.opt { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 4px; }
.hint { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #d8ccb6; background: #fffdf9; transition: border-color .12s;
}
textarea.input { min-height: 132px; resize: vertical; line-height: 1.6; }
.input:focus { outline: none; border-color: var(--sea-2); box-shadow: 0 0 0 3px rgba(14, 51, 80, .15); }
.field.has-err .input { border-color: var(--err); background: #fffafa; }
.err-msg { display: none; color: var(--err); font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.field.has-err .err-msg { display: block; }
.counter { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.counter b.ok { color: var(--ok); }
.counter b.bad { color: var(--warn); }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.row-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .row-3 { grid-template-columns: 1fr 1fr; } }

.choice-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .choice-grid.c3 { grid-template-columns: repeat(3, 1fr); } .choice-grid.c2 { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice .box {
  display: block; border: 1.5px solid #d8ccb6; border-radius: 12px; padding: 14px 16px; background: #fffdf9; height: 100%;
}
.choice .box b { display: block; font-size: 17px; }
.choice .box small { color: var(--muted); font-size: 13px; line-height: 1.5; display: block; margin-top: 2px; }
.choice input:checked + .box { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--pearl)); box-shadow: inset 0 0 0 1px var(--red); }
.choice input:focus-visible + .box { outline: 3px solid var(--gold); outline-offset: 2px; }

.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; margin-top: 10px; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--red); flex: none; }
.field.has-err .check { border-color: var(--err); }

.file-drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed #c9b998; border-radius: 12px; background: #fffdf9; }
.file-drop input { max-width: 100%; font-size: 14px; }

.form-nav {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  padding: 12px 0 14px; margin-top: 18px;
  background: linear-gradient(180deg, rgba(246, 239, 226, 0), var(--paper) 30%);
}
.form-nav .btn { flex: 1; }
.form-nav .btn-ghost { flex: 0 0 auto; }
.fill-demo { font-size: 13px; }

.summary { display: grid; gap: 0; margin: 0; }
.summary > div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; word-break: break-word; }
.summary-group { margin-top: 16px; }
.summary-group h3 { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }

/* ---------- 籤（報名編號） ---------- */
.lot {
  position: relative; margin: 22px auto 0; max-width: 420px;
  background: linear-gradient(180deg, #fff 0%, #fff8ec 100%);
  border-radius: 6px 6px 18px 18px; border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 26px 22px 22px; text-align: center;
}
.lot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--red); border-radius: 6px 6px 0 0; }
.lot .no { font-size: clamp(28px, 8vw, 38px); font-weight: 900; letter-spacing: .08em; color: var(--red-deep); font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.lot .stamp { position: absolute; right: 14px; top: 20px; width: 64px; height: 64px; border: 2.5px solid var(--red); color: var(--red); border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 15px; line-height: 1.15; transform: rotate(-8deg); opacity: .85; }

/* ---------- 查詢狀態 ---------- */
.status-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.status-badge { font-size: 14px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.st-received { background: var(--sea-soft); color: var(--sea); }
.st-review { background: var(--paper-2); color: var(--ink-2); }
.st-fix { background: var(--warn-soft); color: var(--warn); }
.st-short { background: color-mix(in srgb, var(--red) 12%, var(--pearl)); color: var(--red-deep); }
.st-wait { background: var(--gold-soft); color: var(--gold); }
.st-rej { background: #eee; color: #555; }
.st-ok { background: var(--ok-soft); color: var(--ok); }
.progress { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.progress li { text-align: center; font-size: 12px; color: var(--muted); }
.progress li::before { content: ""; display: block; height: 6px; border-radius: 99px; background: var(--line); margin-bottom: 6px; }
.progress li.done::before { background: var(--gold); }
.progress li.cur::before { background: var(--red); }
.progress li.cur { color: var(--red); font-weight: 700; }

/* ---------- 紅榜（結果） ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; margin: 18px -16px 0; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.tabs button {
  flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.tabs button .lock { opacity: .6; margin-left: 4px; font-size: 12px; }
.board {
  margin-top: 10px; border-radius: 18px; padding: 22px 18px 26px;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(232, 197, 126, .22), transparent 60%),
    linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  color: #fff; box-shadow: 0 16px 32px -20px rgba(78, 15, 18, .9);
}
.board h2 { color: var(--gold-2); text-align: center; letter-spacing: .2em; }
.board .meta { text-align: center; font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.board .rule { margin: 14px auto 0; max-width: 560px; font-size: 13px; background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px 12px; color: var(--ink); text-align: center; }
.names { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); margin-top: 18px; }
.name {
  background: rgba(255, 248, 230, .96); color: var(--ink); border-radius: 10px; padding: 9px 10px; position: relative;
}
.name b { display: block; font-size: 17px; letter-spacing: .06em; }
.name small { color: var(--muted); font-size: 12px; }
.name .flag { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 800; color: var(--red-deep); }
.name.gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold-2)); }
.board h3 { color: var(--gold-2); margin-top: 22px; font-size: 16px; letter-spacing: .12em; display: flex; gap: 8px; align-items: center; }
.board h3 .cnt { font-size: 12px; background: rgba(0, 0, 0, .2); padding: 1px 8px; border-radius: 99px; color: #fff; letter-spacing: 0; }
.podium { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.podium .name { text-align: center; padding: 12px 6px; }
.podium .medal { font-size: 12px; font-weight: 800; color: var(--red-deep); }
.locked { text-align: center; padding: 40px 12px; }
.locked .big { font-size: 40px; font-weight: 900; color: var(--gold-2); letter-spacing: .1em; }
.swap-note { margin-top: 12px; font-size: 13px; background: rgba(255, 255, 255, .12); border-radius: 10px; padding: 8px 12px; }

/* ---------- Email 預覽 ---------- */
.mail { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; margin-top: 12px; }
.mail-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.mail-head b { color: var(--ink); font-size: 16px; display: block; margin-top: 2px; }
.mail-body { padding: 18px; }
.mail-body .band { height: 6px; background: linear-gradient(90deg, var(--red), var(--gold), var(--sea-2)); border-radius: 99px; margin-bottom: 16px; }
.mail-body p { margin: 0 0 12px; }

/* ---------- 吐司與載入 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14.5px; max-width: calc(100% - 32px);
  transition: all .2s ease; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer.foot { border-top: 1px solid var(--line); padding: 22px 16px 40px; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   海報質感層：依主視覺海報（朱紅／深海分界、金色線描、珍珠、琺瑯鯨魚）調整
   ====================================================================== */
body { background: var(--paper); }
h1, h2, .board h2, .lot .no, .route .num { font-family: var(--display); }
h1, h2, h3 { text-wrap: balance; }
h1 { font-weight: 900; letter-spacing: .06em; }
h2 { font-weight: 900; letter-spacing: .08em; }
.eyebrow { color: var(--red); letter-spacing: .24em; }

/* 五戰隊色帶 */
.ribbon { display: grid; grid-template-columns: repeat(5, 1fr); height: 6px; gap: 2px; background: var(--gold); padding: 0 2px; }
.ribbon i { display: block; }
.ribbon i:nth-child(1) { background: var(--t-black); }
.ribbon i:nth-child(2) { background: var(--t-blue); }
.ribbon i:nth-child(3) { background: var(--t-beige); }
.ribbon i:nth-child(4) { background: var(--t-silver); }
.ribbon i:nth-child(5) { background: var(--t-purple); }

/* 頁首 */
.top { background: rgba(246, 239, 226, .95); border-bottom: 1px solid var(--gold-2); }
.brand-mark { background: var(--sea); box-shadow: inset 0 0 0 1.5px var(--gold); }
.brand-text b { font-family: var(--display); font-weight: 900; }
.nav a[aria-current="page"] { color: var(--red); background: var(--pearl); box-shadow: inset 0 0 0 1px var(--gold-2); }

/* 主視覺 */
.hero {
  padding: 0; margin: 0 -16px; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(180deg, var(--red-deep) 0%, var(--red) 52%, var(--sea) 52.2%, var(--night) 100%);
}
.hero-in { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 34px 20px 300px; }
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 78%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(78, 15, 18, .92) 0%, rgba(78, 15, 18, .7) 42%, rgba(78, 15, 18, 0) 64%);
}
.hero .kicker { color: var(--gold-2); letter-spacing: .26em; font-size: 12.5px; }
.hero h1 {
  font-size: clamp(40px, 12vw, 78px); letter-spacing: .12em; line-height: 1.12; margin-top: 10px;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(78, 15, 18, .45));
}
.hero h1 span { display: block; color: transparent; }
.hero .sub { color: var(--ink); }
.tag { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(232, 197, 126, .55); color: var(--gold-2); }
.countdown div { background: rgba(14, 51, 80, .72); box-shadow: inset 0 0 0 1px rgba(232, 197, 126, .45); }
.countdown b { font-family: var(--display); color: var(--gold-2); }
.hero-frame { display: none; }
@media (min-width: 880px) {
  .hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 48px 24px 56px; }
  .hero-art { display: none; }
  .hero::after { background: radial-gradient(80% 90% at 20% 30%, rgba(78, 15, 18, .55), transparent 70%); }
  .hero-frame {
    display: block; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%;
    box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px rgba(0, 0, 0, .25), 0 0 0 8px var(--gold-2), 0 30px 60px -24px rgba(0, 0, 0, .7);
  }
  .hero-frame img { width: 100%; height: 100%; object-fit: cover; }
}

/* 按鈕 */
.btn-primary { background: var(--red); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(232, 197, 126, .55), 0 8px 18px -10px rgba(78, 15, 18, .9); }
.btn-primary:hover { background: var(--red-deep); }
.btn-gold { background: var(--foil); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(138, 100, 36, .35), 0 8px 18px -10px rgba(138, 100, 36, .8); }
.btn-ghost { background: var(--pearl); box-shadow: inset 0 0 0 1.5px var(--gold-2); }
.btn-ghost-light { box-shadow: inset 0 0 0 1.5px rgba(232, 197, 126, .7); color: var(--gold-2); }

/* 區塊標題：金色雙線 */
.section-head h2 { display: flex; align-items: center; gap: 12px; }
.section-head h2::after { content: ""; width: 48px; height: 6px; border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); }

/* 卡片 */
.card { background: var(--pearl); border-color: var(--line); box-shadow: var(--shadow); }
.track-card::before { width: 100%; height: 5px; inset: 0 0 auto 0; background: var(--red); }
.track-card.art::before { background: var(--sea); }
.track-card.art .btn-primary { background: var(--sea) !important; }
.pill.red { background: color-mix(in srgb, var(--red) 12%, var(--pearl)); color: var(--red-deep); }
.pill.sea { background: var(--sea-soft); color: var(--sea); }

/* 兩條路線 */
.route { position: relative; overflow: hidden; color: #fff; border: 0; }
.route.judge { background: linear-gradient(160deg, var(--sea), var(--night)); box-shadow: inset 0 0 0 1px var(--gold); }
.route.pop { background: linear-gradient(160deg, var(--red), var(--red-deep)); box-shadow: inset 0 0 0 1px var(--gold); }
.route .num { color: transparent !important; background: var(--foil); -webkit-background-clip: text; background-clip: text; font-size: 52px; }
.route h3 { color: var(--gold-2); }
.route .muted { color: var(--ink) !important; }
.route::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #efe6d8 45%, #cbbca6 70%, transparent 72%); opacity: .18; }

/* 時程 */
.timeline li.now { background: linear-gradient(90deg, color-mix(in srgb, var(--red) 10%, var(--pearl)), transparent); }
.timeline li.now .d { color: var(--red); }

/* 表單步驟：五戰隊色 */
.stepper span.done:nth-child(5n+1) { background: var(--t-black); }
.stepper span.done:nth-child(5n+2) { background: var(--t-blue); }
.stepper span.done:nth-child(5n+3) { background: var(--t-beige); }
.stepper span.done:nth-child(5n+4) { background: var(--t-silver); }
.stepper span.done:nth-child(5n+5) { background: var(--t-purple); }
.stepper span.cur { background: var(--foil); }
.input, select.input, textarea.input { background: var(--pearl); border-color: #d9c9a8; }
.choice .box { background: var(--pearl); border-color: #d9c9a8; }
.choice input:checked + .box { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--pearl)); }
.check { background: var(--paper); }

/* 籤 */
.lot { background: linear-gradient(180deg, var(--pearl), var(--gold-soft)); border: 1px solid var(--gold-2); }
.lot::before { background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-deep)); height: 12px; }
.lot::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 60%; height: 4px; background: var(--foil); border-radius: 4px 4px 0 0; }
.lot .no { color: var(--red-deep); }

/* 紅榜 */
.board {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(232, 197, 126, .22), transparent 60%),
    linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 7px var(--red-deep), inset 0 0 0 8px rgba(232, 197, 126, .6), 0 22px 40px -24px rgba(78, 15, 18, .9);
  padding: 28px 20px 30px;
}
.board h2 { color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; letter-spacing: .24em; font-size: clamp(22px, 5vw, 30px); }
.board h3 { color: var(--gold-2); font-family: var(--display); }
.name { background: var(--pearl); box-shadow: inset 0 0 0 1px rgba(138, 100, 36, .45); }
.name b { font-family: var(--display); font-weight: 900; }
.name.gold { background: linear-gradient(160deg, var(--gold-soft), var(--gold-2)); }
.podium { align-items: end; }
.podium .p1 { padding-top: 22px; padding-bottom: 18px; }
.podium .p1 b { font-size: 21px; }
.locked .big { color: transparent; background: var(--foil); -webkit-background-clip: text; background-clip: text; font-family: var(--display); }

/* 模擬工具列 */
.simbar { background: var(--night); }
.simbar button[aria-pressed="true"] { background: var(--foil); border-color: var(--gold); color: var(--ink); }

footer.foot { border-top: 1px solid var(--gold-2); }

/* 長標籤（如「冠軍・台南觀光大使」）放在名字上方，避免壓到名字 */
.name.wide { padding-top: 24px; }

/* ======================================================================
   深色舞台層（2026-10-20）：把只適合淺底的寫死顏色改成深色版
   ====================================================================== */
.top { background: rgba(6, 17, 31, .92); border-bottom-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.brand-short { display: none; }
@media (max-width: 560px) { .brand-full { display: none; } .brand-short { display: inline; } }
.nav a[aria-current="page"], .eyebrow, .timeline li.now .d, .progress li.cur, .lot .no { color: var(--gold); }
.req { color: var(--err); }
.hero h1 { font-size: clamp(28px, 7.6vw, 48px); letter-spacing: .06em; }
.hero h1 span { font-size: 1em; }
.hero .h1-sub { margin: 8px 0 0; color: var(--gold); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.btn-primary, .btn-primary:hover { color: var(--ink); }
.btn-gold, .simbar button[aria-pressed="true"], .tabs button[aria-selected="true"] { color: #1b1a22; }
.tabs button { background: var(--pearl); }
.tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); }
.toast { background: var(--ink); color: #1b1a22; }
.simbar { border-bottom: 1px solid var(--line); }
.pill.red, .pill.sea, .st-short, .st-received, .note.sea { color: var(--ink); }
.st-rej { background: var(--line); color: var(--muted); }
.note.warn, .note.err, .note.ok { color: var(--ink); border-left: 3px solid; }
.note.warn { border-color: var(--warn); } .note.err { border-color: var(--err); } .note.ok { border-color: var(--ok); }
.input, select.input, textarea.input, .choice .box, .file-drop { background: var(--paper); border-color: var(--field-line); }
.field.has-err .input { background: var(--err-soft); }
.choice input:checked + .box { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.check input { accent-color: var(--gold); }
.lot .stamp { border-color: #ff5263; color: #ff5263; }
.name .flag { color: var(--gold); }
.name.gold { background: var(--gold); color: #1b1a22; }
.name.gold small, .name.gold .flag, .podium .medal { color: #4e0f12; }
.mail { background: var(--pearl); }

/* 2026-10-26 五個細節：等寬數字格子、回饋提示 Q 彈 */
.dg { display: inline-block; width: .52em; text-align: center; font-style: normal; }
.toast { transition: opacity .18s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1); }

/* 同心圓角（規範 9.2）：內層圓角＝外層圓角－內距。卡片內距 20，外層上限 24，所以卡片 24、卡片裡的欄位 4。 */
.card { border-radius: 24px; }
.card .input, .card .check, .card .choice .box, .card .file-drop { border-radius: 4px; }

/* 報名條款：小字、可捲動，捲到底才能勾選 */
.terms { max-height: 280px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.03); font-size: 12px; line-height: 1.75; color: var(--muted); overscroll-behavior: contain; }
.terms:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.terms h4 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.terms h5 { margin: 14px 0 4px; font-size: 12.5px; color: var(--ink); }
.terms p, .terms ol { margin: 0 0 6px; }
.terms ol { padding-left: 1.4em; }
.terms .t-warn { color: var(--gold); font-weight: 700; }
.terms .t-end { text-align: center; margin-top: 12px; }
.check input:disabled + span { opacity: .55; }