/* 正式站在 Tina 原型的樣式之外補的規則（原型的 site.css、member.css、admin.css 原樣使用，不直接改） */

/* 原型上標示「待確認」的黃框：正式站不顯示 */
.draft{display:none!important}

/* 首頁：開場動畫還沒播過時先蓋黑幕（cover.js 加上 sx-cover） */
html.sx-cover::after{content:"";position:fixed;inset:0;background:#07080a;z-index:149}

/* 排行榜：載入中／沒有資料的訊息列、玩家頭像 */
.lb .lb-msg{text-align:center;padding:48px 0;color:#9aa0a6}
.lb .av img{width:100%;height:100%;object-fit:cover;display:block}

/* 後台：側欄底部的連結分行 */
#aside .foot{display:flex;flex-direction:column;gap:12px}

/* 首頁頁首不顯示「進入 VR」（Tina 11/11 選樣本 B）；.util .ubtn 的 display:flex 會蓋過 hidden，這裡補回 */
#entervr[hidden]{display:none!important}

/* 語系切換「EN / 中文」：中文字型較高，各自置中後中文的基準線會比 EN 低約 2px（Tina 11/11 看到中文偏右下）。
   兩個字設同樣行高，基準線就對齊 */
.util .lang>span{line-height:24px}

/* 首頁頁首中間選單固定在螢幕正中間（Tina 11/11）：原本在標誌與右側按鈕之間置中，右側多了排行榜按鈕後往左偏約 100px */
.hd #mainnav{position:absolute;left:50%;transform:translateX(-50%)}

/* 首頁預告片區（Tina 11/11 選樣本 B「對焦呼吸」，樣本在案子資料夾 原型/20261111-預告片準星）
   不顯示標題（螢幕報讀仍讀得到）；影片框加高到頁首下方幾乎滿版；循環影片照原色播 */
#trailer .i-head{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.i-panel{top:128px;height:912px}
/* 影片取景往下移：上緣不露出半截舊介面數字 */
.i-panel video{filter:none;object-position:50% 75%}
.i-panel .dim{background:radial-gradient(ellipse 22% 34% at 50% 50%,rgba(5,5,6,.35),rgba(5,5,6,.06))}
/* 準星自己會動：外圈虛線慢轉、圓圈輕微放大縮小、每 3 秒刻度往內收一次；圓內墊暗底，跟影片裡的靶紙分開 */
.i-play::before{content:"";position:absolute;inset:26px;border-radius:50%;background:rgba(10,10,8,.55);backdrop-filter:blur(2px)}
.i-play::after{content:"";position:absolute;inset:-20px;border-radius:50%;border:1.5px dashed rgba(236,230,216,.7);animation:sxAimSpin 20s linear infinite}
.i-play .lbt,.i-play .tri{position:relative}
.i-play svg.rg circle{stroke:rgba(236,230,216,.9);stroke-width:2;transform-box:view-box;transform-origin:150px 150px;animation:sxAimBreath 3s ease-in-out infinite}
.i-play svg.rg path{transform-box:view-box;transform-origin:150px 150px;animation:sxAimTick 3s ease-in-out infinite}
@keyframes sxAimSpin{to{transform:rotate(360deg)}}
@keyframes sxAimBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes sxAimTick{0%,60%,100%{transform:scale(1)}78%{transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){.i-play::after,.i-play svg.rg circle,.i-play svg.rg path{animation:none}}
/* 站內播放器（按準星開）：拿掉原型「待確認」的黃色虛線框；播放器下方 16 放「到 YouTube 看」
   影片高 --tvh 最多 720，視窗矮時跟著縮（上下各留 32＋16＋48），連結不會出畫面；「關閉」對齊影片上緣 */
.tmodal{--tvh:min(720px,calc(var(--vhd,1080px) - 192px))}
.tmodal .tbox{border:0;color:var(--text2);height:var(--tvh);width:calc(var(--tvh) * 16 / 9)}
.tmodal .tclose{top:calc(50% - var(--tvh) / 2)}
.tmodal .tyt{position:absolute;left:50%;top:calc(50% + var(--tvh) / 2 + 16px);transform:translateX(-50%);height:48px;padding:0 24px;font-size:17px}
body.f1 .tmodal .tyt{text-transform:none}
.tmodal .tyt svg{width:16px;height:16px;flex:none}

/* 獨立排行榜頁：前 10 名一個畫面放完，不捲動（Tina 11/11 選樣本 A）。首頁的排行榜預覽不受影響
   視窗變矮時標題、間距先縮，再縮列高；--lb-top 是表格以外佔的總高度，改標題大小時要一起看 */
main[data-page="lb"] #leaderboard{--lb-h:var(--vhd,1080px);
  --lb-p:clamp(104px,calc(104px + (var(--lb-h) - 760px) * .2),128px);
  --lb-f:clamp(78px,calc(78px + (var(--lb-h) - 800px) * .22),96px);
  --lb-m:clamp(20px,calc(20px + (var(--lb-h) - 700px) * .12),40px);
  --lb-b:clamp(24px,calc(24px + (var(--lb-h) - 700px) * .1),40px);
  --lb-zh:0px;
  --lb-top:calc(var(--lb-p) + 42px + var(--lb-f) * .95 + var(--lb-zh) + var(--lb-m) + 31px + var(--lb-b));
  --lb-row:clamp(38px,calc((var(--lb-h) - var(--lb-top)) / 10),72px);
  padding:var(--lb-p) var(--m) 0;min-height:var(--lb-h)}
html[lang="zh-Hant"] main[data-page="lb"] #leaderboard{--lb-zh:calc(var(--lb-f) * .3)}
main[data-page="lb"] .h2{font-size:var(--lb-f)}
main[data-page="lb"] .lb{margin-top:var(--lb-m)}
/* 欄寬固定：切換期間、資料筆數不同時，共有欄位不跳；沒有升降欄時由最後一欄吸收 */
main[data-page="lb"] .lb table{table-layout:fixed}
main[data-page="lb"] .lb th:nth-child(1){width:110px}
main[data-page="lb"] .lb th:nth-child(2){width:440px}
main[data-page="lb"] .lb th:nth-child(3){width:240px}
main[data-page="lb"] .lb th:nth-child(5){width:178px}
main[data-page="lb"] .lb th{padding-bottom:10px}
main[data-page="lb"] .lb td:not(.lb-msg){height:var(--lb-row);padding:0 20px}
main[data-page="lb"] .lb td.rk{font-size:22px;width:auto}
main[data-page="lb"] .lb .av{flex:none;width:min(32px,calc(var(--lb-row) - 10px));height:min(32px,calc(var(--lb-row) - 10px));font-size:13px}
main[data-page="lb"] .lb .who .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main[data-page="lb"] .lb tr.top td.rk::after{margin-top:2px}
main[data-page="lb"] .lb td:last-child img{display:inline-block}

/* ===== /02 三種模式、/03 軍械庫（Tina 11/11 選樣本：模式 A 三塊並排、軍械庫 C 槍架牆）=====
   兩區都是「一個畫面放完」：區塊高度＝可視高度（--vhd，最矮 720），頁首 88 在上面蓋著，所以上方留 136；
   從導覽列點過來或捲到這裡，整塊都看得到、不會被截。內容用彈性高度分配，矮視窗時圖片跟著縮。 */
#modes,#arsenal{height:max(720px,var(--vhd,1080px));padding:136px var(--m) 48px;display:flex;flex-direction:column}
#modes .h2,#arsenal .h2{font-size:72px;margin-top:12px}
/* 原本這裡給兩段標題外層加條紋底色，裂開動畫時原位會留一個不會動的殘影字；標題改成水泥紋理後拿掉（Tina 11/11：要跟靶場消息一樣乾淨） */

/* 三種模式：三塊並排，選到的那塊 flex 變寬；沒選到的只留名稱、關數、一句規則 */
#modes .mrow{flex:1;min-height:0;margin-top:32px;display:flex;gap:12px}
#modes .pn{position:relative;flex:1;min-width:0;overflow:hidden;padding:0;border:0;background:#111 center/cover;color:var(--text);text-align:left;cursor:pointer;transition:flex .45s cubic-bezier(.2,.7,.2,1)}
#modes .pn.open{flex:2.2}
#modes .pn::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,20,15,.15),rgba(21,20,15,.35) 45%,rgba(21,20,15,.94));transition:background .3s}
#modes .pn:not(.open)::before{background:linear-gradient(180deg,rgba(21,20,15,.55),rgba(21,20,15,.95))}
#modes .pn .tag{position:absolute;top:24px;left:32px;padding:6px 10px;background:var(--red);color:#fff;font:600 14px var(--mono);letter-spacing:.12em}
#modes .pn .in{position:absolute;left:32px;right:32px;bottom:32px;display:flex;flex-direction:column}
#modes .pn .t{font-size:56px;line-height:1;white-space:nowrap}
body.f1 #modes .pn .t{font-variation-settings:var(--cond);text-transform:uppercase}
#modes .pn .rule{margin-top:14px;max-width:560px;font-size:20px;line-height:1.5;text-wrap:pretty}
#modes .pn .facts{margin-top:18px;max-width:560px;display:grid;gap:8px;font-size:17px;color:var(--text2);transition:opacity .3s .15s}
#modes .pn:not(.open) .facts{opacity:0;transition-delay:0s}
#modes .pn .facts span{display:flex;gap:12px}
#modes .pn .facts b{flex:none;width:96px;color:var(--text);font-weight:600}
#modes .pn .facts i{font-style:normal}
#modes .pn:focus-visible{outline:3px solid #fff;outline-offset:-3px}
html[lang="zh-Hant"] #modes .pn .rule{line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
/* 兩張窄卡的說明固定佔 3 行，大標題才會同一高度（Tina 11/12：中文「挑戰」3 行、「限時」2 行，標題差約 30） */
#modes .pn:not(.open) .rule{min-height:4.5em}
html[lang="zh-Hant"] #modes .pn:not(.open) .rule{min-height:4.8em}

/* 軍械庫：左邊洞洞板槍架牆（2×2），右邊卡片。site.css 原本的 1080 高、絕對定位、光束改掉 */
#arsenal{overflow:hidden;background:#0d0c0a;perspective:none}
#arsenal .head{position:static}
#arsenal .ars{flex:1;min-height:0;margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) 520px;grid-template-rows:minmax(0,1fr);gap:48px}
#arsenal .wall{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:24px;background:#1a1914 radial-gradient(circle,#0a0a08 3px,transparent 4px) 18px 18px/36px 36px;box-shadow:inset 0 0 120px rgba(0,0,0,.8)}
#arsenal .wall::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 260px 220px at var(--sx,25%) var(--sy,28%),rgba(255,236,190,.16),transparent 70%)}
#arsenal .slot{position:relative;min-height:0;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
#arsenal .slot::before{content:"";position:absolute;left:50%;top:8px;width:120px;height:8px;margin-left:-60px;background:#3a382f;border-radius:2px}
/* 槍包在 .hang 裡，選中時整個提起（號碼牌 Tina 11/11 拿掉了） */
#arsenal .slot .hang{position:relative;height:76%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#arsenal .slot img{display:block;height:100%;width:auto;filter:brightness(.6) drop-shadow(0 10px 6px rgba(0,0,0,.6));transition:filter .35s}
#arsenal .slot.on .hang{transform:translateY(-14px) scale(1.04)}
#arsenal .slot.on img{filter:brightness(1) drop-shadow(0 30px 22px rgba(0,0,0,.75))}
#arsenal .slot:focus-visible{outline:3px solid #fff;outline-offset:-3px}
#arsenal .gcard{min-height:0;padding:32px;border:1px solid var(--line);background:rgba(255,255,255,.02);display:flex;flex-direction:column}
#arsenal .gcard b{font-size:48px;line-height:1}   /* 上方的「01 / 04」拿掉後，槍名直接貼卡片內距（Tina 11/11） */
body.f1 #arsenal .gcard b{font-variation-settings:var(--cond)}   /* 不轉大寫，槍名照原樣顯示（當初是為了保留小寫；11/12 換新名稱後英文名本來就是大寫） */
#arsenal .gcard p{margin-top:16px;font-size:19px;line-height:1.55;color:var(--text2)}
#arsenal .gcard .big{flex:1;min-height:0;margin-top:24px;display:flex;align-items:center;justify-content:center}
#arsenal .gcard .big img{max-width:100%;max-height:100%}
@media (prefers-reduced-motion:reduce){#modes .pn,#modes .pn .facts,#arsenal .slot .hang,#arsenal .slot img{transition:none}}

/* 跑一關的「暫停／再跑一次」：射靶畫面正下方（Tina 11/11 選樣本 B，播放程式在 motion.js） */
.run .b-ctl{position:absolute;left:var(--m);top:972px;display:flex;gap:16px}
.run .b-ctl .btn{height:52px;padding:0 24px;font-size:17px}
.run .b-ctl .btn:disabled{opacity:.4;cursor:default}

/* 區塊間距（Tina 11/11 嫌空白太多）：上下留白 160 改 96，兩區之間 320 變 192。
   從選單跳過來時，內容要落在頁首（88）下方；三種模式、軍械庫本身已留 136 給頁首，維持貼頂 */
.sec{padding-top:96px;padding-bottom:96px}
html{scroll-padding-top:88px}
#modes,#arsenal,.scene{scroll-margin-top:-88px}   /* 捲動場景（跑一關、預告片等）也是整個畫面設計，貼頂 */
/* /01「怎麼練」三張卡片加高到 520，填掉下方空白（motion.js 的 CH 要跟著改） */
#a01frames .fr{height:520px}

/* ---------- /05 訓練紀錄：靶紙＋記分單（Tina 11/11 選樣本 A，原型/20261111-訓練紀錄）---------- */
#record .record{grid-template-columns:600px minmax(0,1fr);gap:80px}
#record .h2{font-size:80px}
.rdesk{position:relative;height:640px}
/* 靶紙：會員中心的八角靶（Tina 2026-11-12，原本是 tgt-paper.png 剪出來的人形紙靶＋膠帶）。寬 330、高照 viewBox 208:308；
   往左挪 24 進欄間空白，右邊的 D 才不會被記分板蓋住；中心同原本靶紙的中心（比記分板中心低約 23）。
   一開始沒有彈孔，點紙靶才開槍留孔（motion.js，Tina 2026-11-12） */
.rtgt{position:absolute;left:-24px;top:48px;width:330px;height:489px;transform:rotate(-4deg);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.rtgt>svg{display:block;width:100%;height:100%}
#record .rtgt{user-select:none;-webkit-user-select:none;touch-action:manipulation}
#record .rtgt .b-flash.u{animation:bShotFlash .2s ease-out forwards}
@media (prefers-reduced-motion:reduce){#record .rtgt .b-flash.u{animation:none;opacity:0}}
.rtgt .holes i{position:absolute;width:28px;height:24px;margin:-12px 0 0 -14px;background:url(/sx/img/hole-paper.png) center/contain no-repeat;opacity:.92;transform:rotate(var(--r))}
/* 記分單：會員中心的木框黑板（Tina 2026-11-12 10:41 定）。照 member/wall.css .frame／.board／.ctable、member.css .p-over .vol，數值取 1920 寬時的值；
   黑板圖與手寫字型直接用會員中心的檔案（/sx/member/），不另存一份 */
@font-face{font-family:"SX Hand";src:url(/sx/member/font/ArchitectsDaughter-Regular.woff) format("woff");font-display:swap}
#record .sheet{position:absolute;left:300px;right:0;top:0;display:flex;padding:16px;border-radius:2px;color:#f3f0e8;
  background:repeating-linear-gradient(90deg,rgba(60,35,15,.16) 0 2px,transparent 2px 7px,rgba(255,235,200,.05) 7px 8px,transparent 8px 13px),linear-gradient(180deg,#a7835a,#8a6843 50%,#7a5a38);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.35),inset 0 -2px 0 rgba(0,0,0,.35),0 24px 50px rgba(0,0,0,.5)}
#record .chalk{flex:1;min-width:0;padding:22px 24px 26px;
  background:linear-gradient(rgba(33,33,31,.58),rgba(33,33,31,.58)),url(/sx/member/img/blackboard.jpg) 30% 20%/cover no-repeat,#2f2f2d;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 6px 16px rgba(0,0,0,.45)}
#record .sheet .top{display:flex;align-items:baseline;gap:20px;white-space:nowrap}
#record .sheet .top b{font-family:"SX Hand",var(--font);font-weight:400;font-size:34px;letter-spacing:.02em;line-height:1.2}
#record .sheet .top span{font-size:20px;color:rgba(243,240,232,.82)}
#record .sheet table{width:100%;border-collapse:collapse;margin-top:12px;font-size:19px}
#record .sheet th{font-family:"SX Hand",var(--font);font-weight:400;font-size:19px;color:rgba(243,240,232,.82);text-align:left;padding:0 8px 8px;border-bottom:2px solid rgba(243,240,232,.3);white-space:nowrap}
#record .sheet td{height:52px;padding:0 8px;   /* 格內左右 8（會員中心 12）：12 時英文表格寬 749、黑板內寬 716，超出 33（量到） */ border-bottom:1.5px solid rgba(243,240,232,.1);font-variant-numeric:tabular-nums;white-space:nowrap}
#record .sheet td.n{font-family:var(--mono);font-weight:700}
#record .sheet .minus{color:#ff8a80}
#record .sheet .dim{color:rgba(243,240,232,.82)}
#record .sheet td.g{width:56px}
#record .sheet .coin{--s:44px}   /* 同會員中心 .ctable .coin；列高 52 上下各留 4 */
/* 最新一局：照會員中心表格的選中列（淡金底＋左側金條） */
#record .sheet tr.new td{background:rgba(242,194,90,.13)}
#record .sheet tr.new td:first-child{box-shadow:inset 3px 0 0 #f2c25a}
/* 下方四格：照會員中心總覽黑板的數字列（上下粉筆線、格間直線、手寫小標） */
#record .sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;border-top:2px solid rgba(243,240,232,.22);border-bottom:2px solid rgba(243,240,232,.22)}
#record .sum div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;min-width:0}
#record .sum div+div{border-left:2px solid rgba(243,240,232,.16)}
#record .sum span{font-family:"SX Hand",var(--font);font-size:17px;color:rgba(243,240,232,.82);white-space:nowrap}
#record .sum b{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1.1;white-space:nowrap}
#record .rdraft{position:absolute;left:300px;bottom:0;margin:0}

/* 首頁排行榜預覽先隱藏（Tina 11/11）；.sec 沒設 display，這行保險，避免以後被別的樣式蓋過 */
#leaderboard[hidden]{display:none!important}
/* 排行榜預覽隱藏後，軍械庫直接接訓練紀錄：軍械庫下方留白 48 改 96，跟訓練紀錄上方 96 一樣（Tina 11/11 選修） */
#arsenal{padding-bottom:96px}

/* 片尾（Tina 11/11 選片尾樣本 A）：一進來就是暗暗模糊的靶場加暗角（不再全黑），
   完整新標誌（紅 X＋SHOOTING）置中，寬 777＝畫面 905 高時 640。X 交叉處在原圖 (800,390)，換到這裡是 (408,199)；
   motion.js 的 CXO（放大中心、光圈與紅圈圓心）跟這裡對齊，改標誌位置或大小要一起改 */
#final .c-bg{position:absolute;inset:0;background:url(../img/range-timer.jpg) center/cover;filter:sepia(.3) brightness(.28) blur(6px);transform:scale(1.08)}
#final .c-vig{position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 55%,rgba(5,5,6,0),rgba(5,5,6,.85))}
#final .c-x{left:calc(50% - 388.5px);top:294px;width:777px;transform-origin:408px 199px;filter:drop-shadow(0 0 34px rgba(209,31,38,.3))}

/* 首屏標題下的白話說明（Tina 11/11 選首屏文案樣本 A）：字比賣點大一級、白字，賣點往上收一點。
   中英文都是兩行、手動斷行；英文第二行量起來 934 寬，比 .copy 的 900 寬，所以這段單獨放寬到 960（右邊是影片，不會壓到東西） */
#hero .hlead{margin-top:28px;width:960px;font-size:24px;line-height:1.5;color:var(--text)}
html[lang="zh-Hant"] #hero .hlead{line-height:1.7}
#hero .hlead+.pains{margin-top:20px}
/* 矮的寬螢幕（motion.js 判定縮放小於 0.8，改成不縮小的一般頁面 body.scn-static）：首屏文字整塊往上移 120，
   多了上面那段說明後按鈕才留在第一屏（Tina 11/11 選；1920×730 中文、1920×870 英文實測）。標題上方原本就空 200 */
body.scn-static #hero .copy{top:170px}

/* 全站大標題的水泥斑點質感（Tina 11/11 選標題斑駁樣本 A，參考 WAYNE）：字型不變，字裡填一張可無縫重複的水泥紋理，
   字邊用一張遮罩打出小缺口。紋理掛在標題「裂開動畫」的上下兩半（.tr-a／.tr-b）上，跟著一起移動，合起來時對齊；
   動畫中的斜切遮罩和紋理遮罩取交集。會員中心與登入頁（body.mc）是同事負責，不套。 */
html[lang] body.f1:not(.mc) .hero h1,
html[lang] body.f1:not(.mc) .h2:not(.tw),
html[lang] body.f1:not(.mc) .h2.tw>.tr-a,
html[lang] body.f1:not(.mc) .h2.tw>.tr-b,
html[lang] body.f1:not(.mc) .c-words span{
  background:url(../img/title-concrete.jpg) 0 0/440px auto repeat;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:url(../img/title-concrete-mask.png);mask-image:url(../img/title-concrete-mask.png);
  -webkit-mask-size:440px auto;mask-size:440px auto;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-position:0 0;mask-position:0 0}
html[lang] body.f1:not(.mc) .h2.tw:not(.done)>.tr-a{
  -webkit-mask-image:url(../img/title-concrete-mask.png),repeating-linear-gradient(177.5deg,#000 0 var(--seam),transparent var(--seam) var(--lhp));
  mask-image:url(../img/title-concrete-mask.png),repeating-linear-gradient(177.5deg,#000 0 var(--seam),transparent var(--seam) var(--lhp));
  -webkit-mask-size:440px auto,auto;mask-size:440px auto,auto;-webkit-mask-composite:source-in;mask-composite:intersect}
html[lang] body.f1:not(.mc) .h2.tw:not(.done)>.tr-b{
  -webkit-mask-image:url(../img/title-concrete-mask.png),repeating-linear-gradient(177.5deg,transparent 0 var(--seam),#000 var(--seam) var(--lhp));
  mask-image:url(../img/title-concrete-mask.png),repeating-linear-gradient(177.5deg,transparent 0 var(--seam),#000 var(--seam) var(--lhp));
  -webkit-mask-size:440px auto,auto;mask-size:440px auto,auto;-webkit-mask-composite:source-in;mask-composite:intersect}

/* 標題裂開動畫加強（Tina 11/11 選可播放樣本 A「明顯一點」）：兩半從 360 外滑進來（原本 180）、子彈軌跡加粗加長加亮。
   時間仍在 motion.js 收掉下半的 1.3 秒內（子彈 .5 秒出發、跑 .75 秒）。 */
/* 包在「沒要求減少動態效果」裡：網頁開著時才打開減少動態效果，還沒捲到的標題要照 site.css 直接顯示，不留在 ±360 */
@media (prefers-reduced-motion:no-preference){
.h2.tw>.tr-a{transform:translateX(-360px)}
.h2.tw>.tr-b{transform:translateX(360px)}
.h2.tw.go>.tr-a,.h2.tw.go>.tr-b{transform:none;opacity:1;transition:transform .8s cubic-bezier(.55,.06,0,1),opacity .35s}
.h2.tw.go:not(.done)>.tr-c{animation:sxComet .75s .5s cubic-bezier(.3,0,.2,1) both}
}
/* 光暈用 drop-shadow 跟著亮的部分走；box-shadow 會沿整根長條（含透明的尾巴）描一圈，尾端看起來像一根棒子 */
.h2.tw>.tr-c{top:calc(var(--seam) - 3px);width:520px;height:6px;border-radius:3px;box-shadow:none;filter:drop-shadow(0 0 7px rgba(255,80,60,.95)) drop-shadow(0 0 2px #fff)}

/* 首屏大標題中文 96→128（Tina 11/11 選首屏標題字級樣本 128）；寬度跟著字走，不受文字區 900 寬限制（右邊是影片） */
html[lang="zh-Hant"] #hero h1{font-size:128px;width:max-content}

/* 頁首中文字級 17→20：選單、排行榜、會員中心、語言切換一起放大（Tina 11/11 選頁首字級樣本 20）。會員中心與登入頁（body.mc）是同事負責，不套 */
html[lang="zh-Hant"] body:not(.mc) .hd nav,html[lang="zh-Hant"] body:not(.mc) .util{font-size:20px}

/* 片尾標語中文改粗體（Tina 11/11：「片尾中文字太細了要粗重一點」） */
html[lang="zh-Hant"] .c-words span{font-weight:700}

/* 水泥紋理標題字頭被切平（Tina 11/11）：紋理底圖只畫在標題框內，行高比字矮的標題，字頂超出框的那一截沒有顏色。
   框往上多留 .2em 給紋理（padding-top），再整個往上挪回 .2em（top），下方用負的 margin-bottom 抵掉：字和後面內容的位置都不變。
   會裂開的標題（.h2.tw）實測沒被切，不套 */
html[lang] body.f1:not(.mc) .hero h1,
html[lang] body.f1:not(.mc) .h2:not(.tw),
html[lang] body.f1:not(.mc) .c-words span{padding-top:.2em;margin-bottom:-.2em;position:relative;top:-.2em}

/* 首屏音樂／影片控制（Tina 11/12 選樣本 B 音樂膠囊，原型/20261112-音樂控制）：音樂開著時等化器長條跳動、MUSIC ON；
   影片暫停改成只有圖示，滑過顯示說明。先蓋掉 site.css 舊文字按鈕的內距、字級與按下的樣子 */
.mediactl{bottom:40px;gap:10px;align-items:center}
.mediactl button{min-height:0;padding:0;font-size:inherit;gap:0}
.mediactl .mus{height:48px;display:flex;align-items:center;gap:12px;padding:0 18px 0 16px;border:1px solid var(--line);background:rgba(0,0,0,.55);color:var(--text2);font:600 13px var(--mono);letter-spacing:.18em}
.mediactl .mus b{font-weight:600}
.mediactl .mus .st{color:var(--text2);display:inline-block;width:calc(3ch + .54em);text-align:left}   /* ON 和 OFF 同寬（三個字加字距）並靠左：按下去膠囊不縮、MUSIC 到狀態字的距離不變 */
.mediactl .mus.on{color:#fff;border-color:rgba(236,230,216,.6)}
.mediactl .mus.on .st{color:var(--red)}
.mediactl .vid{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(0,0,0,.55);color:var(--text2)}
.mediactl .vid:hover,.mediactl .mus:hover{color:var(--text)}
.mediactl .vid[aria-pressed="true"]{color:var(--text);border-color:var(--line)}
.mediactl .vid svg{width:18px;height:18px}
.mediactl .eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.mediactl .eq i{display:block;width:3px;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom;transform:scaleY(var(--h));transition:transform .3s;opacity:.7}
.mediactl .eq i:nth-child(1){--h:.45}.mediactl .eq i:nth-child(2){--h:.85}.mediactl .eq i:nth-child(3){--h:.6}.mediactl .eq i:nth-child(4){--h:.3}
.mediactl .mus.on .eq i{opacity:1;animation:sxEq 1s ease-in-out infinite}
.mediactl .mus.on .eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.mediactl .mus.on .eq i:nth-child(3){animation-duration:1.15s;animation-delay:-.6s}
.mediactl .mus.on .eq i:nth-child(4){animation-duration:.9s;animation-delay:-.15s}
@keyframes sxEq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mediactl .mus.on .eq i{animation:none;transform:scaleY(.7)}}
.mediactl [data-tip]{position:relative}
.mediactl button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mediactl [data-tip]:hover::after,.mediactl [data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 10px);white-space:nowrap;padding:6px 10px;background:rgba(0,0,0,.85);border:1px solid var(--line);color:var(--text);font:14px var(--font);letter-spacing:0;pointer-events:none}
/* 整組放大 1.12 倍：首屏跟著螢幕高度縮小，1920×905 時 MUSIC 字實際約 12（Tina 11/12：「12吧」，介於縮小後的 11 和樣本的 13）。
   zoom 會連右邊、底部距離一起放大，除回去讓右緣仍對齊頁面右邊界 72 */
.mediactl{zoom:1.12;right:calc(var(--m) / 1.12);bottom:calc(40px / 1.12)}

/* ========== 官網三段改用會員中心新元件（Tina 2026-11-12 10:41 定）==========
   跑一關右半邊、最新消息卡：噴砂黑金屬牌＋四角螺絲；計時器：七段 LED；評級：圓形金屬章。
   樣子照 member/wall.css（.plate、.timer、.bezel、.win、.coin）與 member.css（牌子四角螺絲），數值取 1920 寬時的值。
   這支檔案排行榜頁、後台也會載，所以每條都限定在 #score／#record／#news 裡 */

/* 圓形金屬評級章（照 wall.css .coin；六色沿用 VR 結算面板，顏色由各章的 --gc 給） */
#score .coin,#record .coin{--s:40px;position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:50%;vertical-align:middle;
  background:radial-gradient(circle at 50% 50%,#24272d 0,#15171b calc(var(--s) * .37),transparent calc(var(--s) * .37 + .5px)),
    radial-gradient(circle at 50% 50%,transparent calc(var(--s) * .37 + .5px),rgba(0,0,0,.55) calc(var(--s) * .37 + 1.5px),transparent calc(var(--s) * .37 + 3px)),
    conic-gradient(from 0deg,rgba(255,255,255,.28) 0deg,rgba(255,255,255,.05) 70deg,rgba(0,0,0,.38) 135deg,rgba(0,0,0,.05) 200deg,rgba(255,255,255,.5) 300deg,rgba(255,255,255,.28) 360deg),
    var(--gc);
  box-shadow:0 0 0 1.5px #0a0c0f,0 0 0 2.5px rgba(255,255,255,.1),0 4px 8px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 1px rgba(0,0,0,.35)}
#score .coin b,#record .coin b{font:800 calc(var(--s) * .4)/1 var(--font);font-variation-settings:normal;letter-spacing:0;color:#e9edf1;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12)}

/* 噴砂黑金屬牌（照 wall.css .plate::before：霧黑、細顆粒、切角亮邊）與四角內六角螺絲（照 member.css 大片金屬牌 ::after） */
#score .b-right,body.f1 #news .item{isolation:isolate;color:#ece8df;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
#score .b-right::before,body.f1 #news .item::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;mix-blend-mode:normal;pointer-events:none;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    linear-gradient(180deg,#323335 0%,#26272a 50%,#1f2023 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.7),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(0,0,0,.5)}
#score .b-right::after,#news .item::after{content:"";position:absolute;inset:13px;pointer-events:none;--s:13px;
  background:
    radial-gradient(circle closest-side,#141312 0 26%,transparent 34%) left top/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side,#141312 0 26%,transparent 34%) right top/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side,#141312 0 26%,transparent 34%) left bottom/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side,#141312 0 26%,transparent 34%) right bottom/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side at 40% 35%,#b9b6ae 0,#6a6862 45%,#2e2d2a 82%,rgba(0,0,0,.5) 90%,transparent 100%) left top/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side at 40% 35%,#b9b6ae 0,#6a6862 45%,#2e2d2a 82%,rgba(0,0,0,.5) 90%,transparent 100%) right top/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side at 40% 35%,#b9b6ae 0,#6a6862 45%,#2e2d2a 82%,rgba(0,0,0,.5) 90%,transparent 100%) left bottom/var(--s) var(--s) no-repeat,
    radial-gradient(circle closest-side at 40% 35%,#b9b6ae 0,#6a6862 45%,#2e2d2a 82%,rgba(0,0,0,.5) 90%,transparent 100%) right bottom/var(--s) var(--s) no-repeat}

/* ---------- 跑一關右半邊：一整塊金屬牌，像會員中心「最近一局」成績牌放大；上下緣對齊左邊靶場（328～948） ---------- */
#score .b-right{top:328px;height:620px;padding:26px 40px 24px;display:flex;flex-direction:column}
#score .b-right .lbl{color:#bdb8ac}
#score .b-hd{display:flex;justify-content:space-between;align-items:center;gap:16px}
/* 狀態燈：等第一槍＝琥珀、計時中＝紅、結束＝熄（motion.js 換 data-s） */
#score .b-wait{margin:0;height:auto;display:flex;align-items:center;gap:10px;font:16px var(--mono);letter-spacing:.06em;color:#d8d2c4}
#score .b-wait::before{content:"";width:9px;height:9px;border-radius:50%;background:#e2b049;box-shadow:0 0 6px rgba(226,176,73,.8)}
#score .b-wait[data-s="run"]::before{background:#ff4532;box-shadow:0 0 8px rgba(255,69,50,.9)}
#score .b-wait[data-s="over"]::before{background:#5f5c55;box-shadow:none}
/* 計時器：切角機殼、金屬框、四顆內六角螺絲、七段 LED（照 wall.css .timer／.bezel／.win） */
#score .b-stimer{position:relative;margin-top:14px;padding:12px;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  background:linear-gradient(180deg,#3a3936 0%,#272624 50%,#1d1c1a 100%)}
#score .b-stimer::before{content:"";position:absolute;inset:0;clip-path:inherit;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.6);pointer-events:none}
#score .bezel{position:relative;padding:8px;background:linear-gradient(180deg,#5b5954,#2f2e2b 50%,#4a4844);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.6)}
#score .bezel .sc{position:absolute;width:11px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a5a29a,#4a4844 60%,#262523);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
#score .bezel .sc::after{content:"";position:absolute;inset:28%;background:#1a1918;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
#score .bezel .sc:nth-child(1){left:2px;top:2px}
#score .bezel .sc:nth-child(2){right:2px;top:2px}
#score .bezel .sc:nth-child(3){left:2px;bottom:2px}
#score .bezel .sc:nth-child(4){right:2px;bottom:2px}
#score .win{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;gap:12px;min-height:116px;padding:14px 24px;
  background:radial-gradient(130% 150% at 50% 0%,#1d0a08 0%,#0b0403 72%);box-shadow:inset 0 4px 12px rgba(0,0,0,.95),inset 0 0 0 1px rgba(0,0,0,.9)}
#score .win::after{content:"";position:absolute;inset:0;background:linear-gradient(162deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 34%,transparent 35%);pointer-events:none}
#score .win svg{height:88px;width:auto;display:block}
#score .win .unit{font:700 16px var(--mono);color:rgba(255,90,70,.75);letter-spacing:.08em;margin-bottom:4px}
/* 結算數字：刻在牌上（字色換成牌上的米白） */
#score .b-sum{margin-top:16px;border-top:1px solid rgba(236,232,223,.14);padding-top:12px}
#score .b-grid{margin-top:10px;gap:14px 24px}
#score .b-grid div span{color:#bdb8ac}
#score .b-grid div b{font-size:34px;color:#ece8df}
#score .b-grid div b small{color:#bdb8ac}
#score .b-grid div b.minus{color:#ff6b5e}
#score .b-grid div.score b{color:#fff}
#score .b-bonus{color:#bdb8ac}
/* 評級：刻度尺上的字母換成六色評級章，跑完評級章蓋到右邊（motion.js）。「這一局」字和凹槽拿掉（Tina 2026-11-12） */
#score .b-grade{position:static;width:auto;opacity:1;margin-top:auto;border-top:1px solid rgba(236,232,223,.14);padding-top:12px;display:flex;justify-content:space-between;align-items:flex-start}
#score .ruler{margin:26px 0 0 19px;width:470px;height:66px}
#score .ruler .base{background:rgba(236,232,223,.35)}
#score .ruler .tk .coin{--s:36px;position:absolute;top:20px;left:50%;transform:translateX(-50%)}
#score .ruler .mk{opacity:0}
#score .stamp{position:static;opacity:1;transform:none;display:flex;align-items:flex-end;min-height:120px}   /* 拿掉上方的字之後，這一格仍保留原本的高度（不然刻度尺會往下掉），章放在格子底部 */
#score .stamp .coin{--s:80px;opacity:0}
/* 跑一關標題：原本是較小的 h3（64）、沒有進場動畫，改成跟 /01、預告片一樣的大標題（.h2，畫面縮放前 96）＋裂開進場（Tina 2026-11-12） */
#score .b-head .h2{margin-top:16px}
/* 標題變大後說明字離靶場太近：靶場（site.css .b-range）、右邊金屬牌（本檔 #score .b-right）、下方按鈕（本檔 .run .b-ctl）一起往下 32，
   296→328、按鈕 940→972，按鈕底 1024 仍在畫框 1080 內 */

/* ---------- 最新消息：三張卡改噴砂黑金屬牌＋四角螺絲（Tina：「改成磨砂金屬質感」，同會員中心徽章說明牌） ---------- */
body.f1 #news .item{background:none;clip-path:none;box-shadow:none;padding:38px 42px}
#news .item time{color:#bdb8ac}
#news .item .cat{border-color:rgba(236,232,223,.35);color:#bdb8ac}
#news .item b{color:#ece8df}
#news .item .more{color:#ece8df}
/* 跑一關跑完後自己開的槍（motion.js）：彈孔直接出現、火光閃一下、鋼靶晃一下；靶場裡不選字、不拖圖 */
#score .b-range{user-select:none;-webkit-user-select:none;touch-action:manipulation}
#score .b-range img{-webkit-user-drag:none}
/* 禁止射擊靶的叉跟紙混色（透出紙紋），看起來是印在紙上（Tina 2026-11-12 選樣本 A；叉的形狀在 motion.js） */
#score .b-tg svg.ns{mix-blend-mode:multiply;opacity:.92}
#score .b-hole.u{opacity:1}
#score .b-flash.u{animation:bShotFlash .2s ease-out forwards}
@keyframes bShotFlash{from{opacity:1}to{opacity:0}}
#score .b-tg img.tg.ring{animation:bSteelRing .45s ease-out}
@keyframes bSteelRing{0%{transform:rotate(0)}15%{transform:rotate(2deg)}35%{transform:rotate(-1.6deg)}55%{transform:rotate(1.1deg)}75%{transform:rotate(-.6deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){#score .b-flash.u{animation:none;opacity:0}#score .b-tg img.tg.ring{animation:none}}