/* ============================================================
   cn_202611_inficheesy — 白＋青品牌色；五大玩法 × 主播（腰上去背）＋ 常駐 CTA
   ============================================================ */
:root{
  --teal:#09b8b0;--teal-2:#007f79;--ink:#141b1b;--muted:#687474;
  --maxw:480px;
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Noto Serif SC","Songti SC",serif;
}
body.lang-hant{--font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--serif:"Noto Serif TC","Songti TC",serif}
*{box-sizing:border-box}
html,body{margin:0}
html{background-color:#000}   /* 手機上下（Safari 狀態列、工具列後方）固定黑色 */
body{font-family:var(--font);color:var(--ink);background:transparent;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.page{max-width:var(--maxw);margin:0 auto;padding:16px 16px 0}

/* 繁簡切換 */
.lang{position:fixed;top:12px;right:max(12px,calc(50% - 228px));z-index:30;display:flex;padding:3px;border-radius:999px;background:#fff;
  border:1px solid rgba(9,184,176,.35);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.lang button{border:0;background:none;padding:4px 10px;border-radius:999px;font:700 13px var(--font);color:var(--muted);cursor:pointer}
.lang button.on{background:var(--teal);color:#fff}

/* 頁首 */
.hd{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:5}
.logo{width:110px;height:auto}
.title{margin:6px 0 10px;font-size:25px;font-weight:800;letter-spacing:.06em;color:#33393c}
.title em{font-style:normal;color:var(--teal)}
.online{display:inline-flex;align-items:baseline;gap:6px;margin:0;padding:6px 16px;border-radius:999px;background:#fff;border:1.5px solid rgba(9,184,176,.3);
  font-size:14px;font-weight:700;color:#3b4247}
.online b{font-family:var(--font);font-weight:700;font-size:14px;color:var(--teal)}
.beat{width:16px;height:16px;flex:none;align-self:center;animation:beat 1.1s ease-in-out infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff85ae' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.9 4.5 6.6 4.5c2.2 0 3.6 1.2 5.4 3.2 1.8-2 3.2-3.2 5.4-3.2 3.7 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.18)}}

/* ================= 固定底圖：只換色不移動 ================= */
html{background:#000}
.bgfix{display:none;position:fixed;inset:-120px 0;z-index:-1;pointer-events:none}
.bgl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.bgl.on{opacity:1}
.bgl::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.7),transparent 32%),radial-gradient(circle at 85% 72%,rgba(255,255,255,.4),transparent 34%)}
.bgl.b0{background:linear-gradient(180deg,#f8ffff,#e6f8f5)}
.bgl.b1{background:linear-gradient(170deg,#f2fdfb,#9be6dc 55%,#5ccfc5)}
.bgl.b2{background:linear-gradient(170deg,#eef8ff,#a9d6f6 55%,#b3a9ef)}
.bgl.b3{background:linear-gradient(170deg,#fff3f7,#ffc9dc 50%,#ff9fc0)}
.bgl.b4{background:linear-gradient(170deg,#f2efff,#b8adf3 55%,#73d3ca)}
.bgl.b5{background:linear-gradient(170deg,#effcf7,#9de3d6 50%,#ffdc85)}

/* ================= 五大玩法：直式海報串 =================
   每區塊滿版、上下漸層與前後區塊疊接；主播左右交錯，文字欄與 CTA 在另一側
   元件：底色／英文手寫字（在主播後）／主播／標題組／站內介面／名牌／CTA；捲入畫面（.on）時依序進場 */
.plays{margin:-78px -16px 0}
.pg{--acc:#079e97;--glow:rgba(0,150,140,.55);--c1:#079e97;--c2:#2fd0bd;
  position:relative;aspect-ratio:390/540;overflow:hidden;isolation:isolate;cursor:pointer;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 86%,transparent)}
.pg+.pg{margin-top:-58px}
.pg::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 20% 22%,rgba(255,255,255,.7),transparent 30%),radial-gradient(circle at 85% 72%,rgba(255,255,255,.4),transparent 32%),var(--bg)}
.p1{--bg:linear-gradient(160deg,#e3fbf7,#9be6dc 50%,#47c9bf);--c1:#05978f;--c2:#3fd9c4}
.p2{--bg:linear-gradient(160deg,#e6f6ff,#a9d6f6 50%,#b3a9ef);--acc:#3f86d6;--glow:rgba(60,120,210,.5);--c1:#2f6fd0;--c2:#9a86f0}
.p3{--bg:linear-gradient(180deg,#e3fbf7,rgba(227,251,247,0) 5%),linear-gradient(160deg,#fff3f7,#ffc9dc 50%,#ff9fc0);--acc:#f0628f;--glow:rgba(240,98,143,.5);--c1:#e94d80;--c2:#ffa3c2}
.p4{--bg:linear-gradient(180deg,#e3fbf7,rgba(227,251,247,0) 11%),linear-gradient(160deg,#ece8ff,#b8adf3 50%,#9d90ee);--acc:#7158db;--glow:rgba(113,88,219,.55);--c1:#6447d6;--c2:#3fc9bd}
.p5{--bg:linear-gradient(175deg,#e3faf4,#9de3d6 40%,#c9b08a 88%,#c8a57d);--acc:#a8743f;--glow:rgba(150,100,50,.45);--c1:#9c6a3a;--c2:#d9a86a}

/* 英文手寫字：跟最初版一樣壓在中文標題後方、往左上錯開；在主播前面，不會被主播切到 */
.pg-ttl{z-index:0}
.pg-en{position:absolute;z-index:-1;left:-8px;top:-.78em;font:400 100px/1 "Great Vibes",cursive;color:rgba(255,255,255,.72);white-space:nowrap;pointer-events:none;
  text-shadow:0 2px 14px rgba(255,255,255,.55)}
.pg-host{position:absolute;z-index:2;height:auto;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 76%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 76%,transparent);mask-composite:intersect}
.pg-head{position:absolute;z-index:4;top:24%;display:flex;flex-direction:column}
.pg-no{font:600 11px/1 "Josefin Sans",sans-serif;letter-spacing:.32em;color:#fff;margin-bottom:8px}
.pg-ttl{position:relative;margin:0;font:900 66px/1.05 var(--serif);color:#fff;letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 18px var(--glow),2px 3px 0 rgba(255,255,255,.35)}
.pg-ttl i{display:inline-block;font-style:normal}
.pg-sub{margin:10px 0 0;padding:5px 10px;border-radius:4px;background:var(--acc);color:#fff;font:600 13px/1.5 var(--serif);letter-spacing:.06em;position:relative;overflow:hidden;width:max-content}
.pg-sub::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 2.6s ease-in-out infinite}
.pg-tag{position:absolute;z-index:4;top:14%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 5px;background:rgba(255,255,255,.92);border:1px solid var(--acc);box-shadow:3px 3px 0 var(--acc)}
.pg-tag b{writing-mode:vertical-rl;font:900 15px/1 var(--serif);letter-spacing:.12em;color:var(--ink)}
.pg-tag small{writing-mode:vertical-rl;font:600 10px/1 "Josefin Sans",sans-serif;letter-spacing:.08em;color:var(--acc)}
.pg-ui{position:absolute;z-index:4}
.pg-ui,.pg-ui *,.u-timer,.u-btns{font:800 12px/1.25 var(--font);color:#fff}
/* 區塊 CTA：在文字欄那側，顏色跟區塊主色 */
.pg-cta{position:absolute;z-index:5;bottom:15%;display:flex;align-items:center;justify-content:center;gap:10px;width:54%;height:48px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,var(--c1),var(--c2));color:#fff;font:900 17px/1 var(--font);letter-spacing:.14em;box-shadow:0 6px 16px color-mix(in srgb,var(--c1) 40%,transparent)}
.pg-cta i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--c1);font-style:normal;letter-spacing:0;animation:nudge 1.6s ease-in-out infinite}
.pg-cta i svg{width:16px;height:16px;display:block}
.pg-cta::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:shine 2.4s ease-in-out infinite}

/* 左右：.p1 .p3 .p5 主播在右、文字在左；.p2 .p4 相反 */
.p2 .pg-en,.p4 .pg-en{left:auto;right:-8px}
.p1 .pg-head,.p3 .pg-head,.p5 .pg-head{left:6%;align-items:flex-start}
.p2 .pg-head,.p4 .pg-head{right:6%;align-items:flex-end;text-align:right}
.p1 .pg-tag,.p3 .pg-tag,.p5 .pg-tag{right:5%}.p2 .pg-tag,.p4 .pg-tag{left:5%;box-shadow:-3px 3px 0 var(--acc)}
.p5 .pg-tag{top:19%}   /* 艾悠名牌往下 */
.p2 .pg-tag{left:auto;right:5%;top:auto;bottom:14%;box-shadow:3px 3px 0 var(--acc)}   /* 灣灣頭在左上，名牌改放右側通話鈕下方，避免壓到人 */
.pg.p2 .pg-cta{bottom:13%;right:calc(5% + 50px)}   /* 灣灣：CTA 往上、在名牌左邊 */
.p1 .pg-cta,.p3 .pg-cta,.p5 .pg-cta{left:6%}
.p4 .pg-head{right:4%}   /* 限時表演標題、英文、介紹、icon 往右一點 */
.p4 .pg-cta{bottom:17.5%}   /* 往上，不壓到右下翻頁鈕 */
.p3 .pg-cta{bottom:11.5%}.p1 .pg-cta{bottom:12%}   /* CTA 要在區塊下緣淡出範圍之上 */.p2 .pg-cta{right:6%}.p4 .pg-cta{right:3%}   /* 限時表演 CTA 右緣對齊標題文字 */
/* 主播比例：五位一律同高（區塊 78%）、貼齊區塊下緣，寬度依原圖比例；貼齊各自那一側 */
.pg-host{height:78%;width:auto;bottom:0}
.p1 .pg-host,.p3 .pg-host,.p5 .pg-host{right:-6%}
.p2 .pg-host,.p4 .pg-host{left:-6%}
.p2 .pg-host{left:0}
.p3 .pg-host{right:-30%;height:66%;bottom:4%}   /* 臉在圖片中間的往外推，避免被對話／播放器蓋到 */
.pg-head{max-width:62%}
.pg-head>.pg-ui{position:static;margin-top:10px;display:flex;flex-direction:column;gap:7px}
.p1 .pg-head>.pg-ui,.p3 .pg-head>.pg-ui,.p5 .pg-head>.pg-ui{align-items:flex-start}
.p2 .pg-head>.pg-ui,.p4 .pg-head>.pg-ui{align-items:flex-end}
.p2 .pg-head{top:calc(24% + 14px)}   /* 一對一右側文字與介面略往下 */

/* ---- 01 直播 ---- */
.u-livebadge{display:inline-block;vertical-align:28px;margin-left:8px;padding:3px 8px;border-radius:5px;background:#ff3b5c;font:900 12px/1 var(--font);letter-spacing:.08em;color:#fff;text-shadow:none;animation:blink 1.2s steps(1) infinite}
.u-acts{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.u-acts img{transform-origin:left center;width:116px;height:36px;object-fit:fill;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.u-chat{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.u-chat p{margin:0;padding:5px 10px;border-radius:12px;background:rgba(0,0,0,.36);font-weight:600}
.u-chat b{color:#ffe14d!important;margin-right:5px}
.u-chat em{font-style:normal;color:rgba(255,255,255,.62)!important;font-weight:600;margin-right:2px}
/* ---- 02 一對一 ---- */
.u-timer{position:static;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.4)}
.u-timer i{color:#ff3b5c;font-style:normal;animation:blink 1s steps(1) infinite}
.u-btns{position:static;display:flex;gap:12px;align-items:center}
.u-btns i{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center}
.u-btns i svg{width:17px;height:17px}.u-btns .end{width:46px;height:46px;background:#ff3b5c;animation:ring 1.6s ease-in-out infinite}
/* ---- 03 私訊 ---- */
.p3 .pg-head>.pg-ui{width:190px}
.u-msg p{margin:0;padding:6px 10px;border-radius:14px;max-width:100%;font-weight:600}
.u-msg .in{align-self:flex-start;background:rgba(0,0,0,.36)}
.u-msg .out{align-self:flex-end;background:var(--teal)}
.u-msg .voice{display:flex;gap:2px;align-items:center}
.u-msg .voice i{width:2px;height:8px;background:#7ff3ea;border-radius:2px;animation:wave .9s ease-in-out infinite}
.u-msg .voice i:nth-child(2n){height:13px;animation-delay:.2s}.u-msg .voice i:nth-child(3n){animation-delay:.4s}
.u-msg .vid{padding:4px}.u-msg .vid video{display:block;width:72px;height:96px;object-fit:cover;border-radius:10px;background:#333}
/* ---- 04 限時表演 ---- */
.pg-head .u-ticket{width:68px;margin-bottom:-4px}
.p4 .pg-ttl{font-size:54px}
.u-show{padding:5px 11px;border-radius:9px;background:rgba(0,0,0,.4)}.u-show i{font-style:normal;color:#ffe14d!important}
.u-prog{width:150px;text-align:right}.u-prog i{display:block;margin-top:5px;height:7px;border-radius:7px;background:rgba(255,255,255,.45)}
.u-prog i b{display:block;width:88%;height:100%;border-radius:7px;background:#ffd23f}
/* ---- 05 影音 ---- */
.u-lock{display:flex;gap:5px;align-items:center;padding:5px 11px;border-radius:9px;background:rgba(0,0,0,.38)}.u-lock svg{width:13px;height:13px}
.u-player{display:flex;align-items:center;gap:8px;width:150px}
.u-bar{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.45)}.u-bar b{display:block;height:100%;width:40%;border-radius:4px;background:var(--teal)}

/* ---------- 進場 ---------- */
.pg .pg-en,.pg .pg-host,.pg .pg-head>*,.pg .pg-ttl i,.pg .pg-tag,.pg .pg-ui,.pg .u-timer,.pg .u-btns,.pg .u-ticket,.pg .pg-cta{opacity:0}
.pg.on .pg-en{animation:enSweep 1s ease-out both .1s}
.pg.on .pg-host{animation:hostIn .9s cubic-bezier(.2,.8,.2,1) both .1s}
.pg.on .pg-head>*{animation:fadeUp .5s ease-out both .25s}
.pg.on .pg-ttl{opacity:1}
.pg.on .pg-ttl i{animation:charIn .6s cubic-bezier(.2,.9,.3,1.2) both}
.pg.on .pg-ttl i:nth-of-type(1){animation-delay:.35s}.pg.on .pg-ttl i:nth-of-type(2){animation-delay:.47s}
.pg.on .pg-ttl i:nth-of-type(3){animation-delay:.59s}.pg.on .pg-ttl i:nth-of-type(4){animation-delay:.71s}
.pg.on .pg-sub{animation:fadeUp .5s ease-out both .75s}
.pg.on .pg-tag{animation:tagDrop .6s cubic-bezier(.3,1.4,.5,1) both .6s}
.pg.on .pg-ui,.pg.on .u-timer,.pg.on .u-btns{animation:fadeUp .5s ease-out both .9s}
.pg.on .u-ticket{animation:ticketIn .7s cubic-bezier(.3,1.5,.5,1) both .45s,bob 1.8s ease-in-out infinite 1.2s}
.pg.on .pg-cta{animation:ctaIn .6s cubic-bezier(.3,1.4,.5,1) both 1.1s,ctaPulse 2s ease-in-out infinite 1.8s}
.p3,.p4{aspect-ratio:390/610}
.p1{--hx:50px}.p2{--hx:-50px}.p3{--hx:50px}.p4{--hx:-50px}.p5{--hx:50px}
@keyframes hostIn{from{opacity:0;transform:translate(var(--hx,0),16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tagDrop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
@keyframes ticketIn{from{opacity:0;transform:rotate(-30deg) scale(.4)}to{opacity:1;transform:none}}
@keyframes ctaIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes ctaPulse{0%,100%{opacity:1;transform:none}50%{opacity:1;transform:scale(1.03)}}
/* 留言／對話：一則一則跳出來，循環 */
.pg.on .u-chat p,.pg.on .u-msg p{animation:bubble 6s cubic-bezier(.3,1.5,.5,1) infinite both}
.pg.on .u-chat p:nth-child(1),.pg.on .u-msg p:nth-child(1){animation-delay:1s}
.pg.on .u-chat p:nth-child(2),.pg.on .u-msg p:nth-child(2){animation-delay:1.6s}
.pg.on .u-chat p:nth-child(3),.pg.on .u-msg p:nth-child(3){animation-delay:2.2s}
.pg.on .u-chat p:nth-child(4),.pg.on .u-msg p:nth-child(4){animation-delay:2.8s}
.pg.on .u-chat p:nth-child(5){animation-delay:3.4s}
.pg.on .u-msg p:nth-child(1){animation-delay:.6s}.pg.on .u-msg p:nth-child(2){animation-delay:1.2s}.pg.on .u-msg p:nth-child(3){animation-delay:1.8s}.pg.on .u-msg p:nth-child(4){animation-delay:2.4s}   /* 私訊對話早一點跳出 */
/* 留言跳出「下指令」「遙控」時，上方對應的 icon 同步亮一下（與留言同為 6 秒循環） */
.pg.on .u-acts .a-cmd{animation:actHit 6s ease-out infinite 2.2s}.pg.on .u-acts .a-toy{animation:actHit 6s ease-out infinite 3.4s}
@keyframes actHit{0%,14%,100%{transform:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}6%{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(255,236,120,.95)) brightness(1.18)}}   /* 每輪只亮一次 */

@keyframes bubble{0%{opacity:0;transform:translateY(14px) scale(.7)}6%{opacity:1;transform:none}80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-6px)}}
.pg.on .u-prog i b{animation:fill 1.6s ease-out both 1.3s}
.pg.on .u-bar b{animation:fill 6s linear infinite 1.3s}
@keyframes enSweep{from{opacity:0;clip-path:inset(-60% 100% -60% -20%)}to{opacity:1;clip-path:inset(-60% -20% -60% -20%)}}
@keyframes charIn{from{opacity:0;transform:translateY(26px) scale(.8);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fill{from{width:0}}
@keyframes ring{0%,60%,100%{transform:none}70%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}90%{transform:rotate(-6deg)}}
@keyframes wave{50%{transform:scaleY(.4)}}
@keyframes bob{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes blink{50%{opacity:.35}}@keyframes pulse{50%{transform:scale(1.1)}}
@keyframes nudge{50%{transform:translateX(3px)}}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}

/* 免翻牆導航（次要） */
.cta-sub{display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,300px);height:48px;margin:10px auto 0;border-radius:999px;background:#fff;
  border:2px solid var(--teal);color:var(--teal-2);font-size:16px;font-weight:900;letter-spacing:.1em}
.cta-sub svg{width:20px;height:20px}

/* 平台特色（同 amxiaolin） */
.features{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 0;padding:8px 0 7px;border-top:1px solid rgba(8,189,180,.16);border-bottom:1px solid rgba(8,189,180,.16)}
.features>div{padding:7px 5px;text-align:center;border-right:1px solid rgba(8,189,180,.17)}.features>div:last-child{border-right:0}
.f-ic{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 3px;color:#08aaa2}
.f-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.features h3{max-width:7em;margin:0 auto;font-size:11px;font-weight:750;line-height:1.32}.features h3 span{display:block}
/* 官方社群＋準則 */
.foot{display:flex;flex-direction:column;align-items:center;padding:12px 0 20px}
.social{display:flex;gap:10px;margin-bottom:10px}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%}
.social img{width:28px;height:28px;object-fit:contain}
.legal{color:var(--muted);text-align:center}.legal p{margin:2px 0;font-size:11px;line-height:1.35}.legal p:first-child{color:#474f4f;font-weight:800}

/* 區塊後的總 CTA */
.cta-main{position:relative;display:flex;align-items:center;justify-content:center;width:min(100%,340px);height:56px;margin:8px auto 0;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#14c9be,#09b8b0 55%,#0aa0c8);color:#fff;font-size:20px;font-weight:900;letter-spacing:.2em;box-shadow:0 8px 20px rgba(9,184,176,.35);animation:ctaPulse 2s ease-in-out infinite}
.cta-main span{padding-right:30px}
.cta-main i{position:absolute;right:8px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--teal);font-style:normal}
.cta-main i svg{width:22px;height:22px}
.cta-main::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:shine 2.4s ease-in-out infinite}

/* ================= 推薦碼條：玻璃感、窄版（同夸克） ================= */
.dock{position:fixed;z-index:40;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);width:calc(100% - 32px);max-width:390px}
.ref{display:flex;align-items:center;gap:6px;height:60px;padding:0 5px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 6px 18px rgba(0,60,58,.14)}
.ref-logo{flex:none;width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.ref-copy{flex:1;min-width:0;display:flex;justify-content:center;overflow:hidden}.ref-copy>div{display:inline-flex;flex-direction:column}.ref-copy p{margin:0}
.ref-1{display:flex;align-items:center;justify-content:space-between;gap:2px;color:#4f595d;font-size:clamp(15px,4.35vw,20.5px);font-weight:700;letter-spacing:.08em;line-height:1.1;white-space:nowrap}
.ref-1 strong{color:#ffb21e;text-shadow:0 0 1px rgba(200,120,0,.25);font-weight:700;margin:0 .14em}
.ref-dia{width:18px;height:16px;object-fit:contain;animation:diaSpin 2.4s linear infinite;filter:drop-shadow(0 0 4px rgba(61,231,222,.7))}
@keyframes diaSpin{from{transform:perspective(80px) rotateY(0)}to{transform:perspective(80px) rotateY(360deg)}}
.ref-2{margin-top:6px!important;color:#4d5a5a;font-size:clamp(7.2px,2.05vw,9.6px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-div{display:none}
.ref-btn{flex:none;width:62px;height:50px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffd75e,#ffb81f);color:#fff;text-shadow:0 1px 2px rgba(170,100,0,.4);font:900 16px var(--font);letter-spacing:.08em;padding:0 0 0 .08em;cursor:pointer}   /* 字距與推薦碼第一行一致 */
.pg-cta em,.scta em{font-style:normal;color:#ffe27a;text-shadow:0 1px 3px rgba(120,60,0,.45)}   /* 「免費」重點標示 */
.ref-btn.to-site{font-size:14.5px;line-height:1.15;background:linear-gradient(180deg,#ffb35c,#f08a2c)}

.toast{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));z-index:60;transform:translate(-50%,10px);opacity:0;padding:8px 16px;border-radius:999px;white-space:nowrap;color:#fff;
  background:rgba(0,120,114,.38);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(255,255,255,.45);box-shadow:0 6px 16px rgba(0,60,58,.18);
  font-size:13px;font-weight:800;letter-spacing:.1em;text-shadow:0 1px 3px rgba(0,60,58,.35);transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}.pl *{opacity:1!important}}

/* ================= 入場動畫（參考 InfiCheesy 片頭，改成 SWAG 青色＋鑽石） =================
   青色畫面縮成鑽石形 → 鑽石彈出＋放射線 → SWAG 與副標出現（副標與頁首標題同一行字）→ 一起往上移到頁首 */
@property --r{syntax:"<length>";inherits:false;initial-value:1500px}
.intro{position:fixed;inset:-120px 0;z-index:80;pointer-events:none;transition:transform .75s cubic-bezier(.7,0,.25,1);background-color:#e6f8f5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M22 20h20l7 9-17 19-17-19z M15 29h34 M27 20l5 9-5 0 M37 20l-5 9 M32 29v19' fill='none' stroke='%2309b8b0' stroke-opacity='.22' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/64px 64px,
    linear-gradient(160deg,#f2fdfb,#c6efe9)}
.it-cover{position:absolute;inset:0;background:linear-gradient(160deg,#0fc4b9,#078c86);
  clip-path:polygon(calc(50% - var(--r)*.5) calc(50% - 70px - var(--r)*.62),calc(50% + var(--r)*.5) calc(50% - 70px - var(--r)*.62),calc(50% + var(--r)) calc(50% - 70px - var(--r)*.14),50% calc(50% - 70px + var(--r)),calc(50% - var(--r)) calc(50% - 70px - var(--r)*.14));
}
.intro.go .it-cover{animation:coverShrink .85s cubic-bezier(.7,0,.3,1) both .1s}
@keyframes coverShrink{from{--r:1500px}85%{--r:30px;opacity:1}to{--r:30px;opacity:0}}
.it-dia{position:absolute;left:50%;top:calc(50% - 70px);width:62px;translate:-50% -50%;opacity:0;
  filter:drop-shadow(0 0 10px rgba(61,231,222,.8))}
.intro.go .it-dia{animation:diaPop .55s cubic-bezier(.3,1.7,.5,1) both .85s,diaSpin 2.4s linear infinite 1.4s}
@keyframes diaPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.it-rays{position:absolute;left:50%;top:calc(50% - 70px);width:150px;height:150px;translate:-50% -50%;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(#09b8b0 0 4deg,transparent 4deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 48%,#000 62%,transparent 64%);mask:radial-gradient(circle,transparent 46%,#000 48%,#000 62%,transparent 64%);
}
.intro.go .it-rays{animation:rays .7s ease-out both .95s}
@keyframes rays{0%{opacity:0;transform:scale(.5) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(20deg)}}
body.intro-on{overflow:hidden}
body.intro-on .hd{z-index:90}
body.intro-on:not(.entering) .online,body.intro-on:not(.entering) .lang,body.intro-on:not(.entering) .dock{opacity:0}
.online,.lang,.dock{transition:opacity .6s ease .15s}   /* 入場往上推的同時淡入，不會等入場結束才跳出來 */
body.intro-on .logo,body.intro-on .title{opacity:0}
body.intro-on.it-logo .logo{opacity:1;transition:opacity .3s}
body.intro-on.it-title .title{opacity:1;transition:opacity .2s}
body.it-title .title{animation:glitch .55s steps(2) both}
@keyframes glitch{0%{clip-path:inset(0 0 60% 0);translate:-6px 0}20%{clip-path:inset(40% 0 20% 0);translate:5px 0}40%{clip-path:inset(10% 0 50% 0);translate:-3px 0}
  60%{clip-path:inset(60% 0 0 0);translate:4px 0}80%{clip-path:inset(0 0 0 0);translate:-2px 0}100%{clip-path:inset(0 0 0 0);translate:0 0}}
.intro.out{transform:translateY(-100%)}   /* 入場結束：整個入場畫面往上推走，跟 logo 移到頁首同一個節奏 */
.intro.out .it-dia{transition:transform .6s cubic-bezier(.7,0,.3,1);transform:translateY(-60vh) scale(.4)}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ================= 飛行 CTA =================
   .pg-cta／.cta-main 是隱形「位置」；這顆固定按鈕跟著目前區塊的位置走
   換區塊：收成只剩主播頭像的圓 → 飛到新位置 → 換底色、換頭像、文字逐字浮出 → 展開，並從按鈕擴散一圈新顏色 */
@property --fa{syntax:"<color>";inherits:true;initial-value:#0fb5ab}
@property --fb{syntax:"<color>";inherits:true;initial-value:#2fd0bd}
.cta-fly{position:fixed;z-index:35;left:0;top:0;display:flex;align-items:center;gap:8px;height:50px;padding:0 8px 0 18px;border-radius:999px;
  background:linear-gradient(90deg,var(--fa),var(--fb));color:#fff;font:900 17px/1 var(--font);letter-spacing:.14em;box-shadow:0 8px 18px rgba(0,60,58,.22);
  transition:--fa .45s,--fb .45s,opacity .4s;will-change:transform,width}
.cta-fly.moving{transition:transform .7s cubic-bezier(.45,0,.2,1),width .7s cubic-bezier(.45,0,.2,1),--fa .9s,--fb .9s}
.cta-av{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cta-fly.shrink .cta-av{transform:scale(1.08)}
.cta-fly .cta-t{flex:1;overflow:hidden;white-space:nowrap;text-align:center;transition:opacity .2s}
.cta-fly.shrink .cta-t,.cta-fly.shrink i{opacity:0}
.cta-t span{display:inline-block;animation:chUp .42s cubic-bezier(.3,1.5,.5,1) both}
@keyframes chUp{from{opacity:0;transform:translateY(70%) scale(.8)}to{opacity:1;transform:none}}
.cta-fly i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--fa);font-style:normal;font-size:21px;letter-spacing:0;transition:opacity .2s;animation:nudge 1.6s ease-in-out infinite}
.cta-fly::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 var(--fa);opacity:0}
.cta-fly.arrive::before{animation:ripple .8s ease-out}
@keyframes ripple{0%{opacity:.7;box-shadow:0 0 0 0 var(--fa)}100%{opacity:0;box-shadow:0 0 0 26px var(--fa)}}
.cta-fly::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%) -200% 0/200% 100% no-repeat;animation:sheen 2.6s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%{background-position:-200% 0}60%,100%{background-position:200% 0}}
body.intro-on .cta-fly{opacity:0}
.cta-fly{display:none!important}   /* 轉場方式選定前先停用 */

/* 影音之後一路延續咖青漸層到頁尾 */
.pg.p5{-webkit-mask-image:linear-gradient(transparent,#000 12%);mask-image:linear-gradient(transparent,#000 12%)}
.tail{margin:0 -16px;padding:14px 16px 0;background:linear-gradient(180deg,#8fd8cc,#b5e7de 40%,#d9f3ee 80%,#e9f8f5)}
.tail .features{border-color:rgba(0,110,104,.16)}.tail .features>div{border-color:rgba(0,110,104,.14)}
.tail .f-ic{color:#0a8f88}.tail .legal{color:#4f6966}.tail .legal p:first-child{color:#2c4542}
.tail .cta-sub{background:rgba(255,255,255,.85)}

/* ================= A 跟手漸變：五大玩法舞台 =================
   .stage 黏在畫面上；五個 .pg 疊在同一位置，透明度／位移由捲動比例決定（main.js）
   底圖 .sbg 只交叉淡換；CTA .scta 只有一顆，位置、寬度、顏色、文案依比例在相鄰兩區之間漸變 */
.stage-wrap{position:relative;height:calc(5 * 80svh + 100lvh);margin:calc(-1 * var(--hdh,150px)) -16px 0}
.stage{position:sticky;top:0;height:100lvh;overflow:hidden;isolation:isolate}
.sbg{position:absolute;inset:0;aspect-ratio:auto;opacity:0;background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.7),transparent 30%),radial-gradient(circle at 85% 72%,rgba(255,255,255,.4),transparent 32%),var(--bg)}
.sbg.p1{opacity:1}
.stage .pg{position:absolute;left:0;right:0;top:calc(var(--hdh,150px) - 92px);aspect-ratio:390/600!important;margin:0!important;
  -webkit-mask-image:none!important;mask-image:none!important;pointer-events:none;overflow:visible}
.stage .pg::before{display:none}
.stage .pg.cur{pointer-events:auto}
.stage .pg:not(.p1) .pg-host,.stage .pg:not(.p1) .pg-head,.stage .pg:not(.p1) .pg-tag,.stage .p6-btn{opacity:0;pointer-events:none}
.stage .pg .pg-en,.stage .pg .pg-host,.stage .pg .pg-head>*,.stage .pg .pg-ttl i,.stage .pg .pg-tag,.stage .pg .pg-ui,.stage .pg .u-timer,.stage .pg .u-btns,.stage .pg .u-ticket{opacity:1;animation:none}
.stage .pg .pg-host,.stage .pg .pg-head,.stage .pg .pg-tag{will-change:opacity,transform}
.stage .pg .pg-cta{visibility:hidden;animation:none}
.stage .pg .pg-host{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(#000 70%,transparent)}
.scta{position:absolute;z-index:9;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:10px;width:54%;height:48px;border-radius:999px;overflow:hidden;
  color:#fff;font:900 17px/1 var(--font);letter-spacing:.14em;box-shadow:0 8px 18px rgba(0,60,58,.22);will-change:transform,width}
.scta-t{position:relative;display:grid}.scta-t b{grid-area:1/1;font-weight:900;white-space:nowrap;text-align:center}
.scta i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--sc,#0fb5ab);font-style:normal}
.scta i svg{width:16px;height:16px;display:block}
.scta::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);animation:shine 2.4s ease-in-out infinite}
body.intro-on .scta{opacity:0}

/* 頁首（logo／標題／在線）整頁都留在最上方；舞台從頁首後面開始，版面接在頁首下方 */
.hd{position:sticky;top:0;z-index:20;margin:-16px -16px 0;padding:16px 16px 10px;
  background:linear-gradient(rgba(248,255,255,.82),rgba(248,255,255,.55) 70%,rgba(248,255,255,0))}

/* ---- 06 收尾頁：置中，五位主播頭像＋總 CTA＋免翻牆導航；底色接到頁尾的咖青漸層 ---- */
.p6{--bg:linear-gradient(180deg,#e6faf6,#a6e3d8 45%,#8fd8cc);--acc:#09a59d;--glow:rgba(0,150,140,.5);--c1:#07958d;--c2:#2fd0bd}
.p6 .pg-head{left:0;right:0;top:24%;max-width:none;align-items:center;text-align:center}
.p6 .pg-en{left:50%;right:auto;translate:-50% 0}
.u-hosts{display:flex;gap:8px;justify-content:center;margin:18px 0 0;padding:0;list-style:none}
.u-hosts li{display:flex;flex-direction:column;align-items:center;gap:5px}
.u-hosts img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.u-hosts b{font:900 12px/1 var(--serif);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.p6 .pg-cta{left:12%;width:76%;bottom:calc(33% - var(--p6d))}
/* 三顆按鈕等寬等高 */
.p6-btn{position:absolute;z-index:5;left:12%;width:76%;height:48px;display:flex;align-items:center;justify-content:flex-start;padding-left:64px;gap:8px;border-radius:999px;
  background:rgba(255,255,255,.9);border:2px solid var(--teal);color:var(--teal-2);font:900 16px/1 var(--font);letter-spacing:.12em}
.p6-btn svg{width:19px;height:19px}
/* 窄螢幕（<400px）頁面較矮：三顆按鈕整組往下，不壓到頭貼名字 */
.p6{--p6d:max(0px,(400px - 100vw) * .6)}
.p6-nav{bottom:calc(33% - 60px - var(--p6d))}.p6-app{bottom:calc(33% - 120px - var(--p6d))}
.p6 .pg-cta{height:48px;font-size:16px}
.p6-online{display:block;height:34px;margin-top:12px}
.u-chips{display:flex;gap:6px;justify-content:center;margin:14px 0 0;padding:0;list-style:none}
.u-chips li{position:relative;display:flex;flex-direction:column;align-items:center;width:62px}
.u-chips img{height:74px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15))}
.u-chips b{margin-top:-14px;position:relative;padding:4px 0;width:100%;border-radius:8px;background:rgba(255,255,255,.88);border:1px solid rgba(9,184,176,.6);
  font:900 13px/1 var(--font);color:var(--teal-2);text-align:center}
.tail{position:relative;z-index:2;margin-top:-225px;padding-top:0;background:linear-gradient(180deg,rgba(143,216,204,0),#8fd8cc 40px,#b5e7de 40%,#d9f3ee 80%,#e9f8f5)}   /* 往上接到第 6 頁按鈕下方，不留空 */

/* 共用 CTA：到最後一頁時左側換成 icon（與另外兩顆一致）、右側箭頭收起 */
.scta-ic{display:grid;place-items:center;width:0;overflow:hidden;opacity:0}
.scta-ic svg{width:19px;height:19px;flex:none}

/* 頁尾底色一路鋪到最底（推薦碼條後方不再露出別的底色） */
.tail{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* iPhone Safari 會用貼齊畫面上／下緣的固定元素顏色去填狀態列與工具列（只在出現時取一次色）：兩條細色條固定黑色，上下永遠是黑 */
.edge{position:fixed;left:0;right:0;z-index:100;height:3px;pointer-events:none;background-color:#000}
.edge-t{top:0;height:0}.edge-b{bottom:0;display:none}   /* 平常不顯示黑線；上緣只在入場時用來給 Safari 取黑色 */
body.intro-on .edge-t{height:96px;background:linear-gradient(#000 16px,rgba(0,0,0,0));transition:transform .75s cubic-bezier(.7,0,.25,1)}
body.intro-on.entering .edge-t{transform:translateY(-100%)}   /* 跟入場畫面一起往上推走 */
.intro::after{content:"";position:absolute;left:0;right:0;bottom:120px;z-index:5;height:96px;pointer-events:none;background:linear-gradient(rgba(0,0,0,0),#000 calc(100% - 16px));transition:transform .75s cubic-bezier(.7,0,.25,1)}   /* 下方比照上方：入場時最下方淡進黑色；畫在入場畫面裡，不用貼底的固定元素，Safari 工具列才會直接跟著頁面底色換 */
.intro.out::after{transform:translateY(calc(100vh + 336px))}   /* 入場畫面往上推時，這段反方向往下推出畫面 */
body.it-edges-off .edge-t{display:none}   /* 推完上下一起拿掉：Safari 會跟著貼邊的固定元素取色，留著會一直是黑色 */

/* 入場結束、頁面接手：主播滑入、標題文案往上浮現、CTA 最後出現；留言從這時才一則一則跳 */
body.entering .stage .p1 .pg-host{animation:enterHost 1.1s cubic-bezier(.2,.8,.2,1) backwards .1s}
body.entering .stage .p1 .pg-head{animation:enterUp .8s cubic-bezier(.2,.8,.2,1) backwards .3s}
body.entering .stage .p1 .pg-tag{animation:enterUp .8s cubic-bezier(.2,.8,.2,1) backwards .5s}
@keyframes enterHost{from{opacity:0;translate:16% 0;scale:1.05}}
@keyframes enterUp{from{opacity:0;translate:0 26px}}
.scta{transition:opacity .6s ease .2s}

/* 桌機：只有中間版面有底色，兩側為黑色（入場動畫也只在中間） */
@media (min-width:481px),(hover:hover) and (pointer:fine){   /* 桌機視窗拉窄也套用 */
  html{background-color:#000!important}
  .page{background-color:#8fd8cc}   /* 中間欄底色，頁尾上緣漸層不會透出兩側的黑 */
  .edge{display:none}
  .intro{left:calc(50% - 240px);right:calc(50% - 240px)}
  /* 桌機推薦碼條離視窗底部留空間；視窗很高、頁面已到最大寬度時，推薦碼條跟著頁面往上，CTA 下方不會空一大塊 */
  /* 推薦碼條貼近視窗底；視窗比頁面高時頁面往下移（--dsh 由 main.js 算），人物到 logo 與 CTA 到推薦碼條的距離一致 */
  :root{--dpw:min(var(--maxw),max(390px,calc((100lvh - var(--hdh,150px) + 92px - 100px) * 390 / 600)));
    --dbase:calc(100lvh - (var(--hdh,150px) - 92px) - var(--dpw) * 600 / 390 - 120px)}
  .dock{bottom:clamp(20px,var(--dbase),40px)}
  .ref-1,.ref-1 strong{font-weight:500}   /* 桌機推薦碼主標細一點 */
  .hd{padding-top:30px}   /* 桌機 logo 往下一點 */
  .stage .pg{top:calc(var(--hdh,150px) - 92px + var(--dsh,0px))}
  /* 桌機視窗較矮：每頁內容依視窗高度縮放，底部留給推薦碼條，不會被蓋到 */
  .stage .pg .pg-host{translate:0 32px}   /* 桌機主播往下一點 */
  .tail{background:linear-gradient(180deg,rgba(166,227,216,0),#b5e7de 140px,#d9f3ee 70%,#e9f8f5)}   /* 桌機頁尾直接從第 6 頁底色淡入，不出現深色一條、看起來像兩區 */
  .stage .pg{--pw:min(100%,max(390px,calc((100lvh - var(--hdh,150px) + 92px - 100px) * 390 / 600)));left:calc(50% - var(--pw) / 2);right:auto;width:var(--pw)}
}
/* 首屏右下的往下滑提示（推薦碼條上方） */
.scroll-cue{position:fixed;z-index:41;right:8px;bottom:calc(80px + env(safe-area-inset-bottom));width:56px;height:56px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}   /* 外框 56px 透明感應區，避免點偏按到頁面 */
.scroll-cue.show{opacity:1;pointer-events:auto}
.cue-in{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,80,76,.18);display:flex;align-items:center;justify-content:center;animation:cueBob 1.6s ease-in-out infinite}
.cue-ar{display:flex;flex-direction:column;align-items:center;transition:transform .4s}
.scroll-cue.up .cue-ar{transform:rotate(180deg)}
.scroll-cue.up .cue-in{animation-direction:reverse}
.scroll-cue b{width:10px;height:10px;border:solid #0a8f88;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-5px}
.scroll-cue b+b{opacity:.45}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (min-width:481px),(hover:hover) and (pointer:fine){.scroll-cue{right:max(8px,calc(50% - 232px));bottom:calc(66px + clamp(20px,var(--dbase),40px))}}