/* 🦇 怪物剪影大考驗（js/silh.js；伺服器本機改動第 163 項；2026-10-24 第二版「精緻一點」）
   1. #silh-pill   活動邀請卡：剪影小圖示＋呼吸光、倒數大數字、閃光掃過的「參加」；✕ 收起；不擋操作
   2. #silh-card   題目卡：金框、標題徽章、發光分數；舞台是 canvas（夜空、法陣、倒數光環、剪影都在 js 畫），上面疊題目字、怪名、目前可得分數；
                   寶石徽章選項（A 紅 B 藍 C 綠 D 黃）：鎖定後其他變暗，公布時正解綠光脈動、選錯紅色裂紋搖晃；剩 5 秒卡片輕震
   3. #silh-board  排行榜：金銀銅頒獎台、皇冠、怪物博士徽章、彩帶金幣、其餘名次列表
   系統「減少動態效果」：大動作全部關掉（檔尾） */
#silh-pill, #silh-card, #silh-board { font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif; -webkit-user-select: none; user-select: none; }

/* ── 1. 邀請卡 ── */
#silh-pill { position: fixed; z-index: 118; left: 50%; top: calc(var(--orig-bar-h, 0px) + 144px); transform: translateX(-50%); width: min(360px, calc(100vw - 16px)); animation: sp-in .45s cubic-bezier(.2,1.4,.4,1); }
#silh-pill .sp-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 50%, #3b2266 0%, #1b1035 45%, #120b22 100%); border: 1px solid #c9a23a;
  box-shadow: 0 4px 16px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,230,160,.12), 0 0 14px rgba(170,110,255,.35); animation: sp-breathe 2.4s ease-in-out infinite; }
