/* =========================================================================
   酒精競標｜共用 base.css（四套主題共用：版面、元件、禮盒 3D 結構、動畫時間軸）
   主題只需要在 [data-theme="…"] 內覆寫變數與材質（見各主題 theme.css）
   ========================================================================= */

/* ---------- 1. 預設 token（主題會覆寫） ---------- */
:root{
  --bg-color:#111; --bg:none;
  --ink:#f3ece0; --ink-2:#cfc4b2; --ink-3:#9a8f80;           /* 主文字 / 次文字 / 輔助 */
  --accent:#c9a45c; --accent-text:#d9b97a;                    /* 裝飾色 / 可當文字用的強調色 */
  --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.32);
  --surface:rgba(255,255,255,.03); --error:#ff8f7a; --error-surface:rgba(255,120,90,.08);
  --focus:#f1d9a2; --focus-gap:#111;
  --btn-bg:#c9a45c; --btn-bg-hover:#d6b46e; --btn-bg-active:#b8934c; --btn-ink:#1d140a; --btn-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 24px -12px rgba(0,0,0,.6);
  --btn2-bg:transparent; --btn2-bg-hover:rgba(255,255,255,.06); --btn2-ink:var(--ink); --btn2-border:var(--line-strong);
  --footer-bg:#0b0b0b; --footer-ink:#efe6d6; --footer-line:rgba(255,255,255,.12);
  --r-ctl:2px; --r-card:1.6em;

  --ff-display:"Noto Serif TC","Noto Serif CJK TC",serif;   /* 中文標題、獎品名 */
  --ff-body:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --ff-latin:"Cormorant Garamond","Noto Serif TC",serif;     /* 英文小標 */
  --ff-num:"Cormorant Garamond","Noto Serif TC",serif;       /* 大數字 */
  --display-weight:700; --name-weight:900;

  /* 字級：clamp(手機, 流動, 投影) */
  --fs-kicker:clamp(11px,.42vw + 9px,17px);
  --fs-display:clamp(34px,3.2vw + 10px,80px);
  --fs-h3:clamp(18px,.9vw + 12px,32px);
  --fs-body:clamp(15px,.5vw + 11px,21px);
  --fs-small:clamp(12px,.32vw + 9.5px,16px);
  --fs-input:clamp(17px,.62vw + 12px,26px);
  --fs-btn:clamp(16px,.5vw + 12px,22px);
  --fs-count:clamp(112px,10vw + 40px,240px);
  --fs-bignum:clamp(56px,4vw + 30px,120px);
  --fs-warning:clamp(13px,.4vw + 10px,19px);

  --pad-x:clamp(20px,5vw,112px); --pad-y:clamp(16px,2vw,40px); --gutter:clamp(16px,2.5vw,56px);
  --ctl-h:clamp(52px,1.2vw + 38px,64px);
  --footer-h:clamp(44px,1vw + 34px,58px);
  --top-h:clamp(64px,3vw + 50px,112px);
  --box-w:clamp(320px,min(46vw,76vh),820px);   /* 禮盒畫布寬；1em = box-w/100 */
  --card-w:clamp(262px,min(23vw,52vh),430px);  /* 卡牌寬；1em = card-w/100 */

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-shake:cubic-bezier(.36,.07,.19,.97);
  --ease-anticipate:cubic-bezier(.5,0,.75,0);
  --ease-fly:cubic-bezier(.17,.67,.25,1);
  --ease-spin:cubic-bezier(.3,.6,.25,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:var(--bg-color)}
body{min-height:100dvh;color:var(--ink);font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.65;background:var(--bg-color);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);overflow:hidden}
.bg > *{position:absolute;pointer-events:none}

/* ---------- 3. 版面骨架 ---------- */
.app{position:relative;z-index:2;min-height:100dvh;display:grid;grid-template-rows:var(--top-h) 1fr;padding-bottom:var(--footer-h)}
.topbar{display:flex;align-items:center;gap:clamp(16px,2vw,40px);padding:0 var(--pad-x)}
.brand{margin-right:auto;display:flex;flex-direction:column;line-height:1.2}
.brand-kicker{font-family:var(--ff-latin);font-size:var(--fs-kicker);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.brand-name{font-family:var(--ff-display);font-weight:var(--display-weight);font-size:clamp(22px,.9vw + 14px,34px);letter-spacing:.16em;color:var(--ink)}
.steps{display:flex;gap:clamp(14px,1.6vw,36px);list-style:none;font-size:var(--fs-small);letter-spacing:.08em}
.step{display:flex;align-items:baseline;gap:.55em;color:var(--ink-3);padding:6px 0;border-bottom:1.5px solid transparent}
.step b{font-family:var(--ff-num);font-weight:600;font-size:1.15em}
.step.is-done{color:var(--ink-2)}
.step.is-current{color:var(--ink);border-bottom-color:var(--accent)}
.fs-btn{flex:none;width:clamp(44px,.8vw + 36px,56px);aspect-ratio:1;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--btn2-bg);border:1px solid var(--btn2-border);border-radius:var(--r-ctl);transition:background .2s,border-color .2s}
.fs-btn svg{width:42%;height:42%}
.fs-btn:hover{background:var(--btn2-bg-hover);border-color:var(--ink-2)}
.fs-btn:active{transform:translateY(1px)}
.fs-btn[aria-pressed="true"] .ic-enter,.fs-btn:not([aria-pressed="true"]) .ic-exit{display:none}

