/* 黑馬盃官網｜選手報名（長在盾牌背面上）
   座標一律是 1920×1080「場館座標」，跟 media/spin/back_4k.webp 一格一格對齊；js/reg.js 用鏡頭（縮放＋平移）移動整個場館。
   盾牌鋼面內緣（量過）：(962,150)(1230,345)(1220,605)(962,760)(698,598)(690,352)，字只准排在裡面。 */
#reg{--paint:#e3262c;position:fixed;inset:0;z-index:8;opacity:0;pointer-events:none;color:#efece6}
#reg.live{pointer-events:auto}
#reg button,#reg input,#reg select{font:inherit;color:inherit}
.r-view{position:absolute;inset:0;perspective:1400px;overflow:hidden}
.r-cam{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;will-change:transform}
#reg.moving .r-cam{transition:transform .55s var(--ease)}
/* 場館不用 preserve-3d：3D 疊層會讓瀏覽器把斜掉的那半顆按鈕判定在背景後面，點了沒反應（10-06 實測：$8,000 方案只剩一角點得到） */
.r-rig{position:absolute;inset:0}
.r-bg{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none;max-width:none}
.r-floorfade{position:absolute;left:0;right:0;top:900px;height:181px;background:linear-gradient(transparent,var(--bg));pointer-events:none;transition:opacity .4s}
#reg[data-step="1"] .r-floorfade{opacity:0}
.r-floorext{position:absolute;left:-2400px;right:-2400px;top:1080px;height:1600px;background:var(--bg);pointer-events:none}
.r-sidefade{position:absolute;top:-400px;bottom:-1600px;width:2400px;background:var(--bg);pointer-events:none}
/* 燈光暗下來：只留盾牌原亮度；--dim 由捲動控制（走到盾牌前燈才慢慢暗） */
.r-dim{position:absolute;inset:0;background:rgba(4,4,5,.72);pointer-events:none;opacity:var(--dim,1);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Crect width='1920' height='1080' fill='white'/%3E%3Cpolygon filter='url(%23b)' fill='black' points='960,104 1270,334 1262,632 960,818 662,622 650,342'/%3E%3C/svg%3E") 0 0/100% 100%;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Crect width='1920' height='1080' fill='white'/%3E%3Cpolygon filter='url(%23b)' fill='black' points='960,104 1270,334 1262,632 960,818 662,622 650,342'/%3E%3C/svg%3E") 0 0/100% 100%}
.r-dim2{position:absolute;inset:0;background:rgba(4,4,5,.62);pointer-events:none;opacity:0;transition:opacity .4s}
#reg[data-step="2"] .r-dim2{opacity:1}

/* 壓印字 */
#reg .etch{color:#ebe8e1;text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.85),0 6px 20px rgba(0,0,0,.5)}
#reg .deep{color:#a5a29b;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12)}
#reg .paint{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
/* 壓印鈕：刻在鋼上的凹槽；按下去凹更深；選中＝紅漆填進刻痕 */
#reg .press{position:relative;cursor:pointer;border:0;border-radius:0;padding:.5em 1.1em;font-family:var(--serif);font-weight:900;letter-spacing:.14em;color:#ebe8e1;
 text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 1px rgba(0,0,0,.85);background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.12));
 box-shadow:inset 0 2px 3px rgba(0,0,0,.72),inset 0 -1px 0 rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.06);transition:box-shadow .12s,color .15s}
#reg .press:hover{color:#fff}
/* 按下去只把凹槽陰影加深，按鈕本身不移動（會移動的話，點在上緣放開時就落在按鈕外，等於沒按到） */
#reg .press:active{box-shadow:inset 0 5px 10px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.08)}
#reg .press.hot{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
#reg .press.quiet{background:none;box-shadow:none;color:#a5a29b;font-family:var(--sans);font-weight:500;letter-spacing:.1em}
#reg .press.quiet:hover{color:#ebe8e1}
#reg :focus-visible{outline:2px solid var(--paint);outline-offset:4px}

/* 站切換 */
#reg [data-st]{opacity:0;pointer-events:none;transition:opacity .25s}
#reg[data-step="1"] [data-st~="1"],#reg[data-step="2"] [data-st~="2"],#reg[data-step="3"] [data-st~="3"]{opacity:1;pointer-events:auto}
#reg[data-step="1"] [data-st~="1"]{opacity:var(--ui,1)}
#reg:not(.live) [data-st]{pointer-events:none!important}

/* ── 站一：鋼面上只有 標題／兩個方案／下一步 ── */
.r-s1{position:absolute;left:700px;top:282px;width:520px;text-align:center}
.r-s1 h2{width:fit-content;margin:0 auto;font-family:var(--serif);font-weight:900;font-size:60px;letter-spacing:.1em;line-height:1}
.r-plans{display:flex;justify-content:center;gap:14px;margin-top:40px}
.r-plan{width:236px;padding:22px 6px 20px;cursor:pointer;border:0;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.1));
 box-shadow:inset 0 2px 4px rgba(0,0,0,.68),inset 0 -1px 0 rgba(255,255,255,.12);transition:box-shadow .15s}