#silh-pill .sp-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(1.2px 1.2px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 60% 70%, #fff6, transparent),
  radial-gradient(1.4px 1.4px at 80% 20%, #e8d8ff9a, transparent), radial-gradient(1px 1px at 40% 85%, #fff5, transparent); pointer-events: none; }
#silh-pill .sp-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 60%, #6c46b8 0%, #2a1650 60%, #140b28 100%); box-shadow: 0 0 0 1px #c9a23a, 0 0 12px rgba(178,120,255,.8); }
#silh-pill .sp-ico svg { width: 30px; height: 30px; fill: #05030a; filter: drop-shadow(0 0 3px rgba(200,150,255,.9)); }
#silh-pill .sp-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
#silh-pill .sp-txt b { font-size: 14px; letter-spacing: 1px; white-space: nowrap; background: linear-gradient(#fff3c4, #f5c040 60%, #c98a12); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #000); }
#silh-pill .sp-txt small { font-size: 11px; color: #b9a8dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#silh-pill .sp-cd { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 40px; }
#silh-pill .sp-cd b { font-size: 20px; color: #ffe08a; text-shadow: 0 0 8px rgba(255,200,80,.8), 0 1px 0 #000; font-variant-numeric: tabular-nums; }
#silh-pill .sp-cd small { margin-top: 2px; font-size: 9.5px; color: #c9b98f; }
#silh-pill.soon .sp-cd b { color: #ff8a6a; animation: sp-tick 1s ease-in-out infinite; }
#silh-pill button { border: 0; font-family: inherit; cursor: pointer; }
#silh-pill .sp-go { position: relative; flex: none; overflow: hidden; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: #2a1600;
  background: linear-gradient(#fff0b0, #f2bf3c 45%, #c98612); box-shadow: 0 0 0 1px #7a5208, 0 0 12px rgba(255,200,70,.6), inset 0 1px 0 rgba(255,255,255,.7); }
#silh-pill .sp-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); animation: sp-shine 2.2s ease-in-out infinite; }
#silh-pill .sp-go:active { filter: brightness(1.2); }
#silh-pill.joined .sp-go { color: #d8ffd0; background: linear-gradient(#3f7a3a, #214a20); box-shadow: 0 0 0 1px #6fbf5f, 0 0 10px rgba(110,220,110,.45); }
#silh-pill.joined .sp-go::after { display: none; }
#silh-pill.wait .sp-go { opacity: .6; }
#silh-pill .sp-x { flex: none; width: 22px; height: 22px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.06); color: #9f92bd; font-size: 11px; }
@keyframes sp-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes sp-breathe { 50% { box-shadow: 0 4px 16px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,230,160,.2), 0 0 24px rgba(190,130,255,.7); } }
@keyframes sp-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes sp-tick { 50% { transform: scale(1.18); } }

/* ── 2. 題目卡 ── */
#silh-card { position: fixed; z-index: 118; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(372px, calc(100vw - 14px)); color: #eee3c8; }
#silh-card.in { animation: sc-in .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes sc-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#silh-card .sc-frame { position: relative; padding: 7px 8px 9px; border-radius: 14px;
  background: linear-gradient(#20163a, #0f0a1e 60%, #0b0816); border: 1px solid #d4aa45;
  box-shadow: 0 10px 34px rgba(0,0,0,.8), 0 0 0 3px rgba(20,12,36,.9), 0 0 0 4px rgba(212,170,69,.55), 0 0 26px rgba(150,100,255,.35), inset 0 0 24px rgba(120,80,220,.18); }
#silh-card .sc-frame::before, #silh-card .sc-frame::after { content: '◆'; position: absolute; top: -9px; font-size: 13px; color: #ffd75a; text-shadow: 0 0 8px rgba(255,200,80,.9); }
#silh-card .sc-frame::before { left: 14px; } #silh-card .sc-frame::after { right: 14px; }
#silh-card .sc-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 0 2px 6px; }
#silh-card .sc-no { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #e9dcff; white-space: nowrap;
  background: linear-gradient(#4a2c86, #2a1752); box-shadow: 0 0 0 1px #9b7ad8, 0 0 8px rgba(150,100,255,.5); }
#silh-card .sc-no b { color: #ffe08a; font-size: 13px; }
#silh-card .sc-title { font-size: 17px; font-weight: 900; letter-spacing: 1.5px; white-space: nowrap;
  background: linear-gradient(#fffbe0, #ffd75a 45%, #d18b14 80%, #ffe9a0); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .4px rgba(90,50,0,.6); filter: drop-shadow(0 0 6px rgba(255,190,60,.45)) drop-shadow(0 1px 0 #000); }
#silh-card .sc-sc { position: relative; justify-self: end; display: flex; align-items: baseline; gap: 4px; }
#silh-card .sc-sc small { font-size: 10.5px; color: #a898c8; }
#silh-card .sc-sc b { font-size: 21px; line-height: 1; color: #fff1b8; text-shadow: 0 0 8px rgba(255,200,70,.95), 0 0 2px #ffb000, 0 1px 0 #000; font-variant-numeric: tabular-nums; }
#silh-card .sc-sc b.up { animation: sc-up .6s cubic-bezier(.2,1.6,.4,1); }
#silh-card .sc-plus { position: absolute; right: 0; top: -4px; font-style: normal; font-weight: 900; font-size: 18px; color: #9dff9a; text-shadow: 0 0 8px rgba(80,255,120,.9), 0 1px 0 #000;
  animation: sc-plus 1.5s ease-out forwards; pointer-events: none; }
@keyframes sc-up { 40% { transform: scale(1.45); } }
#silh-card .sc-minus { color: #ff8a8a; text-shadow: 0 0 8px rgba(255,80,80,.9), 0 1px 0 #000; }   /* 答錯扣分（伺服器第 561 項） */
@keyframes sc-plus { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 20% { opacity: 1; transform: translateY(-6px) scale(1.15); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }

#silh-card .sc-stage { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(212,170,69,.6), inset 0 0 18px rgba(0,0,0,.8); }
#silh-card canvas { display: block; width: 100%; height: 232px; }
#silh-card .sc-q { position: absolute; left: 10px; top: 7px; font-size: 12px; letter-spacing: 3px; color: #d8c8ff; text-shadow: 0 0 8px rgba(170,120,255,.95); pointer-events: none; }
#silh-card.rev .sc-q { opacity: 0; }
#silh-card .sc-name { position: absolute; left: 0; right: 0; top: 10px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
#silh-card .sc-name:empty { display: none; }
#silh-card .sc-name b { font-size: 27px; font-weight: 900; letter-spacing: 2px; line-height: 1.1;
  background: linear-gradient(#fffbe6, #ffe07a 40%, #e09a1c 75%, #fff0b0); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .6px rgba(80,40,0,.8); filter: drop-shadow(0 0 10px rgba(255,200,80,.85)) drop-shadow(0 2px 0 #000); animation: sc-name .7s cubic-bezier(.2,1.5,.4,1) both; }
#silh-card .sc-name small { margin-top: 2px; padding: 1px 10px; border-radius: 999px; font-size: 11.5px; color: #ffeec0; background: rgba(10,5,25,.7); box-shadow: 0 0 0 1px rgba(255,210,110,.35);
  animation: sc-fade .5s .35s both; }
@keyframes sc-name { from { opacity: 0; transform: translateY(18px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { from { opacity: 0; transform: translateY(6px); } }
#silh-card .sc-big { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); display: flex; align-items: baseline; gap: 2px; padding: 1px 12px 2px; border-radius: 999px;
  background: rgba(14,8,30,.82); box-shadow: 0 0 0 1px rgba(255,214,110,.55), 0 0 12px rgba(255,200,80,.35); pointer-events: none; white-space: nowrap; }
#silh-card .sc-big b { font-size: 17px; font-weight: 900; color: #ffe27a; text-shadow: 0 0 8px rgba(255,200,70,.9); }
#silh-card .sc-big small { font-size: 11px; color: #d8c79a; }
#silh-card .sc-big[data-p="2"] b { color: #eef3fa; text-shadow: 0 0 8px rgba(200,220,255,.9); }
#silh-card .sc-big[data-p="1"] b { color: #ffb48a; text-shadow: 0 0 8px rgba(255,140,90,.9); }
#silh-card .sc-big[data-p="L"] b, #silh-card .sc-big[data-p="0"] b { font-size: 13px; color: #cdb8ff; text-shadow: 0 0 6px rgba(170,120,255,.9); }
#silh-card .sc-big[data-p="L"] small, #silh-card .sc-big[data-p="0"] small { display: none; }
#silh-card .sc-big.bump { animation: sc-bump .5s cubic-bezier(.2,1.8,.4,1); }
#silh-card.rev .sc-big { display: none; }
@keyframes sc-bump { 0% { transform: translateX(-50%) scale(.6); } 60% { transform: translateX(-50%) scale(1.25); } 100% { transform: translateX(-50%) scale(1); } }
#silh-card.hurry { animation: sc-hurry .35s linear infinite; }
#silh-card.hurry .sc-stage { box-shadow: 0 0 0 1px #ff5a4a, 0 0 16px rgba(255,70,50,.6), inset 0 0 18px rgba(0,0,0,.8); }
@keyframes sc-hurry { 25% { transform: translate(calc(-50% - 1px), -50%); } 75% { transform: translate(calc(-50% + 1px), calc(-50% + .5px)); } }

#silh-card .sc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
#silh-card .sc-opts button { --gc: #e04848; --gl: #ff9a8a; position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 6px; border-radius: 10px; overflow: hidden;
  border: 1px solid #b8892c; background: linear-gradient(#2c2142, #17112a 60%, #120d20); color: #f4ead2; font: 700 15px/1.2 "Microsoft JhengHei", "PingFang TC", sans-serif; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,230,160,.18), inset 0 0 0 1px rgba(20,10,40,.8), 0 2px 6px rgba(0,0,0,.5); transition: transform .12s, box-shadow .2s, opacity .25s, filter .25s; word-break: break-all; }
#silh-card .sc-opts button[data-g="B"] { --gc: #3c78e8; --gl: #9cc2ff; }
#silh-card .sc-opts button[data-g="C"] { --gc: #2fae5a; --gl: #9df0b4; }
#silh-card .sc-opts button[data-g="D"] { --gc: #e0a81c; --gl: #ffe48a; }
#silh-card .gem { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 900; color: #fff;
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--gl) 18%, var(--gc) 55%, color-mix(in srgb, var(--gc) 50%, #000) 100%); text-shadow: 0 1px 1px rgba(0,0,0,.7);
  filter: drop-shadow(0 0 4px var(--gc)); }
#silh-card .sc-opts button span { flex: 1; min-width: 0; }
#silh-card .sc-opts button u { position: absolute; inset: 0; pointer-events: none; }
@media (hover: hover) { #silh-card .sc-opts button:not(:disabled):hover { border-color: #ffd75a; box-shadow: inset 0 1px 0 rgba(255,230,160,.3), 0 0 12px color-mix(in srgb, var(--gc) 60%, transparent), 0 0 0 1px #ffd75a; transform: translateY(-1px); } }
#silh-card .sc-opts button:not(:disabled):active { transform: scale(.97); filter: brightness(1.25); }
#silh-card .sc-opts button:disabled { cursor: default; }
#silh-card.locked .sc-opts button:not(.mine), #silh-card.rev .sc-opts button:not(.mine):not(.ok) { opacity: .4; filter: saturate(.4) brightness(.8); }
#silh-card .sc-opts button.mine { border-color: #ffd75a; box-shadow: 0 0 0 1px #ffd75a, 0 0 14px rgba(255,210,90,.55), inset 0 0 12px rgba(255,210,90,.18); }
#silh-card .sc-opts button.ok { opacity: 1; filter: none; border-color: #6ff0a0; background: linear-gradient(#1f5a3a, #0f2e1f); color: #eaffef; animation: sc-ok 1s ease-in-out infinite; }
#silh-card .sc-opts button.ok::after { content: '✔'; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #a6ffc0; font-size: 18px; text-shadow: 0 0 8px #3f6; }
#silh-card .sc-opts button.ng { border-color: #ff6a5a; background: linear-gradient(#5a1c22, #2a0c10); color: #ffe1de; animation: sc-shake .5s ease-in-out 2; }
#silh-card .sc-opts button.ng u { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 50' preserveAspectRatio='none'%3E%3Cpath d='M70 0 L78 14 L66 22 L82 31 L74 50 M78 14 L96 10 L108 0 M66 22 L48 26 L36 38 M82 31 L104 36 L118 50' fill='none' stroke='%23ffb0a6' stroke-width='1.6' opacity='.85'/%3E%3C/svg%3E") center/100% 100% no-repeat; animation: sc-crack .35s ease-out both; }
#silh-card .sc-opts button.ng::after { content: '✘'; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #ff9a92; font-size: 17px; }
@keyframes sc-ok { 50% { box-shadow: 0 0 0 1px #6ff0a0, 0 0 22px rgba(80,255,140,.75), inset 0 0 16px rgba(80,255,140,.3); } }
@keyframes sc-shake { 20% { transform: translateX(-4px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes sc-crack { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

#silh-card .sc-info { min-height: 38px; margin-top: 7px; display: flex; flex-direction: column; justify-content: center; font-size: 12.5px; color: #cfc3e5; }   /* 題目、公布同一個高度：卡片不會跳 */
#silh-card .sc-tip { text-align: center; color: #a898c8; letter-spacing: 1px; }
#silh-card .sc-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#silh-card .sc-row + .sc-row { margin-top: 3px; }
#silh-card .sc-gain { font-weight: 900; font-size: 14px; color: #9dff9a; text-shadow: 0 0 8px rgba(80,255,120,.7); }
#silh-card .sc-bad { color: #ff9a8a; font-weight: 700; }
#silh-card .sc-cnt b, #silh-card .sc-fast b { color: #ffe08a; }
#silh-card .sc-next { color: #a898c8; }
#silh-card .sc-wait { display: block; text-align: center; color: #e2d0ff; text-shadow: 0 0 8px rgba(170,120,255,.8); animation: sc-blink 1.6s ease-in-out infinite; }
@keyframes sc-blink { 50% { opacity: .55; } }
#silh-card.right .sc-frame { box-shadow: 0 10px 34px rgba(0,0,0,.8), 0 0 0 3px rgba(20,12,36,.9), 0 0 0 4px rgba(111,240,160,.7), 0 0 30px rgba(80,255,140,.35); }
#silh-card.wrong .sc-frame { box-shadow: 0 10px 34px rgba(0,0,0,.8), 0 0 0 3px rgba(20,12,36,.9), 0 0 0 4px rgba(255,106,90,.6), 0 0 24px rgba(255,80,60,.3); }
@media (min-width: 768px) { #silh-card { width: 420px; } #silh-card canvas { height: 262px; } #silh-card .sc-title { font-size: 19px; } }

/* ── 3. 排行榜 ── */
#silh-board { position: fixed; z-index: 121; inset: 0; top: var(--orig-bar-h, 0px); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(20,10,40,.55), rgba(0,0,0,.72)); animation: sb-fade .3s ease-out; }
@keyframes sb-fade { from { opacity: 0; } }
#silh-board .sb-box { position: relative; width: min(380px, calc(100vw - 16px)); max-height: 90%; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding: 12px 12px 12px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0, #4b2c86 0%, #1d1238 45%, #0e0a1c 100%); border: 1px solid #d4aa45; color: #eee3c8;
  box-shadow: 0 10px 40px rgba(0,0,0,.85), 0 0 0 3px rgba(20,12,36,.9), 0 0 0 4px rgba(212,170,69,.55), 0 0 40px rgba(170,110,255,.35); animation: sb-pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes sb-pop { from { transform: scale(.85); opacity: 0; } }
#silh-board .sb-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; border-radius: 16px; }
#silh-board .sb-cf { position: absolute; top: -14px; left: var(--x); width: 6px; height: 11px; border-radius: 1px; opacity: 0; animation: sb-fall var(--t) var(--d) linear forwards; }
#silh-board .sb-coin { position: absolute; top: -18px; left: var(--x); width: 13px; height: 13px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff7c8, #ffd54a 40%, #b97a10 100%); box-shadow: inset 0 0 0 1.5px #a86c0c, 0 0 6px rgba(255,200,70,.8); animation: sb-coin var(--t) var(--d) ease-in forwards; }
@keyframes sb-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: .2; transform: translateY(560px) rotate(var(--r)) translateX(20px); } }
@keyframes sb-coin { 0% { opacity: 1; transform: translateY(0) rotateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px) rotateY(1080deg); } }
#silh-board .sb-x { position: absolute; z-index: 4; right: 6px; top: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #b9a8dc; font-size: 15px; cursor: pointer; }
#silh-board .sb-title { display: flex; flex-direction: column; align-items: center; }
#silh-board .sb-title span { font-size: 21px; font-weight: 900; letter-spacing: 2px; background: linear-gradient(#fffbe0, #ffd75a 45%, #d18b14 80%, #ffe9a0); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .4px rgba(90,50,0,.6); filter: drop-shadow(0 0 8px rgba(255,190,60,.55)) drop-shadow(0 1px 0 #000); }
#silh-board .sb-title small { margin-top: 1px; font-size: 11px; color: #a898c8; letter-spacing: 2px; }
#silh-board .sb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 30px 0 4px; }
#silh-board .sb-pod { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
#silh-board .sb-who { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 6px; animation: sb-rise .6s cubic-bezier(.2,1.4,.4,1) both; }
#silh-board .p1 .sb-who { animation-delay: .5s; } #silh-board .p2 .sb-who { animation-delay: .25s; } #silh-board .p3 .sb-who { animation-delay: .1s; }
@keyframes sb-rise { from { opacity: 0; transform: translateY(24px) scale(.7); } }
#silh-board .sb-ava { --mc: #c9d3e0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mc) 35%, #2a1a4a), #120a24 75%); box-shadow: 0 0 0 2px var(--mc), 0 0 14px color-mix(in srgb, var(--mc) 60%, transparent); }
#silh-board .sb-ava svg { width: 28px; height: 28px; fill: var(--mc); }
#silh-board .p1 .sb-ava { --mc: #ffd54a; width: 52px; height: 52px; } #silh-board .p1 .sb-ava svg { width: 36px; height: 36px; }
#silh-board .p3 .sb-ava { --mc: #e59a62; }
#silh-board .sb-crown { position: absolute; top: -24px; font-style: normal; font-size: 24px; filter: drop-shadow(0 0 8px rgba(255,200,60,.9)); animation: sb-crown 2s ease-in-out infinite; }
@keyframes sb-crown { 50% { transform: translateY(-3px) rotate(-6deg); } }
#silh-board .sb-who b { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #fff4d6; }
#silh-board .p1 .sb-who b { font-size: 15px; color: #ffe27a; text-shadow: 0 0 8px rgba(255,200,70,.6); }
#silh-board .sb-who small { font-size: 10.5px; color: #b9a8dc; white-space: nowrap; }
#silh-board .sb-doc { margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #dff7ff; white-space: nowrap;
  background: linear-gradient(#2a6fa8, #143a62); box-shadow: 0 0 0 1px #8fe3ff, 0 0 10px rgba(120,220,255,.65); animation: sb-doc 2.2s ease-in-out infinite; }
@keyframes sb-doc { 50% { box-shadow: 0 0 0 1px #8fe3ff, 0 0 18px rgba(120,220,255,.95); } }
#silh-board .sb-pod.me .sb-who b { text-decoration: underline; text-underline-offset: 3px; }
#silh-board .sb-step { width: 100%; display: flex; align-items: flex-start; justify-content: center; border-radius: 8px 8px 2px 2px; transform-origin: bottom; animation: sb-step .5s cubic-bezier(.2,1.2,.4,1) both; }
#silh-board .p1 .sb-step { height: 72px; background: linear-gradient(#ffe48a, #d79a1c 55%, #8a5a08); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 0 18px rgba(255,200,70,.45); animation-delay: .3s; }
#silh-board .p2 .sb-step { height: 52px; background: linear-gradient(#f4f7fb, #a9b4c2 55%, #5f6a78); box-shadow: inset 0 2px 0 rgba(255,255,255,.7); animation-delay: .15s; }
#silh-board .p3 .sb-step { height: 38px; background: linear-gradient(#f3c09a, #b9703c 55%, #6e3e1a); box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
@keyframes sb-step { from { transform: scaleY(0); } }
#silh-board .sb-step em { margin-top: 4px; font-style: normal; font-size: 22px; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.3); }
#silh-board .sb-pod.empty .sb-who { opacity: .35; } #silh-board .sb-pod.empty .sb-step { filter: grayscale(1) brightness(.5); }
#silh-board .sb-mine { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 10px; font-size: 14px; }
#silh-board .sb-mine b { color: #ffd54a; font-size: 22px; text-shadow: 0 0 8px rgba(255,200,60,.7); }
#silh-board .sb-mine span { font-size: 12px; color: #b9a8dc; }
#silh-board .sb-gift { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: #ffeec0;
  background: linear-gradient(90deg, rgba(255,200,80,.16), rgba(255,200,80,.04)); box-shadow: inset 0 0 0 1px rgba(255,210,110,.4); }
#silh-board .sb-gift i { font-style: normal; font-size: 20px; }
#silh-board .sb-list { list-style: none; margin: 10px 0 0; padding: 0; }
#silh-board .sb-list li { display: grid; grid-template-columns: 30px 1fr 40px 50px 30px; align-items: center; gap: 4px; padding: 6px 6px; margin-top: 3px; border-radius: 7px; background: rgba(255,255,255,.04); font-size: 13px; }
#silh-board .sb-list li.me { box-shadow: inset 0 0 0 1px #ffd54a; }
#silh-board .sb-list li.out { opacity: .55; }
#silh-board .sb-rk { text-align: center; font-weight: 900; color: #c9b8ff; }
#silh-board .sb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
#silh-board .sb-nm small { margin-left: 4px; font-weight: 400; font-size: 10px; color: #a898c8; }
#silh-board .sb-ok, #silh-board .sb-ms { text-align: right; color: #b9a8dc; font-size: 12px; }
#silh-board .sb-sc { text-align: right; font-weight: 900; color: #ffe27a; }

/* 系統「減少動態效果」：大動作都關掉（法陣不轉、沒有粒子在 js 判斷） */
@media (prefers-reduced-motion: reduce) {
  #silh-pill, #silh-pill .sp-card, #silh-pill .sp-go::after, #silh-pill.soon .sp-cd b, #silh-card.in, #silh-card.hurry, #silh-card .sc-opts button.ok, #silh-card .sc-opts button.ng,
  #silh-card .sc-big.bump, #silh-card .sc-wait, #silh-board, #silh-board .sb-box, #silh-board .sb-who, #silh-board .sb-step, #silh-board .sb-crown, #silh-board .sb-doc { animation: none; }
  #silh-board .sb-fx { display: none; }
}