/* ---------------------------------------------------------------- 基礎 */
:root{
  --a0:#e21b3c; --a1:#1368ce; --a2:#d89e00; --a3:#26890c;
  --ink:#1a1033; --muted:#6b6386;
  --card:#ffffff; --line:rgba(26,16,51,.10);
  --shadow:0 18px 44px rgba(20,8,50,.28);
  --r:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:#46178f;
  background-image:
    radial-gradient(1100px 700px at 12% -8%, #8f4bff 0%, transparent 60%),
    radial-gradient(900px 600px at 92% 8%, #2f6bff 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 115%, #ff3d81 0%, transparent 60%),
    linear-gradient(160deg,#4a12a0,#2b0b63 70%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.35;
  background-image:
    radial-gradient(circle at 8% 30%, rgba(255,255,255,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.14) 0 5px, transparent 6px),
    radial-gradient(circle at 30% 82%, rgba(255,255,255,.12) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 62%, rgba(255,255,255,.10) 0 6px, transparent 7px);
  background-size:520px 520px, 700px 700px, 620px 620px, 800px 800px;
  animation:drift 60s linear infinite;
}
@keyframes drift{to{background-position:520px 260px,-700px 350px,620px -310px,-800px -400px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 固定一個螢幕高，裡面的 flex 子項才有辦法縮，避免有大圖時內容被擠到畫面外 */
.wrap{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column}
.center{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  align-items:center;padding:20px;gap:18px}
/* 內容比容器高時不能用一般的 center，上緣會溢出到捲不到的地方；
   safe center 會在溢出時自動退回 flex-start。第一行是給不支援 safe 的舊瀏覽器 */
.center{justify-content:center}
.center{justify-content:safe center}
.hide{display:none!important}

/* ---------------------------------------------------------------- 字體 */
.brand{font-weight:900;letter-spacing:-.02em;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.brand-lg{font-size:clamp(34px,7vw,72px)}
h1,h2,h3{margin:0}
.sub{color:rgba(255,255,255,.82);font-size:15px;text-align:center}

/* ---------------------------------------------------------------- 元件 */
.card{
  background:var(--card); border-radius:var(--r); box-shadow:var(--shadow);
  padding:26px; width:100%; max-width:440px;
}
.field{width:100%;font:inherit;font-size:20px;font-weight:800;text-align:center;
  padding:16px 14px;border:3px solid #d7d2e6;border-radius:14px;outline:none;background:#fff;color:var(--ink)}
.field::placeholder{color:#b6b0c9;font-weight:700}
.field:focus{border-color:#7a4bff;box-shadow:0 0 0 4px rgba(122,75,255,.18)}
.field.pin{font-size:30px;letter-spacing:.28em;text-indent:.28em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:900;font-size:18px;color:#fff;cursor:pointer;
  background:#1f1235;border:0;border-radius:14px;padding:15px 22px;width:100%;
  box-shadow:0 5px 0 rgba(0,0,0,.32); transition:transform .06s, box-shadow .06s, filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.32)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 5px 0 rgba(0,0,0,.32)}
.btn.green{background:#26890c}
.btn.pink{background:#e2197f}
.btn.blue{background:#1368ce}
.btn.ghost{background:rgba(255,255,255,.14);box-shadow:none;border:2px solid rgba(255,255,255,.35)}
.btn.sm{width:auto;font-size:15px;padding:11px 18px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  color:#fff;border-radius:999px;padding:8px 16px;font-weight:800;font-size:14px;
  border:1px solid rgba(255,255,255,.22)}

.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-140%);
  background:#1f1235;color:#fff;padding:13px 20px;border-radius:12px;font-weight:800;
  box-shadow:var(--shadow);z-index:99;transition:transform .28s cubic-bezier(.2,1.4,.4,1);max-width:88vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.bad{background:#c8102e}

/* ---------------------------------------------------------------- 答案磚 */
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.ans{
  position:relative;display:flex;align-items:center;gap:14px;
  border:0;border-radius:14px;cursor:pointer;color:#fff;font:inherit;font-weight:900;
  font-size:clamp(16px,2.1vw,26px);text-align:left;padding:20px 22px;min-height:104px;
  box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .07s,box-shadow .07s,opacity .2s,filter .2s;
}
.ans:hover{filter:brightness(1.07)}
.ans:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.ans .shape{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;font-size:26px;line-height:1}
.ans .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.a0{background:var(--a0)} .a1{background:var(--a1)} .a2{background:var(--a2)} .a3{background:var(--a3)}
.ans.dim{opacity:.32;filter:grayscale(.5)}
.ans.win{outline:5px solid #fff;outline-offset:-5px;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
.ans .mark{position:absolute;top:10px;right:12px;font-size:24px;font-weight:900}

/* ---------------------------------------------------------------- 頭像 */
.avatar{display:grid;place-items:center;border-radius:50%;background:#ff5b6e;color:#fff;
  font-size:22px;line-height:1;width:44px;height:44px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);flex:0 0 auto}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:10px;
  max-height:150px;overflow-y:auto;padding:4px;background:#f5f3fb;border-radius:12px}
.emoji-grid button{font-size:22px;background:transparent;border:2px solid transparent;border-radius:10px;
  padding:5px 0;cursor:pointer;line-height:1.3}
.emoji-grid button:hover{background:#e9e4fb}
.emoji-grid button.on{border-color:#7a4bff;background:#fff}
.colors{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.colors button{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.colors button.on{border-color:var(--ink);transform:scale(1.1)}
.label{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------------------------------------------------------------- 計時器 */
.timer{--tsz:104px;position:relative;width:var(--tsz);height:var(--tsz);flex:0 0 auto}
.timer svg{transform:rotate(-90deg);display:block}
.timer .num{position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--tsz)*.42);font-weight:900;color:#fff}
.timer.urgent .num{color:#ffd34d;animation:beat .6s infinite}
@keyframes beat{50%{transform:scale(1.14)}}

/* ---------------------------------------------------------------- 大螢幕 */
.stage{flex:1;display:flex;flex-direction:column;padding:18px 22px 22px;gap:16px;min-height:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.qtext{
  background:#fff;border-radius:var(--r);box-shadow:var(--shadow);
  padding:26px 30px;text-align:center;font-weight:900;
  font-size:clamp(22px,3.4vw,46px);line-height:1.28;
}
.midrow{flex:1;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:120px}
.bigcount{font-size:clamp(60px,14vw,190px);font-weight:900;color:#fff;text-shadow:0 8px 0 rgba(0,0,0,.22);
  animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.counter{background:#fff;border-radius:16px;padding:14px 22px;text-align:center;box-shadow:var(--shadow)}
.counter .n{font-size:44px;font-weight:900;line-height:1}
.counter .l{font-size:13px;font-weight:800;color:var(--muted)}

/* 分布長條 */
.dist{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;
  flex:1;min-height:180px}
.bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.bar .fill{width:100%;border-radius:12px 12px 0 0;min-height:8px;
  display:flex;align-items:flex-start;justify-content:center;color:#fff;font-weight:900;font-size:22px;
  padding-top:8px;transition:height .8s cubic-bezier(.2,.9,.3,1);box-shadow:0 -3px 0 rgba(0,0,0,.15) inset}
.bar .cap{display:flex;align-items:center;gap:8px;color:#fff;font-weight:900;font-size:clamp(13px,1.4vw,19px);
  background:rgba(0,0,0,.24);border-radius:10px;padding:8px 12px;width:100%;justify-content:center;text-align:center}
.bar.right .cap{background:#26890c}
.bar .cap .ok{font-size:18px}

/* 排行榜 */
.board{width:100%;max-width:820px;display:flex;flex-direction:column;gap:12px}
.brow{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:14px 18px;
  box-shadow:0 8px 20px rgba(20,8,50,.25);animation:slide .5s backwards cubic-bezier(.2,1.2,.4,1)}
@keyframes slide{from{opacity:0;transform:translateX(-36px)}}
.brow .pos{font-size:26px;font-weight:900;width:44px;color:var(--muted)}
.brow .nm{flex:1;font-size:clamp(18px,2.2vw,26px);font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .sc{font-size:clamp(18px,2.2vw,26px);font-weight:900}
.brow .gain{font-size:13px;font-weight:800;color:#26890c;background:#e7f6e2;border-radius:999px;padding:4px 10px}
.brow.p1{background:linear-gradient(100deg,#ffd54a,#ffb300);}
.brow.p2{background:linear-gradient(100deg,#e6e9f0,#c7ccd8)}
.brow.p3{background:linear-gradient(100deg,#f0b98a,#d99060)}

/* 頒獎台 */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3vw,34px);width:100%;margin-top:8px}
.pod{display:flex;flex-direction:column;align-items:center;gap:10px;width:clamp(130px,22vw,240px)}
.pod .who{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff}
.pod .who .avatar{width:clamp(56px,8vw,88px);height:clamp(56px,8vw,88px);font-size:clamp(28px,4.4vw,46px)}
.pod .who .n{font-weight:900;font-size:clamp(16px,2vw,24px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .who .s{font-weight:900;font-size:clamp(14px,1.7vw,20px);opacity:.9}
.pod .block{width:100%;border-radius:16px 16px 0 0;display:grid;place-items:center;
  font-size:clamp(34px,6vw,68px);font-weight:900;color:rgba(0,0,0,.45);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.12); animation:rise .7s cubic-bezier(.2,1.2,.3,1) backwards}
@keyframes rise{from{height:0!important;opacity:0}}
.pod.g1 .block{height:clamp(150px,26vh,260px);background:linear-gradient(#ffd54a,#f5a600)}
.pod.g2 .block{height:clamp(110px,19vh,190px);background:linear-gradient(#e9ecf3,#b9bfcc)}
.pod.g3 .block{height:clamp(84px,15vh,150px);background:linear-gradient(#f2bd8e,#cf8149)}

/* 玩家列表（大廳） */
.players{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-content:flex-start;
  width:100%;max-width:1100px;overflow-y:auto;padding:4px}
.chip{display:flex;align-items:center;gap:9px;background:#fff;border-radius:999px;padding:7px 16px 7px 7px;
  font-weight:900;font-size:17px;box-shadow:0 5px 14px rgba(20,8,50,.22);animation:pop .4s cubic-bezier(.2,1.6,.4,1);
  cursor:pointer}
.chip .avatar{width:34px;height:34px;font-size:18px}
.chip:hover{outline:3px solid #ff5b6e}

/* QR */
.qrbox{background:#fff;padding:14px;border-radius:18px;box-shadow:var(--shadow);display:grid;place-items:center}
.qrbox img{display:block;width:clamp(160px,20vw,240px);height:auto;border-radius:6px}
.pinbig{font-size:clamp(40px,8vw,86px);font-weight:900;letter-spacing:.1em;color:#fff;line-height:1;
  text-shadow:0 5px 0 rgba(0,0,0,.25)}

/* 玩家結果畫面 */
.result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;text-align:center;color:#fff}
.result.good{background:#26890c} .result.bad{background:#c8102e} .result.none{background:#5a5470}
.result .big{font-size:clamp(28px,7vw,46px);font-weight:900}
.result .pts{font-size:clamp(22px,6vw,38px);font-weight:900;background:rgba(0,0,0,.2);border-radius:14px;padding:8px 22px}
.result .ico{font-size:clamp(56px,16vw,96px);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}

.footer{padding:12px;text-align:center;color:rgba(255,255,255,.55);font-size:12px}
a{color:#ffd34d}

@media (max-width:700px){
  .answers{gap:10px}
  .ans{min-height:88px;padding:14px 16px;font-size:17px}
  .ans .shape{width:26px;height:26px;font-size:20px}
  .stage{padding:12px}
  .dist{gap:8px}
}

/* ---------------------------------------------------------------- 圖片選項 */
.ans{overflow:hidden}
.ans .opt-img{
  flex:0 1 auto; min-height:0; height:auto; max-height:clamp(52px,10vh,116px); max-width:44%;
  object-fit:contain; border-radius:10px; padding:4px;
  background:rgba(255,255,255,.18);
}
/* 只有圖片、沒有文字時，讓圖片佔滿整塊 */
.ans.imgonly{flex-direction:column;justify-content:center;padding:12px 12px 10px}
.ans.imgonly .shape{position:absolute;top:8px;left:12px;width:auto;height:auto;font-size:20px;
  text-shadow:0 2px 4px rgba(0,0,0,.45)}
.ans.imgonly .opt-img{flex:1;min-height:0;height:auto;max-height:100%;max-width:100%;width:auto}
/* 有圖時整排磚塊加高 */
.answers.imgmode .ans{min-height:clamp(96px,15vh,190px)}
.answers{min-height:0}

/* 分布長條圖的小縮圖 */
.bar .cap img{height:26px;max-width:52px;object-fit:contain;border-radius:5px;
  background:rgba(255,255,255,.2);flex:0 0 auto}

/* 玩家端的小縮圖（已送出、正確答案提示） */
.thumb-inline{height:34px;max-width:70px;object-fit:contain;border-radius:6px;
  background:rgba(255,255,255,.22);vertical-align:middle;margin:0 4px}

/* ---------------------------------------------------------------- 編輯器的圖片欄位 */
.opt{align-items:flex-start;flex-wrap:wrap}
.opt .sh{margin-top:7px}
.opt .ofield{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.opt .othumb{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);
  border-radius:8px;padding:4px 6px}
.opt .othumb img{height:38px;max-width:90px;object-fit:contain;border-radius:4px}
.opt .othumb .rm{border:0;background:#ffe7ea;color:#b9163a;border-radius:6px;cursor:pointer;
  font:inherit;font-weight:900;font-size:12px;padding:3px 7px}
.opt .tools{display:flex;gap:4px;margin-top:4px}
.opt .tools button{border:0;background:rgba(255,255,255,.85);border-radius:7px;cursor:pointer;
  font-size:14px;line-height:1;padding:6px 7px}
.opt .tools button:hover{background:#fff}
.opt label{margin-top:8px}
.opt.dropping{outline:3px dashed rgba(255,255,255,.9);outline-offset:-3px}

/* ---------------------------------------------------------------- 題目大圖 */
.qimg{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:16px; background:#fff; padding:6px;
  box-shadow:var(--shadow); display:block;
}
/* 大螢幕作答中：圖片置中，白底要貼齊圖片本身而不是拉滿整條 */
.midrow{min-height:0}
/* 這一列先保留大圖的高度，多出來的空間由答案區吸收（答案區可以縮） */
.midrow.has-img{min-height:min(30vh,340px)}
.midrow .qimg{flex:0 1 auto;margin:0 auto;width:auto;height:auto;
  max-width:58%;max-height:min(30vh,340px)}
/* 準備倒數：中等大小 */
#s-ready .qimg,#rd-image{max-height:34vh}
/* 公布分布時縮小，把版面讓給長條圖 */
.qimg.sm{max-height:16vh;margin:0 auto}
/* 手機 */
#s-quiz .qimg{max-height:24vh;margin:0 auto}
@media (max-width:700px){
  #s-ready .qimg{max-height:28vh}
}

/* 編輯器：題目圖片那一列 */
.qimg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.qimg-row .qthumb{display:flex;align-items:center;gap:6px;background:#f5f3fb;border-radius:9px;padding:4px 6px}
.qimg-row .qthumb img{height:46px;max-width:120px;object-fit:contain;border-radius:5px}
.qcard.dropping{outline:3px dashed #7a4bff;outline-offset:-3px}

/* 作答畫面一定要塞得進一個螢幕：答案區吸收剩餘空間，磚塊高度交給格線決定 */
#s-quiz .answers{flex:1 1 auto;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}
#s-quiz .ans{min-height:0}

/* 大廳人數很多時的「還有 N 人」名牌 */
.chip.more{background:rgba(255,255,255,.22);color:#fff;cursor:default;
  border:1px dashed rgba(255,255,255,.5);padding-left:16px}
.chip.more:hover{outline:none}

/* ---------------------------------------------------------------- 音樂開關 */
.mutebtn{
  position:fixed;right:16px;bottom:16px;z-index:40;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.32);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  backdrop-filter:blur(6px);transition:transform .1s,background .2s;
}
.mutebtn:hover{background:rgba(0,0,0,.5)}
.mutebtn:active{transform:scale(.92)}
.mutebtn.off{opacity:.55}

/* 頒獎彩帶：整頁固定覆蓋層，頒獎台與獎品頁共用 */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* ---------------------------------------------------------- 題庫列表 */
.qrow{display:flex;align-items:center;gap:12px;background:#f7f5fd;border:2px solid #e6e1f6;
  border-radius:14px;padding:12px 14px}
.qrow:hover{border-color:#7a4bff;background:#fff}
.qrow .qmeta{flex:1;min-width:0}
.qrow .qtitle{font-weight:900;font-size:17px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.qrow .qsub{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}
.qrow .acts{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.qrow .mini.go{background:#26890c;color:#fff}
.qrow .mini.go:hover{background:#2fa30f}
.lib-empty{text-align:center;color:var(--muted);font-weight:700;padding:26px 10px}
@media (max-width:640px){
  .qrow{flex-direction:column;align-items:stretch}
  .qrow .acts{justify-content:stretch}
  .qrow .acts .mini{flex:1}
}

/* ---------------------------------------------------------- 名次獎勵：編輯器 */
.hint{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.6;margin:2px 0 12px}
.prow{display:flex;align-items:flex-start;gap:12px;background:#f7f5fd;border:2px solid #e6e1f6;
  border-radius:14px;padding:12px 14px;margin-bottom:10px}
.prow .pr-rank{flex:0 0 auto;font-weight:900;font-size:16px;color:var(--ink);
  background:#fff;border-radius:10px;padding:8px 12px;min-width:74px;text-align:center}
.prow .pr-rank.g1{background:linear-gradient(100deg,#ffd54a,#ffb300)}
.prow .pr-rank.g2{background:linear-gradient(100deg,#e6e9f0,#c7ccd8)}
.prow .pr-rank.g3{background:linear-gradient(100deg,#f0b98a,#d99060)}
.prow .pr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.prow input[type=text]{width:100%;font:inherit;font-size:15px;font-weight:700;padding:9px 11px;
  border:2px solid #ddd8ea;border-radius:10px;outline:none;background:#fff}
.prow input[type=text]:focus{border-color:#7a4bff}
.prow .pr-thumb{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9px;padding:5px 7px;
  align-self:flex-start}
.prow .pr-thumb img{height:48px;max-width:120px;object-fit:contain;border-radius:5px}
.prow .tools{display:flex;gap:5px}
.prow .tools button{border:0;background:#ece7fb;color:#5b4a8a;border-radius:8px;cursor:pointer;
  font:inherit;font-weight:800;font-size:13px;padding:7px 10px}
.prow .tools button:hover{background:#e0d8f8}
.prow.dropping{outline:3px dashed #7a4bff;outline-offset:-3px}
@media (max-width:640px){ .prow{flex-wrap:wrap} }

/* ---------------------------------------------------------- 名次獎勵：大螢幕 */
.pz-rank{font-size:clamp(30px,6vw,64px);font-weight:900;color:#fff;
  text-shadow:0 5px 0 rgba(0,0,0,.25);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.pz-winner{display:flex;align-items:center;gap:14px;background:#fff;border-radius:999px;
  padding:9px 26px 9px 9px;box-shadow:var(--shadow);animation:pop .5s .1s backwards cubic-bezier(.2,1.6,.4,1)}
.pz-winner .avatar{width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px);font-size:clamp(22px,2.6vw,30px)}
.pz-winner .nm{font-weight:900;font-size:clamp(20px,2.6vw,32px)}
.pz-winner .sc{font-weight:900;font-size:clamp(14px,1.7vw,20px);color:var(--muted)}
.pz-winner.none{background:rgba(255,255,255,.2);color:#fff;padding:12px 26px;font-weight:900}
#pz-image{max-height:38vh;animation:pop .55s .18s backwards cubic-bezier(.2,1.4,.4,1)}
.pz-desc{max-width:min(900px,92vw);text-align:center;color:#fff;font-weight:900;
  font-size:clamp(19px,2.8vw,36px);line-height:1.4;text-shadow:0 3px 0 rgba(0,0,0,.22)}

/* 獎品未公布時的提示 */
.pz-hint{color:rgba(255,255,255,.72);font-weight:900;font-size:clamp(16px,2vw,24px);
  border:2px dashed rgba(255,255,255,.4);border-radius:16px;padding:22px 40px;
  animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(.985)}}
/* 公布獎品時的揭曉動畫 */
.pz-reveal{animation:reveal .55s cubic-bezier(.2,1.3,.35,1) backwards}
@keyframes reveal{from{opacity:0;transform:translateY(22px) scale(.92)}}

/* ---------------------------------------------------------- 玩家端的身分卡 */
.me-card{
  display:flex;align-items:center;gap:16px;background:#fff;border-radius:20px;
  padding:14px 26px 14px 14px;box-shadow:var(--shadow);max-width:92vw;
  animation:pop .5s .1s backwards cubic-bezier(.2,1.6,.4,1);
}
.me-card .avatar{width:clamp(62px,17vw,86px);height:clamp(62px,17vw,86px);
  font-size:clamp(32px,9vw,46px)}
.me-card .who{min-width:0}
.me-card .nm{font-weight:900;font-size:clamp(24px,7vw,38px);color:var(--ink);
  line-height:1.15;overflow-wrap:anywhere}
.me-card .tag{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.1em;margin-top:3px}
.me-card.win{outline:5px solid #ffd54a;outline-offset:-2px}