/* UX2（2026-09-18 owner：「整個釣魚活動的 UI UX 順暢一下，要讓釣手沉浸的玩」）
   只動呈現與手感：不動中魚機率、不動搏魚數值、不動任何 API 與兌換流程。 */

/* ── 頂欄：任何寬度、任何暱稱都不換行 ── */
.top{gap:8px}
.top .b{display:flex;align-items:center;flex:1 1 auto;min-width:0;white-space:nowrap;letter-spacing:.08em}
.top .b img{flex:0 0 auto}
.top .b img[alt^="野釣"]{height:12px!important}
.top .b #nickShow{min-width:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;margin-left:8px!important}
.top>div:last-child{flex:0 0 auto}
.casts,#sfxBtn{white-space:nowrap}
@media(max-width:359px){.top .b img[alt^="野釣"]{display:none}}

/* ── 十竿進度：一眼看到打到第幾竿、每一竿的結果 ── */
.pips{display:none;gap:5px;padding:2px 18px 0;align-items:center}
body[data-scr="1"] .pips,body[data-scr="2"] .pips,body[data-scr="3"] .pips,body[data-scr="4"] .pips{display:flex}
.pips i{flex:1 1 0;height:6px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .3s,box-shadow .3s}
.pips i.miss{background:rgba(255,255,255,.3)}
.pips i.now{box-shadow:0 0 0 1px var(--cyan)}
.pips i.N{background:var(--tN)}
.pips i.R{background:var(--tR)}
.pips i.SR{background:var(--tSR);box-shadow:0 0 8px var(--tSR)}
.pips i.SSR{background:var(--tSSR);box-shadow:0 0 8px var(--tSSR)}
.pips i.UR{background:var(--tUR);box-shadow:0 0 10px var(--tUR)}
.pips b{flex:0 0 auto;margin-left:4px;font:700 10px var(--fa);letter-spacing:.08em;color:var(--muted);white-space:nowrap}

/* ── 配裝頁：主按鈕永遠乾淨地浮在清單上面 ── */
.rig .pull{right:auto;left:12px}
#castBtn{bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 0 0 8px rgba(0,6,15,.92),0 -10px 24px 14px rgba(0,6,15,.85)}
#castBtn:disabled{opacity:1;background:#232f3d;color:#9fb0c3}
#castBtn.ready{animation:ux2ready 1.4s ease-in-out infinite}
@keyframes ux2ready{50%{box-shadow:0 0 0 8px rgba(0,6,15,.92),0 0 26px 6px rgba(255,210,84,.55)}}

/* ── 斷線／揭曉頁：「再拋一竿」固定在拇指位置，不用往下滑找按鈕 ── */
.screen[data-s="3"] .row2,.screen[data-s="4"] #revealBtns{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:7}
.screen[data-s="3"] .row2 .btn,.screen[data-s="4"] #revealBtns .btn{box-shadow:0 0 0 6px rgba(0,6,15,.92),0 -8px 22px 10px rgba(0,6,15,.8)}
.screen[data-s="3"] .row2 .btn.sec,.screen[data-s="4"] #revealBtns .btn.sec{background:#16222f}
.screen[data-s="3"] .row2 .btn,.screen[data-s="4"] #revealBtns .btn{white-space:nowrap;font-size:16px;padding-left:8px;padding-right:8px}

