/* 問卷站共用樣式。數值都在 :root，對照 CLAUDE.md「設計定案」。 */
:root{
  /* 顏色（沿用分享會簡報） */
  --bg:#F6F5F1;
  --card:#FFFFFF;
  --ink:#2B2622;
  --muted:#6F6C66;
  --tone:#E9E6DD;
  --agent:#0ABAB5;      /* 選中、長條 */
  --agent-lt:#D6F3F2;
  --you:#EDAA1A;        /* 已投提示 */
  --you-lt:#FBEFD2;
  --hot:#D97757;        /* 錯誤 */
  /* 字型 */
  --f:"Yuanti TC","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  /* 字級（手機） */
  --fs-title:32px;
  --fs-q:24px;
  --fs-btn:20px;
  --fs-sm:16px;
  /* 尺寸 */
  --btn-h:64px;
  --submit-h:68px;
  --gap:10px;
  --pad:20px;
  --r-sm:8px;
  --r:16px;
  --r-lg:24px;
  --max-w:560px;
  --huzi-w:180px;
  /* 投影（結果頁，舞台 1600×900，跟簡報同一套字級） */
  --st-fs-num:104px;
  --st-fs-title:64px;
  --st-fs-h:34px;
  --st-fs-row:28px;
  --st-fs-sm:22px;
  --st-pad-x:100px;
  --st-pad-y:72px;
  --mascot-h:150px;
}

*{box-sizing:border-box;margin:0}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--f);
  line-height:1.45;-webkit-tap-highlight-color:transparent;
}
[hidden]{display:none !important}

/* 試用模式提示 */
.trial{
  background:var(--you-lt);color:var(--ink);font-size:var(--fs-sm);
  text-align:center;padding:8px var(--pad);
}

/* ---------- 投票頁 ---------- */
.vote{max-width:var(--max-w);margin:0 auto;padding:28px var(--pad) calc(var(--submit-h) + 48px + env(safe-area-inset-bottom))}
.vote header{margin-bottom:24px}
.vote h1{font-size:var(--fs-title);font-weight:700;line-height:1.25}
.vote .lead{color:var(--muted);font-size:var(--fs-sm);margin-top:6px}

.q{border:0;padding:0;margin:0 0 28px}
.q legend{font-size:var(--fs-q);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.q legend .n{
  display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:var(--bg);font-size:var(--fs-sm);flex:none;
}
.q.done legend .n{background:var(--agent)}
.opts{display:grid;gap:var(--gap)}
.opts.c2{grid-template-columns:1fr 1fr}
.opts.c3{grid-template-columns:1fr 1fr 1fr}
.opts .gtitle{grid-column:1 / -1;font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:6px 0 -2px}
.opts .gtitle:first-child{margin-top:0}
.q .hint{font-size:var(--fs-sm);color:var(--muted);background:var(--card);border:2px dashed var(--tone);border-radius:var(--r);padding:18px 16px;text-align:center}
.q{scroll-margin-top:16px}
.nick{margin:0 0 28px}
.nick{display:grid;gap:var(--gap)}
.nick .nick-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-q);font-weight:700;margin-bottom:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nick .opt-tag{font-size:var(--fs-sm);font-weight:500;color:var(--muted);background:var(--tone);border-radius:999px;padding:2px 10px}
.nick input{width:100%;min-height:var(--btn-h);border:3px solid transparent;border-radius:var(--r);background:var(--card);
  padding:0 16px;font:500 max(16px, var(--fs-btn))/1.2 var(--f);color:var(--ink)}
.nick input::placeholder{color:var(--muted);font-size:var(--fs-sm)}
.nick input:focus{outline:none;border-color:var(--agent)}

.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;inset:0;margin:0;pointer-events:none}
.opt span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  height:100%;min-height:var(--btn-h);padding:10px 12px;border-radius:var(--r);
  background:var(--card);font-size:var(--fs-btn);font-weight:500;
  border:3px solid transparent;cursor:pointer;user-select:none;
  transition:background .15s,border-color .15s,transform .1s;
}
.opt span:active{transform:scale(.97)}
.opt input:checked + span{background:var(--agent-lt);border-color:var(--agent);font-weight:700}
.opt input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}

/* 底部送出列 */
.bar{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg);border-top:1px solid var(--tone);
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
}
.bar .in{max-width:var(--max-w);margin:0 auto}
.submit{
  width:100%;min-height:var(--submit-h);border:0;border-radius:var(--r);
  background:var(--ink);color:var(--bg);font:700 22px/1.2 var(--f);cursor:pointer;
}
.submit:disabled{background:var(--tone);color:var(--muted);cursor:default}
.err{color:var(--hot);font-size:var(--fs-sm);font-weight:700;text-align:center;margin-bottom:8px}

