/* 官網「功能示意」區＋額外特效（跑馬燈、首屏浮動標籤、滑鼠光暈、聚光燈卡片）
   全部是純 CSS／輕量 JS（static/js/site-showcase.js），不依賴 Tailwind 重新編譯。
   省電（html.perf-lite）與「減少動畫」時：動畫全部關掉，示意畫面直接顯示結束時的樣子。 */

:root {
  --sc-pink: #ff2bd6;
  --sc-cyan: #00f0ff;
  --sc-violet: #7a2bd6;
  --sc-gold: #ffc247;
  --sc-ok: #3ba55d;
  --sc-bad: #ff5d6c;
  --sc-ink: #e9edff;
  --sc-dim: #98a3cc;
  --sc-surface: rgba(9, 10, 26, .9);
  --sc-line: rgba(255, 255, 255, .1);
}

/* ───── 跑馬燈 ───── */
.sc-marquee { position: relative; overflow: hidden; padding: .9rem 0; border-block: 1px solid rgba(255, 43, 214, .22);
  background: linear-gradient(90deg, rgba(255, 43, 214, .06), rgba(0, 240, 255, .05), rgba(255, 43, 214, .06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sc-marquee-track { display: flex; gap: .8rem; width: max-content; animation: scMarquee 46s linear infinite; }
.sc-marquee:hover .sc-marquee-track { animation-play-state: paused; }
.sc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .9rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .86); font-size: .86rem; font-weight: 600; }
.sc-chip:nth-child(3n+1) { border-color: rgba(255, 43, 214, .35); }
.sc-chip:nth-child(3n+2) { border-color: rgba(0, 240, 255, .32); }
.sc-chip:nth-child(3n) { border-color: rgba(255, 194, 71, .32); }
@keyframes scMarquee { to { transform: translateX(-50%); } }

/* ───── 區塊與背景 ───── */
.sc-section { isolation: isolate; }
.sc-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sc-aurora i { position: absolute; width: 46vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .34;
  background: radial-gradient(circle, var(--c), transparent 66%); animation: scDrift 22s ease-in-out infinite alternate; will-change: transform; }
.sc-aurora i:nth-child(1) { --c: #ff2bd6; left: -8%; top: 6%; }
.sc-aurora i:nth-child(2) { --c: #00c8ff; right: -10%; top: 30%; animation-duration: 27s; animation-delay: -6s; }
.sc-aurora i:nth-child(3) { --c: #7a2bd6; left: 28%; bottom: -14%; animation-duration: 31s; animation-delay: -12s; }
.sc-aurora::after { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 72%); }
@keyframes scDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, -5vh, 0) scale(1.18); } }

.sc-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); }
.sc-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-cyan); box-shadow: 0 0 10px var(--sc-cyan); animation: scPulse 1.8s ease-in-out infinite; }
@keyframes scPulse { 50% { transform: scale(.55); opacity: .5; } }
.sc-title { margin-top: .8rem; font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sc-shine { background: linear-gradient(100deg, #fff 20%, var(--sc-pink) 40%, var(--sc-cyan) 60%, #fff 80%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: scShine 6s linear infinite; }
@keyframes scShine { to { background-position: -240% 0; } }

/* 進場：只有 JS 載入後才先藏起來（沒有 JS 就是直接顯示） */
.sc-js [data-sc-reveal] { opacity: 0; translate: 0 26px; scale: .985;
  transition: opacity .7s ease var(--d, 0ms), translate .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), scale .7s ease var(--d, 0ms), transform .25s ease 0ms, box-shadow .3s ease 0ms; }
.sc-js [data-sc-reveal].in { opacity: 1; translate: 0 0; scale: 1; }

/* ───── 版面：便當盒 ───── */
.sc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.sc-w7 { grid-column: span 7; } .sc-w5 { grid-column: span 5; } .sc-w4 { grid-column: span 4; }
@media (max-width: 1023px) { .sc-w7, .sc-w5 { grid-column: span 12; } .sc-w4 { grid-column: span 6; } }
@media (max-width: 640px) { .sc-w4 { grid-column: span 12; } .sc-grid { gap: 1rem; } }

/* ───── 卡片：旋轉彩邊＋滑鼠聚光燈 ───── */
@property --sc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sc-card { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.15rem; border-radius: 20px; background: var(--sc-surface);
  border: 1px solid transparent; transform-style: preserve-3d; transition: transform .25s ease, box-shadow .3s ease;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.sc-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sc-ang), rgba(255, 43, 214, .55), rgba(0, 240, 255, .5), rgba(122, 43, 214, .15) 40%, rgba(255, 43, 214, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: scSpin 9s linear infinite; opacity: .75; }
.sc-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .09), transparent 60%); }
.sc-card:hover { box-shadow: 0 24px 60px -24px rgba(255, 43, 214, .55); }
.sc-card:hover::after { opacity: 1; }
.sc-card > * { position: relative; }
@keyframes scSpin { to { --sc-ang: 360deg; } }