.r-plan:active{box-shadow:inset 0 5px 10px rgba(0,0,0,.92),inset 0 -1px 0 rgba(255,255,255,.12)}
.r-plan b{display:block;font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:.06em}
.r-plan .p{display:block;font-family:var(--serif);font-weight:900;font-size:52px;line-height:1.05;margin-top:8px}
.r-plan.on{box-shadow:inset 0 4px 9px rgba(0,0,0,.88),inset 0 -1px 0 rgba(255,255,255,.12)}
#reg .r-plan.on b,#reg .r-plan.on .p{color:var(--paint);text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.9)}
.r-s1 .go{margin-top:30px;font-size:24px}

/* 盾牌兩側的舞台直式螢幕（官方攝影）：黑色邊框、微微朝盾牌轉、站在舞台上有倒影 */
.r-scr{position:absolute;top:286px;width:300px;height:534px;padding:0;border:0;cursor:zoom-in;background:#000;overflow:hidden;
 box-shadow:0 0 0 6px #0b0b0d,0 0 0 7px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.7);
 -webkit-box-reflect:below 14px linear-gradient(transparent 70%,rgba(255,255,255,.14));transition:filter .3s,transform .3s var(--ease)}
/* 轉軸在靠盾牌那一側，整面往前轉出來（不會有一半轉進背景圖後面） */
.r-scrL{left:318px;transform-origin:100% 50%;transform:translateZ(2px) rotateY(16deg)}
.r-scrR{left:1302px;transform-origin:0 50%;transform:translateZ(2px) rotateY(-16deg)}
/* 報名還沒結束前，後面那一站（創作者專區）先藏起來 */
html.reg-hold .stage3d{opacity:0}
.r-scr video,.r-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.r-scr img{opacity:0;transition:opacity .8s}.r-scr img.on{opacity:1}
.r-scr:hover{filter:brightness(1.1)}
#reg:not(.planB) .r-scr{filter:brightness(.28) saturate(.3)}
.r-scap{position:absolute;top:850px;width:300px;text-align:center;font-family:var(--serif);font-weight:900;font-size:21px;letter-spacing:.16em;transition:opacity .3s}
.r-scapL{left:318px}.r-scapR{left:1302px}
#reg:not(.planB) .r-scap{opacity:.35!important}