/* ── 拋竿／搏魚：水面場景撐滿畫面 ── */
.screen[data-s="2"] .water{height:auto;flex:1 1 auto;min-height:300px;max-height:56vh;max-height:56dvh}
.screen[data-s="2"] .water .rod{display:none}
.water .sea{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.water .sea::before{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,#04182b,#0a3552)}
.water .sea::after{content:"";position:absolute;left:0;right:0;top:40%;bottom:0;background:linear-gradient(180deg,rgba(0,150,200,.32),rgba(0,13,28,0) 75%)}
.water .surf{position:absolute;left:-40px;right:-40px;top:40%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(103,214,221,.95) 0 18px,rgba(103,214,221,.25) 18px 30px);box-shadow:0 0 12px rgba(0,242,254,.55);animation:ux2surf 3s linear infinite}
@keyframes ux2surf{to{transform:translateX(30px)}}
.water .bub{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;border:1px solid rgba(180,240,255,.5);animation:ux2bub 6s linear infinite}
.water .bub.b1{left:22%;animation-delay:-1s}.water .bub.b2{left:58%;animation-delay:-3.2s;width:4px;height:4px}.water .bub.b3{left:81%;animation-delay:-4.6s}
@keyframes ux2bub{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-260px) translateX(8px);opacity:0}}
.water #ux2svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.water #ux2svg path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.water #ux2rod{stroke:#e9c37c;stroke-width:4;filter:drop-shadow(0 0 6px rgba(255,215,0,.35))}
.water #ux2line{stroke:rgba(255,255,255,.8);stroke-width:1.3;transition:stroke .15s}
.water.hot #ux2line{stroke:var(--hot);stroke-width:1.8}
.water #ux2bob{position:absolute;width:12px;height:20px;margin:-14px 0 0 -6px;border-radius:6px;background:linear-gradient(180deg,#ff5a3d 0 52%,#fff 52%);box-shadow:0 0 8px rgba(255,90,61,.6);transition:opacity .25s;pointer-events:none}
.water #ux2bob::before{content:"";position:absolute;left:5px;top:-8px;width:2px;height:8px;background:#ffd254}
.water #ux2fish{position:absolute;line-height:1;pointer-events:none;filter:brightness(0) drop-shadow(0 0 7px rgba(0,242,254,.45));opacity:0;transition:opacity .3s;will-change:left,top,transform}
.water #ux2fish.on{opacity:.78}
.water .ux2ring{position:absolute;width:16px;height:6px;margin:-3px 0 0 -8px;border:1.5px solid rgba(103,214,221,.9);border-radius:50%;pointer-events:none;animation:ux2ring .9s ease-out forwards}
@keyframes ux2ring{to{transform:scale(7,5);opacity:0}}
.water .gauges,.water .msg,.water .kiwi{z-index:3}
.water .msg{text-shadow:0 2px 8px #000}

/* ── 配裝清單：兩欄小卡，一個畫面看到的件數加倍；順序每支手機不同、品牌交錯（見 ux2.js） ──
   owner 2026-09-18：「直式瀏覽，直向排列的好像有點吃虧，只有上面幾個會被選」 */
#items:not(.line-size-options){grid-template-columns:1fr 1fr;gap:8px}
#items:not(.line-size-options) .equipment-card{flex-direction:column;align-items:stretch;padding:7px;gap:6px;min-height:0;text-align:left}
/* owner 2026-09-21：商品照多為正方形，46px 高的扁框讓照片縮成郵票。相框改 4:3，照片完整放進去 */
#items:not(.line-size-options) .equipment-photo{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3;font-size:46px;border-radius:9px}
#items:not(.line-size-options) .equipment-photo img{width:100%;height:100%;object-fit:contain}
.equipment-photo:not(.equipment-illustration)::before{content:'';position:absolute;inset:-14px;background:var(--ph,none) center/cover no-repeat;filter:blur(14px) saturate(1.1)}
.equipment-photo:not(.equipment-illustration)>img{background:transparent}
.equipment-photo>span{position:relative}
#items:not(.line-size-options) .equipment-card b{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(prefers-reduced-motion:reduce){.water .surf,.water .bub,#castBtn.ready{animation:none}}
/* owner 2026-09-21：母線／子線的系列卡相框也是 48px 扁條，同樣改 4:3 */
#equipmentProduct .line-series .equipment-photo{height:auto;aspect-ratio:4/3;font-size:34px;border-radius:9px}
/* 子線 8／20／40 號：僅遊戲用、無販售 */
.line-size.game-only{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-style:dashed}
.line-size.game-only small{font-size:9.5px;line-height:1.25;font-weight:700;color:#ffd98a;letter-spacing:0}

/* ── 展示牆大螢幕字級（owner 2026-09-22）：Mac 接 HDMI 投 55–65 吋電視。原本是桌機字級，2–4 公尺外看不清。
   1600px 以上生效；字級以 vw 為主、上限放寬，這樣電視不管是 1920 還是 3840 寬，實體字高都一樣。 ── */
@media (min-width:1600px){
  .stage{grid-template-columns:minmax(0,1fr)}.stage header>*{min-width:0}.stage .body{grid-template-columns:minmax(0,1fr) 27vw}
  .stage header{gap:1vw}.stage .brand h1{font-size:1.6vw;white-space:nowrap}.stage .brand p{font-size:.7vw}.stage header .brands-strip{flex-wrap:nowrap;overflow:hidden}
  .stage .mark{width:2.6vw;height:2.6vw}.stage .bmark{height:2.3vw;padding:.3vw .6vw}.stage .bmark img{height:1.7vw}
  .stage .kpis{gap:1.4vw;flex-shrink:0}.stage .kpi b{font-size:2.8vw}.stage .kpi span{font-size:.8vw;letter-spacing:.1em;white-space:nowrap}
  .stage .live{padding:.3vw .7vw}.stage .live span{font-size:.8vw}
  .stage .venue small{font-size:.75vw}.stage .venue h3{font-size:2.3vw}.stage .venue p{font-size:.9vw}
  .stage .legend{font-size:.8vw}.stage .legend i{padding:.2vw .6vw}
  .stage .panel-h h2{font-size:1.5vw}.stage .panel-h em{font-size:.7vw}
  .stage .row{gap:.6vw;padding:.8vh .8vw}.stage .row .tier{font-size:.8vw;min-width:2.8vw;padding:.15vw .4vw}
  .stage .row .txt{font-size:1.25vw}.stage .row .sub{font-size:.95vw}
  .stage .lb .r{font-size:1.2vw}.stage .lb .r .n{font-size:.95vw;width:1.6vw}.stage .lb .r .who small{font-size:.8vw}
  .stage .fbox .lbl{font-size:1.05vw;white-space:nowrap}.stage .fbox .sub{font-size:.9vw}.stage .fbox .num{font-size:3.2vw}
  .stage .ticker div{font-size:1.3vw}
  .stage .qrbox{gap:.8vw;padding:.7vw .9vw}.stage .qrbox img,.stage .qrbox #qrHost svg,.stage .qrbox .live-qr{width:9.5vw!important}
  .stage .qrbox b{font-size:1.6vw}.stage .qrbox span,.stage .qrbox p{font-size:.9vw}.stage .qrbox small{font-size:.7vw}
  .stage .tag{font-size:1.3vw}.stage .tag.ph{font-size:1.1vw}
  .ur .t{font-size:10vw}.ur h2{font-size:3.4vw}.ur p{font-size:1.4vw}
}

/* 活動階段橫幅（owner 2026-10-01）：遊戲頂端與展示牆底部 */
#phaseRibbon{position:fixed;left:0;right:0;top:0;z-index:60;padding:8px 14px calc(8px);text-align:center;font-weight:900;font-size:13px;line-height:1.4;color:#1a1200;background:#FFD254;box-shadow:0 4px 18px #0008}
#phaseRibbon[data-phase=paused],#phaseRibbon[data-phase=ended]{background:#FF744E;color:#fff}
#phaseRibbon[hidden]{display:none}
body.is-rehearsal #claimBox::before{content:'試玩碼・不發獎品';display:block;margin:-6px 0 10px;font-weight:900;color:#FFD254;letter-spacing:.1em}
#phaseBanner{position:fixed;left:50%;bottom:2.2vh;transform:translateX(-50%);z-index:40;padding:1vh 2.4vw;border-radius:999px;font-weight:900;font-size:clamp(18px,1.6vw,32px);color:#1a1200;background:#FFD254;box-shadow:0 0 40px #FFD25488;white-space:nowrap}
#phaseBanner[data-phase=paused],#phaseBanner[data-phase=ended]{background:#FF744E;color:#fff;box-shadow:0 0 40px #FF744E88}
#phaseBanner[hidden]{display:none}

/* 展示牆工作列浮層（只有牆有 .stage）：不佔高度、閒置自動收起 */
body:has(.stage) .pixel-preview{position:fixed;left:0;right:0;top:0;z-index:80;transition:transform .35s ease,opacity .35s ease;box-shadow:0 6px 24px #0008}
body.kiosk-idle .pixel-preview{transform:translateY(-110%);opacity:0;pointer-events:none}
body.kiosk-idle,body.kiosk-idle *{cursor:none!important}

/* 領獎頁只留大等級（owner 2026-10-02） */
body.claim-tier-only #clTier,body.claim-tier-only #clCode,body.claim-tier-only #clPrize,body.claim-tier-only #clNote,body.claim-tier-only #clPolicy,body.claim-tier-only #clDone{display:none!important}
#ux2Tier{text-align:center;padding:6px 0 4px}
#ux2Tier .big{font-family:var(--fa);font-weight:900;font-size:min(25vw,150px);line-height:1;letter-spacing:.02em;white-space:nowrap}
#ux2Tier .say{margin-top:14px;font-size:16px;font-weight:900;color:#fff}
#ux2Tier .rh{margin-top:8px;font-size:14px;font-weight:900;color:#FFD254}
#cc .code{display:none!important}

/* 2026-10-02 day1 現場（16 吋 MacBook 約 1728 寬、數字到五位數）：標題壓到共同主辦 logo、「今日最大尾」爆框。
   標題與 logo 可縮、KPI 改小一階、底部數字可縮，任何寬度都不重疊。 */
@media (min-width:1600px){
  .stage header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.2vw}
  .stage .brand{min-width:0}.stage .brand h1{font-size:1.35vw}.stage .brand p{font-size:.6vw}
  .stage header .brands-strip{min-width:0;justify-content:center;gap:.6vw}.stage header .brands-strip .lb{display:none}
  .stage .bmark{height:2vw;padding:.25vw .5vw}.stage .bmark img{height:1.45vw}
  .stage .kpis{gap:1.1vw}.stage .kpi b{font-size:2.25vw;white-space:nowrap}.stage .kpi span{font-size:.7vw}
  .stage .foot{grid-template-columns:1.25fr 1fr 1fr 1fr}
  .stage .fbox{min-width:0;overflow:hidden;gap:.7vw}.stage .fbox>div:last-child{min-width:0}
  .stage .fbox .num{font-size:2.3vw;white-space:nowrap}
  .stage .fbox .lbl{white-space:normal}.stage .fbox .sub{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media (min-width:1600px) and (max-width:2199px){
  .stage header{grid-template-columns:minmax(0,1fr) auto auto}
  .stage header .brands-strip{flex-shrink:0;overflow:visible}
  .stage .brand h1{font-size:1.12vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage .kpi b{font-size:2vw}.stage .kpis{gap:.9vw}
  .stage .bmark{height:1.8vw}.stage .bmark img{height:1.3vw}
}

.pixel-preview #pixel-music{border:1px solid #67D6DD;border-radius:8px;background:#163a49;color:#bff4f7;padding:7px 12px;text-decoration:none;font-weight:800}

/* DudeFishinG 皇冠魚字標更顯眼（owner 2026-10-02 day1）：遊戲頂端與展示牆左上都換成完整字標 */
.top .df-lockup{height:32px!important;filter:drop-shadow(0 0 10px #67D6DD55)}
@media (min-width:1600px){.stage .brand .df-lockup{height:2.9vw!important;filter:drop-shadow(0 0 16px #67D6DD66)}}
/* 領獎頁：M40 自動量測魚尺推廣 */
#ux2Ruler{margin:14px 0 4px;padding:14px 14px 12px;border-radius:16px;border:1.5px solid #67D6DD;background:linear-gradient(160deg,#0F4257,#0b2233);text-align:left}
#ux2Ruler h3{margin:0 0 4px;font-size:18px;font-weight:900;color:#fff}
#ux2Ruler .tag{display:inline-block;margin:0 6px 8px 0;padding:3px 9px;border-radius:999px;background:#FFD254;color:#1a1200;font-size:12px;font-weight:900}
#ux2Ruler ol{margin:6px 0 0 1.2em;padding:0;color:#d7eefb;font-size:14px;line-height:1.7}
#ux2Ruler ol b{color:#FFD254}
#ux2Ruler .ai{margin-top:8px;font-size:13px;color:#bff4f7}

/* 地圖彈窗加皇冠魚小圖示（owner 2026-10-02） */
.tag .df-ico{width:1.35em;height:1.35em;vertical-align:-.3em;margin-right:6px;border-radius:5px;filter:drop-shadow(0 0 6px #67D6DD88)}
/* 釣竿類型標籤 */
.rod-type{display:inline-block;margin:0 0 3px;padding:1px 8px;border-radius:999px;background:#67D6DD;color:#06222f;font-size:11px;font-weight:900;letter-spacing:.02em}

/* 暱稱（2026-10-03）：預填隨機名字＋換一個，看到就能按開始 */
.nick-slot .nick-row{display:flex;gap:8px;align-items:stretch}
.nick-slot input{flex:1;min-width:0;border:1.5px solid rgba(255,210,84,.55);background:rgba(255,255,255,.07);border-radius:10px;padding:11px 12px;color:#fff;font-size:17px;font-weight:800;font-family:var(--f)}
.nick-slot input:focus{outline:none;border-color:#FFD254;background:rgba(255,255,255,.12)}
.nick-slot .nick-dice{flex:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:0 12px;font-size:14px;font-weight:800;font-family:var(--f);white-space:nowrap}
.nick-slot .nick-dice:active{transform:scale(.96)}
.nick-slot .nick-tip{margin-top:6px;font-size:12px;color:var(--muted)}
#ux2Ruler .self{margin:4px 0 0;font-size:14px;font-weight:900;color:#fff}