.sc-card-h { display: flex; align-items: flex-start; gap: .8rem; }
.sc-card-h h3 { font-size: 1.12rem; font-weight: 800; color: #fff; line-height: 1.3; }
.sc-card-h p { margin-top: .15rem; font-size: .84rem; color: var(--sc-dim); line-height: 1.5; }
.sc-ico { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(255, 43, 214, .28), rgba(0, 240, 255, .2)); border: 1px solid rgba(255, 255, 255, .14); }
.sc-tag { margin-left: auto; flex: 0 0 auto; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; color: var(--sc-dim);
  padding: .14rem .55rem; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .22); }

/* ───── 舞台（Discord 視窗、面板視窗共用） ───── */
.sc-stage { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--sc-line); background: rgba(5, 6, 18, .88); color: var(--sc-ink); font-size: .84rem; min-height: 296px; }
.sc-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--sc-line); color: var(--sc-dim); font-size: .72rem; }
.sc-bar b { color: #cfe3ff; }
.sc-bar .dots { display: inline-flex; gap: 5px; margin-right: .3rem; }
.sc-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.sc-bar .dots i:nth-child(2) { background: #febc2e; } .sc-bar .dots i:nth-child(3) { background: #28c840; }
.sc-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; color: #6cf0b2; }
.sc-bar .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; animation: scPulse 1.4s ease-in-out infinite; }

.sc-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem; height: 218px; padding: .8rem .85rem .3rem; overflow: hidden; }
.sc-user { color: #8892b8; font-size: .75rem; animation: scIn .3s ease-out both; }
.sc-user b { color: var(--sc-cyan); }
.sc-msg { display: flex; gap: .6rem; align-items: flex-start; animation: scIn .38s ease-out both; }
.sc-msg > div { min-width: 0; }
.sc-msg img, .sc-av { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.sc-av { display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5865f2, #9b59ff); }
.sc-av.b { background: linear-gradient(135deg, #f97316, #ec4899); } .sc-av.g { background: linear-gradient(135deg, #10b981, #06b6d4); }
.sc-name { font-weight: 700; color: #fff; font-size: .8rem; }
.sc-name em { font-style: normal; margin-left: .35rem; padding: 0 .3rem; border-radius: 4px; background: #5865f2; font-size: .62rem; vertical-align: middle; }
.sc-name em.st { background: #e67e22; }
.sc-txt { color: #d6dcff; margin-top: .1rem; line-height: 1.5; }
.sc-embed { margin-top: .25rem; border-left: 4px solid var(--ec, var(--sc-pink)); border-radius: 6px; padding: .5rem .7rem .55rem; background: rgba(255, 255, 255, .055); }
.sc-embed h4 { font-weight: 800; color: #fff; font-size: .86rem; }
.sc-embed p { margin-top: .15rem; font-size: .78rem; color: #b8c2e6; line-height: 1.5; }
.sc-embed dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin-top: .3rem; font-size: .76rem; }
.sc-embed dt { color: var(--sc-dim); } .sc-embed dd { color: #fff; font-weight: 600; }
.sc-prod { margin-top: .4rem; display: grid; gap: .25rem; }
.sc-prod li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .5rem; border-radius: 6px; background: rgba(255, 255, 255, .045); border: 1px solid transparent; transition: .25s; }
.sc-prod li span { color: var(--sc-gold); font-weight: 700; }
.sc-prod li.sel { border-color: rgba(255, 43, 214, .7); background: rgba(255, 43, 214, .14); box-shadow: 0 0 14px rgba(255, 43, 214, .35); }
.sc-btns { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.sc-btns span { padding: .22rem .7rem; border-radius: 5px; background: #5865f2; color: #fff; font-size: .72rem; font-weight: 700; transition: transform .15s, filter .15s; }
.sc-btns span.alt { background: #4e5058; } .sc-btns span.ok { background: #248046; }
.sc-btns span.press { transform: scale(.9); filter: brightness(1.5); box-shadow: 0 0 0 4px rgba(88, 101, 242, .35); }
@keyframes scIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sc-input { display: flex; align-items: center; gap: .5rem; margin: .35rem .85rem .8rem; padding: .5rem .75rem; min-height: 2.3rem; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .045); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sc-input span:first-child { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sc-caret { display: inline-block; width: 7px; height: 1.05em; background: var(--sc-cyan); animation: scBlink 1s steps(1) infinite; }
@keyframes scBlink { 50% { opacity: 0; } }

.sc-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none; opacity: 0; transform: translate(60%, 110%);
  transition: transform .75s cubic-bezier(.3, .7, .2, 1), opacity .3s; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.sc-cur.on { opacity: 1; }

/* ───── 自動發貨 ───── */
.sc-deliv { display: grid; grid-template-columns: 1fr; gap: 0; padding: 1rem; }
.sc-steps { display: grid; gap: .55rem; }
.sc-steps li { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .03); color: var(--sc-dim); transition: .35s; }
.sc-steps .dot { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); font-size: .7rem; color: transparent; transition: .3s; }
.sc-steps li.on { color: #fff; border-color: rgba(0, 240, 255, .55); background: rgba(0, 240, 255, .08); }
.sc-steps li.on .dot { border-color: var(--sc-cyan) transparent var(--sc-cyan) var(--sc-cyan); animation: scRot .7s linear infinite; }
.sc-steps li.done { color: #dff9ec; border-color: rgba(61, 220, 132, .4); }
.sc-steps li.done .dot { background: #248046; border-color: #3ddc84; color: #fff; }
.sc-steps small { margin-left: auto; color: var(--sc-dim); font-size: .7rem; }
@keyframes scRot { to { transform: rotate(360deg); } }
.sc-dm { margin-top: .8rem; padding: .7rem .8rem; border-radius: 12px; border: 1px solid rgba(255, 43, 214, .4); background: linear-gradient(135deg, rgba(255, 43, 214, .14), rgba(0, 240, 255, .08));
  opacity: 0; transform: translateY(14px) scale(.97); transition: .5s cubic-bezier(.2, .8, .2, 1); }
.sc-dm.show { opacity: 1; transform: none; }
.sc-dm b { color: #fff; }
.sc-serial { display: inline-block; margin-top: .3rem; padding: .25rem .6rem; border-radius: 6px; background: rgba(0, 0, 0, .45); border: 1px dashed rgba(255, 255, 255, .25);
  color: var(--sc-gold); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; font-weight: 700; min-width: 13ch; }

/* ───── 儀表板 ───── */
.sc-dash { padding: 0; }
.sc-dash-body { padding: .9rem; display: grid; gap: .8rem; }
.sc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sc-kpi { padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .035); }
.sc-kpi small { display: block; color: var(--sc-dim); font-size: .68rem; }
.sc-kpi b { display: block; margin-top: .1rem; font-size: 1.12rem; font-variant-numeric: tabular-nums; color: #fff; }
.sc-kpi:nth-child(1) b { color: #6cf0b2; } .sc-kpi:nth-child(2) b { color: #7db6ff; } .sc-kpi:nth-child(3) b { color: #ff8be8; }
.sc-chart { position: relative; height: 142px; padding: .3rem .2rem 0; border-radius: 10px; border: 1px solid var(--sc-line); background: rgba(255, 255, 255, .025); }
.sc-bars { position: absolute; inset: 1.5rem .6rem 1.35rem; display: flex; align-items: flex-end; gap: 8px; }
.sc-bars i { flex: 1; height: 0; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--sc-pink), rgba(122, 43, 214, .55)); transition: height .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--bd, 0ms); }
.sc-bars.grow i { height: var(--h); }
.sc-days { position: absolute; left: .6rem; right: .6rem; bottom: .3rem; display: flex; justify-content: space-between; color: var(--sc-dim); font-size: .62rem; }
.sc-line { position: absolute; inset: 1.5rem .6rem 1.35rem; width: calc(100% - 1.2rem); height: calc(100% - 2.85rem); overflow: visible; }
.sc-line path { fill: none; stroke: var(--sc-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 5px rgba(0, 240, 255, .8)); transition: stroke-dashoffset 1.6s ease .3s; }
.sc-line.grow path { stroke-dashoffset: 0; }
.sc-line circle { fill: #fff; opacity: 0; transition: opacity .3s 1.7s; }
.sc-line.grow circle { opacity: 1; }

/* ───── 票單 ───── */
.sc-tk { display: grid; grid-template-columns: minmax(0, 1fr) 128px; }
.sc-tk .sc-feed { height: 232px; }
.sc-side { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .9rem .6rem; border-left: 1px solid var(--sc-line); background: rgba(255, 255, 255, .02); text-align: center; }
.sc-side small { color: var(--sc-dim); font-size: .68rem; }
.sc-ring { --p: 100; --rc: var(--sc-gold); position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); transition: background .3s; }
.sc-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #070817; }
.sc-ring b { position: relative; font-size: .78rem; font-variant-numeric: tabular-nums; color: #fff; }
.sc-ring.ok { --rc: #3ddc84; }
.sc-status { padding: .15rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #1b1300; background: var(--sc-gold); transition: .3s; }
.sc-status.busy { background: #7db6ff; } .sc-status.done { background: #3ddc84; }
@media (max-width: 460px) { .sc-tk { grid-template-columns: 1fr; } .sc-side { border-left: 0; border-top: 1px solid var(--sc-line); flex-direction: row; justify-content: center; } }

/* ───── 等級 ───── */
.sc-lv { padding: 1rem; display: grid; gap: .8rem; justify-items: center; text-align: center; }
.sc-lv-top { display: flex; align-items: center; gap: .8rem; width: 100%; }
.sc-lv-badge { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-weight: 900; font-size: 1.3rem; color: #fff;
  background: radial-gradient(circle at 30% 25%, #ff7ae9, #7a2bd6); box-shadow: 0 0 22px rgba(255, 43, 214, .5); }
.sc-lv-badge::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); opacity: 0; }
.sc-lv-badge.burst::after { animation: scBurst .9s ease-out; }
.sc-lv-badge.burst { animation: scPop .6s ease-out; }
@keyframes scBurst { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(2.1); } }
@keyframes scPop { 40% { transform: scale(1.18); } }
.sc-xp { flex: 1; text-align: left; min-width: 0; }
.sc-xp small { color: var(--sc-dim); font-size: .72rem; }
.sc-xpbar { margin-top: .3rem; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sc-xpbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sc-pink), var(--sc-cyan)); box-shadow: 0 0 12px rgba(0, 240, 255, .6); transition: width 1.3s cubic-bezier(.3, .7, .2, 1); }
.sc-lvup { width: 100%; padding: .4rem .6rem; border-radius: 8px; font-weight: 700; color: #1a1200; background: linear-gradient(90deg, var(--sc-gold), #ffe08a); opacity: 0; transform: translateY(8px) scale(.96); transition: .45s; }
.sc-lvup.show { opacity: 1; transform: none; }
.sc-lb { display: grid; gap: .35rem; width: 100%; text-align: left; }
.sc-lb li { display: grid; grid-template-columns: 1.4rem 3.2rem 1fr auto; align-items: center; gap: .4rem; font-size: .76rem; }
.sc-lb i { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; position: relative; }
.sc-lb i::after { content: ''; position: absolute; inset: 0; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, #7a2bd6, var(--sc-pink)); transition: width 1.1s cubic-bezier(.3, .7, .2, 1); }
.sc-lb.grow i::after { width: var(--w); }
.sc-lb span { color: var(--sc-dim); font-variant-numeric: tabular-nums; }

/* ───── 抽獎（用公告訊息＋按鈕，不是轉盤） ───── */
.sc-join { display: inline-flex; align-items: center; gap: .4rem; }
.sc-btns span.cnt { background: #4e5058; }
.sc-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sc-conf i { position: absolute; left: 50%; top: 52%; width: 7px; height: 11px; border-radius: 2px; background: var(--c); opacity: 0; animation: scConf 1.3s ease-out forwards; }
@keyframes scConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }

/* ───── 防炸群 ───── */
.sc-sh { padding: .9rem; display: grid; gap: .7rem; }
.sc-sh-top { display: flex; align-items: center; gap: .7rem; }
.sc-shield { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-size: 1.5rem; background: rgba(61, 220, 132, .14); border: 1px solid rgba(61, 220, 132, .5); transition: .3s; }
.sc-shield.alert { background: rgba(255, 93, 108, .18); border-color: var(--sc-bad); box-shadow: 0 0 22px rgba(255, 93, 108, .55); animation: scShake .4s linear 3; }
@keyframes scShake { 25% { transform: translateX(-3px) rotate(-4deg); } 75% { transform: translateX(3px) rotate(4deg); } }
.sc-sh-top b { color: #fff; display: block; transition: color .3s; }
.sc-sh-top b.alert { color: var(--sc-bad); }
.sc-sh-top small { color: var(--sc-dim); font-size: .7rem; }
.sc-tree { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sc-tree li { padding: .28rem .6rem; border-radius: 6px; background: rgba(255, 255, 255, .05); color: #cdd5f5; font-size: .78rem; transition: opacity .35s, transform .35s, background .35s, color .35s; }
.sc-tree li.cat { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .08); }
.sc-tree li:not(.cat) { margin-left: 1rem; }
.sc-tree li.gone { opacity: 0; transform: translateX(-14px); background: rgba(255, 93, 108, .25); color: #ffc2c8; }
.sc-tree li.back { background: rgba(61, 220, 132, .2); color: #c9f7de; animation: scIn .35s ease-out both; }
.sc-report { position: static; margin-top: .3rem; display: grid; gap: .2rem; padding: .6rem .75rem; border-radius: 10px; font-size: .75rem; color: #b8f3cf;
  border: 1px solid rgba(61, 220, 132, .5); background: rgba(8, 28, 20, .94); opacity: 0; transform: translateY(12px); transition: .45s; }
.sc-report.show { opacity: 1; transform: none; }
.sc-report b { color: #fff; } .sc-report code { color: var(--sc-gold); font-weight: 700; }
.sc-sh { min-height: 296px; }

/* ───── 共用小元件 ───── */
.sc-dl { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; margin: .3rem 0 .15rem; font-size: .76rem; }
.sc-dl dt { color: var(--sc-dim); } .sc-dl dd { color: #fff; font-weight: 600; }
.sc-foot { margin-top: .35rem; color: var(--sc-dim); font-size: .66rem; }
.sc-cap { padding: .1rem .3rem .2rem; color: var(--sc-dim); font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.sc-chart .sc-cap { position: absolute; left: .6rem; top: .3rem; z-index: 1; }
.sc-steps li { flex-wrap: wrap; }
.sc-steps small { font-size: .66rem; }
.sc-btns span.dng { background: #da373c; }

/* ───── 首屏浮動標籤 ───── */
.sc-hero-wrap { position: relative; }
.sc-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(10, 11, 30, .82); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
  animation: scBob 5s ease-in-out infinite; pointer-events: none; }
.sc-float.a { top: -16px; right: 14px; border-color: rgba(61, 220, 132, .6); }
.sc-float.b { top: 40%; left: -74px; border-color: rgba(255, 43, 214, .6); animation-delay: -1.7s; }
.sc-float.c { bottom: 92px; right: -48px; border-color: rgba(0, 240, 255, .6); animation-delay: -3.2s; }
.sc-float.d { bottom: -18px; left: 26px; border-color: rgba(255, 194, 71, .6); animation-delay: -4.4s; }
@keyframes scBob { 50% { transform: translateY(-9px); } }
@media (max-width: 1279px) { .sc-float.b, .sc-float.c { display: none; } }
@media (max-width: 767px) { .sc-float { display: none; } }

/* ───── 滑鼠光暈（只在有滑鼠的裝置） ───── */
.sc-orb { position: fixed; left: 0; top: 0; z-index: 44; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(255, 43, 214, .16), rgba(0, 240, 255, .07) 45%, transparent 68%); mix-blend-mode: screen; will-change: transform; }
.sc-orb.on { opacity: 1; }
@media (hover: none) { .sc-orb { display: none; } }

/* ───── 省電／減少動畫：全部靜止 ───── */
html.perf-lite .sc-marquee-track, html.perf-lite .sc-aurora i, html.perf-lite .sc-card::before, html.perf-lite .sc-shine, html.perf-lite .sc-float,
html.perf-lite .sc-pill::before, html.perf-lite .sc-caret { animation: none; }
html.perf-lite .sc-marquee { -webkit-mask-image: none; mask-image: none; }
html.perf-lite .sc-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 1rem; gap: .6rem; }
html.perf-lite .sc-chip.dup { display: none; }
html.perf-lite .sc-orb, html.perf-lite .sc-aurora i { display: none; }
html.perf-lite .sc-js [data-sc-reveal] { opacity: 1; translate: none; scale: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-marquee-track, .sc-aurora i, .sc-card::before, .sc-shine, .sc-float, .sc-pill::before, .sc-caret, .sc-steps li.on .dot { animation: none !important; }
  .sc-marquee { -webkit-mask-image: none; mask-image: none; } .sc-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; padding: 0 1rem; gap: .6rem; } .sc-chip.dup { display: none; } .sc-orb { display: none; }
  .sc-js [data-sc-reveal] { opacity: 1; translate: none; scale: none; transition: none; }
  .sc-card { transform: none; }
}

.sc-ring.late { --rc: var(--sc-bad); }
.sc-status.late { background: var(--sc-bad); color: #fff; }

[data-scene="giveaway"] .sc-feed { height: 262px; }
[data-scene="shop"] .sc-feed { height: 232px; }

/* 同一排的卡片高度一樣時，深色畫面要把多出來的高度吃掉，不要留一塊空白在畫面底下 */
.sc-card > .sc-stage { flex: 1; }
.sc-stage.sc-deliv, .sc-stage.sc-dash, .sc-stage.sc-sh, .sc-stage.sc-lv { align-content: start; }

/* 對話視窗：舊訊息從上緣淡出，不要被攔腰切掉半行字；高度也給夠，結束畫面的重點不會被擠出去 */
.sc-feed { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
[data-scene="shop"] .sc-feed { height: 300px; }
[data-scene="giveaway"] .sc-feed { height: 376px; }
.sc-tk .sc-feed { height: 282px; }

/* 導覽列：連結不要斷成兩行（多了「動態示意」之後原本會變成「動態示／意」）*/
@media (min-width: 768px) {
  header[role="banner"] nav[aria-label="主要導航"] { gap: .85rem !important; font-size: .8rem; }
  header[role="banner"] nav[aria-label="主要導航"] a, header[role="banner"] a[aria-label="哥布林商人首頁"] { white-space: nowrap; }
}