/* ShootingX 訪客官網原型（2026-11-10）
   設計稿寬 1920，預覽時整頁依視窗寬度縮放。風格定為感覺 1 靶場實戰（Tina 11/10 定；感覺 2 與首屏排法 2、3 已拿掉）。
   數值暫定：本案尚無設計規範。紅色統一用 --red（LOGO 紅的近似值，正式色碼待美術提供）。 */
*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#d11f26; --red-hi:#e8343a;
  --m:72px;
  --font:Bahnschrift,"Segoe UI","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  --mono:Consolas,"Cascadia Mono","Courier New",monospace;
  --cond:"wght" 700,"wdth" 75;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
html{background:#000}
body{width:1920px;font-family:var(--font);color:var(--text);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
.hide{display:none!important}
/* ---------- 感覺 1：靶場實戰 ---------- */
body.f1{--bg:#15140f;--bg2:#1d1c17;--text:#ece6d8;--text2:#b8b1a2;--line:rgba(236,230,216,.22);--panel:linear-gradient(160deg,#3a3a33,#25251f 60%,#1e1e19);--tape:#cdbb84}
/* ---------- 頁首（常駐） ---------- */
.hd{position:fixed;left:0;top:0;width:1920px;height:88px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--m);transition:background .3s}
.hd.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 1px 0 var(--line)}
.hd .logo{height:46px}
.hd nav{display:flex;gap:40px;font-size:17px;letter-spacing:.06em}
.hd nav a{opacity:.85}
.hd nav a:hover{opacity:1}
.util{display:flex;align-items:center;gap:16px;font-size:16px}
.util .ubtn{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--line)}
.util .ubtn svg{width:20px;height:20px}
.util .lang{display:flex;align-items:center;gap:6px;height:44px;padding:0 8px;color:var(--text2)}
.util .lang b{color:var(--text)}
body.f1 .hd nav,body.f1 .util{text-transform:uppercase;font-variation-settings:"wght" 600,"wdth" 85}
body.f1 .util .ubtn{border-width:2px}
/* ---------- 共用元件 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 40px;font-size:20px;font-weight:700;letter-spacing:.04em;white-space:nowrap;cursor:pointer}
.btn.p{background:var(--red);color:#fff}
.btn.s{border:2px solid var(--text2);color:var(--text)}
body.f1 .btn{text-transform:uppercase;font-variation-settings:"wght" 700,"wdth" 85}
body.f1 .btn.p{clip-path:polygon(0 4%,2% 0,40% 3%,60% 0,98% 2%,100% 10%,99% 60%,100% 96%,96% 100%,55% 97%,30% 100%,1% 98%,0 70%);position:relative}
body.f1 .btn.p::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.35;mix-blend-mode:multiply;pointer-events:none}
.plate{position:relative;background:var(--panel)}
body.f1 .plate{box-shadow:inset 0 2px 0 rgba(255,250,235,.08),inset 0 -3px 0 rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.45);clip-path:polygon(0 0,97% 0,100% 6%,100% 100%,3% 100%,0 94%)}
body.f1 .plate::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.42;mix-blend-mode:overlay;pointer-events:none}
/* 段落 */
.sec{position:relative;padding:160px var(--m)}
.kick{font-family:var(--mono);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--text2);display:flex;align-items:center;gap:16px}
.kick b{color:var(--red);font-weight:700}
.h2{margin-top:20px;font-size:96px;line-height:.95}
body.f1 .h2{font-variation-settings:var(--cond);text-transform:uppercase;background:repeating-linear-gradient(180deg,var(--text) 0 34px,transparent 34px 38px);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.lead{margin-top:24px;max-width:760px;font-size:22px;line-height:1.5;color:var(--text2)}
.grain{position:absolute;inset:0;background-image:var(--noise);opacity:.25;mix-blend-mode:overlay;pointer-events:none}
.draft{display:inline-block;font:12px "Segoe UI","Noto Sans TC",sans-serif;color:#ffd166;border:1px dashed #ffd166;padding:2px 6px;margin-left:12px;vertical-align:middle;letter-spacing:0;text-transform:none}
/* ---------- 首屏 ---------- */
.hero{position:relative;height:1080px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url(../img/range-pistol.jpg) center/cover}
body.f1 .hero-bg{filter:sepia(.45) saturate(.85) contrast(1.15) brightness(.62)}
.hero-shade{position:absolute;inset:0}
body.f1 .hero-shade{background:radial-gradient(ellipse 60% 70% at 92% 8%,rgba(255,160,80,.32),transparent 60%),linear-gradient(90deg,rgba(18,16,12,.94) 0%,rgba(18,16,12,.86) 40%,rgba(18,16,12,.4) 66%,rgba(18,16,12,.55) 100%),linear-gradient(0deg,rgba(18,16,12,.9),transparent 30%)}
.hero .copy{position:absolute;left:var(--m);top:290px;width:900px;z-index:3}
.hero h1{font-size:104px;line-height:.98;text-wrap:balance}
body.f1 .hero h1{font-variation-settings:var(--cond);text-transform:uppercase;background:repeating-linear-gradient(180deg,var(--text) 0 30px,transparent 30px 34px);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.55))}
.pains{list-style:none;margin-top:36px;display:grid;gap:12px;font-size:22px;line-height:1.4}
.pains b{font-weight:600}
.pains span{color:var(--text2)}
.device{margin-top:24px;font-size:17px;color:var(--text2);display:flex;align-items:center;gap:8px}
.device svg{width:20px;height:20px}
.ctas{margin-top:40px;display:flex;gap:16px}
.mediactl{position:absolute;right:var(--m);bottom:48px;z-index:4;display:flex;gap:8px}
.mediactl button{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text2);border:1px solid var(--line);padding:8px 12px;min-height:44px;background:rgba(0,0,0,.55)}
.mediactl svg{width:16px;height:16px}
/* ---------- 槍枝展示（BSC 展品打光手法） ---------- */
.arsenal{height:1080px;padding:0;overflow:hidden;background:#050506}
.arsenal .lights{position:absolute;inset:0;pointer-events:none}
body.f1 .arsenal .lights{background:radial-gradient(ellipse 22% 70% at 50% -8%,rgba(255,196,130,.30),transparent 70%),radial-gradient(ellipse 40% 12% at 50% 86%,rgba(255,170,90,.12),transparent 70%)}
.arsenal .beam{position:absolute;left:50%;top:-40px;width:900px;height:1000px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 85%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(6px);pointer-events:none}
.arsenal .head{position:absolute;left:var(--m);top:150px;z-index:3}
.arsenal .h2{font-size:120px}
.gun{position:absolute;transition:transform .7s cubic-bezier(.2,0,0,1),filter .7s,opacity .7s;filter:drop-shadow(0 40px 30px rgba(0,0,0,.7))}
.gun.front{left:50%;top:420px;width:860px;transform:translateX(-50%) rotate(-6deg);z-index:2}
.gun.back1{left:200px;top:300px;width:420px;transform:rotate(8deg);filter:brightness(.45) blur(1.5px);opacity:.85}
.gun.back2{left:1330px;top:250px;width:400px;transform:rotate(-14deg) scaleX(-1);filter:brightness(.4) blur(2px);opacity:.8}
.arsenal .pick{position:absolute;right:var(--m);bottom:120px;z-index:3;display:grid;gap:8px;width:360px}
.arsenal .pick button{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 20px;font-size:18px;border:1px solid var(--line);color:var(--text2);text-align:left}
.arsenal .pick button.on{color:#fff;border-color:var(--red);background:rgba(209,31,38,.12)}
.arsenal .pick button i{font-style:normal;font-family:var(--mono);font-size:14px;opacity:.7}
.arsenal .cap{position:absolute;left:var(--m);bottom:120px;z-index:3;width:620px}
.arsenal .cap b{display:block;font-size:44px}
body.f1 .arsenal .cap b{font-variation-settings:var(--cond);text-transform:uppercase;font-size:56px}
.arsenal .cap p{margin-top:10px;font-size:20px;line-height:1.5;color:var(--text2)}
/* ---------- 怎麼開始 ---------- */
.nohead{margin-top:24px;display:flex;align-items:center;justify-content:space-between;padding:28px 40px;border:1px dashed var(--line)}
.nohead p{font-size:20px;color:var(--text2)}
.nohead p b{color:var(--text)}
/* ---------- 三種模式 ---------- */
.modes .tabs{margin-top:56px;display:flex;gap:8px;border-bottom:1px solid var(--line)}
.modes .tabs button{height:88px;padding:0 40px;font-size:40px;color:var(--text2);border-bottom:4px solid transparent;margin-bottom:-1px}
body.f1 .modes .tabs button{font-variation-settings:var(--cond);text-transform:uppercase;font-size:48px}
.modes .tabs button.on{color:var(--text);border-bottom-color:var(--red)}
.modes .tabs button i{font-style:normal;font-family:var(--mono);font-size:15px;margin-left:10px;color:var(--text2);vertical-align:middle}
.mpanel{margin-top:48px;display:grid;grid-template-columns:1080px 1fr;gap:56px;align-items:center}
.mpanel .shot{height:540px;background:center/cover}
body.f1 .mpanel .shot{filter:sepia(.25) contrast(1.05)}
.mpanel h3{font-size:56px;line-height:1}
body.f1 .mpanel h3{font-variation-settings:var(--cond);text-transform:uppercase;font-size:68px}
.mpanel p{margin-top:20px;font-size:22px;line-height:1.55;color:var(--text2)}
.mpanel .meta{margin-top:32px;display:flex;gap:40px}
.mpanel .meta div b{display:block;font-size:56px;font-variant-numeric:tabular-nums;line-height:1}
.mpanel .meta div span{font-size:16px;color:var(--text2)}
/* ---------- 訓練紀錄預覽 ---------- */
.record{display:grid;grid-template-columns:720px 1fr;gap:96px;align-items:center}
.board{display:grid;gap:20px}
.board .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.board .timer{height:180px;display:flex;flex-direction:column;justify-content:center;padding:0 28px}
.board .timer .lbl{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.board .timer .num{font-size:84px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
body.f1 .board .timer{background:#1b1c18;border-radius:18px;clip-path:none}
body.f1 .board .timer .screen{position:absolute;inset:22px;background:linear-gradient(180deg,#b6c0a4,#9eaa8c);border-radius:6px;box-shadow:inset 0 3px 8px rgba(0,0,0,.45)}
body.f1 .board .timer>span{position:relative;color:#1c2216;padding-left:12px}
body.f1 .board .timer .num{font-family:var(--mono)}
.board .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.board .stats div{height:180px;display:flex;flex-direction:column;justify-content:center;padding:0 16px}
.board .stats b{font-size:36px;font-variant-numeric:tabular-nums}
.board .stats span{font-size:15px;color:var(--text2);margin-top:6px}
/* ---------- 排行榜預覽 ---------- */
.lb{margin-top:56px;display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:start}
.lb table{width:100%;border-collapse:collapse;font-size:20px}
.lb th{text-align:left;font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);padding:0 20px 16px}
.lb td{padding:22px 20px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.lb td.rk{font-family:var(--mono);font-size:28px;font-weight:700;width:90px}
.lb tr.top td.rk{color:var(--red)}
.lb .who{display:flex;align-items:center;gap:16px}
.lb .av{width:44px;height:44px;border-radius:50%;background:#2a2d33;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text2)}
.lb .side{padding:40px}
.lb .side .tabs{display:flex;gap:8px;margin-bottom:24px}
.lb .side .tabs span{padding:8px 16px;border:1px solid var(--line);font-size:16px;color:var(--text2)}
.lb .side .tabs span.on{color:var(--text);border-color:var(--text)}
.lb .side p{font-size:19px;line-height:1.55;color:var(--text2)}
/* ---------- 消息 ---------- */
.news .list{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news .item{padding:32px;min-height:220px;display:flex;flex-direction:column}
.news .item time{font-family:var(--mono);font-size:15px;color:var(--text2)}
.news .item b{margin-top:16px;font-size:24px;line-height:1.35}
.news .item span{margin-top:auto;font-size:16px;color:var(--text2)}
/* ---------- 常見問題 ---------- */
.faq .list{margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:32px 0;font-size:26px;cursor:pointer}
.faq summary::after{content:"+";font-size:32px;color:var(--text2)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 32px;font-size:20px;line-height:1.6;color:var(--text2);max-width:1100px}
/* ---------- 頁尾 ---------- */
.ft{padding:72px var(--m) 56px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:48px;font-size:17px;color:var(--text2)}
.ft img{height:36px;margin-bottom:20px}
.ft b{display:block;color:var(--text);font-size:15px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.ft a{display:block;width:fit-content;margin-bottom:10px}   /* 寬度跟著字：準星鎖定時框住字，不是整欄寬（Tina 2026-11-12：「準心變得太寬」） */
.ft .cp{grid-column:1/-1;font-size:14px;opacity:.7;margin-top:24px}
/* ---------- Enter VR 引導視窗 ---------- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center}
.modal.on{display:flex}
.modal .box{width:760px;padding:56px;background:var(--bg2);border:1px solid var(--line)}
.modal h3{font-size:40px}
body.f1 .modal h3{font-variation-settings:var(--cond);text-transform:uppercase;font-size:48px}
.modal ol{margin:28px 0 0 24px;font-size:20px;line-height:1.9;color:var(--text2)}
.modal ol b{color:var(--text)}
.modal .addr{margin-top:24px;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:rgba(255,255,255,.06);font-family:var(--mono);font-size:22px}
.modal .addr button{font-family:var(--font);font-size:16px;border:1px solid var(--line);padding:8px 16px}
.modal .alt{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:18px;color:var(--text2)}
.modal .x{position:absolute;margin:-40px 0 0 640px;font-size:28px;color:var(--text2);width:44px;height:44px}
@media (prefers-reduced-motion: reduce){
  .gun{transition:none}
}
/* 怎麼練：VR 實機畫面三格 */
.frames{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fr{position:relative;height:300px;background:center/cover}
body.f1 .fr{filter:sepia(.3) contrast(1.08)}
.fr span{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:15px;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.7);padding:6px 10px}
/* ---------- 中文版（2026-11-10）：英文大標的橫向切口會切斷中文筆畫，中文先改實心字；行高放寬 ---------- */
html[lang="zh-Hant"] body.f1 .h2,html[lang="zh-Hant"] body.f1 .hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);filter:drop-shadow(0 3px 0 rgba(0,0,0,.55))}
html[lang="zh-Hant"] .h2,html[lang="zh-Hant"] .hero h1{line-height:1.15;letter-spacing:.02em}
html[lang="zh-Hant"] .hero h1{font-size:96px}
html[lang="zh-Hant"] .pains,html[lang="zh-Hant"] .lead,html[lang="zh-Hant"] .mpanel p{line-height:1.7}
html[lang="zh-Hant"] .kick{letter-spacing:.12em}
.util .lang{cursor:pointer;background:none;border:0;font:inherit}
/* 語言選單（Tina 2026-11-12 15:55 選）：只留地球＋小箭頭，點開選 English／中文，目前的語言左邊紅條、粗體。首頁、排行榜頁、404 共用；會員中心、登入註冊頁同一種。
   選單上緣貼頁首底線：頁首 88、按鈕 44，往下 22 */
.util .langw{position:relative}
.util .lang .chev{width:12px;height:12px;opacity:.8;transition:transform .15s}
.util .lang:hover,.util .lang[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.util .lang[aria-expanded="true"] .chev{transform:rotate(180deg)}
.util .langm{position:absolute;right:0;top:calc(100% + 22px);z-index:60;min-width:160px;background:#1d1c17;border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.55);text-transform:none;font-variation-settings:normal;letter-spacing:0}
.util .langm[hidden]{display:none}
.util .langm button{display:flex;align-items:center;width:100%;min-height:52px;padding:0 16px;background:none;border:0;color:var(--text);font-family:var(--font);font-size:18px;text-align:left;cursor:pointer;white-space:nowrap}
.util .langm button:hover{background:rgba(255,255,255,.06)}
.util .langm button.on{box-shadow:inset 3px 0 0 var(--red);font-weight:700}
.util .langm button:focus-visible{outline:3px solid #fff;outline-offset:-6px}
/* ===== 2026-11-10 介面審稿第一輪修正 ===== */
/* 中8：感覺 1 長句不用全大寫 */
body.f1 .modal h3{text-transform:none}
/* 中9：大面積紅只留主按鈕 */
.lb tr.top td.rk{color:var(--text)}
.lb tr.top td.rk::after{content:"";display:block;width:24px;height:3px;background:var(--red);margin-top:6px}
.arsenal .pick button.on{border-color:var(--text);background:rgba(255,255,255,.08)}
/* 中10：引導視窗主要動作是複製網址 */
.modal .addr .btn{height:52px;padding:0 24px;font-size:17px;border:0}
.modal .alt .btn{height:52px;font-size:17px}
/* 小1：感覺 1 頁首按鈕與槍名大小寫一致 */
.util .ubtn{text-transform:inherit}
body.f1 .arsenal .pick button{text-transform:uppercase}
/* 小3：資訊性小字至少 16px */
.mediactl button,.lb th,.news .item time,.board .timer .lbl,.board .stats span,.fr span{font-size:16px}
/* 小10：視窗標題不要貼到關閉鈕 */
.modal h3{padding-right:56px}
/* 焦點樣式：切角會切掉外框，改畫在內側 */
.btn:focus-visible,.util .ubtn:focus-visible,.util .lang:focus-visible,.modes .tabs button:focus-visible,.arsenal .pick button:focus-visible{outline:3px solid #fff;outline-offset:-6px}
/* 槍名切換時不跳：說明固定兩行高 */
.arsenal .cap p{min-height:3em}
/* ===== 2026-11-10 介面審稿補審修正 ===== */
/* 3：中文標題只在空格與標點斷行，不把詞切開 */
html[lang="zh-Hant"] .h2,html[lang="zh-Hant"] .hero h1,html[lang="zh-Hant"] .mpanel h3,html[lang="zh-Hant"] .modal h3{word-break:keep-all}
/* ===== 消息擺法 A（Tina 11/10 選）：日期、分類、標題、一句摘要、全部消息連結；不自動輪播 ===== */
.newshead{display:flex;justify-content:space-between;align-items:flex-end}
.allnews{font-size:20px;padding:12px 0;border-bottom:2px solid var(--text2);margin-bottom:8px}
.news .item{min-height:280px}
.news .item .meta{display:flex;align-items:center;gap:12px}
.news .item .cat{font-size:14px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:3px 10px;color:var(--text2)}
.news .item p{margin-top:12px;font-size:18px;line-height:1.55;color:var(--text2)}
.news .item .more{margin-top:auto;padding-top:20px;font-size:16px;color:var(--text)}
/* ===== /05 只展示現有資料（Tina 11/10：拿掉「即將推出」，改展示真的有的成就型紀錄） ===== */
.board .kv{min-height:220px;padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.board .kv .lbl{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.board .kv b{font-size:44px;font-variant-numeric:tabular-nums;line-height:1.05;margin-bottom:10px}
.board .kv b small{font-size:20px;margin:0 6px 0 2px;color:var(--text2)}
.board .kv b.sm{font-size:28px}
body.f1 .board .kv b{font-variation-settings:var(--cond)}
.split3{display:flex;gap:4px;height:10px;margin-top:auto}
.split3 i{display:block;background:var(--text2)}
.split3 i:nth-child(2){background:var(--text)}
.split3l{display:flex;justify-content:space-between;font-size:16px;color:var(--text2);margin-top:8px}
.ranks{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 28px}
.ranks div{display:flex;align-items:center;gap:12px}
.ranks div+div{border-left:1px solid var(--line);padding-left:24px}
.ranks .lbl{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin-right:4px}
.ranks b{font-size:40px;font-variant-numeric:tabular-nums}
body.f1 .ranks b{font-variation-settings:var(--cond)}
.ranks img{width:20px;height:20px}
.ranks img.medal{width:32px;height:37px}
.ranks em{font-style:normal;font-size:18px;color:var(--text2)}
.split3{margin-top:8px}
/* 排名三格：標籤固定寬度，英文 WEEK／MONTH／SEASON 長短不同時數字起點也一致 */
.ranks .lbl{min-width:84px}
html[lang="zh-Hant"] .ranks .lbl{min-width:64px}
/* =====================================================================
   2026-11-10 動畫改版（Tina 選定：N 常駐導覽、A 首屏縮進 /01、B 跑一關、C 結尾準星光圈、
   E 標題沿撕裂角切入、F /06 列表、G 選槍微傾、H 按鈕曳光、I 預告片；進入 VR 用矩形拉絲金屬紅）
   樣本：原型\20261110-動畫樣本\motion-samples.html。捲動驅動用原生程式（js/motion.js），無外部資源。
   ===================================================================== */
/* ---------- 捲動場景：外層撐出捲動距離，舞台黏在畫面上；舞台內 1920×1080 畫框依可視高度等比縮小 ---------- */
.scene{position:relative}
.scn-stage{position:sticky;top:0;height:var(--vhd,1080px);overflow:hidden;background:var(--bg)}
.scn-frame{position:relative;width:var(--fw,1920px);height:1080px;transform-origin:0 0;transform:translate(var(--ftx,0px),var(--fty,0px)) scale(var(--fs,1))}
/* 螢幕太矮（縮放會小於 0.8、小字讀不了）：不黏住、不縮小，照一般頁面往下捲，各段直接顯示看得到內容的那一格 */
body.scn-static .scn-stage{position:relative;height:1080px}
/* ---------- N 常駐導覽列：分組底板＋目前段落亮紅線 ---------- */
.hd nav{gap:4px;padding:4px;background:rgba(236,230,216,.06);border:1px solid rgba(236,230,216,.14)}
.hd nav a{position:relative;height:44px;padding:0 16px;display:flex;align-items:center;color:var(--text2);opacity:1}
.hd nav a:hover{color:var(--text)}
.hd nav a.on{color:#fff;background:rgba(236,230,216,.08)}
.hd nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.hd nav a.on::after{transform:scaleX(1)}
.hd nav a:focus-visible{outline:3px solid #fff;outline-offset:-4px}
/* ---------- 進入 VR／主要按鈕：矩形＋拉絲金屬紅（Tina 選款 1） ---------- */
body.f1 .btn.p,.util .ubtn.vrbtn{clip-path:none;color:#fff;border:1px solid #6e0b10;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(180deg,#f2555a 0%,#d32730 42%,#a8141b 58%,#c92229 100%);box-shadow:inset 0 1px 0 rgba(255,220,215,.6),inset 0 -2px 0 rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(0,0,0,.45)}
body.f1 .btn.p::after{display:none}
body.f1 .btn.p:hover,.util .ubtn.vrbtn:hover{background:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),linear-gradient(180deg,#ff6a6e 0%,#e2323a 42%,#b8171f 58%,#d62a31 100%)}
.util .ubtn.vrbtn{border-width:1px}
/* H 按鈕曳光：滑過或鍵盤選到時，一道光沿外框描一圈 */
.btn,.util .ubtn.vrbtn{position:relative}
.trace{position:absolute;left:-6px;top:-6px;overflow:visible;pointer-events:none}
.util .ubtn svg.trace{width:auto;height:auto}
.trace rect{fill:none;stroke-width:2;stroke-dasharray:101 101;stroke-dashoffset:101;transition:stroke-dashoffset .45s cubic-bezier(.48,.08,0,1)}
.btn.p .trace rect,.ubtn.vrbtn .trace rect{stroke:#fff}
.btn.s .trace rect{stroke:#ff4a3a;filter:drop-shadow(0 0 4px #ff3a2a)}
.btn:hover .trace rect,.btn:focus-visible .trace rect,.ubtn.vrbtn:hover .trace rect,.ubtn.vrbtn:focus-visible .trace rect{stroke-dashoffset:0}
/* ---------- A 首屏 → /01 ---------- */
#heroScene .hero{height:1080px}
.hero-bg{transform-origin:0 0;overflow:hidden}
.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.a01{position:absolute;left:var(--m);top:168px;z-index:5;opacity:0;pointer-events:none}
.a01 .h2{margin-top:16px}
#a01frames{position:absolute;left:var(--m);right:var(--m);top:470px;margin:0;gap:32px;z-index:5;pointer-events:none}
#a01frames .fr{height:321px;opacity:0}
#a01frames .fr1{background:none;filter:none}
/* ---------- B 跑一關 ---------- */
.run .b-head{position:absolute;left:var(--m);top:112px}
.run .b-lead{margin-top:8px;font-size:20px;color:var(--text2);white-space:nowrap}
.b-range{position:absolute;left:var(--m);right:calc(var(--m) + 776px);top:328px;height:620px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px));background:url(../img/dirt.jpg) 0 0/256px}
.b-inner{position:absolute;left:50%;top:0;width:1000px;height:620px;margin-left:-500px}
.b-range::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,14,.35),rgba(20,18,14,.55) 62%,rgba(10,9,7,.78) 62.2%,rgba(10,9,7,.85))}
.b-tg{position:absolute;bottom:48px;height:440px}
.b-tg>img.tg{height:100%;width:auto;display:block;filter:drop-shadow(0 12px 10px rgba(0,0,0,.5))}
.b-tg svg.ns{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b-tg .lab{position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);font:16px var(--mono);letter-spacing:.14em;color:var(--text2);white-space:nowrap;text-transform:uppercase}
.b-hole{position:absolute;width:26px;height:auto;transform:translate(-50%,-50%);opacity:0}
.b-flash{position:absolute;width:72px;height:72px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff3c4,rgba(255,176,74,.8) 40%,rgba(255,122,26,0) 70%);opacity:0;pointer-events:none}
.b-pop{position:absolute;transform:translate(-50%,-100%);font:700 24px var(--mono);color:#fff;text-shadow:0 2px 4px #000;opacity:0;pointer-events:none;white-space:nowrap}
.b-pop.minus{color:#ff6b5e}
.b-right{position:absolute;right:var(--m);top:256px;width:744px}
.run .lbl{display:block;font:15px var(--mono);letter-spacing:.2em;color:var(--text2);text-transform:uppercase}
.b-timer{font:700 128px/1 var(--mono);color:#ff5a4a;text-shadow:0 0 18px rgba(255,60,40,.55);letter-spacing:-.02em;margin-top:8px}
.b-timer small{font-size:40px;margin-left:8px;color:var(--text2);text-shadow:none}
.b-wait{font:16px var(--mono);color:#ffd166;margin-top:8px;height:20px;letter-spacing:.06em}
.b-sum{margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
.b-grid{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px}
.b-grid div span{display:block;font:14px var(--mono);letter-spacing:.12em;color:var(--text2);text-transform:uppercase}
.b-grid div b{display:block;margin-top:4px;font:700 40px/1.1 var(--mono);color:var(--text)}
.b-grid div b small{font-size:16px;font-weight:400;color:var(--text2);margin-left:8px}
.b-grid div b.minus{color:#ff6b5e}
.b-grid div.score b{color:#fff}
.b-bonus{margin-top:8px;font:15px var(--mono);color:var(--text2);opacity:0}
.b-grade{position:absolute;right:var(--m);top:792px;width:744px;opacity:0}
/* 評級刻度尺（B 與 /05 共用）：F～S+ 由低到高，指針指出這一局 */
.ruler{position:relative;margin-top:48px;width:470px;height:56px}
.ruler .base{position:absolute;left:0;right:0;top:20px;height:2px;background:rgba(236,230,216,.4)}
.ruler .tk{position:absolute;top:12px;width:2px;height:16px;background:var(--c)}
.ruler .tk i{position:absolute;top:24px;left:50%;transform:translateX(-50%);font:700 22px var(--mono);font-style:normal;color:var(--c)}
.ruler .mk{position:absolute;left:0;top:-16px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--red);transform:translateX(-7px)}
.stamp{position:absolute;left:560px;top:8px;display:flex;align-items:baseline;gap:16px;opacity:0;transform-origin:0 50%}
.stamp b{font:700 112px/1 var(--font);font-variation-settings:var(--cond);color:#C0C0C0}
/* /05 上一局評級：同一把刻度尺，指在 S */
.gruler{display:grid;grid-template-columns:1fr auto;align-items:end;padding:24px 32px}
.gruler .lbl{grid-column:1/-1;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.gruler .ruler{margin-top:32px}
.gruler .ruler .mk{transform:translateX(calc(var(--at,4) * 94px - 7px))}
.gruler .gnow{font:700 72px/1 var(--font);font-variation-settings:var(--cond);color:#E2B049}
/* ---------- I 預告片 ---------- */
.i-head{position:absolute;left:var(--m);top:128px;z-index:4}
.i-head .h2{margin-top:16px}
.i-panel{position:absolute;left:var(--m);right:var(--m);top:330px;height:640px;transform-origin:50% 0;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,32px 100%,0 calc(100% - 32px))}
.i-panel .ph,.i-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:url(../img/range-timer.jpg) center/cover;filter:sepia(.3) contrast(1.1) brightness(.5)}
.i-panel .dim{position:absolute;inset:0;background:radial-gradient(ellipse 40% 50% at 50% 50%,rgba(5,5,6,.2),rgba(5,5,6,.65))}
.i-play{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:12px;font:600 20px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;cursor:pointer;background:none;border:0}
.i-play svg.rg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform .5s cubic-bezier(.48,.08,0,1)}
.i-play:hover svg.rg,.i-play:focus-visible svg.rg{transform:rotate(45deg) scale(1.06)}
.i-play:focus-visible{outline:3px solid #fff;outline-offset:8px}
.i-play .tri{width:0;height:0;border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.i-draft{position:absolute;left:var(--m);top:984px;margin:0}
.tmodal{position:fixed;inset:0;z-index:120;background:rgba(5,5,6,.94);display:none;align-items:center;justify-content:center}
.tmodal.on{display:flex}
.tmodal .tbox{position:relative;width:1280px;height:720px;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;font:18px/1.7 "Microsoft JhengHei",sans-serif;color:#ffd166;border:1px dashed #ffd166}
.tmodal video{position:absolute;inset:0;width:100%;height:100%}
.tmodal .tclose{position:absolute;right:var(--m);top:120px;height:48px;padding:0 16px;border:2px solid var(--text2);color:var(--text);font:600 16px var(--font);text-transform:uppercase}
body.tmodal-on .hd{opacity:.25;pointer-events:none}
/* ---------- F /06 關卡流程列表（取代三張卡片＝主管意見第 4 點） ---------- */
.f-rows{margin-top:48px;max-width:1400px}
.f-row{position:relative;display:grid;grid-template-columns:200px 1fr;align-items:center;min-height:176px;padding:16px 0}
.f-row .base{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.f-row .tr{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:linear-gradient(90deg,rgba(209,31,38,0),var(--red) 70%,rgba(209,31,38,0));transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.48,.08,0,1)}
.odo{height:120px;overflow:hidden;font:700 120px/120px var(--mono);color:var(--red);display:flex;opacity:.3;transition:opacity .4s}
.odo .strip{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.48,.08,0,1)}
.odo .strip i{font-style:normal;height:120px}
.f-row .tx{opacity:.2;transform:translateX(32px);transition:opacity .5s,transform .6s cubic-bezier(.48,.08,0,1)}
.f-row .tx b{display:block;font-size:44px}
body.f1 .f-row .tx b{font-variation-settings:var(--cond)}
.f-row .tx p{margin-top:8px;font-size:21px;line-height:1.5;color:var(--text2)}
.f-row .tx code{font-family:var(--mono);color:var(--text);background:rgba(255,255,255,.08);padding:2px 8px}
.f-row.on .odo{opacity:1}
.f-row.on .tr{transform:scaleX(1)}
.f-row.on .tx{opacity:1;transform:none}
#how .nohead{margin-top:48px;max-width:1400px}
/* ---------- C 結尾準星光圈 ---------- */
.c-frame{background:none}
#final .scn-stage{background:#050506}
.c-img{position:absolute;inset:0;background:url(../img/range-timer.jpg) center/cover;filter:sepia(.35) contrast(1.1) brightness(.5);clip-path:circle(0 at 50% 45%)}
.c-dim{position:absolute;inset:0;background:radial-gradient(ellipse 56% 40% at 50% 48%,rgba(5,5,6,.78),rgba(5,5,6,.45) 70%,rgba(5,5,6,.2));opacity:0}
.c-svg{position:absolute;inset:0;width:100%;height:1080px;pointer-events:none;filter:drop-shadow(0 0 8px rgba(209,31,38,.8))}
.c-x{position:absolute;left:calc(50% - 625px);top:374px;width:755px;height:auto;transform-origin:625px 96px;filter:drop-shadow(0 0 10px rgba(209,31,38,.5))}
.c-words{position:absolute;left:0;right:0;top:380px;text-align:center;font-size:112px;line-height:1;z-index:5;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.c-words span{display:inline-block;margin:0 8px}
html[lang="zh-Hant"] .c-words span{margin:0}
body.f1 .c-words span{font-variation-settings:var(--cond);text-transform:uppercase;background:repeating-linear-gradient(180deg,var(--text) 0 46px,transparent 46px 51px);-webkit-background-clip:text;background-clip:text;color:transparent}
.c-btns{position:absolute;left:0;right:0;top:576px;display:flex;justify-content:center;gap:16px;z-index:5}
.c-draft{position:absolute;left:50%;top:680px;transform:translateX(-50%);margin:0}
/* 首屏背景、片尾光圈背景放在舞台上（不跟畫框一起縮放），任何螢幕比例都鋪滿；縮成卡片、光圈大小由 motion.js 依畫框位置換算 */
/* ---------- E 標題沿撕裂角切入：上下兩半沿 2.5 度接縫（跟 LOGO 撕裂線同角度）從左右滑進來接合 ---------- */
.h2.tw{position:relative}
body.f1 .h2.tw{background:none;color:var(--text)}
body.f1 .h2.tw>.tr-a,body.f1 .h2.tw>.tr-b{background:repeating-linear-gradient(180deg,var(--text) 0 34px,transparent 34px 38px);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2.tw>.tr-a{display:block}
.h2.tw>.tr-b{position:absolute;left:0;top:0;width:100%;display:block}
.h2.tw>.tr-b .draft{visibility:hidden}
.h2.tw:not(.done)>.tr-a{-webkit-mask-image:repeating-linear-gradient(177.5deg,#000 0 var(--seam),transparent var(--seam) var(--lhp));mask-image:repeating-linear-gradient(177.5deg,#000 0 var(--seam),transparent var(--seam) var(--lhp))}
.h2.tw:not(.done)>.tr-b{-webkit-mask-image:repeating-linear-gradient(177.5deg,transparent 0 var(--seam),#000 var(--seam) var(--lhp));mask-image:repeating-linear-gradient(177.5deg,transparent 0 var(--seam),#000 var(--seam) var(--lhp))}
.h2.tw.done>.tr-b{display:none}
.h2.tw>.tr-a{transform:translateX(-180px);opacity:0}
.h2.tw>.tr-b{transform:translateX(180px);opacity:0}
.h2.tw.go>.tr-a,.h2.tw.go>.tr-b{transform:none;opacity:1;transition:transform .7s cubic-bezier(.48,.08,0,1),opacity .45s}
.h2.tw>.tr-c{position:absolute;left:0;top:calc(var(--seam) - 2px);width:360px;height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(209,31,38,0),rgba(209,31,38,.55) 55%,#ff6b5e 88%,#fff);box-shadow:0 0 10px rgba(255,80,60,.7);transform-origin:100% 50%;opacity:0;pointer-events:none}
.h2.tw.go:not(.done)>.tr-c{animation:sxComet .8s .45s cubic-bezier(.3,0,.2,1) both}
@keyframes sxComet{0%{opacity:0;transform:translate(-360px,0) rotate(-2.5deg)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(var(--w),calc(var(--w) * -0.04366 - 16px)) rotate(-2.5deg)}}
/* ---------- G 選槍：槍跟著滑鼠微傾 ---------- */
.arsenal{perspective:1600px}
@media (prefers-reduced-motion: reduce){
  .trace rect,.f-row .tr,.odo,.odo .strip,.f-row .tx,.hd nav a::after{transition:none}
  .h2.tw>.tr-a,.h2.tw>.tr-b{transform:none;opacity:1}
}
/* 中文版：新元件也照「中文大標不用橫切口」「不在詞中間斷行」 */
html[lang="zh-Hant"] body.f1 .h2.tw>.tr-a,html[lang="zh-Hant"] body.f1 .h2.tw>.tr-b,html[lang="zh-Hant"] body.f1 .c-words span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)}
html[lang="zh-Hant"] .f-row .tx b,html[lang="zh-Hant"] .f-row .tx p,html[lang="zh-Hant"] .c-words,html[lang="zh-Hant"] .run .b-lead,html[lang="zh-Hant"] .i-head .h2{word-break:keep-all}
html.modal-lock{overflow:hidden}
.mediactl button[aria-pressed="true"]{color:var(--text);border-color:var(--text2)}
/* 頁尾：內部管理員的後台入口，放在版權列右邊、不起眼（Tina 11/10 選「頁尾小連結＋後台登入頁」） */
.ft .cp{display:flex;justify-content:space-between;align-items:center}
.ft a.adml{display:inline;margin:0;color:var(--text2)}
.ft a.adml:hover{color:var(--text)}
/* /05 只放季排名（週／月排名目前顯示有錯；與會員中心一致） */
.ranks.one{grid-template-columns:1fr}
/* /01 三張卡同樣切角（第一張是首屏影片縮進來，切角由 motion.js 畫） */
#a01frames .fr2,#a01frames .fr3{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
/* 不顯示右側捲軸（Tina 11/10）：滑鼠滾輪、觸控板、鍵盤照樣能捲；會員中心、後台共用這份樣式，一起生效 */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}