@font-face{font-family:GenSen;src:url(font.otf);font-weight:700}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{width:100%;height:100%;overflow:hidden;background:#174f52 url(a/gift.png) center/700px repeat;font-family:GenSen,"PingFang TC","Noto Sans TC",sans-serif;font-weight:700;color:#3d4458}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
img{display:block;pointer-events:none;-webkit-user-drag:none}
button{font-family:inherit;border:0;background:none;cursor:pointer}

/* ---------- 共用 ---------- */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.gbtn{position:absolute;width:300px;height:96px;background:url(a/btn_green.png) center/100% 100% no-repeat;color:#fff;font-size:36px;letter-spacing:2px;text-shadow:0 2px 0 rgba(0,90,30,.5);padding-bottom:6px}
.gbtn:active{transform:scale(.95)}
.gbtn[disabled]{filter:grayscale(1) brightness(.85)}
.nm{display:flex;align-items:center;justify-content:center;width:260px;height:82px;background:center/100% 100% no-repeat;font-size:30px;color:#4a5370;padding-bottom:6px}
.nm-blue{background-image:url(a/name_blue.png)}
.nm-pink{background-image:url(a/name_pink.png)}
.nm.sm{width:170px;height:54px;font-size:22px;padding-bottom:4px}
.spin{animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 角色 */
.char{position:absolute;width:512px;height:760px;transform-origin:50% 100%}
.char .body{position:absolute;left:-98px;top:236px;width:575px}
.char .head{position:absolute;left:0;top:0;width:512px}
.char .visor{position:absolute;left:155px;top:66px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#8fa3d6 0,#5a6ea8 18%,#3b4a80 48%,#252f58 100%);overflow:hidden}
.char .visor:after{content:"";position:absolute;left:18%;top:12%;width:42%;height:22%;border-radius:50%;background:rgba(255,255,255,.35);transform:rotate(-25deg)}
.char .visor:before{content:"";position:absolute;right:16%;bottom:14%;width:14%;height:14%;border-radius:50%;background:rgba(255,255,255,.18)}

/* ---------- ROUND 標題 ---------- */
#scRound .rbg{position:absolute;inset:0;background:center/cover no-repeat}
#scRound.r1 .rbg{background-image:url(a/bg_teal.png)}
#scRound.r2 .rbg{background-image:url(a/bg_red.png)}
#scRound .rshield{position:absolute;left:50%;top:150px;width:1010px;margin-left:-505px;animation:shIn .5s cubic-bezier(.3,1.6,.6,1) both}
#scRound .rstripe{position:absolute;left:0;right:0;top:300px;height:140px;background:url(a/stripe.png) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;animation:strIn .45s .35s ease-out both}
#scRound .rtxt{height:80px}
#scRound .rribbon{position:absolute;left:50%;top:470px;width:900px;margin-left:-450px;animation:shIn .5s .6s cubic-bezier(.3,1.6,.6,1) both}
@keyframes shIn{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes strIn{from{transform:scaleX(0)}to{transform:none}}

/* ---------- ROUND 1 ---------- */
.r1bg{position:absolute;inset:0;background:#174f52 url(a/gift.png) center/760px repeat}
.divider{position:absolute;left:959px;top:0;width:2px;height:1080px;background:rgba(255,255,255,.55)}
.panel{position:absolute;width:1080px;height:960px;overflow:hidden;background:#15172b}
#pL{left:-60px;top:60px;transform:rotate(90deg)}
#pR{left:900px;top:60px;transform:rotate(-90deg)}
.panel .spot{position:absolute;top:-10px;width:470px;opacity:.5}
.panel .spot.l{left:-60px}
.panel .spot.r{right:-60px;transform:scaleX(-1)}
.panel .bulbs{position:absolute;top:30px;width:92px}
.panel .bulbs.l{left:-28px}
.panel .bulbs.r{right:-28px;transform:scaleX(-1)}
.panel .crowd{position:absolute;left:0;top:478px;width:1080px;height:96px}
.panel .ring{position:absolute;left:-40px;top:448px;width:1160px;height:330px}
.panel .giftband{position:absolute;left:0;top:772px;width:1080px;height:188px;background:#1a5a5c url(a/gift.png) 0 -40px/640px repeat}
.panel .giftband:after{content:"";position:absolute;inset:0;background:rgba(10,50,52,.25)}
.panel .stand{position:absolute;top:612px;width:286px;height:92px}
.panel .stand img{width:100%;height:100%}
.panel .stand .glow{position:absolute;left:-6%;top:-14%;width:112%;height:80%;border-radius:50%;background:radial-gradient(ellipse,#5dff6a 0,#38e04d 45%,rgba(56,224,77,0) 72%);opacity:0;transition:opacity .2s}
.panel .stand.right .glow{opacity:1;animation:blink .35s 4 alternate}
.panel .opt{position:absolute;top:672px;width:226px;height:72px;background:url(a/optlabel.png) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;font-size:23px;color:#4a5068;padding-bottom:4px;white-space:nowrap}
.panel .hit{position:absolute;top:560px;width:330px;height:210px;z-index:5}
.panel .opt.sel{color:#1f6fd6}
.panel .mini{position:absolute;left:30px;top:22px;width:150px;height:180px}
.panel .mini .char{left:-181px;top:-555px;transform:scale(.2)}
.panel .mini .nm{position:absolute;left:4px;top:128px;width:142px;height:46px;font-size:21px;padding-bottom:3px}
.panel .prog{position:absolute;left:412px;top:40px;width:250px;height:46px;background:url(a/pbar_bg.png) center/100% 100% no-repeat}
.panel .prog .pf{position:absolute;left:9px;top:8px;height:28px;width:0;border-radius:14px;background:linear-gradient(#5ab7ff,#1f8cf0);transition:width .4s}
.panel .prog span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:27px;color:#2c3244;letter-spacing:1px;padding-bottom:2px}
.panel .q{position:absolute;left:246px;top:74px;width:582px;height:132px;background:url(a/qbox.png) center/100% 100% no-repeat;display:flex;align-items:center;justify-content:center;font-size:28px;color:#3d4458;letter-spacing:1px;padding:0 40px 8px;text-align:center;line-height:1.3}
.panel .timer{position:absolute;left:372px;top:214px;width:356px;height:50px}
.panel .timer img{position:absolute;left:0;top:0;width:48px}
.panel .timer .tb{position:absolute;left:60px;top:17px;width:293px;height:16px;border-radius:8px;background:#fff;overflow:hidden}
.panel .timer .tbf{height:100%;width:100%;background:#16a97f;border-radius:8px;transform-origin:0 50%}
.panel .score{position:absolute;right:30px;top:62px;display:flex;align-items:flex-end}
.panel .score img{width:76px}
.panel .score span{font-size:38px;color:#fff;margin-left:-6px;margin-bottom:6px;font-family:Arial Rounded MT Bold,GenSen,sans-serif}
.panel .player{left:0;top:0}
.panel .player .char{transition:left .45s cubic-bezier(.4,0,.3,1),top .45s cubic-bezier(.4,0,.3,1)}
.panel .wrongfx{position:absolute;inset:0;background:url(a/wrong.png) center/100% 100% no-repeat;opacity:0;pointer-events:none}
.panel .wrongfx.on{animation:wrong .3s 5 alternate}
@keyframes wrong{from{opacity:0}to{opacity:1}}
@keyframes blink{from{opacity:.35}to{opacity:1}}
.panel .count{position:absolute;left:0;right:0;top:250px;height:300px;display:flex;align-items:center;justify-content:center}
.panel .count img{height:200px;animation:pop .9s ease-out both}
.panel .count img.st{height:150px}
@keyframes pop{0%{transform:scale(2.2);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}
.panel .cover{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.panel .tut{position:absolute;left:96px;top:52px;width:888px;height:606px;background:url(a/tutorbox.png) center/100% 100% no-repeat}
.panel .tut .shot{position:absolute;left:54px;top:46px;width:780px;height:398px;object-fit:cover;border-radius:6px}
.panel .tut .txt{position:absolute;left:30px;right:30px;top:452px;font-size:24px;line-height:1.45;text-align:center;color:#3d4458}
.panel .tut .txt em{font-style:normal;color:#e23b3b}
.panel .tut .gbtn{left:294px;top:572px;width:300px;height:92px;font-size:32px}
.panel .tut .wait{position:absolute;left:0;right:0;top:590px;text-align:center;font-size:28px;color:#fff;display:none}
.panel .tut.ready .gbtn{display:none}
.panel .tut.ready .wait{display:block}
.panel .res{position:absolute;left:110px;top:70px;width:860px;height:580px;animation:shIn .45s cubic-bezier(.3,1.5,.6,1) both}
.panel .res .card{position:absolute;inset:0;border-radius:40px;background:#fff6e2;overflow:hidden;border:8px solid #f5b46a}
.panel .res .card .top{position:absolute;left:0;right:0;top:0;height:400px;background:url(a/shine3.png) center/cover}
.panel .res .rays{position:absolute;left:230px;top:20px;width:400px;opacity:.75}
.panel .res .pil{position:absolute;left:255px;top:190px;width:350px}
.panel .res .st{position:absolute;left:350px;top:110px;width:160px}
.panel .res .rib{position:absolute;left:150px;top:-26px;width:560px;height:96px;background:url(a/ribbon_gold.png) center/100% 100% no-repeat;color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;padding-bottom:12px;text-shadow:0 2px 0 #c26a17}
.panel .res .got{position:absolute;left:0;right:0;top:440px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:34px;color:#7a5a3a}
.panel .res .got img{width:70px}
.panel .res .got b{font-size:64px;color:#6a4a2a}

/* 星星飛行/彩帶 */
#fx{position:absolute;inset:0;pointer-events:none;z-index:50}
.confetti{position:absolute;width:12px;height:18px;border-radius:2px}
.flystar{position:absolute;width:60px;height:60px;background:url(a/star.png) center/contain no-repeat}

/* ---------- ROUND 2 ---------- */
.r2bg{position:absolute;inset:0;background:url(a/bg_red.png) center/cover}
#scR2 .table{position:absolute;left:-30px;top:-40px;width:1980px;height:1168px}
.r2char{position:absolute;top:10px;width:260px;height:240px;transition:opacity .3s,filter .3s}
.r2char.blue{left:30px}
.r2char.pink{right:30px}
.r2char.off{opacity:.45;filter:grayscale(.5) brightness(.8)}
.r2char .charslot{position:absolute;left:0;top:0;width:260px;height:200px}
.r2char .char{left:-126px;top:-494px;transform:scale(.33)}
.r2char.blue .char{transform:scale(.33) scaleX(-1)}
.r2char .nm{position:absolute;left:0;top:170px}
.r2char.on .char{animation:bob 1s ease-in-out infinite alternate}
@keyframes bob{to{margin-top:-12px}}
.scorehead{position:absolute;left:700px;top:-12px;width:520px;height:189px}
.scorehead>img{width:100%;height:100%}
.scorehead .sh-l,.scorehead .sh-r{position:absolute;top:22px;display:flex;align-items:center;font-size:40px;color:#5a3e1e;font-family:Arial Rounded MT Bold,GenSen,sans-serif}
.scorehead .sh-l{left:22px}
.scorehead .sh-r{left:352px}
.scorehead .sh-l img,.scorehead .sh-r img{width:58px;margin-right:8px}
.scorehead .clk{position:absolute;left:228px;top:16px;width:64px;height:64px}
.scorehead .sh-t{position:absolute;left:0;right:0;top:100px;text-align:center;color:#fff;font-size:34px;font-family:Arial Rounded MT Bold,GenSen,sans-serif;letter-spacing:1px}
.board-wrap{position:absolute;left:400px;top:262px;width:1120px;height:540px;perspective:1500px}
.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:40px 34px;transform:rotateX(26deg);transform-origin:50% 100%;padding:0 40px}
.cardx{position:relative;perspective:900px;cursor:pointer}
.cardx .in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.cardx.flip .in{transform:rotateY(180deg)}
.cardx .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:center/100% 100% no-repeat}
.cardx .back{background-image:url(a/card_back.png)}
.cardx .front{background-image:url(a/card_front.png);transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}
.cardx.mB .front{background-image:url(a/card_blue.png)}
.cardx.mP .front{background-image:url(a/card_pink.png)}
.cardx .front img{width:74%;height:82%;object-fit:contain;margin-top:-6%}
.cardx.gone{animation:cardOut .5s ease-in both}
@keyframes cardOut{to{transform:scale(.2) translateY(-400px);opacity:0}}
.cardx.deal{animation:deal .45s cubic-bezier(.3,1.4,.6,1) both}
@keyframes deal{from{transform:translateY(-600px) scale(.4);opacity:0}}
.turnbar{position:absolute;left:775px;top:842px;width:420px;height:56px}
.turnbar img{position:absolute;left:0;top:0;width:56px}
.turnbar .tb{position:absolute;left:70px;top:18px;width:330px;height:20px;border-radius:10px;background:#fff;overflow:hidden}
.turnbar .tbf{height:100%;width:100%;background:#1db38a;border-radius:10px;transform-origin:0 50%}
.turnpill{position:absolute;left:760px;top:910px;width:400px;height:120px;background:url(a/pill_white.png) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:8px}
.turnpill small{font-size:28px;color:#4a5068}
.turnpill b{font-size:44px;color:#3d4458;line-height:1.1}
.r2tut{position:absolute;inset:0;display:none}
.r2tut.on{display:block}
.r2tut .tutwrap{position:absolute;left:410px;top:120px;width:1100px;height:772px}
.r2tut .tutwrap img{width:100%;height:100%}
.r2tut .gbtn{left:400px;top:740px}

/* ---------- 結算 ---------- */
#scEnd{background:url(a/bg_red.png) center/cover}
#scEnd .gameend{position:absolute;left:50%;top:380px;width:900px;margin-left:-450px;animation:shIn .5s cubic-bezier(.3,1.6,.6,1) both}
#scEnd.box .gameend{display:none}
#scEnd .finalbox{position:absolute;left:470px;top:110px;width:980px;height:760px;display:none;animation:shIn .45s cubic-bezier(.3,1.5,.6,1) both}
#scEnd.box .finalbox{display:block}
#scEnd .finalbox:before{content:"";position:absolute;inset:0;border-radius:50px;background:#fff7e4;border:10px solid #f6b166}
#scEnd .fb-shine{position:absolute;left:10px;top:10px;width:960px;height:430px;object-fit:cover;border-radius:40px 40px 0 0}
#scEnd .fb-rib{position:absolute;left:150px;top:-34px;width:680px;height:116px}
#scEnd .fb-rib img{width:100%;height:100%}
#scEnd .fb-rib span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;padding-bottom:16px;text-shadow:0 2px 0 #c26a17}
#scEnd .fb-prize{position:absolute;left:240px;top:60px;width:500px;height:380px}
#scEnd .fb-prize .rays{position:absolute;left:60px;top:0;width:380px;opacity:.7}
#scEnd .fb-prize .pil{position:absolute;left:40px;top:170px;width:420px}
#scEnd .fb-prize .st{position:absolute;left:150px;top:70px;width:200px}
#scEnd .fb-score{position:absolute;left:120px;top:470px;width:740px;height:170px;display:flex;align-items:center}
#scEnd .fb-score .lbl{font-size:40px;color:#6a4a2a;width:260px}
#scEnd .fb-score .rows{display:flex;flex-direction:column;gap:14px}
#scEnd .fb-score .row{display:flex;align-items:center;gap:12px}
#scEnd .fb-score .row img{width:48px}
#scEnd .fb-score .row b{font-size:46px;color:#6a4a2a;font-family:Arial Rounded MT Bold,GenSen,sans-serif}
#scEnd .gbtn{left:340px;top:680px}

/* ---------- 謝謝參與 ---------- */
.thbg{position:absolute;inset:0;background:url(a/end_bg.png) center/cover}
.thbg:before{content:"";position:absolute;left:0;right:0;top:0;height:560px;background:linear-gradient(#fffdf4 0,#fffbe6 55%,rgba(255,248,214,0) 100%)}
.th-logo{position:absolute;left:50%;top:110px;width:640px;margin-left:-320px}
.th-band{position:absolute;left:50%;top:470px;width:1100px;margin-left:-550px;height:380px}
.th-band:before{content:"";position:absolute;left:-200px;right:-200px;top:70px;height:290px;background:radial-gradient(ellipse 50% 50%,#fff 55%,rgba(255,255,255,0) 100%)}
.th-band .leaf{position:absolute;top:10px;width:200px}
.th-band .leaf.l{left:180px}
.th-band .leaf.r{right:180px;transform:scaleX(-1)}
.th-stars{position:absolute;left:0;right:0;top:40px;display:flex;justify-content:center;align-items:flex-end;gap:6px}
.th-stars img{width:96px}
.th-stars img.mid{width:120px;margin-bottom:14px}
.th-txt{position:absolute;left:0;right:0;top:186px;text-align:center;font-size:40px;color:#3d4458}
.th-txt b{font-size:56px;margin-left:12px;color:#23315c}
.th-sub{position:absolute;left:0;right:0;top:262px;text-align:center;font-size:40px;color:#3d4458}
.replay{position:absolute;left:50%;top:900px;margin-left:-170px;width:340px;height:110px;border-radius:55px;background:linear-gradient(#ffffff,#e9eef2);box-shadow:0 6px 0 #b7c3cc,0 10px 20px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;gap:14px;font-size:38px;color:#2d6f7a}
.replay img{width:72px}
.replay:active{transform:translateY(4px);box-shadow:0 2px 0 #b7c3cc}

/* iPad 等非 16:9 螢幕的延伸背景 */
body[data-bg=teal]{background:#1f6b68 radial-gradient(ellipse at 50% 30%,#3e9a92,#174f52 75%)}
body[data-bg=red]{background:#3a0d0b radial-gradient(ellipse at 50% 40%,#7a1f17,#2a0a08 75%)}
body[data-bg=table]{background:#140f1c linear-gradient(#0d1426,#3b1418 60%,#5a1a1c)}
body[data-bg=yellow]{background:linear-gradient(#fffdf4 0,#fffdf4 50%,#f8cf3e 50%)}

.char .visor .vstar{position:absolute;left:50%;top:52%;width:62%;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}

.plyr{pointer-events:none}.plyr>*{pointer-events:auto}

/* ===== 新角色（動森風公仔）===== */
.char .mascot{position:absolute;left:50%;bottom:0;height:700px;width:auto;transform:translateX(-50%);
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.28));pointer-events:none;user-select:none;-webkit-user-drag:none}
.char .body,.char .head,.char .visor{display:none}

/* =========================================================
   V2 公仔風介面（跟吉祥物同質感：霧面、粉彩、圓潤）
   ========================================================= */
:root{--cream:#fff8ec;--cream2:#f6e7cc;--ink:#6a5646;--mint:#8fdcbc;--mintd:#5fc49d;--sky:#8cc8f5;--pink:#f6a9c4;--butter:#ffe28a}
html,body{background:#f7efe2 radial-gradient(circle at 20% 20%,#fff7ea 0,#f3e6d2 70%)}
.r1bg{background:#efe3cf}
/* 第一關：舞台背景 */
.panel{background:#efe3cf url(a/v2/r1_stage.jpg) center/100% 100% no-repeat}
.panel .spot,.panel .bulbs,.panel .crowd,.panel .ring,.panel .giftband{display:none}
.divider{background:#fff;width:6px;left:957px;box-shadow:0 0 0 2px rgba(150,120,90,.15)}
/* 台座 */
.panel .stand{top:600px;height:110px}
.panel .stand img{display:none}
.panel .stand:before{content:"";position:absolute;left:0;right:0;top:34px;height:72px;border-radius:0 0 143px 143px/0 0 40px 40px;
  background:linear-gradient(90deg,#c9b6e8,#e3d6f6 40%,#d7c6f0 70%,#bba6df);box-shadow:0 14px 18px rgba(110,80,60,.18)}
.panel .stand:after{content:"";position:absolute;left:0;right:0;top:0;height:72px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#fffaf1 0,#fbefdc 60%,#efdcbf 100%);box-shadow:inset 0 -6px 10px rgba(180,140,100,.18)}
.panel .stand + .stand:before{background:linear-gradient(90deg,#f3b9a0,#ffd8c6 40%,#fbc9b2 70%,#eaa98d)}
.panel .stand .glow{z-index:2;left:-4%;top:-10%;width:108%;height:100%;background:radial-gradient(ellipse,rgba(140,240,170,.95) 0,rgba(110,225,150,.6) 45%,rgba(110,225,150,0) 72%)}
/* 選項牌 */
.panel .opt{top:690px;height:70px;background:var(--cream);border-radius:35px;box-shadow:0 6px 0 var(--cream2),0 12px 18px rgba(110,80,60,.18);color:var(--ink);font-size:24px}
.panel .opt.sel{background:#e6f3ff;box-shadow:0 6px 0 #b9dbf7,0 12px 18px rgba(60,110,160,.2);color:#2f78c4}
/* 題目框 */
.panel .q{top:96px;height:136px;background:var(--cream);border-radius:68px;border:6px solid #fff;
  box-shadow:0 8px 0 var(--cream2),0 18px 28px rgba(110,80,60,.22);color:var(--ink);font-size:30px;padding:0 44px}
/* 進度 */
.panel .prog{top:30px;height:48px;background:var(--cream);border-radius:24px;box-shadow:0 5px 0 var(--cream2),0 8px 14px rgba(110,80,60,.18)}
.panel .prog .pf{left:7px;top:7px;height:34px;border-radius:17px;background:linear-gradient(#b5dcff,#7ab9f0);box-shadow:inset 0 -4px 0 rgba(60,120,190,.18)}
.panel .prog span{color:var(--ink)}
/* 計時 */
.panel .timer{top:246px;left:360px;width:380px;height:56px}
.panel .timer img{width:56px;content:url(a/v2/clock.webp);filter:drop-shadow(0 4px 4px rgba(110,80,60,.2))}
.panel .timer .tb{left:66px;top:15px;width:310px;height:26px;border-radius:13px;background:var(--cream);box-shadow:inset 0 3px 5px rgba(110,80,60,.15),0 4px 0 var(--cream2)}
.panel .timer .tbf{background:linear-gradient(#a9ecd0,var(--mintd));border-radius:13px;box-shadow:inset 0 -4px 0 rgba(40,140,100,.18)}
/* 分數 */
.panel .score{top:40px;right:34px;align-items:center;background:var(--cream);border-radius:40px;padding:6px 22px 6px 8px;box-shadow:0 5px 0 var(--cream2),0 10px 16px rgba(110,80,60,.18)}
.panel .score img{width:64px;content:url(a/v2/star.webp)}
.panel .score span{color:var(--ink);font-size:36px;margin:0 0 0 6px}
.flystar{background-image:url(a/v2/star.webp)}
/* 教學框、按鈕 */
.gbtn{background:linear-gradient(#a9ecd0,var(--mintd));border-radius:48px;box-shadow:0 8px 0 #45a582,0 14px 20px rgba(40,100,80,.25);text-shadow:0 2px 0 rgba(30,110,80,.45)}
.panel .tut{background:var(--cream);border-radius:48px;border:8px solid #fff;box-shadow:0 10px 0 var(--cream2),0 24px 40px rgba(60,40,30,.3)}
.panel .tut .shot{border-radius:24px}
.panel .cover,.dim{background:rgba(90,70,55,.45)}
/* 整頁底色（各畫面） */
body[data-bg]{background:#f3e8d6 radial-gradient(ellipse at 50% 30%,#fff8ec,#eedfc6 80%)}
/* 第二關：牌桌 */
.r2bg{background:#efe3cf url(a/v2/r2_table.jpg) center/cover no-repeat}
#scR2 .table{display:none}
/* 卡背：奶油黃 + 澎澎星星 */
.cardx .face{border-radius:22px}
.cardx .back{background:url(a/v2/star.webp) center/62% auto no-repeat,linear-gradient(#ffeaa6,#ffd977);
  border:7px solid #fff6dc;box-shadow:0 8px 0 #e8c46a,0 14px 18px rgba(110,80,40,.22),inset 0 -6px 10px rgba(210,160,50,.25)}
.cardx .front{background:#fff;border:7px solid #fff6dc;box-shadow:0 8px 0 #e3d3b6,0 14px 18px rgba(110,80,40,.2)}
.cardx.mB .front{background:#e6f3ff;border-color:#9fd0f7;box-shadow:0 8px 0 #7ab4e6,0 14px 18px rgba(60,110,160,.25)}
.cardx.mP .front{background:#ffeaf2;border-color:#f6b3cb;box-shadow:0 8px 0 #e48fae,0 14px 18px rgba(160,70,100,.25)}
.cardx .front img{width:82%;height:86%;margin-top:0;border-radius:8px}
/* 記分牌 */
.scorehead{left:690px;top:14px;width:540px;height:120px;background:var(--cream);border-radius:60px;border:6px solid #fff;
  box-shadow:0 8px 0 #bfe6d4,0 16px 24px rgba(90,70,50,.22)}
.scorehead>img{display:none}
.scorehead .sh-l,.scorehead .sh-r{top:20px;color:var(--ink);font-size:44px}
.scorehead .sh-l{left:34px}.scorehead .sh-r{left:auto;right:34px;flex-direction:row-reverse}
.scorehead .sh-r img{margin:0 0 0 8px}
.scorehead .sh-l img,.scorehead .sh-r img{content:url(a/v2/star.webp);width:66px}
.scorehead .clk{display:block;content:url(a/v2/clock.webp);left:212px;top:-2px;width:104px;height:104px;filter:drop-shadow(0 4px 4px rgba(110,80,60,.2))}
.scorehead .sh-t{top:118px;left:200px;right:200px;margin:auto;width:140px;height:52px;line-height:52px;border-radius:26px;background:var(--mintd);color:#fff;font-size:32px;box-shadow:0 5px 0 #45a582}
/* 回合計時、輪到誰 */
.turnbar img{content:url(a/v2/clock.webp);width:60px;top:-2px;filter:drop-shadow(0 4px 4px rgba(110,80,60,.2))}
.turnbar .tb{height:26px;top:15px;border-radius:13px;background:var(--cream);box-shadow:inset 0 3px 5px rgba(110,80,60,.15),0 4px 0 var(--cream2)}
.turnbar .tbf{background:linear-gradient(#a9ecd0,var(--mintd));border-radius:13px}
.turnpill{background:var(--cream);border-radius:60px;border:6px solid #fff;box-shadow:0 8px 0 var(--cream2),0 16px 24px rgba(90,70,50,.22)}
.turnpill small{color:#a08a74}.turnpill b{color:var(--ink)}
/* 角色名牌 */
.nm{background:var(--cream)!important;border-radius:41px;border:5px solid #fff;box-shadow:0 6px 0 var(--cream2),0 10px 16px rgba(90,70,50,.2);padding-bottom:0}
.nm-blue{color:#3f8fd6}.nm-pink{color:#e0709a}
.r2char .nm{width:200px;height:64px;left:30px;top:178px;font-size:28px}
.r2tut .tutwrap img{border-radius:40px}
/* 關卡標題、結算底色 */
#scRound.r1 .rbg{background:radial-gradient(ellipse at 50% 40%,#d9f5e9,#9fdcc3 80%)}
#scRound.r2 .rbg{background:radial-gradient(ellipse at 50% 40%,#ffe9f0,#f6bccf 80%)}
#scEnd{background:radial-gradient(ellipse at 50% 40%,#fff3dc,#f5d9a8 85%)}
#scEnd .finalbox:before{background:var(--cream);border:10px solid #fff;box-shadow:0 12px 0 var(--cream2),0 24px 40px rgba(90,70,50,.28)}
#scEnd .dim{background:rgba(255,236,210,.25)}
/* ===== 試玩版：滿版 ===== */
#stage{overflow:visible}
.panel{overflow:visible;background:none!important}
.panel:before{content:"";position:absolute;top:0;bottom:0;left:-420px;right:-420px;background:url(a/v2/r1_stage_ext.jpg) center/100% 100% no-repeat}
.panel .cover{left:-420px;right:-420px}
.divider{top:-420px;height:1920px}
.r2bg{inset:-420px;background:#e9dcc6 url(a/v2/r2_table_ext.jpg) center/100% 100% no-repeat}
.r2tut .dim{inset:-420px}
#scRound .rbg{inset:-420px}
#scRound .rstripe{left:-420px;right:-420px}
#scEnd{background:none}
#scEnd:before{content:"";position:absolute;inset:-420px;background:radial-gradient(ellipse at 50% 40%,#fff3dc,#f5d9a8 85%)}
#scEnd .dim{inset:-420px}
.thbg{inset:-420px}
/* ===== 試玩版：漢堡選單 ===== */
#dmBtn{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));z-index:9998;width:56px;height:56px;border-radius:28px;
  background:rgba(255,248,236,.92);box-shadow:0 4px 0 #e8d6b6,0 6px 14px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
#dmBtn i{display:block;width:24px;height:3.5px;border-radius:2px;background:#6a5646}
#dmMenu{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(80px + env(safe-area-inset-top));z-index:9999;min-width:220px;padding:10px;border-radius:24px;
  background:#fff8ec;box-shadow:0 6px 0 #e8d6b6,0 14px 30px rgba(0,0,0,.25);display:none;flex-direction:column;gap:8px;font-family:GenSen,"PingFang TC",sans-serif}
#dmMenu.on{display:flex}
#dmMenu button{font:700 20px GenSen,"PingFang TC",sans-serif;text-align:left;padding:14px 18px;border-radius:16px;background:#fff;color:#6a5646;box-shadow:0 3px 0 #f0e2c8}
#dmMenu button b{float:right;color:#5fc49d}
#dmMenu button.off b{color:#c9a9a0}
#dmShade{position:fixed;inset:0;z-index:9997;display:none}
#dmShade.on{display:block}
/* ===== 說明頁：三格圖示版 ===== */
.panel .tut{left:60px;top:60px;width:960px;height:640px}
.panel .tut .ttl,.r2tut .ttl{position:absolute;left:50%;top:-30px;transform:translateX(-50%);padding:10px 44px 14px;border-radius:40px;background:#8fdcbc;color:#fff;font-size:40px;letter-spacing:2px;white-space:nowrap;
  box-shadow:0 7px 0 #5fc49d;text-shadow:0 2px 0 rgba(40,130,95,.45)}
.steps{position:absolute;left:36px;right:36px;top:70px;display:flex;gap:22px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.step .pic{position:relative;width:100%;height:250px;border-radius:30px;background:#fff;box-shadow:inset 0 0 0 4px #f6e7cc;display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden}
.step .pic>img{width:150px;height:150px;object-fit:contain}
.step .pic.wide>img{width:100%;height:100%;object-fit:cover}
.step .pic i{position:absolute;left:0;right:0;top:50%;transform:translateY(-34%);font-style:normal;font-size:52px;color:#6a5646;text-align:center}
.step b{margin-top:22px;font-size:40px;color:#6a5646;letter-spacing:1px}
.step span{margin-top:8px;font-size:26px;color:#a68e78}
.panel .tut .gbtn{left:330px;top:540px;width:300px;height:92px}
.panel .tut .wait{top:560px}
.r2tut .tutwrap{left:360px;top:170px;width:1200px;height:680px;background:#fff8ec;border-radius:56px;border:10px solid #fff;box-shadow:0 12px 0 #f6e7cc,0 26px 44px rgba(60,40,30,.3)}
.r2tut .tutwrap .steps{top:80px}
.r2tut .tutwrap .step .pic{height:280px}
.r2tut .gbtn{left:450px;top:590px}
.mc{width:92px;height:136px;border-radius:14px;border:5px solid #fff6dc;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #e3d3b6}
.mc.back{background:url(a/v2/star.webp) center/62% auto no-repeat,linear-gradient(#ffeaa6,#ffd977);box-shadow:0 5px 0 #e8c46a}
.mc.front{background:#fff}
.mc.ok{background:#e6f3ff;border-color:#9fd0f7;box-shadow:0 5px 0 #7ab4e6}
.mc img{width:84%;height:88%;object-fit:contain}
.step .pic i{left:auto;top:auto;right:18px;bottom:16px;transform:none;width:68px;height:68px;line-height:66px;border-radius:34px;background:#5fc49d;color:#fff;font-size:38px;box-shadow:0 4px 0 #45a582}
.step .pic.wide>img{object-position:50% 60%}
/* 按下「我準備好了」後的等待狀態 */
.panel .tut .wait{left:230px;right:230px;top:540px;height:92px;line-height:92px;border-radius:46px;background:#e8f7f0;color:#3f9a78;font-size:30px;box-shadow:inset 0 0 0 4px #bfe6d4}
.panel .tut .wait:before{content:"✓ 已準備好・";color:#2f8a68}
.panel .tut.ready .steps{opacity:.45;filter:saturate(.6);transition:opacity .3s}
.panel .tut.ready .wait{animation:waitPulse 1.6s ease-in-out infinite}
@keyframes waitPulse{50%{box-shadow:inset 0 0 0 4px #8fdcbc,0 0 0 8px rgba(143,220,188,.25)}}