/* 活動當天站（DAY-OF.md）：只作用在 body.night 與大螢幕 body.board-night，不影響報名站。 */

body.night .neg { color: var(--danger); }
body.night .ok { color: var(--ok); }
body.night .muted { color: var(--ink-2); }
body.night .lead { text-align: center; font-size: 18px; font-weight: 700; color: var(--orange); margin-top: 6px; }
body.night .notice { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--cream-2); color: var(--ink-2); font-weight: 500; text-align: center; }
body.night .notice.ok { background: #e3f3e8; color: #1f6b41; font-weight: 700; }
body.night .center { text-align: center; }
body.night .err { color: var(--danger); font-weight: 700; margin-top: 6px; }
body.night .btn-sm { min-height: 44px; margin-top: 0; padding: 6px 14px; font-size: 16px; width: auto; box-shadow: 0 3px 0 var(--navy); }
body.night .sub-h { margin: 18px 0 8px; font-size: 17px; color: var(--navy); }
body.night .my-code { text-align: center; margin-top: 10px; font-size: 16px; color: var(--ink-2); }
body.night .my-code b { font-size: 26px; letter-spacing: 0.12em; color: var(--navy); }

/* 底部選單：中間的掃描鍵浮起來 */
.night-nav button.scan-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; padding: 0 2px 6px;
  font: 700 14px var(--font); color: #4a2a10; background: none; border: 0; cursor: pointer; position: relative;
}
.night-nav .scan-dot {
  display: grid; place-items: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--navy); box-shadow: 0 4px 0 var(--navy);
}
.night-nav .scan-dot .ic { width: 30px; height: 30px; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.night-nav button.scan-tab:active .scan-dot { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.night-nav button.scan-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 12px; }

/* 主頁 */
.nh-head { display: flex; align-items: center; gap: 12px; }
.nh-head .nh-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--team, var(--navy)); object-fit: cover; }
.nh-name { font-size: 22px; font-weight: 900; color: #4a2a10; }
.nh-team { display: inline-block; margin-top: 4px; padding: 2px 12px; border-radius: 999px; background: var(--team, var(--navy)); color: #fff; font-weight: 700; font-size: 15px; }
.nh-team.none { background: #b9a888; }
.nh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.nh-stat { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--cream-2); text-decoration: none; color: var(--ink-2); text-align: center; }
.nh-stat > span { font-weight: 700; font-size: 15px; }
.nh-stat b { font-size: 34px; font-weight: 900; color: var(--orange); line-height: 1.1; font-variant-numeric: tabular-nums; }
.nh-stat b small { font-size: 16px; color: var(--ink-2); }
.nh-stat > small { font-size: 13px; }
.nh-alert { display: grid; gap: 6px; margin-top: 14px; padding: 14px; border-radius: 14px; background: #fde3c8; border: 2px dashed var(--orange); text-align: center; }
.nh-alert.soft { background: #e8f1fb; border-color: var(--sea); }
.nh-alert b { font-size: 18px; color: #4a2a10; }
.nh-alert span { color: var(--ink-2); font-size: 16px; }
.nh-tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.nh-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fffaf0; border: 2px solid var(--field); text-decoration: none; color: inherit; min-height: 64px; }
.nh-task img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.nh-task .t { flex: 1; min-width: 0; display: grid; }
.nh-task .t b { font-size: 17px; color: #4a2a10; }
.nh-task .t small { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.nh-task .go, .nh-task .done, .nh-task .wait { flex: none; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.nh-task .go { background: var(--navy); color: #fff; }
.nh-task .go.hot { background: var(--orange); }
.nh-task .done { background: #e3f3e8; color: #1f6b41; }
.nh-task .wait { background: var(--cream-2); color: var(--ink-2); }

/* 翻牌 */
.tr-who { text-align: center; font-size: 18px; color: var(--ink-2); }
.flip { perspective: 900px; width: min(100%, 300px); height: 190px; margin: 14px auto 18px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms var(--ease); }
.flip.open .flip-in { transform: rotateY(180deg); }
.flip.flat .flip-in { transition: none; }
.flip-front, .flip-back { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 14px; border-radius: 18px; border: 3px solid var(--navy); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 0 var(--navy); text-align: center; }
.flip-front { background: var(--orange); color: #fff; font-size: 30px; font-weight: 900; line-height: 1.2; }
.flip-back { transform: rotateY(180deg); }
.is-treat .flip-back { background: #fff1c2; color: #6a4200; }
.is-trick .flip-back { background: #3a1858; color: #f3d27a; }
.flip-back b { font-size: 40px; font-weight: 900; }
.flip-back span { font-size: 17px; font-weight: 700; }
.tr-wanted { text-align: center; font-size: 16px; margin-top: 8px; }
.tr-wanted b { color: var(--danger); font-weight: 900; margin-left: 4px; }

/* 通緝令 */
.wanted { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: #f4e3bd; border: 3px solid #8a5a2b; }
.wanted .cell { position: relative; aspect-ratio: 1; display: grid; place-content: center; gap: 2px; padding: 4px; border: 2px dashed #b08a55; border-radius: 10px; background: #fffaf0; text-align: center; overflow: hidden; }
.wanted .cell .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.wanted .cell.free { background: var(--navy); border-style: solid; border-color: var(--navy); color: var(--yellow); font-size: 20px; }
.wanted .cell.caught { border-style: solid; border-color: #8a5a2b; }
.wanted .cell.caught b { font-size: 17px; line-height: 1.2; word-break: break-all; }
.wanted .stamp-red { position: absolute; top: 4px; right: 4px; padding: 0 4px; border: 2px solid var(--danger); border-radius: 5px; color: var(--danger); font-size: 11px; font-weight: 900; transform: rotate(8deg); background: rgba(255, 250, 240, 0.9); }
.wanted .cell.caught { padding-top: 18px; }
.wanted .cell.caught .lbl { font-size: 11px; }
.wanted-sum { text-align: center; margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.wanted-sum b { color: var(--orange); font-size: 20px; }
body.night ul.rules { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* 鬼火 */
.flame-big { position: relative; width: 150px; height: 170px; margin: 6px auto 4px; --s: calc(0.45 + var(--lv) * 0.09); }
.flame-big span { position: absolute; left: 50%; bottom: 0; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; transform-origin: 50% 100%; transform: translateX(-50%) scale(var(--s)); }
.flame-big .f1 { width: 120px; height: 160px; background: radial-gradient(circle at 50% 70%, #ffd94a, #f26a1b 70%); opacity: calc(0.25 + var(--lv) * 0.12); }
.flame-big .f2 { width: 80px; height: 110px; background: radial-gradient(circle at 50% 70%, #fff6c8, #ffd94a 70%); opacity: calc(0.2 + var(--lv) * 0.13); }
.flame-big .f3 { width: 40px; height: 56px; background: #fffdf2; opacity: calc(var(--lv) * 0.16); }
.flame-big.lit span { animation: flicker 1.4s ease-in-out infinite alternate; }
.flame-big.lit .f2 { animation-delay: 0.2s; }
@keyframes flicker { from { transform: translateX(-50%) scale(1, 1); } to { transform: translateX(-50%) scale(1.06, 0.95) rotate(2deg); } }
.seeds { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.seeds span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--field); font-weight: 900; color: var(--ink-2); }
.seeds span.on { border: 0; background: radial-gradient(circle at 50% 60%, #ffd94a, #f26a1b); color: #fff; }

/* 投票 */
.vote-join { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--cream-2); font-weight: 700; color: #4a2a10; }
.vote-join .btn { width: auto; margin: 0; min-height: 44px; padding: 6px 14px; font-size: 16px; }
.cands { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cands li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fffaf0; border: 2px solid var(--field); }
.cands li.picked { border-color: var(--orange); background: #fff1e6; }
.cands .cand-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.cands .cn { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; color: #4a2a10; border-left: 6px solid var(--tc); padding-left: 8px; }
.cands .cv { font-size: 16px; white-space: nowrap; }
.cands .cv.ok { color: var(--ok); }
.cands form { margin: 0; }

/* 排名 */
.team-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.team-bars li { display: grid; grid-template-columns: 26px 54px 1fr 54px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; }
.team-bars li.mine { background: var(--cream-2); outline: 2px solid var(--orange); }
.team-bars .tr { font-weight: 900; color: var(--ink-2); text-align: center; }
.team-bars .tn { font-weight: 900; font-size: 17px; }
.team-bars .tb { height: 16px; border-radius: 8px; background: #efe1c1; overflow: hidden; }
.team-bars .tb i { display: block; height: 100%; border-radius: 8px; transition: width 600ms var(--ease); }
.team-bars .tp { text-align: right; font-size: 18px; font-variant-numeric: tabular-nums; }
.me-rank { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--navy); color: #fff; }
.me-rank b { font-size: 18px; }
.me-rank .neg { color: #ff9c9c; }
.day-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.day-top li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.day-top li.mine { background: #fff1e6; }
.day-top .r { width: 26px; text-align: center; font-weight: 900; color: var(--ink-2); }
.day-top .av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.day-top .n { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-top .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.day-top b { font-variant-numeric: tabular-nums; }

/* 抽獎券 */
.tk-total { display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--ink-2); font-weight: 700; }
.tk-total b { font-size: 56px; font-weight: 900; color: var(--orange); line-height: 1; font-variant-numeric: tabular-nums; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tk-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed var(--field); }
.tk-list li span { display: grid; font-weight: 700; color: #4a2a10; }
.tk-list li small { font-weight: 500; font-size: 13px; color: var(--ink-2); }
.tk-list li b { font-size: 20px; color: var(--navy); font-variant-numeric: tabular-nums; }

/* 我的 QR */
.my-qr { width: min(100%, 260px); margin: 6px auto 0; padding: 12px; background: #fff; border: 6px solid var(--navy); border-radius: 18px; }
.my-qr svg { display: block; width: 100%; height: auto; }

/* 被搗蛋提示 */
.tricked { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(14, 35, 64, 0.72); }
.tricked-card { width: min(100%, 360px); padding: 22px 18px 18px; border-radius: 22px; background: var(--cream); border: 3px solid var(--navy); text-align: center; display: grid; gap: 8px; justify-items: center; animation: shake 500ms var(--ease); }
.tricked-card h2 { font-size: 26px; color: #3a1858; margin: 0; }
.tricked-card p { margin: 0; font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.tricked-card .hint { font-weight: 700; color: var(--orange); }
.tricked-actions { width: 100%; display: grid; gap: 4px; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* 工作人員 */
.staff-search { display: flex; gap: 8px; margin-top: 12px; }
.staff-search input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; font-size: 17px; border: 2px solid var(--field); border-radius: 12px; background: #fffaf0; }
.staff-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.staff-results a { display: grid; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 2px solid var(--field); text-decoration: none; color: #4a2a10; font-weight: 700; }
.staff-results small { font-weight: 500; color: var(--ink-2); }
.staff-card { margin-top: 14px; padding: 14px; border-radius: 16px; background: #fffaf0; border: 3px solid var(--team, var(--navy)); display: grid; gap: 10px; }
.staff-card form { margin: 0; }
.staff-card .btn { margin-top: 0; }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.sc-head div { display: grid; }
.sc-head b { font-size: 20px; color: #4a2a10; }
.sc-head small { color: var(--ink-2); }
.sc-state { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-state li { padding: 3px 10px; border-radius: 999px; background: var(--cream-2); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.sc-state li.ok { background: #e3f3e8; color: #1f6b41; }
.sc-state li.warn { background: #fde3c8; color: #a24a0a; }

/* 主持人控制台（平板／筆電） */
body.host .scene, body.host .sky { display: none; }
body.host { background: #f6efe0; }
.host { width: min(100%, 1100px); margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-left)) 40px; color: #1d1a16; }
.host-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.host-head h1 { font-size: 26px; color: var(--navy); }
.host-head a { font-weight: 700; color: var(--navy); }
.host-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #e2d4b8; font-size: 15px; }
.host-stats b { font-size: 20px; color: var(--orange); font-variant-numeric: tabular-nums; }
.host-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.host-grid section { padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #e2d4b8; display: grid; gap: 8px; align-content: start; min-width: 0; }
.host-grid h2 { font-size: 18px; color: var(--navy); margin: 0; }
.host .muted { color: #6b5d4b; font-size: 14px; margin: 0; }
.host-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.host-row form { margin: 0; }
.host .btn { width: auto; margin: 0; min-height: 44px; padding: 6px 14px; font-size: 15px; }
.host-title { display: flex; gap: 8px; }
.host-title input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 16px; border: 2px solid #d9c9a6; border-radius: 10px; }
.host-teams, .host-draws { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.host-teams li { display: flex; align-items: center; gap: 8px; }
.host-teams i { width: 12px; height: 12px; border-radius: 50%; }
.host-teams b { margin-left: auto; font-variant-numeric: tabular-nums; }
.host-draws li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed #e2d4b8; }
.host-draws li.redrawn span { text-decoration: line-through; opacity: 0.6; }
.host-draws small { color: #6b5d4b; }
.host-draws em { margin-left: auto; color: var(--danger); font-style: normal; font-size: 13px; }
.host-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.host-table th, .host-table td { padding: 10px; border-bottom: 1px solid #eee2c8; text-align: left; }
.host-table .sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }

/* 大螢幕（投影 16:9） */
body.board-night { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #1d4677, #0e2340 70%); color: #fff6e0; font-family: "Noto Sans TC", sans-serif; overflow: hidden; }
.bn-head { display: flex; align-items: center; justify-content: space-between; padding: 2.5vh 4vw 1vh; }
.bn-head img { height: 9vh; width: auto; }
.bn-head span { font-size: 5vh; font-weight: 900; color: #ffd94a; }
body.board-night main { padding: 1vh 4vw 3vh; }
.bn-teams, .bn-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4vh; }
.bn-teams li, .bn-votes li { display: grid; grid-template-columns: 5vh 14vw 1fr 10vw; align-items: center; gap: 1.5vw; font-size: 4.2vh; font-weight: 900; }
.bn-votes li { grid-template-columns: 20vw 1fr 10vw; }
.bn-teams li.top { background: rgba(255, 217, 74, 0.14); border-radius: 1.5vh; }
.bn-teams .r { text-align: center; color: #c9d6ea; }
.bn-teams .n { display: flex; align-items: center; gap: 0.8vw; color: #fff6e0; }
.bn-teams .n i { width: 2.6vh; height: 2.6vh; border-radius: 50%; flex: none; }
.bn-teams .b, .bn-votes .b { height: 3.6vh; border-radius: 1.8vh; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bn-teams .b i, .bn-votes .b i { display: block; height: 100%; border-radius: 1.8vh; transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.bn-teams b, .bn-votes b { text-align: right; font-variant-numeric: tabular-nums; }
.bn-votes li.win { color: #ffd94a; }
.bn-votes .empty { display: block; font-size: 4vh; color: #c9d6ea; }
.bn-feed { margin-top: 3vh; font-size: 3.4vh; color: #c9d6ea; min-height: 5vh; }
section[data-bn="vote"] h2 { font-size: 4vh; color: #c9d6ea; margin: 0 0 2vh; }
.bn-draw { display: grid; justify-items: center; gap: 1vh; margin-top: 6vh; }
.bn-spin { font-size: 14vh; font-weight: 900; color: #fff6e0; text-shadow: 0 1vh 0 rgba(0, 0, 0, 0.3); min-height: 16vh; }
.bn-spin.landed { animation: pop 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.bn-team { font-size: 4.4vh; font-weight: 900; color: #fff; min-height: 6vh; padding: 0.4vh 2.4vw; border-radius: 4vh; }
.bn-winners { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1vh 2vw; margin: 5vh 0 0; padding: 0; font-size: 3.4vh; font-weight: 700; }
.bn-winners li { display: flex; align-items: center; gap: 0.6vw; }
.bn-winners li i, .bn-feed i { display: inline-block; width: 2.2vh; height: 2.2vh; border-radius: 50%; vertical-align: middle; margin: 0 0.4vw; }
.bn-winners li.redrawn { opacity: 0.45; text-decoration: line-through; }
.bn-feed b { color: #fff6e0; }
.bn-winners em { font-style: normal; font-size: 2.4vh; margin-left: 0.5vw; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .flip-in, .team-bars .tb i, .bn-teams .b i, .bn-votes .b i { transition: none; }
  .flame-big.lit span, .tricked-card, .bn-spin.landed { animation: none; }
}

/* 被搗蛋提示開著時，底部選單先收起來（.page 自成圖層，蓋不過固定選單） */
body.night:has(.tricked) .bottom-nav { display: none; }

/* ===== 鬼混通行證（主頁）：姓名欄＋主線／支線各三格，完成蓋章 ===== */
.np-name { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fffaf0; border: 3px solid #8a5a2b; box-shadow: inset 0 0 0 2px #f4e3bd; }
.np-name .np-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--team, var(--navy)); flex: none; }
.np-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 2px; border-bottom: 2px solid #4a2a10; padding-bottom: 2px; }
.np-lbl { font-weight: 900; font-size: 18px; color: #4a2a10; white-space: nowrap; }
.np-who b { font-size: 22px; font-weight: 900; color: #4a2a10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-team { flex: none; padding: 3px 12px; border-radius: 999px; background: var(--team, var(--navy)); color: #fff; font-weight: 900; font-size: 15px; }
.np-team.none { background: #b9a888; }
.np-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.np-stats a { display: grid; justify-items: center; padding: 8px; border-radius: 12px; background: var(--cream-2); text-decoration: none; color: var(--ink-2); }
.np-stats span { font-weight: 700; font-size: 14px; }
.np-stats b { font-size: 28px; font-weight: 900; color: var(--orange); line-height: 1.1; font-variant-numeric: tabular-nums; }
.np-stats b small { font-size: 14px; color: var(--ink-2); }
.np-stats > a > small { font-size: 12px; }

.np-sec { position: relative; margin-top: 26px; padding: 26px 8px 12px; border-radius: 16px; background: #fffaf0; border: 3px dashed #b08a55; }
.np-ribbon { position: absolute; left: 50%; top: -22px; width: 200px; height: 46px; object-fit: fill; transform: translateX(-50%); pointer-events: none; }
.np-sec h2 { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); margin: 0; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 0.1em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.np-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pslot { display: grid; justify-items: center; gap: 2px; padding: 4px 2px 6px; border-radius: 12px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.pslot:active { background: var(--cream-2); }
.pslot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ps-order { font-weight: 900; font-size: 14px; color: #4a2a10; }
.ps-box { position: relative; display: grid; place-items: center; width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 14px; border: 3px solid #e2c48d; background: #fff; }
.pslot.done .ps-box { border-color: #c99a2e; background: #fff6e0; }
.pslot.hot .ps-box { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.25); }
.ps-box img { width: 78%; height: auto; }
.ps-stamp { position: absolute; right: -4px; bottom: 4px; padding: 0 6px; border: 3px solid var(--danger); border-radius: 8px; color: var(--danger); font-size: 16px; font-weight: 900; letter-spacing: 0.08em; background: rgba(255, 250, 240, 0.85); transform: rotate(-14deg); }
.ps-name { font-weight: 900; font-size: 14px; color: #4a2a10; text-align: center; line-height: 1.25; }
.ps-prog { font-size: 12px; color: var(--ink-2); }
.pslot.hot .ps-prog { color: var(--orange); font-weight: 700; }
.np-hint { text-align: center; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.pslot.stamping .ps-stamp { animation: stampdrop 650ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.pslot.stamping .ps-box img { animation: stampfade 650ms ease both; }
@keyframes stampdrop { 0% { transform: rotate(-14deg) scale(2.4); opacity: 0; } 60% { transform: rotate(-14deg) scale(0.92); opacity: 1; } 100% { transform: rotate(-14deg) scale(1); } }
@keyframes stampfade { from { filter: grayscale(1); opacity: 0.4; } to { filter: none; opacity: 1; } }

/* 任務說明頁 */
.task-hero { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; background: var(--cream-2); }
.task-hero .ps-box.big { width: 110px; max-width: none; flex: none; }
.task-hero div { display: grid; }
.task-hero b { font-size: 22px; font-weight: 900; color: #4a2a10; }
.task-hero.done b { color: var(--ok); }
.task-hero span { font-size: 16px; color: var(--ink-2); }
.task-how, .task-reward { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; line-height: 1.6; color: #4a2a10; }
.task-reward li::marker { color: var(--orange); }

@media (prefers-reduced-motion: reduce) { .pslot.stamping .ps-stamp, .pslot.stamping .ps-box img { animation: none; } }

/* 掃描提示（網頁不開相機，改用手機相機或 LINE 掃） */
.scan-hint { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff1e6; border: 2px dashed var(--orange); text-align: left; }
.scan-hint .ic { flex: none; width: 34px; height: 34px; background: var(--orange); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.scan-hint span { display: grid; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.scan-hint b { font-size: 17px; color: #4a2a10; }
.nh-alert .scan-hint { background: #fff; }

/* 工作人員：我在哪個攤位 */
.booth-switch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.booth-switch > span { font-weight: 900; color: #4a2a10; }
.booth-switch button { min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--navy); background: #fff; font: 700 15px var(--font); color: var(--navy); cursor: pointer; }
.booth-switch button.on { background: var(--navy); color: #fff; }

/* 回饋：灰色星星，點到第幾顆就亮到第幾顆 */
.fb-stars { border: 0; margin: 0; padding: 0; text-align: center; }
.fb-stars legend { width: 100%; font-size: 20px; font-weight: 900; color: #4a2a10; margin-bottom: 8px; }
.fb-row { display: flex; justify-content: center; gap: 6px; }
.fb-row label { cursor: pointer; }
.fb-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fb-row span { display: block; font-size: 46px; line-height: 1.1; color: #e2d4b8; transition: transform 150ms var(--ease), color 150ms var(--ease); }
.fb-row label:active span { transform: scale(0.9); }
.fb-row input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.fb-row:has(input[value="1"]:checked) label:nth-child(-n+1) span,
.fb-row:has(input[value="2"]:checked) label:nth-child(-n+2) span,
.fb-row:has(input[value="3"]:checked) label:nth-child(-n+3) span,
.fb-row:has(input[value="4"]:checked) label:nth-child(-n+4) span,
.fb-row:has(input[value="5"]:checked) label:nth-child(-n+5) span { color: #f5b400; text-shadow: 0 2px 0 #c98a00; }
.fb-cap { margin: 4px 0 12px; font-weight: 700; color: var(--orange); min-height: 1.5em; }

/* 回饋問答 */
.fbq-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fbq-back { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--navy); background: #fff; font-size: 26px; line-height: 1; color: var(--navy); cursor: pointer; }
.fbq-back[hidden] { display: block; visibility: hidden; }
.fbq-bar { flex: 1; height: 10px; border-radius: 5px; background: #efe1c1; overflow: hidden; }
.fbq-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--orange); transition: width 350ms var(--ease); }
.fbq-count { font-weight: 900; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fbq:not(.stepped) .fbq-top { display: none; }
.fbq-step { border: 0; margin: 0 0 18px; padding: 0; }
.fbq.stepped .fbq-step { display: none; }
.fbq.stepped .fbq-step.on { display: block; animation: fbqin 320ms var(--ease); }
@keyframes fbqin { from { transform: translateX(18px); } to { transform: none; } }
.fbq-step legend { width: 100%; font-size: 21px; font-weight: 900; color: #4a2a10; text-align: center; margin-bottom: 6px; outline: none; }
.fbq-sub { text-align: center; color: var(--ink-2); font-size: 15px; margin: 0 0 8px; }
.fbq-opts { display: grid; gap: 8px; margin: 8px 0 12px; }
.fbq-opt { display: block; cursor: pointer; }
.fbq-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fbq-opt span { display: flex; align-items: center; min-height: 54px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--field); background: #fffaf0; font-size: 18px; font-weight: 700; color: #4a2a10; transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease); }
.fbq-opt span::after { content: ""; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9b48f; flex: none; }
.fbq-opt input[type="checkbox"] + span::after { border-radius: 6px; }
.fbq-opt input:checked + span { background: #fff1e6; border-color: var(--orange); }
.fbq-opt input:checked + span::after { border-color: var(--orange); background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fbq-opt:active span { transform: scale(0.98); }
.fbq-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.fbq-step .btn { margin-top: 6px; }
.fbq-step textarea { width: 100%; min-height: 110px; padding: 12px; font: 17px/1.6 var(--font); border: 2px solid var(--field); border-radius: 12px; background: #fffaf0; }
@media (prefers-reduced-motion: reduce) { .fbq.stepped .fbq-step.on { animation: none; } .fbq-bar i { transition: none; } }

/* 回饋結果（主持人） */
.fr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-bars li { display: grid; grid-template-columns: minmax(0, 9em) 1fr 32px; align-items: center; gap: 8px; font-size: 15px; }
.fr-bars .o { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-bars .b { height: 12px; border-radius: 6px; background: #efe1c1; overflow: hidden; }
.fr-bars .b i { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.fr-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.fr-comments { grid-column: 1 / -1; }
.fr-comments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fr-comments li { padding: 10px 12px; border-radius: 10px; background: #fffaf0; border: 1px solid #e2d4b8; }
.fr-comments p { margin: 0 0 4px; font-size: 16px; }
.fr-comments small { color: #6b5d4b; }

/* 通行證：攤位格子不能點（工作人員掃名牌蓋章） */
.pslot.static { cursor: default; }
.pslot.static:active { background: none; }
/* 回饋全部同一頁：每題之間用虛線分隔 */
.fbq[data-fbq-one] .fbq-step + .fbq-step { padding-top: 16px; border-top: 2px dashed var(--field); }