main{position:relative;display:flex;padding:0 var(--pad-x);overflow-x:clip}
.screen{display:none;width:100%;max-width:1680px;margin:0 auto}
[data-screen="setup"] .screen-setup,[data-screen^="input"] .screen-input,[data-screen^="reveal"] .screen-reveal,[data-screen="result"] .screen-result{display:grid}
.grid12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.screen{animation:screen-in .5s var(--ease-out) both}
@keyframes screen-in{from{opacity:0;transform:translateY(16px)}}

/* 所有數字一律用等高（lining）數字，舊式數字遠距離難讀 */
.kicker,.count-num,.big-num,.range,.step b,.field .num,.result-item .num,.pc-no,.pc-foot,.js-total{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
/* ---------- 4. 文字層級 ---------- */
.kicker{font-family:var(--ff-latin);font-size:var(--fs-kicker);letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:.9em}
.kicker::after{content:"";width:3.2em;height:1px;background:currentColor;opacity:.6}
.display{font-family:var(--ff-display);font-weight:var(--display-weight);font-size:var(--fs-display);line-height:1.2;letter-spacing:.05em;color:var(--ink);margin-top:.35em}
.lede{color:var(--ink-2);max-width:26em;margin-top:1.1em;text-wrap:pretty}

/* ---------- 5. 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4em;min-height:var(--ctl-h);min-width:44px;padding:0 1.5em;border:none;border-radius:var(--r-ctl);cursor:pointer;
  font-family:var(--ff-body);font-weight:700;font-size:var(--fs-btn);letter-spacing:.14em;transition:background .18s,transform .18s,box-shadow .18s,color .18s}
.btn .arrow{font-family:var(--ff-latin);font-weight:500;letter-spacing:0;transition:transform .2s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--btn-bg-hover)}
.btn-primary:active{background:var(--btn-bg-active);transform:translateY(1px);box-shadow:none}
.btn-ghost{background:var(--btn2-bg);color:var(--btn2-ink);box-shadow:inset 0 0 0 1px var(--btn2-border)}
.btn-ghost:hover{background:var(--btn2-bg-hover);box-shadow:inset 0 0 0 1px var(--ink-2)}
.btn-ghost:active{transform:translateY(1px)}
.btn-ghost{justify-content:flex-start;gap:.9em}
.btn-ghost:hover .arrow{transform:translateX(-4px)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 3px var(--focus-gap)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn-block{width:100%}

/* ---------- 6. 設定頁 ---------- */
.screen-setup{align-content:center;min-height:calc(100dvh - var(--top-h) - var(--footer-h) - 24px)}
.setup-copy{grid-column:1/7;align-self:center}
.setup-control{grid-column:8/13;align-self:center}
.count-row{display:flex;align-items:flex-end;gap:.25em;padding-bottom:.25em;border-bottom:1px solid var(--line-strong)}
.count-num{font-family:var(--ff-num);font-weight:500;font-size:var(--fs-count);line-height:.82;color:var(--ink)}
.count-num.is-bump{animation:bump .26s var(--ease-pop)}
@keyframes bump{40%{transform:translateY(-4%)}}
.count-unit{font-family:var(--ff-display);font-size:var(--fs-h3);color:var(--ink-2);padding-bottom:.35em;letter-spacing:.2em}
.meter{height:2px;background:var(--line);margin-top:-1px;position:relative}
.meter i{position:absolute;left:0;top:-.5px;height:3px;width:calc(var(--n,8) / 20 * 100%);background:var(--accent);transition:width .3s var(--ease-out)}
.stepper{display:flex;align-items:center;gap:12px;margin-top:clamp(18px,1.6vw,32px)}
.step-btn{width:var(--ctl-h);height:var(--ctl-h);display:grid;place-items:center;cursor:pointer;border:none;border-radius:var(--r-ctl);background:var(--btn2-bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--btn2-border);transition:background .15s}
.step-btn svg{width:38%;height:38%}
.step-btn:hover{background:var(--btn2-bg-hover);box-shadow:inset 0 0 0 1px var(--ink-2)}
.step-btn:active{transform:translateY(1px)}
.step-btn:disabled{opacity:.3;cursor:not-allowed}
.range{margin-left:auto;font-family:var(--ff-num);font-size:var(--fs-h3);color:var(--ink-3);letter-spacing:.1em}
.setup-control .btn{margin-top:clamp(32px,3vw,64px)}

/* ---------- 7. 輸入頁 ---------- */
.screen-input{align-content:start;padding-top:clamp(8px,2vw,40px)}
.input-aside,.result-aside{grid-column:1/5;display:flex;flex-direction:column;min-height:min(640px,calc(100dvh - var(--top-h) - var(--footer-h) - 80px))}
.aside-actions{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:32px}
.form-msg{display:flex;gap:.6em;align-items:flex-start;color:var(--error);margin-top:1.4em;font-weight:500;line-height:1.5}
.form-msg svg{flex:none;width:1.1em;height:1.1em;margin-top:.2em}
.form-msg[hidden]{display:flex;visibility:hidden}
.list-wrap{grid-column:5/13;border-top:1px solid var(--line-strong)}
.prize-list{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));column-gap:clamp(24px,2.4vw,56px);max-height:max(260px,calc(100dvh - var(--top-h) - var(--footer-h) - 120px));overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.field{display:flex;align-items:center;gap:clamp(12px,1vw,20px);min-height:calc(var(--ctl-h) + 8px);border-bottom:1px solid var(--line);transition:border-color .2s,background .2s;padding-right:4px}
.field .num{flex:none;width:2em;font-family:var(--ff-num);font-weight:600;font-size:var(--fs-input);color:var(--ink-3);cursor:text;font-variant-numeric:tabular-nums}
.field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--ff-display);font-weight:500;font-size:var(--fs-input);color:var(--ink);padding:.4em 0;caret-color:var(--accent)}
.field input::placeholder{color:var(--ink-3);opacity:1}
.field .counter,.field .field-hint{flex:none;font-size:var(--fs-small);font-family:var(--ff-body)}
.field .counter{color:var(--ink-3);opacity:0;transition:opacity .2s}
.field:hover{border-bottom-color:var(--line-strong)}
.field:focus-within{border-bottom:2px solid var(--accent);margin-bottom:-1px}
.field:focus-within .num{color:var(--accent-text)}
.field:focus-within .counter{opacity:1}
.field input:focus-visible{outline:none}
.field .field-hint{display:none;color:var(--error);font-weight:500}
.field.is-error{border-bottom:2px solid var(--error);margin-bottom:-1px;background:var(--error-surface);animation:nudge .3s var(--ease-shake)}
.field.is-error .num{color:var(--error)}
.field.is-error .field-hint{display:block}
.field.is-error .counter{display:none}
@keyframes nudge{30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}