/* ── 站二：只有 標題／鋼牌／確認 ── */
.r-s2t{position:absolute;left:0;right:0;top:540px;text-align:center}
.r-s2t h2{margin:0;font-family:var(--serif);font-weight:900;font-size:56px;letter-spacing:.1em}
.r-s2t h2 .paint{margin-left:.4em}
.r-arc{position:absolute;left:0;top:700px;width:1920px;height:380px}
.r-slab{position:absolute;bottom:20px;width:176px;height:236px;margin-left:-88px;cursor:pointer;border:0;border-radius:0;padding:20px 10px;text-align:center;color:#ebe8e1;transform-origin:50% 100%;
 background:linear-gradient(100deg,rgba(255,255,255,.07),transparent 40%,rgba(255,255,255,.05) 70%,transparent),repeating-linear-gradient(90deg,#3c3f44 0 1px,#303338 1px 3px,#373a3f 3px 4px),#323539;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 2px 0 rgba(255,255,255,.14),0 24px 40px rgba(0,0,0,.7);
 -webkit-box-reflect:below 3px linear-gradient(transparent 62%,rgba(255,255,255,.16));transition:transform .3s var(--ease),filter .2s}
.r-slab .in{font-family:var(--serif);font-weight:900;font-size:76px;line-height:1.15}
.r-slab .nm{font-weight:700;font-size:19px;margin-top:4px}
.r-slab .ct{position:absolute;left:0;right:0;bottom:16px;font-family:var(--serif);font-weight:900;font-size:26px}
.r-slab .ct small{font-family:var(--sans);font-weight:500;font-size:13px;color:#a5a29b;margin-left:3px}
.r-slab.first .ct{color:var(--paint)}
.r-slab:hover{filter:brightness(1.15)}
.r-arc.picked .r-slab:not(.on){filter:brightness(.4)}
.r-ok2{position:absolute;left:0;right:0;top:1100px;display:flex;justify-content:center;align-items:center;gap:20px;transition:opacity .2s}
#reg .r-ok2:not(.show){opacity:0!important;pointer-events:none!important}
.r-ok2 a{color:#fff;text-decoration:none;font-size:20px;border-bottom:1px solid var(--paint);padding-bottom:3px}
.r-ok2 .press{font-size:21px}
.r-nav2{position:absolute;left:0;right:0;top:1200px;display:flex;justify-content:center;gap:40px}
.r-nav2 .press{font-size:18px}

/* ── 站三：鋼面上只有 金額／六格／付款／確認 ── */
.r-s3{position:absolute;left:712px;top:248px;width:496px;text-align:center}
.r-tot{font-family:var(--serif);font-weight:900;font-size:46px;line-height:1}
.r-tot>span{display:block;width:fit-content;margin:0 auto}
.r-tot small{display:block;width:fit-content;margin:8px auto 0;font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.14em}
.r-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:46px;text-align:left}
.r-f{display:block}
.r-f input,.r-f select{width:100%;border:0;border-radius:0;outline:0;padding:11px 12px;font-size:16px;color:#f1eee8;background:rgba(0,0,0,.4);appearance:none;
 box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.12);caret-color:var(--paint)}
.r-f input::placeholder{color:#8f8b84}
.r-f input:focus,.r-f select:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.85),inset 0 -2px 0 var(--paint)}
.r-f select{color:#8f8b84}.r-f select.set{color:#f1eee8}.r-f select option{background:#111;color:#eee}
.r-pay{display:flex;gap:12px;margin-top:14px}
.r-pay .press{flex:1;font-size:16px;letter-spacing:.08em;padding:.75em .3em}
.r-s3 .go{margin-top:16px;font-size:24px}
.r-back3{position:absolute;left:0;right:0;top:830px;text-align:center}

/* 進度：盾牌尖端下方三道刻痕 */
.r-ticks{position:absolute;left:930px;top:788px;display:flex;gap:8px;transition:top .3s}
.r-ticks i{width:16px;height:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1)}
.r-ticks i.on{background:#c8141b}
#reg[data-step="2"] .r-ticks{top:1270px}

/* 看大圖：0.15 秒淡入，左右翻 */
.r-lb{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;background:rgba(0,0,0,.94)}
.r-lb[hidden]{display:none}
.r-lbm{display:grid;place-items:center;height:100vh}
.r-lbm>*{max-width:100%;max-height:88vh}
.r-lb button{background:none;border:0;color:#cfcbc3;font-size:28px;cursor:pointer;height:100%}
.r-lb .r-lbx{position:absolute;top:14px;right:18px;height:auto;font-size:15px;letter-spacing:.14em}

/* 手機：鏡頭縮小，字在場館座標放大回來；兩側螢幕改站在盾牌下方左右 */
#reg.mob .r-s1 h2{font-size:68px}
#reg.mob .r-plan{width:240px}#reg.mob .r-plan b{font-size:24px}#reg.mob .r-plan .p{font-size:54px}
#reg.mob .r-s1 .go{font-size:28px}
#reg.mob .r-scr{top:850px;width:150px;height:267px;transform:none;-webkit-box-reflect:unset;box-shadow:0 0 0 4px #0b0b0d,0 0 0 5px rgba(255,255,255,.1),0 20px 40px rgba(0,0,0,.7)}
#reg.mob .r-scrL{left:780px}#reg.mob .r-scrR{left:990px}
#reg.mob .r-scap{top:1128px;width:150px;font-size:19px;letter-spacing:.08em}
#reg.mob .r-scapL{left:780px}#reg.mob .r-scapR{left:990px}
#reg.mob .r-s2t{left:690px;right:auto;width:540px}#reg.mob .r-s2t h2{font-size:52px}
#reg.mob .r-arc{left:690px;width:540px;top:680px;height:360px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 20px 40px;scrollbar-width:none}
#reg.mob .r-slab{position:relative;left:auto!important;margin:0;flex:none;scroll-snap-align:center;bottom:auto;transform:none!important;width:190px;height:250px}
#reg.mob .r-slab.on{transform:translateY(-10px)!important}#reg.mob .r-slab .nm{font-size:22px}
#reg.mob .r-ok2{left:690px;right:auto;width:540px;top:1060px;flex-wrap:wrap;gap:16px 20px}#reg.mob .r-ok2 a{width:100%;text-align:center;font-size:24px;border:0}
#reg.mob .r-ok2 .press{font-size:26px}
#reg.mob .r-nav2{left:690px;right:auto;width:540px;top:1210px}#reg.mob .r-nav2 .press{font-size:24px}
#reg.mob[data-step="2"] .r-ticks{top:1300px}
#reg.mob .r-s3{top:236px}#reg.mob .r-g2{gap:11px;margin-top:50px}#reg.mob .r-f input,#reg.mob .r-f select{font-size:19px;padding:11px 12px}
#reg.mob .r-tot{font-size:48px}#reg.mob .r-tot small{font-size:16px}
#reg.mob .r-pay{margin-top:12px}#reg.mob .r-pay .press{font-size:19px;padding:.6em .3em}#reg.mob .r-s3 .go{font-size:26px;margin-top:12px}
#reg.mob .r-back3 .press{font-size:24px}
@media (prefers-reduced-motion:reduce){#reg.moving .r-cam,.r-rig,#reg [data-st]{transition:none}}

/* 長青組：量級那格切兩半，右半填生日；防機器人隱藏欄位；錯誤訊息 */
#reg.masters .r-fcls{display:flex;gap:6px}#reg.masters .r-fcls select{width:52%}#reg.masters .r-fcls input{width:48%;padding-left:6px;padding-right:4px;font-size:14px}
.r-fcls input[hidden]{display:none}
.r-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.r-err{min-height:1.2em;margin:10px 0 0;font-size:15px;font-weight:700}
.r-f input[type=date]{color-scheme:dark}