/* 投好了 */
.done-view{
  max-width:var(--max-w);margin:0 auto;min-height:100vh;min-height:100dvh;
  padding:40px var(--pad);display:flex;flex-direction:column;justify-content:center;text-align:center;
}
/* 胡籽：尾巴一層、身體一層疊起來（同一張畫布），尾巴翻進來擺兩下就停 */
.huzi{position:relative;width:var(--huzi-w);height:calc(var(--huzi-w) * 820 / 760);margin:0 auto 16px}
.huzi img{position:absolute;inset:0;width:100%;height:100%}
.huzi .tail{transform-origin:59.2% 87.8%}   /* 尾巴根部，只往身體這邊擺 */
.done-view h1{font-size:var(--fs-title);font-weight:700}
.done-view p{font-size:var(--fs-btn);color:var(--muted);margin-top:12px}
.done-view .mine{
  margin-top:28px;background:var(--card);border-radius:var(--r);padding:16px 20px;
  font-size:var(--fs-sm);color:var(--ink);text-align:left;
}
.done-view .mine dt{color:var(--muted)}
.done-view .mine dd{font-weight:700;margin:0 0 6px}
.done-view .mine dd:last-child{margin-bottom:0}

/* ---------- 結果頁（投影） ---------- */
body.results{overflow:hidden;height:100vh;height:100dvh}
.stage{
  position:absolute;left:50%;top:50%;width:1600px;height:900px;
  transform:translate(-50%,-50%) scale(var(--k,1));
  padding:var(--st-pad-y) var(--st-pad-x);
  display:grid;grid-template-columns:1fr 480px;grid-template-rows:auto 1fr;column-gap:60px;row-gap:28px;
}
.stage .trial{position:absolute;left:0;right:0;top:0;font-size:var(--st-fs-sm);padding:6px}
.stage header{grid-column:1 / -1;display:flex;align-items:flex-end;justify-content:space-between}
.stage h1{font-size:var(--st-fs-title);font-weight:700;line-height:1.1}
.stage .count{display:flex;align-items:baseline;gap:14px;font-size:var(--st-fs-h);font-weight:700;color:var(--muted)}
.stage .count b{font-size:var(--st-fs-num);line-height:.9;color:var(--ink)}
.stage .stale{position:absolute;right:var(--st-pad-x);bottom:24px;font-size:var(--st-fs-sm);color:var(--muted)}

.panel{background:var(--card);border-radius:var(--r-lg);padding:24px 32px}
.panel h2{font-size:var(--st-fs-h);font-weight:700;margin-bottom:14px}
.shops-panel{display:flex;flex-direction:column;min-height:0}
.rows{flex:1;display:flex;flex-direction:column;justify-content:space-around;min-height:0}
.row{line-height:1.2;display:grid;grid-template-columns:var(--name-w,320px) 1fr 64px;align-items:center;gap:16px;font-size:var(--st-fs-row)}
.row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .track{height:26px;background:var(--bg);border-radius:var(--r-sm);overflow:hidden}
.row .fill{height:100%;width:0;background:var(--agent);border-radius:var(--r-sm)}
.row .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.row.zero .n{color:var(--muted);font-weight:400}

.side{display:flex;flex-direction:column;gap:20px;min-height:0}
.side .panel{padding:18px 32px}
.side .panel h2{margin-bottom:8px}
.side .panel .rows{gap:6px}
.side .row{--name-w:120px;line-height:1.25}

.side .mascot{flex:none;height:var(--mascot-h);position:relative}
.side .mascot .huzi{position:absolute;right:0;bottom:-24px;margin:0;--huzi-w:150px}
.side .mascot .say{
  position:absolute;right:165px;bottom:30px;background:var(--card);border:3px solid var(--ink);
  border-radius:40px;padding:14px 26px;font-size:var(--st-fs-sm);font-weight:700;white-space:nowrap;
}

@media (min-width:600px){
  .opts.c2{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:no-preference){
  .done-view:not([hidden]) .huzi .tail{animation:wag 2s ease-in-out .3s}
  .row .fill{transition:width .8s ease-out}
  .mascot.wag .huzi .tail{animation:wag 2s ease-in-out}   /* 有新票進來就擺一次 */
}
@keyframes wag{0%,100%{transform:none}30%,70%{transform:rotate(-6deg)}50%{transform:rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){
  .opt span{transition:none}
  .opt span:active{transform:none}
}