/* ---------- 8. 揭曉頁 ---------- */
.screen-reveal{height:calc(100dvh - var(--top-h) - var(--footer-h));min-height:560px}
.screen-reveal{grid-template-rows:1fr auto auto 1fr}
.stage{grid-column:1/9;grid-row:1/5;position:relative;min-height:0}
.stage > *{position:absolute;left:50%;top:50%;translate:-50% -50%}
.big-num{font-family:var(--ff-num);font-weight:500;font-size:var(--fs-bignum);line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.reveal-cta{grid-column:9/13;grid-row:3;display:grid;margin-top:clamp(28px,3vw,64px);min-height:var(--ctl-h)}
.reveal-cta > *{grid-area:1/1}
.hint{display:flex;align-items:center;gap:1em;color:var(--ink-2);font-size:var(--fs-body);letter-spacing:.18em;animation:hint 2.6s ease-in-out infinite}
.hint::before{content:"";width:2.4em;height:1px;background:var(--accent)}
@keyframes hint{50%{opacity:.55}}
.actions{opacity:0;pointer-events:none;transform:translateY(10px)}
.actions .btn{width:100%}

/* 舞台光：盒內溢出的暖光、落地後卡牌背後的柔光（不使用放射線） */
.stage-floor{width:calc(var(--box-w) * 1.05);height:calc(var(--box-w) * .32);border-radius:50%;pointer-events:none;translate:-52% calc(var(--box-w) * .1) !important;filter:blur(6px)}
.ambient{width:calc(var(--card-w) * 2.6);aspect-ratio:1;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(closest-side,var(--glow-soft,rgba(255,214,150,.22)),transparent);filter:blur(10px)}
.bloom{width:calc(var(--box-w) * .5);aspect-ratio:1.4;border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(closest-side,var(--glow-core,rgba(255,236,200,.75)),var(--glow-soft,rgba(255,200,130,.25)) 55%,transparent);filter:blur(6px);translate:-50% -62% !important}
.motes,.fx{width:0;height:0;pointer-events:none;z-index:8}
.motes i{position:absolute;left:0;top:0;width:var(--z,4px);height:var(--z,4px);margin:calc(var(--z)/-2);border-radius:50%;opacity:0;background:var(--mote-color,rgba(255,230,180,.9));box-shadow:0 0 6px var(--mote-glow,rgba(255,210,150,.6))}
.fx i{position:absolute;left:0;top:0;width:var(--w,8px);height:var(--h,8px);opacity:0;background:var(--c,#d9b97a);border-radius:var(--fx-radius,1px)}
.floor-shadow{width:calc(var(--card-w) * 1.1);height:calc(var(--card-w) * .16);border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(closest-side,var(--shadow-color,rgba(0,0,0,.55)),transparent);filter:blur(8px);translate:-50% calc(var(--card-w) * .82) !important}

/* ---------- 9. 禮盒（圖層化） ----------
   畫布 100em × 80em（1em = --box-w/100），對應素材 1600×1280 px。
   每個 [data-layer] 都是「全畫布、同一個對位」的圖層：
   有素材圖 → 顯示 <picture>；沒有 → 顯示 .layer-css（CSS 3D 版）。               */
.gb-wrap{font-size:calc(var(--box-w) / 100);width:100em;height:80em;translate:-46% -54% !important}  /* 畫布 46% 的盒底中心對準舞台中線 */
.gb{position:absolute;inset:0;cursor:pointer;outline:none;transform-origin:var(--gb-origin,46% 74%);
  /* 幾何：盒身 W×D×H、盒蓋高 LH、蓋裙覆蓋盒身 LS、蓋外擴 LO、鏡頭角度 */
  --W:54em;--D:38em;--H:26em;--LH:10em;--LS:7em;--LO:1.2em;--cam-x:-21deg;--cam-y:-33deg;--persp:230em}
.gb:focus-visible .gb-focus{opacity:1}
.gb-focus{position:absolute;left:14%;right:14%;top:16%;bottom:6%;border:2px dashed var(--focus);border-radius:2em;opacity:0;transition:opacity .2s}
.gb-layer{position:absolute;inset:0;pointer-events:none}
.gb-layer > picture{display:none;position:absolute;inset:0}
.gb-layer > picture img{display:block;width:100%;height:100%}
.gb-layer.is-img > picture{display:block}
.gb-layer.is-img > .layer-css{display:none}
.gb-body-group{position:absolute;inset:0;transform-origin:var(--gb-origin,46% 74%)}
.gb-lid-group{position:absolute;inset:0;transform-origin:var(--lid-origin,46% 34%)}
.layer-css{position:absolute;inset:0;perspective:var(--persp);perspective-origin:46% 28%}
.cube{position:absolute;left:46%;top:74%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--cam-x)) rotateY(var(--cam-y))}
.cube > *{position:absolute;left:0;top:0;transform-origin:50% 50%;backface-visibility:hidden}
.cube .front{width:var(--w);height:var(--h);transform:translate3d(calc(var(--w) / -2),calc(-1 * (var(--y0) + var(--h))),calc(var(--d) / 2 + var(--zo,0em)))}
.cube .right{width:var(--d);height:var(--h);transform:translate3d(calc(var(--w) / 2 - var(--d) / 2 + var(--zo,0em)),calc(-1 * (var(--y0) + var(--h))),0) rotateY(90deg)}
.cube .top{width:var(--w);height:var(--d);transform:translate3d(calc(var(--w) / -2),calc(-1 * (var(--y0) + var(--h) + var(--zo,0em)) - var(--d) / 2),0) rotateX(90deg)}
.cube .floor{width:var(--w);height:var(--d);transform:translate3d(calc(var(--w) / -2),calc(var(--d) / -2),0) rotateX(90deg)}
.cube.body{--w:var(--W);--d:var(--D);--h:var(--H);--y0:0em}
.cube.lid{--w:calc(var(--W) + 2 * var(--LO));--d:calc(var(--D) + 2 * var(--LO));--h:var(--LH);--y0:calc(var(--H) - var(--LS))}
.cube.body.deco{--zo:.12em}.cube.lid.deco{--zo:.12em}
.cube.deco > *{background:none}
.cube .f{overflow:hidden}
.cube .f::after{content:"";position:absolute;inset:0;pointer-events:none}
/* 接觸陰影：地面上兩層——貼地的環境遮蔽（窄、深）+ 主光源投影（寬、柔，偏右後） */
.cube.shadow{--w:var(--W);--d:var(--D)}
.cube.shadow .ao{background:var(--ao-color,rgba(0,0,0,.85));filter:blur(.9em);transform:translate3d(calc(var(--W) / -2),calc(var(--D) / -2),0) rotateX(90deg) scale(1.03)}
.cube.shadow .cast{background:radial-gradient(closest-side,var(--cast-color,rgba(0,0,0,.55)),transparent);filter:blur(2.4em);transform:translate3d(calc(var(--W) / -2 + 12em),calc(var(--D) / -2),-12em) rotateX(90deg) scale(1.5,1.7)}
.cube.shadow .ao,.cube.shadow .cast{width:var(--W);height:var(--D)}
/* 盒內光：開蓋後從開口溢出 */
.cube.glow .top{background:radial-gradient(closest-side,var(--glow-core,rgba(255,236,200,.9)),var(--glow-soft,rgba(255,190,110,.35)) 60%,transparent);--zo:.3em;filter:blur(.6em)}
[data-layer="inner-glow"]{opacity:0;mix-blend-mode:screen}
[data-layer="inner-glow"] .rise{position:absolute;left:30%;width:32%;top:-30%;height:78%;background:linear-gradient(0deg,var(--glow-soft,rgba(255,200,130,.35)),transparent 85%);filter:blur(2.4em);border-radius:50%}

/* ---------- 10. 卡牌 ----------  1em = 卡寬/100；比例 5:7 */
.pc{font-size:calc(var(--card-w) / 100);width:100em;height:140em;perspective:2400px;opacity:0;pointer-events:none;z-index:6}
.pc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pc-face{position:absolute;inset:0;border-radius:var(--r-card);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.pc-front{display:flex;flex-direction:column;padding:10em 9em 9em;background:var(--card-face,#f4efe4);color:var(--card-ink,#2a2420);box-shadow:var(--card-shadow,0 2.4em 5em -1.4em rgba(0,0,0,.6),0 .4em 1em rgba(0,0,0,.25))}
.pc-front::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--card-texture,none);opacity:var(--card-texture-opacity,.5);mix-blend-mode:multiply}
.pc-top{position:relative;display:flex;justify-content:space-between;align-items:baseline}
.pc-no{font-family:var(--ff-num);font-weight:600;font-size:4.4em;letter-spacing:.12em;color:var(--card-ink-3,#8a8076)}
.pc-mark{font-family:var(--ff-latin);font-style:italic;font-weight:500;font-size:6.4em;color:var(--card-accent,#8a6a2a);line-height:1}
.pc-body{position:relative;margin-top:auto}
.pc-label{font-family:var(--ff-body);font-weight:500;font-size:4.4em;letter-spacing:.42em;color:var(--card-ink-2,#6a5f55)}
.pc-rule{width:16em;height:.5em;background:var(--card-accent,#8a6a2a);margin:4.4em 0 5em}
.pc-name{font-family:var(--ff-display);font-weight:var(--name-weight);font-size:var(--pc-name-fs,12em);line-height:1.22;letter-spacing:.04em;color:var(--card-ink,#2a2420);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:.3em}
.pc-foot{position:relative;display:flex;justify-content:space-between;margin-top:9em;font-family:var(--ff-latin);font-size:3.6em;letter-spacing:.18em;text-transform:uppercase;color:var(--card-ink-3,#8a8076)}
.pc-shine{position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,var(--shine-a,.28)) 50%,transparent 60%);transform:translateX(-80%);pointer-events:none;mix-blend-mode:soft-light}
.pc-back{transform:rotateY(180deg);background:var(--card-back,#3a1018);box-shadow:var(--card-shadow,0 2.4em 5em -1.4em rgba(0,0,0,.6))}
.pc-back::before{content:"";position:absolute;inset:0;background:var(--card-back-texture,none);opacity:.6;mix-blend-mode:overlay}
.pc-back-mark{position:absolute;left:9em;bottom:9em;font-family:var(--ff-latin);font-style:italic;font-size:7em;color:var(--card-back-ink,rgba(255,255,255,.4))}

/* ---------- 11. 結果頁 ---------- */
.screen-result{align-content:start;padding-top:clamp(8px,2vw,40px)}
.result-list{list-style:none;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));column-gap:clamp(24px,2.4vw,56px);max-height:max(260px,calc(100dvh - var(--top-h) - var(--footer-h) - 120px));overflow:auto}
.result-item{display:flex;align-items:baseline;gap:clamp(12px,1vw,20px);min-height:calc(var(--ctl-h) + 8px);padding:.9em 0;border-bottom:1px solid var(--line);animation:row-in .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.result-item .num{flex:none;width:2em;font-family:var(--ff-num);font-weight:600;font-size:var(--fs-input);color:var(--ink-3)}
.result-item .name{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-input);line-height:1.35;color:var(--ink)}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- 12. 底部警語列（任何主題都維持 ≥ 7:1 對比） ---------- */
.warning-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--footer-h);display:flex;align-items:center;justify-content:center;gap:.9em;padding:0 16px;
  background:var(--footer-bg);color:var(--footer-ink);border-top:1px solid var(--footer-line);font-weight:500;font-size:var(--fs-warning);letter-spacing:.16em;white-space:nowrap}
.warning-bar .age{display:inline-grid;place-items:center;height:1.6em;padding:0 .45em;border:1px solid currentColor;border-radius:2px;font-family:var(--ff-body);font-weight:700;font-size:.8em;letter-spacing:.02em}
.warning-bar .sep{width:1px;height:1em;background:currentColor;opacity:.4}

/* ---------- 13. 揭曉動畫時間軸（四套主題共用；總長 3.95s） ----------
   JS：點盒 → .screen-reveal 加 .is-playing；3.70s 後加 .is-done            */
.is-playing .hint{animation:fade-out .15s linear forwards}
.is-playing .gb-wrap{animation-play-state:paused}
.is-playing .gb{animation:gb-shake .9s var(--ease-shake) both,gb-squash .12s .9s var(--ease-anticipate) both}
.is-playing .gb-lid-group{animation:lid-rattle .6s .3s linear both,lid-off .78s 1.02s var(--ease-out) both}
.is-playing [data-layer="inner-glow"]{animation:glow-in .9s 1.02s ease-out both}
.is-playing .bloom{animation:bloom .8s 1.02s var(--ease-out) forwards}
.is-playing .motes i{animation:mote var(--dur,1.6s) calc(1.05s + var(--dl,0s)) cubic-bezier(.2,.6,.3,1) forwards}
.is-playing .ambient{animation:ambient-in 1s 1.1s ease-out both}
.is-playing .gb-body-group{animation:body-out .7s 1.5s ease-in both}
.is-playing .pc{animation:card-fly 2s 1.15s var(--ease-fly) both,card-impact .22s 3.15s var(--ease-pop) both}
.is-playing .pc-inner{animation:card-spin 2s 1.15s var(--ease-spin) both}
.is-playing .floor-shadow{animation:shadow-in .5s 2.9s ease-out both}
.is-playing .fx i{animation:fx var(--dur,1.8s) calc(3.15s + var(--dl,0s)) cubic-bezier(.2,.6,.4,1) forwards}
.is-playing .pc-shine{animation:shine 1.2s 3.35s ease-in-out both}
.is-playing .actions{animation:actions-in .4s 3.55s var(--ease-out) both}
.is-done .actions{pointer-events:auto}

@keyframes fade-out{to{opacity:0}}
@keyframes gb-float{50%{transform:translateY(-1.2em)}}
@keyframes gb-shake{0%{transform:rotate(0)}12%{transform:rotate(-1.5deg) translateY(-.8em)}24%{transform:rotate(1.5deg)}36%{transform:rotate(-2.2deg) translateY(-1.2em)}48%{transform:rotate(2.2deg)}60%{transform:rotate(-3deg) translateY(-1.6em)}72%{transform:rotate(3deg)}84%{transform:rotate(-1.6deg) translateY(-.6em)}100%{transform:rotate(0)}}
@keyframes gb-squash{to{transform:scale(1.03,.96) translateY(.8em)}}
@keyframes lid-rattle{0%,100%{translate:0 0}20%{translate:0 -.8em}40%{translate:0 0}60%{translate:0 -1.2em}80%{translate:0 0}}
@keyframes lid-off{0%{transform:none;opacity:1}22%{transform:translateY(-12em) rotate(var(--lid-tilt1,-3deg))}100%{transform:translate(var(--lid-x,-62em),var(--lid-y,-70em)) rotate(var(--lid-tilt2,-24deg)) scale(.86);opacity:0}}
@keyframes glow-in{0%{opacity:0}35%{opacity:1}100%{opacity:.75}}
@keyframes bloom{0%{opacity:0;transform:scale(.4)}35%{opacity:var(--bloom-peak,.7)}100%{opacity:0;transform:scale(1.5)}}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:var(--o,.9)}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes ambient-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes body-out{to{transform:translateY(8em);opacity:0}}
@keyframes card-fly{0%{opacity:0;transform:translateY(22em) scale(.16)}12%{opacity:1}70%{transform:translateY(-5em) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes card-impact{0%{scale:1}40%{scale:1.025}100%{scale:1}}
@keyframes card-spin{0%{transform:rotateY(0) rotateZ(var(--spin-z,-14deg))}100%{transform:rotateY(var(--spin-y,1440deg)) rotateZ(0)}}
@keyframes shadow-in{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes fx{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:var(--o,1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot,360deg))}}
@keyframes shine{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
@keyframes actions-in{to{opacity:1;transform:none}}
.gb-wrap{animation:gb-float 3.6s ease-in-out infinite}

/* 靜態「卡牌已翻出」 */
.is-landed .hint,.is-landed .gb-wrap{display:none}
.is-landed .pc,.is-landed .floor-shadow,.is-landed .ambient{opacity:1}
.is-landed .actions{opacity:1;transform:none;pointer-events:auto}

/* 減少動態 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .motes,.fx,.bloom{display:none!important}
  .is-playing .gb-wrap{animation:fade-out .3s linear forwards!important}
  .is-playing .pc{animation:rm-fade .4s .3s linear both!important}
  .is-playing .pc-inner{animation:none!important;transform:none}
  .is-playing .ambient,.is-playing .floor-shadow{animation:rm-fade .4s .3s linear both!important}
  .is-playing .actions{animation:actions-in .3s .7s linear both!important}
}
@keyframes rm-fade{from{opacity:0}to{opacity:1}}

/* ---------- 14. 手機（≤ 760px） ---------- */
@media (max-width:760px){
  :root{--box-w:clamp(300px,108vw,460px);--card-w:clamp(250px,68vw,290px);--top-h:auto}
  .app{grid-template-rows:auto 1fr}
  .topbar{flex-wrap:wrap;padding:14px 18px 0;gap:10px 12px}
  .brand-kicker{display:none}
  .steps{order:3;width:100%;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.04em}
  .step{padding:8px 0 9px;margin-bottom:-1px}
  main{padding:0 18px}
  .grid12{grid-template-columns:minmax(0,1fr)}
  .grid12 > *{grid-column:1/-1!important}
  .screen-setup{align-content:start;min-height:0;padding-top:28px}
  .setup-control{margin-top:40px}
  .screen-input,.screen-result{padding-top:24px}
  .input-aside,.result-aside{min-height:0}
  .aside-actions{order:3;padding-top:24px}
  .list-wrap{margin-top:20px}
  .prize-list,.result-list{grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible}
  [data-screen^="input"] .screen-input{display:flex;flex-direction:column}
  .screen-input .input-aside{display:contents}
  .screen-input .list-wrap{order:2}
  .screen-input .form-msg{order:2}
  .screen-input .aside-actions{order:4}
  [data-screen="result"] .screen-result{display:flex;flex-direction:column}
  .screen-result .result-aside{display:contents}
  .screen-result .list-wrap{order:2}
  .screen-result .aside-actions{order:3}
  [data-screen="setup"] .steps,[data-screen^="input"] .steps,[data-screen="result"] .steps{display:flex}

  .warning-bar{letter-spacing:.04em;gap:.5em;font-size:12.5px}
}
/* 揭曉頁不顯示步驟 */
[data-screen^="reveal"] .steps,[data-screen="result"] .steps{display:none}

/* =========================================================================
   15. 揭曉畫面：乾淨版（v3）
   只留：禮盒／卡牌、落地後的「下一位得標者」、角落小型全螢幕圖示、底部警語。
   ========================================================================= */
[data-screen^="reveal"] .app{grid-template-rows:1fr}
[data-screen^="reveal"] .topbar{position:fixed;top:0;right:0;z-index:30;padding:clamp(10px,1vw,20px);height:auto}
[data-screen^="reveal"] .brand{display:none}
[data-screen^="reveal"] .fs-btn{width:44px;border-color:transparent;background:transparent;color:var(--rb-ink,var(--ink));opacity:.32;transition:opacity .2s}
[data-screen^="reveal"] .fs-btn svg{width:18px;height:18px}
[data-screen^="reveal"] .fs-btn:hover,[data-screen^="reveal"] .fs-btn:focus-visible{opacity:.9;background:transparent}
.screen-reveal{height:calc(100dvh - var(--footer-h));min-height:520px;grid-template-rows:minmax(0,1fr)}
.stage{grid-column:1/-1;grid-row:1}
.reveal-cta{grid-column:1/-1;grid-row:1;align-self:end;justify-self:center;width:min(380px,82vw);margin:0 0 clamp(20px,3.2vh,48px);min-height:var(--ctl-h);z-index:10;position:relative}

/* 揭曉背景：.bg 內的 .reveal-bg 只在揭曉畫面出現 */
.reveal-bg{position:absolute;inset:0;display:none;background:var(--rb-base,var(--bg-color));overflow:hidden;--horizon:var(--rb-horizon,55%)}
[data-screen^="reveal"] .reveal-bg{display:block}
.reveal-bg > *,.rb-css > *{position:absolute;pointer-events:none}
.rb-photo{inset:0;display:none;background-image:var(--reveal-bg-image,none);background-size:cover;background-position:var(--rb-photo-pos,50% 50%)}
.has-reveal-bg .rb-photo{display:block}
.has-reveal-bg .rb-css{display:none}
.rb-css{inset:0}
.rb-wall{left:0;right:0;top:0;bottom:calc(100% - var(--horizon))}
/* 桌面用真實透視（rotateX）壓縮，遠處自然變窄 */
.rb-table{left:-40%;right:-40%;top:var(--horizon);height:110%;transform-origin:50% 0;transform:perspective(var(--rb-persp,1100px)) rotateX(var(--rb-tilt,64deg))}
.rb-vig{inset:0;background:var(--rb-vig,radial-gradient(ellipse 70% 62% at 50% 52%,transparent 45%,rgba(0,0,0,.6) 100%))}
[data-screen^="reveal"] .bg-a,[data-screen^="reveal"] .bg-b,[data-screen^="reveal"] .bg-c{display:none}

/* 設定頁：主題選擇（精簡；四選一，附色塊；選擇存 localStorage） */
.theme-pick{border:0;margin-top:clamp(32px,3.4vw,64px);padding-top:clamp(16px,1.4vw,24px);border-top:1px solid var(--line);min-width:0}
.theme-pick legend{float:left;width:100%;margin-bottom:12px;font-size:var(--fs-small);letter-spacing:.2em;color:var(--ink-3)}
.tp-list{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tp{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:var(--fs-small);color:var(--ink-2);letter-spacing:.06em;transition:box-shadow .18s,color .18s}
.tp input{position:absolute;opacity:0;width:1px;height:1px}
.tp-sw{flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--s1) 0 55%,var(--s2) 55% 78%,var(--s3) 78%);box-shadow:inset 0 0 0 1px rgba(128,128,128,.35)}
.tp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp:hover{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink)}
.tp:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink)}
.tp:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

@media (max-width:760px){
  [data-screen^="reveal"] .topbar{padding:6px}
  [data-screen^="reveal"] .screen-reveal{display:grid}
  .screen-reveal{height:calc(100dvh - var(--footer-h));min-height:0}
  .reveal-bg{--horizon:var(--rb-horizon-m,47%)}
  .reveal-cta{margin-bottom:22px}
  .tp-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .setup-control{margin-top:28px}
  .theme-pick{margin-top:24px}
  .tp{min-height:44px}
}

/* =========================================================================
   16. 寫實背景圖對位（v4）
   主題提供圖上的地平線位置（桌面後緣，佔圖高的比例）：
     --ph-h / --ph-h-m     桌機圖／手機直式圖的地平線
     --ph-lift / -m        圖層往上多延伸的比例（把地平線往上提、裁掉天花板）
     --gb-gap / -m         盒底中心落在地平線下方多少（單位＝禮盒 em）
   原理：.rb-photo 的 background-position-y 設成「地平線比例」，不論 cover 怎麼裁，
   地平線都會落在元素高度的同一比例；再扣掉 lift，就得到螢幕上的地平線 --hs。
   禮盒、盒口光、塵埃、卡牌起飛點一起位移 --gb-shift，讓盒底坐在 --hs 下方 --gb-gap。
   ========================================================================= */
[data-reveal-bg="desktop"]{--ph-hh:var(--ph-h,.6);--ph-ll:var(--ph-lift,0);--ph-gap:var(--gb-gap,6)}
[data-reveal-bg="mobile"]{--ph-hh:var(--ph-h-m,var(--ph-h,.6));--ph-ll:var(--ph-lift-m,0);--ph-gap:var(--gb-gap-m,var(--gb-gap,6))}
[data-reveal-bg]{--hs:calc(var(--ph-hh) * (1 + var(--ph-ll)) - var(--ph-ll))}
.rb-photo{background-position:var(--rb-photo-x,50%) calc(var(--ph-hh,.5) * 100%)}
.has-reveal-bg .rb-photo{position:absolute;top:calc(var(--ph-ll,0) * -100%);left:0;right:0;bottom:0}
.has-reveal-bg .rb-vig{opacity:var(--ph-vig,.35)}
.has-reveal-bg .stage-floor{display:none}
[data-reveal-bg] .stage{--gb-shift:calc(var(--hs) * 100dvh + var(--ph-gap) * var(--box-w) / 100 - (100dvh - var(--footer-h)) / 2 - var(--box-w) * .16)}
.gb-wrap{translate:-46% calc(-54% + var(--gb-shift,0px)) !important}
.bloom{translate:-50% calc(-62% + var(--gb-shift,0px)) !important}
.motes{translate:0 var(--gb-shift,0px) !important}
@keyframes card-fly{0%{opacity:0;transform:translateY(calc(22em + var(--gb-shift,0px))) scale(.16)}12%{opacity:1}70%{transform:translateY(-5em) scale(1.04)}100%{opacity:1;transform:none}}
/* 寫實背景下的接觸陰影：照片桌面有真實明暗，CSS 版陰影要更貼、更實，盒子才不會像浮貼 */
.has-reveal-bg .cube.shadow .ao{background:var(--ph-ao,rgba(0,0,0,.92));filter:blur(.7em);transform:translate3d(calc(var(--W) / -2),calc(var(--D) / -2),0) rotateX(90deg) scale(1.07,1.1)}
.has-reveal-bg .cube.shadow .cast{background:radial-gradient(closest-side,var(--ph-cast,rgba(0,0,0,.7)),transparent);transform:translate3d(calc(var(--W) / -2 + 9em),calc(var(--D) / -2),-9em) rotateX(90deg) scale(1.4,1.6)}
/* 寫實桌面上禮盒不再整顆上下漂浮（會離開桌面、接觸陰影穿幫）：
   盒身靜置在桌上，只有盒蓋輕輕「呼吸」（上浮 .9em，3.6s 循環），保留「可以點」的暗示。
   :where() 讓權重低於 .is-playing .gb-lid-group，播放時由開蓋動畫接手。 */
.has-reveal-bg .gb-wrap{animation:none}
@keyframes lid-breathe{50%{transform:translateY(-.9em)}}
:where(.has-reveal-bg) .gb-lid-group{animation:lid-breathe 3.6s ease-in-out infinite}

/* =========================================================================
   17. 圖片禮盒（v6）：拆層、圖片版小動作、陰影與背景對位
   ========================================================================= */
.gb-layer.is-off{display:none}
/* 拆層沒有 CSS 版：沒載到圖時整層不顯示 */
.gb-layer[data-layer^="lid-deco-"]:not(.is-img){display:none}
.gb-layer > picture img{-webkit-user-drag:none;user-select:none}
/* 接觸陰影：素材的投影往右後方延伸到畫布邊緣，邊緣用遮罩淡出，避免在背景上出現直線切口 */
.gb-layer[data-layer="contact-shadow"].is-img > picture{opacity:var(--img-shadow-a,1);
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent 99.5%),linear-gradient(180deg,#000 88%,transparent 99.5%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 84%,transparent 99.5%),linear-gradient(180deg,#000 88%,transparent 99.5%);mask-composite:intersect}
/* 有圖片禮盒時，CSS 版的接觸陰影加強不再需要（v4 的 .cube.shadow 覆寫只作用在 CSS 版） */
/* 盒口光：黑底圖（A/B）用 #glow-l2a 把黑底轉成透明；透明底圖（C/D）主題設 --glow-l2a:none */
.gb-layer[data-layer="inner-glow"].is-img img{filter:var(--glow-l2a,url(#glow-l2a))}