/* ═══════════ 游戏画风皮肤：每种画风一整套 倒计时 / 面板 / HUD / 结算 / 加载画面 ═══════════
   --ga 强调色 / --ga2 浅强调 / --gb 深底色 / --ga-ink 强调色上的文字色 —— 由 theme.js 按每款游戏的封面配色注入 */
@font-face { font-family: 'Pixel'; src: url('../assets/fonts/PressStart2P.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Tube'; src: url('../assets/fonts/Monoton.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Comic'; src: url('../assets/fonts/Bangers.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'OSD'; src: url('../assets/fonts/VT323.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Broadcast'; src: url('../assets/fonts/Oswald.ttf') format('truetype'); font-weight: 200 700; font-display: swap; }

.game-root {
  --ga: #ff4d8d; --ga2: #ffc2d8; --gb: #140a2a; --ga-ink: #14101e;
  --brush: 'Kaiti SC', 'STKaiti', 'KaiTi', 'BiauKai', 'DFKai-SB', 'Noto Serif SC', 'Songti SC', serif;
  --serif: 'Songti SC', 'STSong', 'Noto Serif SC', 'Source Han Serif SC', serif;
}

/* ───── 通用：用每款游戏的强调色 ───── */
.game-root .countdown b { text-shadow: 0 0 60px var(--ga), 0 10px 0 rgba(0,0,0,.25); }
.game-root .countdown b.go { background: linear-gradient(100deg, #fff, var(--ga2) 35%, var(--ga)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 40px var(--ga)); }
.game-root .ov-panel { background: linear-gradient(165deg, color-mix(in srgb, var(--gb) 82%, transparent), rgba(10,10,24,.92) 70%); border-color: color-mix(in srgb, var(--ga) 30%, transparent); }
.game-root .ov-panel .btn.primary, .game-root .ld .btn.primary { background: linear-gradient(100deg, var(--ga2), var(--ga)); color: var(--ga-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--ga) 40%, transparent); }
.game-root .howto li em, .game-root .ht-bar i, .game-root .res-badge { background: var(--ga); color: var(--ga-ink); }
.game-root .ov-panel ol b, .game-root .join-tip, .game-root .res-best { color: var(--ga2); }
.game-root .res-score { text-shadow: 0 0 40px var(--ga); }
.game-root .hud-timer .fg { stroke: var(--ga); }
.game-root .ld-bar i { background: linear-gradient(90deg, var(--ga2), var(--ga)); box-shadow: 0 0 18px color-mix(in srgb, var(--ga) 70%, transparent); }
.game-root .ld-t small { color: var(--ga2); }
.game-root .ld-tip b { color: var(--ga2); }
.game-root .ld-steps em.on { background: color-mix(in srgb, var(--ga) 18%, transparent); color: var(--ga2); }
.game-root .pod.p1 .pod-rank::before { color: var(--ga); }
.countdown b { display: inline-block; position: relative; z-index: 0; line-height: 1; }

/* ═════ 霓虹赛博：灯管点亮 ═════ */
.style-neon .countdown b { font-family: 'Tube', var(--num); font-weight: 400; font-size: min(36vh, 300px); color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px var(--ga2), 0 0 42px var(--ga), 0 0 90px var(--ga); animation: neonOn .75s steps(1) both, cd .75s cubic-bezier(.2,1.6,.4,1); }
.style-neon .countdown b.go { color: var(--ga2); background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: min(26vh, 220px); letter-spacing: .06em; }
@keyframes neonOn { 0% { opacity: .15; } 12% { opacity: 1; } 18% { opacity: .3; } 26%, 100% { opacity: 1; } }
.style-neon .ov-panel { background: linear-gradient(180deg, rgba(4,6,24,.86), rgba(8,4,30,.92)); border: 1.5px solid var(--ga); border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 28px color-mix(in srgb, var(--ga) 45%, transparent), inset 0 0 40px color-mix(in srgb, var(--ga) 14%, transparent); }
.style-neon .ov-panel h2 { color: #fff; text-shadow: 0 0 10px var(--ga2), 0 0 26px var(--ga); letter-spacing: 3px; }
.style-neon .howto li { background: rgba(255,255,255,.03); border: 1px solid color-mix(in srgb, var(--ga) 35%, transparent); border-radius: 6px; }
.style-neon .howto li em { background: transparent; color: var(--ga2); border: 1.5px solid var(--ga2); box-shadow: 0 0 12px var(--ga); border-radius: 4px; }
.style-neon .ov-panel .btn { border-radius: 6px; }
.style-neon .ov-panel .btn.primary { background: transparent; color: #fff; border: 1.5px solid var(--ga2); box-shadow: 0 0 18px var(--ga), inset 0 0 14px color-mix(in srgb, var(--ga) 50%, transparent); text-shadow: 0 0 8px var(--ga2); }
.style-neon .score-chip { background: rgba(4,6,24,.6); border: 1.5px solid var(--c); border-radius: 8px; box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }
.style-neon .score-chip .tag { background: transparent; color: var(--c); border: 1.5px solid var(--c); text-shadow: 0 0 8px var(--c); }
.style-neon .score-chip b { text-shadow: 0 0 10px var(--c); }
.style-neon .hud-timer circle { fill: rgba(4,6,24,.6); }
.style-neon .hud-timer .fg { filter: drop-shadow(0 0 6px var(--ga)); }
.style-neon .hud-cue { background: rgba(4,6,24,.7); border: 1.5px solid var(--ga); border-radius: 8px; box-shadow: 0 0 22px color-mix(in srgb, var(--ga) 55%, transparent); text-shadow: 0 0 12px currentColor; }
.style-neon .hud-big b { -webkit-text-stroke: 0; color: #fff !important; text-shadow: 0 0 8px #fff, 0 0 22px var(--ga2), 0 0 50px var(--ga); letter-spacing: 4px; }
.style-neon .hud-toast { border-radius: 8px; border: 1px solid var(--ga); box-shadow: 0 0 20px color-mix(in srgb, var(--ga) 40%, transparent); }
.style-neon .pod-col { border-radius: 4px; background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 40%, transparent), transparent); border: 1.5px solid var(--c); border-bottom: 0; box-shadow: 0 0 20px var(--c), inset 0 0 20px color-mix(in srgb, var(--c) 40%, transparent); }
.style-neon .g-title { font-family: 'Tube', var(--disp); letter-spacing: 2px; color: #fff; text-shadow: 0 0 10px var(--ga); }
.style-neon .ld-t h2 { text-shadow: 0 0 12px var(--ga2), 0 0 34px var(--ga); }
.style-neon .ld-card { border-radius: 10px; box-shadow: 0 0 0 1.5px var(--ga), 0 0 40px color-mix(in srgb, var(--ga) 50%, transparent); }

/* ═════ 复古像素：8-bit 街机 ═════ */
.style-pixel .countdown b { font-family: 'Pixel', var(--num); font-size: min(24vh, 200px); color: #fff; text-shadow: .08em .08em 0 var(--ga), .16em .16em 0 #000; animation: pxIn .75s steps(5) both; }
.style-pixel .countdown b.go { font-size: min(13vh, 110px); color: #ffe14d; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; animation: pxIn .4s steps(4) both, pxBlink .2s steps(1) infinite .4s; }
@keyframes pxIn { from { transform: scale(3); opacity: 0; } }
@keyframes pxBlink { 50% { color: #ff4d6d; } }
.style-pixel .ov-panel { background: #0d1020; border: 4px solid #fff; border-radius: 0; box-shadow: 0 0 0 4px #000, 10px 10px 0 4px rgba(0,0,0,.6); backdrop-filter: none; animation: pxPanel .3s steps(4); }
@keyframes pxPanel { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
.style-pixel .ov-panel h2 { font-family: 'Pixel', var(--disp); font-size: clamp(20px, 2.6vw, 32px); line-height: 1.5; color: #fff; text-shadow: 4px 4px 0 var(--ga); }
.style-pixel .howto li { border-radius: 0; background: #161a33; border: 2px solid #2b3160; }
.style-pixel .howto li em, .style-pixel .res-badge { border-radius: 0; font-family: 'Pixel'; font-size: 14px; box-shadow: 3px 3px 0 #000; }
.style-pixel .ht-tag, .style-pixel .ht-bar, .style-pixel .ht-bar i { border-radius: 0; }
.style-pixel .ov-panel .btn, .style-pixel .ld .btn { border-radius: 0; border: 3px solid #fff; box-shadow: 4px 4px 0 #000; }
.style-pixel .ov-panel .btn.primary { background: var(--ga); border-color: #fff; }
.style-pixel .ov-panel .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.style-pixel .score-chip { background: #0d1020; border: 3px solid var(--c); }
.style-pixel .score-chip .tag { border-radius: 0; font-family: 'Pixel'; font-size: 11px; }
.style-pixel .score-chip b, .style-pixel .hud-timer b { font-family: 'Pixel', var(--num); font-size: 20px; }
.style-pixel .hud-timer circle { fill: #0d1020; stroke-linecap: butt; stroke-width: 6; }
.style-pixel .hud-timer .fg { stroke-linecap: butt; }
.style-pixel .hud-cue { background: #0d1020; border: 3px solid #fff; }
.style-pixel .hud-bar div { border-radius: 0; border: 2px solid #fff; } .style-pixel .hud-bar i { box-shadow: none; }
.style-pixel .hud-toast { border-radius: 0; border: 3px solid #fff; background: #0d1020; box-shadow: 4px 4px 0 #000; }
.style-pixel .pod-col { border-radius: 0; background: repeating-linear-gradient(to bottom, var(--c) 0 8px, color-mix(in srgb, var(--c) 70%, #000) 8px 16px); box-shadow: inset -6px 0 0 rgba(0,0,0,.3); }
.style-pixel .pod-name, .style-pixel .res-score, .style-pixel .pod-score { font-family: 'Pixel', var(--num); }
.style-pixel .pod-name { font-size: 22px; text-shadow: 3px 3px 0 #000; } .style-pixel .res-score { font-size: 54px; text-shadow: 6px 6px 0 var(--ga); }
.style-pixel .g-title { font-family: 'Pixel', var(--disp); font-size: 13px; }
.style-pixel .ld-t h2 { font-family: 'Pixel', var(--disp); font-size: clamp(22px, 3vw, 38px); line-height: 1.4; text-shadow: 5px 5px 0 var(--ga); }
.style-pixel .ld-bar { height: 18px; border-radius: 0; border: 3px solid #fff; background: #000; }
.style-pixel .ld-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--ga) 0 12px, transparent 12px 16px); box-shadow: none; transition: width .25s steps(6); }
.style-pixel .ld-bar i::after { display: none; }
.style-pixel .ld-card { border-radius: 0; box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000; image-rendering: pixelated; }
.style-pixel .ld-row b { font-family: 'Pixel'; font-size: 18px; }

/* ═════ 恶搞动画：漫画爆炸框 ═════ */
.style-toon .countdown b { font-family: 'Comic', var(--disp); font-size: min(40vh, 340px); color: #ffe14d; -webkit-text-stroke: 8px #15101f; paint-order: stroke fill; text-shadow: 12px 14px 0 #15101f; transform: rotate(-8deg); animation: toonIn .75s cubic-bezier(.2,1.8,.4,1) both; padding: 0 .25em; }
.style-toon .countdown b::before { content: ''; position: absolute; inset: -22% -36%; z-index: -1; background: var(--ga); border: 0; clip-path: polygon(50% 0, 61% 18%, 82% 6%, 78% 30%, 100% 34%, 84% 52%, 98% 72%, 74% 72%, 72% 96%, 54% 80%, 36% 100%, 30% 76%, 6% 82%, 16% 60%, 0 42%, 20% 32%, 12% 10%, 36% 18%); filter: drop-shadow(8px 10px 0 #15101f); animation: burstSpin 3s linear infinite; }
.style-toon .countdown b.go { color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: min(30vh, 260px); transform: rotate(-6deg); }
@keyframes toonIn { 0% { transform: rotate(-30deg) scale(.2); } 60% { transform: rotate(-4deg) scale(1.15); } 100% { transform: rotate(-8deg) scale(1); } }
@keyframes burstSpin { to { transform: rotate(360deg); } }
.style-toon .ov-panel { background: #fffdf6; color: #15101f; border: 4px solid #15101f; border-radius: 20px; box-shadow: 12px 12px 0 #15101f; backdrop-filter: none; background-image: radial-gradient(circle, color-mix(in srgb, var(--ga) 30%, transparent) 1.4px, transparent 2px); background-size: 12px 12px; animation: toonPanel .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes toonPanel { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.style-toon .ov-panel h2 { font-family: var(--disp); color: #ffe14d; -webkit-text-stroke: 2.5px #15101f; paint-order: stroke fill; text-shadow: 4px 5px 0 #15101f; font-size: clamp(34px, 4.6vw, 54px); transform: rotate(-2deg); }
.style-toon .ov-panel .muted, .style-toon .ov-panel .ht-go, .style-toon .results .res-head small { color: #5a4f6e; }
.style-toon .howto li { background: #fff; border: 3px solid #15101f; border-radius: 14px; box-shadow: 4px 4px 0 #15101f; color: #15101f; }
.style-toon .howto li em { border: 3px solid #15101f; color: #15101f; background: #ffe14d; }
.style-toon .ov-panel ol b { color: #e8336a; }
.style-toon .ht-tag { background: #15101f; color: #fff; }
.style-toon .ht-bar { background: #eee3c8; border: 2px solid #15101f; }
.style-toon .ov-panel .btn { border: 3px solid #15101f; background: #fff; color: #15101f; box-shadow: 4px 4px 0 #15101f; border-radius: 14px; }
.style-toon .ov-panel .btn.primary { background: #ffe14d; color: #15101f; }
.style-toon .ov-panel .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #15101f; }
.style-toon .join-slot { border-color: #15101f; } .style-toon .join-slot b { -webkit-text-stroke: 1px #15101f; } .style-toon .join-slot span { color: #5a4f6e; }
.style-toon .join-cam { border: 4px solid #15101f; }
.style-toon .pod-name { -webkit-text-stroke: 2px #15101f; paint-order: stroke fill; text-shadow: 3px 3px 0 #15101f; }
.style-toon .pod-title { background: #15101f; }
.style-toon .pod-col { border: 4px solid #15101f; border-bottom: 0; box-shadow: 6px 0 0 #15101f; border-radius: 12px 12px 0 0; }
.style-toon .res-score { color: #ffe14d; -webkit-text-stroke: 3px #15101f; paint-order: stroke fill; text-shadow: 6px 6px 0 #15101f; }
.style-toon .res-badge { border: 3px solid #15101f; box-shadow: 4px 4px 0 #15101f; }
.style-toon .hud-timer circle { fill: #fff; } .style-toon .hud-timer .bg { stroke: #15101f; } .style-toon .hud-timer b { color: #15101f; font-family: 'Comic', var(--num); font-size: 30px; }
.style-toon .hud-timer svg { filter: drop-shadow(4px 4px 0 #15101f); }
.style-toon .score-chip { background: #fff; color: #15101f; border-color: #15101f; } .style-toon .score-chip .tag { border: 2px solid #15101f; } .style-toon .score-chip b { font-family: 'Comic', var(--num); font-size: 32px; }
.style-toon .hud-toast { background: #fff; color: #15101f; border: 3px solid #15101f; box-shadow: 5px 5px 0 #15101f; }
.style-toon .hud-bar div { border: 3px solid #15101f; background: #fff; } .style-toon .hud-bar i { box-shadow: none; } .style-toon .hud-bar span { -webkit-text-stroke: 4px #15101f; paint-order: stroke fill; }
.style-toon .g-title { font-family: 'Comic', var(--disp); font-size: 24px; letter-spacing: 1px; -webkit-text-stroke: 4px #15101f; paint-order: stroke fill; }
.style-toon .ld-t h2 { color: #ffe14d; -webkit-text-stroke: 3px #15101f; paint-order: stroke fill; text-shadow: 5px 6px 0 #15101f; }
.style-toon .ld-card { border: 5px solid #15101f; box-shadow: 12px 12px 0 #15101f; transform: rotate(-2deg); }
.style-toon .ld-bar { height: 20px; border: 3px solid #15101f; background: #fff; box-shadow: 4px 4px 0 #15101f; }
.style-toon .ld-bar i { background: repeating-linear-gradient(-45deg, #ffe14d 0 12px, var(--ga) 12px 24px); box-shadow: none; border-radius: 0; }
.style-toon .ld-tip { background: #fff; color: #15101f; border: 3px solid #15101f; box-shadow: 5px 5px 0 #15101f; } .style-toon .ld-tip b { color: #e8336a; }

/* ═════ 黏土定格：橡皮泥按压 ═════ */
.style-clay .countdown b { font-family: var(--disp); font-size: min(38vh, 320px); color: #fff4d6; -webkit-text-stroke: 6px #7a3b1d; paint-order: stroke fill; text-shadow: 0 6px 0 #a4532a, 0 12px 0 #7a3b1d, 0 22px 26px rgba(0,0,0,.45); animation: squash .75s cubic-bezier(.3,1.6,.4,1) both; }
.style-clay .countdown b.go { color: var(--ga2); background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: min(28vh, 240px); }
@keyframes squash { 0% { transform: translateY(-60vh) scale(.8, 1.3); } 45% { transform: translateY(0) scale(1.35, .6); } 65% { transform: scale(.9, 1.12); } 82% { transform: scale(1.05, .96); } 100% { transform: none; } }
.style-clay .ov-panel { background: #f4dfc2; color: #4a2a17; border: 0; border-radius: 40px; box-shadow: inset 0 8px 0 rgba(255,255,255,.45), inset 0 -14px 0 rgba(122,59,29,.18), 0 18px 0 #b9804f, 0 34px 60px rgba(0,0,0,.45); backdrop-filter: none; animation: squashP .45s cubic-bezier(.3,1.6,.4,1); }
@keyframes squashP { 0% { transform: scale(1.2, .7); opacity: 0; } 60% { transform: scale(.96, 1.05); } }
.style-clay .ov-panel h2 { color: #fff4d6; -webkit-text-stroke: 2.5px #7a3b1d; paint-order: stroke fill; text-shadow: 0 4px 0 #a4532a, 0 7px 0 #7a3b1d; }
.style-clay .ov-panel .muted, .style-clay .ov-panel .ht-go, .style-clay .results .res-head small { color: #8a5a3a; }
.style-clay .howto li { background: #fbeedb; border-radius: 26px; box-shadow: inset 0 -5px 0 rgba(122,59,29,.14), 0 4px 0 #d4a679; color: #4a2a17; }
.style-clay .howto li em { border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.4); }
.style-clay .ov-panel ol b { color: #c4471f; }
.style-clay .ht-tag { background: #7a3b1d; color: #fff4d6; } .style-clay .ht-bar { background: #e6c79f; height: 12px; }
.style-clay .ov-panel .btn { border: 0; border-radius: 999px; background: #fbeedb; color: #4a2a17; box-shadow: inset 0 -5px 0 rgba(122,59,29,.2), 0 5px 0 #c4925f; }
.style-clay .ov-panel .btn.primary { background: var(--ga); color: var(--ga-ink); box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), inset 0 4px 0 rgba(255,255,255,.35), 0 6px 0 color-mix(in srgb, var(--ga) 60%, #000); }
.style-clay .ov-panel .btn:active { transform: translateY(4px) scale(1.03, .94); }
.style-clay .join-slot { border-color: #c4925f; } .style-clay .join-slot span { color: #8a5a3a; }
.style-clay .pod-col { border-radius: 30px 30px 10px 10px; box-shadow: inset 0 10px 0 rgba(255,255,255,.3), inset 0 -10px 0 rgba(0,0,0,.18); background: var(--c); }
.style-clay .pod-name { text-shadow: 0 3px 0 rgba(0,0,0,.25); -webkit-text-stroke: 1.5px #4a2a17; paint-order: stroke fill; } .style-clay .pod-title { background: #7a3b1d; }
.style-clay .res-score { color: #fff4d6; -webkit-text-stroke: 3px #7a3b1d; paint-order: stroke fill; text-shadow: 0 6px 0 #7a3b1d; }
.style-clay .score-chip { background: #f4dfc2; color: #4a2a17; border: 0; border-radius: 24px; box-shadow: inset 0 5px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(122,59,29,.2), 0 6px 0 var(--c); }
.style-clay .score-chip .tag { border-radius: 16px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); } .style-clay .score-chip b { color: #4a2a17; }
.style-clay .hud-timer circle { fill: #f4dfc2; } .style-clay .hud-timer .bg { stroke: #d4a679; } .style-clay .hud-timer b { color: #4a2a17; } .style-clay .hud-timer svg { filter: drop-shadow(0 5px 0 #b9804f); }
.style-clay .hud-cue { background: #f4dfc2; color: #4a2a17 !important; border: 0; border-radius: 30px; box-shadow: inset 0 -6px 0 rgba(122,59,29,.2), 0 6px 0 #b9804f; }
.style-clay .hud-toast { background: #f4dfc2; color: #4a2a17; border: 0; border-radius: 22px; box-shadow: 0 5px 0 #b9804f; }
.style-clay .hud-bar div { height: 18px; background: #f4dfc2; border: 0; box-shadow: inset 0 3px 4px rgba(0,0,0,.2); } .style-clay .hud-bar i { box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.35); }
.style-clay .ld-card { border-radius: 40px; box-shadow: 0 16px 0 #7a3b1d, 0 40px 80px rgba(0,0,0,.6); }
.style-clay .ld-t h2 { color: #fff4d6; -webkit-text-stroke: 2px #7a3b1d; paint-order: stroke fill; text-shadow: 0 5px 0 #7a3b1d; }
.style-clay .ld-bar { height: 18px; background: #f4dfc2; box-shadow: inset 0 3px 5px rgba(0,0,0,.35); } .style-clay .ld-bar i { box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.4); } .style-clay .ld-bar i::after { display: none; }

/* ═════ 手绘纸艺：贴纸 + 胶带 ═════ */
.style-paper .countdown b { font-family: var(--disp); font-size: min(32vh, 260px); color: #3b2a1c; background: #fffaf0; padding: .06em .32em .12em; border-radius: 10px 26px 14px 22px; box-shadow: 0 0 0 6px #fff, 8px 12px 0 6px rgba(74,52,35,.35); transform: rotate(-4deg); animation: slap .75s cubic-bezier(.2,1.5,.4,1) both; }
.style-paper .countdown b::before { content: ''; position: absolute; left: 50%; top: -.05em; width: .55em; height: .16em; transform: translateX(-50%) rotate(3deg); background: color-mix(in srgb, var(--ga) 55%, rgba(255,255,255,.4)); opacity: .85; z-index: 1; }
.style-paper .countdown b[data-n="2"] { transform: rotate(3deg); } .style-paper .countdown b[data-n="1"] { transform: rotate(-2deg); }
.style-paper .countdown b.go { color: #fff; background: var(--ga); -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: min(24vh, 200px); transform: rotate(-3deg); }
@keyframes slap { 0% { transform: scale(2.2) rotate(12deg); opacity: 0; } 55% { transform: scale(.94) rotate(-5deg); opacity: 1; } }
.style-paper .ov-panel { position: relative; background-color: #fffaf0; color: #3b2a1c; border: 0; border-radius: 6px 18px 10px 14px; transform: rotate(-.6deg); box-shadow: 0 2px 0 #e9dcc2, 0 30px 60px rgba(40,25,10,.5); backdrop-filter: none; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(80,120,190,.14) 31px 32px); }
.style-paper .ov-panel::before, .style-paper .ov-panel::after { content: ''; position: absolute; top: 6px; width: 120px; height: 26px; background: color-mix(in srgb, var(--ga) 45%, rgba(255,255,255,.5)); opacity: .8; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.style-paper .ov-panel::before { left: 8%; transform: rotate(-6deg); } .style-paper .ov-panel::after { right: 8%; transform: rotate(5deg); }
.style-paper .ov-panel h2 { color: #3b2a1c; text-decoration: underline wavy var(--ga); text-underline-offset: 10px; text-decoration-thickness: 3px; }
.style-paper .ov-panel .muted, .style-paper .ov-panel .ht-go, .style-paper .results .res-head small { color: #7a6650; }
.style-paper .howto li { background: transparent; border: 2px dashed #c9b693; border-radius: 12px 4px 14px 6px; color: #3b2a1c; }
.style-paper .howto li em { border-radius: 50% 44% 52% 46%; transform: rotate(-6deg); }
.style-paper .ov-panel ol b { color: #c0392b; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--ga) 45%, transparent) 55%); }
.style-paper .ht-tag { background: #3b2a1c; color: #fffaf0; transform: rotate(-2deg); }
.style-paper .ht-bar { background: #eadfca; }
.style-paper .ov-panel .btn { background: #fff; color: #3b2a1c; border: 2px solid #3b2a1c; border-radius: 12px 4px 12px 6px; box-shadow: 3px 4px 0 rgba(59,42,28,.4); }
.style-paper .ov-panel .btn.primary { background: var(--ga); color: var(--ga-ink); border-color: #3b2a1c; }
.style-paper .join-slot { border-color: #c9b693; } .style-paper .join-slot span { color: #7a6650; }
.style-paper .join-cam { border: 8px solid #fff; box-shadow: 4px 6px 0 rgba(59,42,28,.3); transform: rotate(.8deg); border-radius: 4px; }
.style-paper .pod-col { border-radius: 4px; background: var(--c); box-shadow: 4px 0 0 rgba(59,42,28,.3); -webkit-mask: linear-gradient(#000, #000); }
.style-paper .pod-name { text-shadow: 2px 3px 0 rgba(59,42,28,.3); } .style-paper .pod-score { color: #3b2a1c; } .style-paper .pod-title { background: #3b2a1c; }
.style-paper .res-score { color: #3b2a1c; text-shadow: 4px 5px 0 color-mix(in srgb, var(--ga) 60%, transparent); }
.style-paper .hud-timer circle { fill: #fffaf0; } .style-paper .hud-timer .bg { stroke: #e3d4b6; } .style-paper .hud-timer b { color: #3b2a1c; } .style-paper .hud-timer svg { filter: drop-shadow(3px 4px 0 rgba(59,42,28,.35)); }
.style-paper .hud-cue { background: #fffaf0; color: #3b2a1c !important; border: 2px solid #3b2a1c; border-radius: 6px 16px 8px 12px; box-shadow: 4px 5px 0 rgba(59,42,28,.35); transform: translateX(-50%) rotate(-1.2deg); }
.style-paper .hud-toast { background: #fffaf0; color: #3b2a1c; border: 2px solid #3b2a1c; border-radius: 6px 14px 8px 12px; }
.style-paper .hud-bar div { background: #fffaf0; border: 2px solid #3b2a1c; } .style-paper .hud-bar i { box-shadow: none; background: repeating-linear-gradient(-55deg, var(--c) 0 6px, color-mix(in srgb, var(--c) 70%, #fff) 6px 9px); }
.style-paper .ld-card { border: 10px solid #fff; border-bottom-width: 46px; border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.style-paper .ld-bar { height: 14px; background: #fffaf0; border: 2px solid #3b2a1c; }
.style-paper .ld-bar i { background: repeating-linear-gradient(-55deg, var(--ga) 0 7px, var(--ga2) 7px 10px); box-shadow: none; }
.style-paper .ld-tip { background: #fffaf0; color: #3b2a1c; transform: rotate(-.8deg); } .style-paper .ld-tip b { color: #c0392b; }

/* ═════ 国风水墨：宣纸 + 朱砂印 ═════ */
.style-ink .countdown b { font-family: var(--brush); font-weight: 700; font-size: min(42vh, 360px); color: #1d1a17; text-shadow: 0 0 2px rgba(29,26,23,.6), 0 0 18px rgba(255,250,235,.95), 0 0 50px rgba(255,250,235,.8); animation: brush .75s cubic-bezier(.2,.9,.3,1) both; }
.style-ink .countdown b.go { color: #b8262c; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; letter-spacing: .1em; }
@keyframes brush { 0% { clip-path: inset(-40% 100% -40% -20%); filter: blur(8px); opacity: .4; } 60% { clip-path: inset(-40% -20% -40% -20%); filter: blur(0); opacity: 1; } 100% { clip-path: inset(-40% -20% -40% -20%); } }
.style-ink .ov-panel { position: relative; background-color: #f3ead8; color: #1d1a17; border: 0; border-radius: 3px; box-shadow: 0 0 0 1px #d6c7a6, 0 0 0 8px #3a2c20, 0 0 0 9px #d6c7a6, 0 40px 90px rgba(0,0,0,.6); backdrop-filter: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: inkOpen .5s cubic-bezier(.2,.9,.3,1); }
@keyframes inkOpen { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
.style-ink .ov-panel::after { content: '嗨动'; position: absolute; right: 22px; bottom: 20px; writing-mode: vertical-rl; font-family: var(--brush); font-size: 18px; font-weight: 700; color: #f3ead8; background: #b8262c; padding: 8px 5px; border-radius: 3px; opacity: .9; transform: rotate(4deg); }
.style-ink .ov-panel h2 { font-family: var(--brush); font-weight: 700; letter-spacing: .3em; font-size: clamp(34px, 4.4vw, 52px); color: #1d1a17; }
.style-ink .ov-panel .muted, .style-ink .ov-panel .ht-go, .style-ink .results .res-head small { color: #6d5f4b; font-family: var(--serif); }
.style-ink .howto li { background: transparent; border-radius: 0; border-bottom: 1px solid rgba(29,26,23,.18); font-family: var(--serif); color: #1d1a17; }
.style-ink .howto li em { border-radius: 3px; background: #b8262c; color: #f3ead8; font-family: var(--brush); font-weight: 700; transform: rotate(-4deg); }
.style-ink .ov-panel ol b { color: #b8262c; }
.style-ink .ht-tag { background: transparent; color: #b8262c; border: 1.5px solid #b8262c; border-radius: 3px; font-family: var(--serif); }
.style-ink .ht-bar { background: rgba(29,26,23,.12); border-radius: 0; height: 4px; } .style-ink .ht-bar i { background: #1d1a17; }
.style-ink .ov-panel .btn { background: transparent; color: #1d1a17; border: 1.5px solid #1d1a17; border-radius: 3px; font-family: var(--brush); font-size: 19px; letter-spacing: .2em; }
.style-ink .ov-panel .btn.primary { background: #1d1a17; color: #f3ead8; box-shadow: 4px 4px 0 #b8262c; }
.style-ink .join-slot { border-color: rgba(29,26,23,.3); border-radius: 3px; } .style-ink .join-slot span { color: #6d5f4b; }
.style-ink .join-cam { border-radius: 3px; border: 1px solid #3a2c20; filter: sepia(.3); }
.style-ink .pod-col { border-radius: 0; background: linear-gradient(to bottom, #1d1a17, rgba(29,26,23,.15)); }
.style-ink .pod.p1 .pod-col { background: linear-gradient(to bottom, #b8262c, rgba(184,38,44,.15)); }
.style-ink .pod-rank, .style-ink .pod-name { font-family: var(--brush); font-weight: 700; } .style-ink .pod-name { text-shadow: none; color: #1d1a17; } .style-ink .pod-score { color: #1d1a17; } .style-ink .pod-title { background: transparent; color: #6d5f4b; border: 1px solid rgba(29,26,23,.3); font-family: var(--serif); }
.style-ink .res-score { font-family: var(--brush); color: #1d1a17; text-shadow: none; } .style-ink .res-badge { background: #b8262c; color: #f3ead8; font-family: var(--brush); border-radius: 3px; }
.style-ink .score-chip { background: rgba(243,234,216,.92); color: #1d1a17; border: 0; border-left: 6px solid var(--c); border-radius: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.style-ink .score-chip .tag { border-radius: 2px; } .style-ink .score-chip b { font-family: var(--brush); font-weight: 700; font-size: 32px; }
.style-ink .hud-timer circle { fill: rgba(243,234,216,.92); } .style-ink .hud-timer .bg { stroke: rgba(29,26,23,.15); } .style-ink .hud-timer .fg { stroke: #1d1a17; stroke-linecap: butt; } .style-ink .hud-timer b { color: #1d1a17; font-family: var(--brush); font-weight: 700; }
.style-ink .hud-timer.hurry .fg { stroke: #b8262c; } .style-ink .hud-timer.hurry b { color: #b8262c; }
.style-ink .hud-cue { background: rgba(243,234,216,.94); color: #1d1a17 !important; border: 0; border-radius: 2px; font-family: var(--brush); font-weight: 700; letter-spacing: .12em; box-shadow: 0 0 0 1px #d6c7a6, 0 10px 30px rgba(0,0,0,.3); }
.style-ink .hud-toast { background: rgba(243,234,216,.95); color: #1d1a17; border-radius: 2px; font-family: var(--serif); }
.style-ink .hud-bar div { background: rgba(243,234,216,.6); border: 1px solid #1d1a17; border-radius: 0; } .style-ink .hud-bar i { box-shadow: none; }
.style-ink .g-title { font-family: var(--brush); font-weight: 700; letter-spacing: .25em; color: #1d1a17; text-shadow: 0 0 12px rgba(255,250,235,.9); }
.style-ink .ld-t h2 { font-family: var(--brush); font-weight: 700; letter-spacing: .25em; }
.style-ink .ld-t p { font-family: var(--serif); }
.style-ink .ld-card { border-radius: 2px; box-shadow: 0 0 0 8px #f3ead8, 0 0 0 9px #3a2c20, 0 30px 80px rgba(0,0,0,.6); filter: sepia(.25) saturate(.8); }
.style-ink .ld-bar { height: 6px; border-radius: 0; background: rgba(255,255,255,.12); } .style-ink .ld-bar i { border-radius: 0; background: linear-gradient(90deg, #f3ead8, #b8262c); box-shadow: none; } .style-ink .ld-bar i::after { display: none; }

/* ═════ 老电视：VHS 屏显 ═════ */
.style-vhs .countdown b { font-family: 'OSD', var(--num); font-size: min(44vh, 380px); color: #f2f6ff; text-shadow: 4px 0 0 rgba(255,40,80,.75), -4px 0 0 rgba(40,220,255,.75), 0 0 30px rgba(255,255,255,.4); animation: vhsJit .75s steps(2) both; letter-spacing: .04em; }
.style-vhs .countdown b.go { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f2f6ff; filter: none; font-size: min(30vh, 260px); padding-left: .9em; }
.style-vhs .countdown b.go::before { content: ''; position: absolute; left: 0; top: 50%; width: .62em; height: .7em; transform: translateY(-50%); background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(4px 0 0 rgba(255,40,80,.75)) drop-shadow(-4px 0 0 rgba(40,220,255,.75)); }
@keyframes vhsJit { 0% { transform: translate(-6px, 3px) skewX(-6deg); opacity: .6; } 20% { transform: translate(5px, -2px); } 40%, 100% { transform: none; opacity: 1; } }
.style-vhs .ov-panel { font-family: 'OSD', var(--font); background: rgba(10,26,170,.88); color: #f2f6ff; border: 3px solid #f2f6ff; border-radius: 0; box-shadow: 0 0 0 6px rgba(10,26,170,.5), 0 30px 80px rgba(0,0,0,.6); backdrop-filter: blur(2px); text-shadow: 2px 0 0 rgba(255,40,80,.45), -2px 0 0 rgba(40,220,255,.45); }
.style-vhs .ov-panel h2 { font-family: 'OSD', var(--disp); font-size: clamp(38px, 5vw, 60px); letter-spacing: 4px; }
.style-vhs .ov-panel .muted, .style-vhs .ov-panel .ht-go { color: #c4ccff; }
.style-vhs .howto li { background: transparent; border-radius: 0; border: 2px solid rgba(242,246,255,.5); font-size: 18px; }
.style-vhs .howto li em { border-radius: 0; background: #f2f6ff; color: #0a1aaa; font-family: 'OSD'; font-size: 24px; }
.style-vhs .ov-panel ol b { color: #fff36b; }
.style-vhs .ht-tag, .style-vhs .ht-bar, .style-vhs .ht-bar i { border-radius: 0; } .style-vhs .ht-bar i { background: #f2f6ff; }
.style-vhs .ov-panel .btn { border-radius: 0; background: transparent; border: 2px solid #f2f6ff; font-family: 'OSD', var(--font); font-size: 22px; letter-spacing: 2px; }
.style-vhs .ov-panel .btn.primary { background: #f2f6ff; color: #0a1aaa; box-shadow: none; }
.style-vhs .score-chip { background: rgba(0,0,0,.35); border: 0; border-radius: 0; box-shadow: none; font-family: 'OSD'; }
.style-vhs .score-chip b, .style-vhs .hud-timer b { font-family: 'OSD', var(--num); font-size: 38px; text-shadow: 2px 0 0 rgba(255,40,80,.7), -2px 0 0 rgba(40,220,255,.7); }
.style-vhs .score-chip .tag { border-radius: 0; font-family: 'OSD'; font-size: 20px; }
.style-vhs .hud-timer circle { fill: rgba(0,0,0,.35); stroke-linecap: butt; }
.style-vhs .hud-cue { font-family: 'OSD', var(--disp); background: rgba(10,26,170,.82); border: 2px solid #f2f6ff; border-radius: 0; letter-spacing: 2px; text-shadow: 2px 0 0 rgba(255,40,80,.6), -2px 0 0 rgba(40,220,255,.6); }
.style-vhs .hud-big b { font-family: 'OSD', var(--disp); -webkit-text-stroke: 0; color: #f2f6ff !important; text-shadow: 5px 0 0 rgba(255,40,80,.75), -5px 0 0 rgba(40,220,255,.75); letter-spacing: 4px; }
.style-vhs .hud-toast { font-family: 'OSD', var(--font); font-size: 22px; border-radius: 0; background: rgba(10,26,170,.85); border: 2px solid #f2f6ff; }
.style-vhs .pod-col { border-radius: 0; } .style-vhs .pod-name, .style-vhs .res-score { font-family: 'OSD', var(--num); }
.style-vhs .g-title { font-family: 'OSD', var(--disp); font-size: 26px; letter-spacing: 2px; }
.style-vhs .g-title::before { content: 'PLAY  '; color: #f2f6ff; opacity: .8; }
.style-vhs .ld { font-family: 'OSD', var(--font); } .style-vhs .ld-t h2 { font-family: 'OSD', var(--disp); text-shadow: 3px 0 0 rgba(255,40,80,.7), -3px 0 0 rgba(40,220,255,.7); }
.style-vhs .ld-bar { height: 20px; border-radius: 0; border: 2px solid #f2f6ff; background: transparent; } .style-vhs .ld-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, #f2f6ff 0 14px, transparent 14px 18px); box-shadow: none; } .style-vhs .ld-bar i::after { display: none; }
.style-vhs .ld-card { border-radius: 26px / 40px; box-shadow: 0 0 0 12px #2a2420, 0 0 0 14px #4a3f36, 0 30px 80px rgba(0,0,0,.6); }

/* ═════ 真人动漫：漫画分镜 + 集中线 ═════ */
.style-anime .countdown b { font-family: var(--disp); font-style: italic; font-size: min(40vh, 340px); color: #fff; -webkit-text-stroke: 7px #0b0b10; paint-order: stroke fill; text-shadow: 0 0 40px var(--ga), 10px 10px 0 var(--ga); transform: skewX(-10deg); animation: aniIn .75s cubic-bezier(.2,1.7,.4,1) both; }
.style-anime .countdown::before { content: ''; position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0 2.2deg, rgba(255,255,255,.55) 2.4deg 2.9deg, rgba(255,255,255,0) 3.1deg 7deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%); mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%); animation: speed .18s steps(2) infinite; pointer-events: none; }
.style-anime .countdown b.go { color: var(--ga2); background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; font-size: min(30vh, 260px); }
@keyframes aniIn { 0% { transform: skewX(-10deg) scale(3); opacity: 0; } 30% { transform: skewX(-10deg) scale(.92) translateX(-2%); opacity: 1; } 45% { transform: skewX(-10deg) translateX(2%); } 60%, 100% { transform: skewX(-10deg); } }
@keyframes speed { 50% { transform: rotate(3deg) scale(1.02); } }
.style-anime .ov-panel { background: #fbfbfb; color: #0b0b10; border: 5px solid #0b0b10; border-radius: 0; clip-path: polygon(0 3%, 100% 0, 98% 100%, 2% 97%); box-shadow: none; backdrop-filter: none; background-image: radial-gradient(circle, rgba(0,0,0,.1) 1px, transparent 1.4px); background-size: 6px 6px; }
.style-anime .ov-panel h2 { font-style: italic; transform: skewX(-8deg); color: #0b0b10; text-shadow: 4px 4px 0 var(--ga); font-size: clamp(34px, 4.6vw, 56px); }
.style-anime .ov-panel .muted, .style-anime .ov-panel .ht-go, .style-anime .results .res-head small { color: #4a4a58; }
.style-anime .howto li { background: #fff; border: 3px solid #0b0b10; border-radius: 0; color: #0b0b10; transform: skewX(-4deg); }
.style-anime .howto li > * { transform: skewX(4deg); }
.style-anime .howto li em { border-radius: 0; background: #0b0b10; color: #fff; font-style: italic; }
.style-anime .ov-panel ol b { color: #d9134a; }
.style-anime .ht-tag { background: #0b0b10; color: #fff; border-radius: 0; transform: skewX(-12deg); }
.style-anime .ht-bar { background: #ddd; border-radius: 0; } .style-anime .ht-bar i { background: #0b0b10; }
.style-anime .ov-panel .btn { border-radius: 0; border: 3px solid #0b0b10; background: #fff; color: #0b0b10; transform: skewX(-10deg); font-style: italic; }
.style-anime .ov-panel .btn.primary { background: #0b0b10; color: #fff; box-shadow: 5px 5px 0 var(--ga); }
.style-anime .join-slot { border-color: #0b0b10; border-radius: 0; } .style-anime .join-slot span { color: #4a4a58; } .style-anime .join-cam { border: 4px solid #0b0b10; border-radius: 0; }
.style-anime .pod-col { border-radius: 0; border: 4px solid #0b0b10; border-bottom: 0; } .style-anime .pod-name { -webkit-text-stroke: 2px #0b0b10; paint-order: stroke fill; font-style: italic; } .style-anime .pod-score { color: #0b0b10; } .style-anime .pod-title { background: #0b0b10; border-radius: 0; }
.style-anime .res-score { color: #fff; -webkit-text-stroke: 3px #0b0b10; paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ga); font-style: italic; } .style-anime .res-badge { border-radius: 0; transform: skewX(-12deg); }
.style-anime .score-chip { transform: skewX(-12deg); border-radius: 0; background: rgba(11,11,16,.85); border-width: 3px; box-shadow: 5px 5px 0 var(--c); }
.style-anime .score-chip > * { transform: skewX(12deg); } .style-anime .score-chip .tag { border-radius: 0; } .style-anime .score-chip b { font-style: italic; }
.style-anime .hud-cue { background: #fff; color: #0b0b10 !important; border: 4px solid #0b0b10; border-radius: 0; font-style: italic; box-shadow: 6px 6px 0 var(--ga); clip-path: polygon(0 6%, 100% 0, 99% 100%, 1% 94%); }
.style-anime .hud-big b { font-style: italic; color: #fff !important; -webkit-text-stroke: 4px #0b0b10; paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ga), 0 0 30px var(--ga); transform: skewX(-10deg); display: inline-block; }
.style-anime .hud-toast { background: #fff; color: #0b0b10; border: 3px solid #0b0b10; border-radius: 0; }
.style-anime .hud-timer circle { fill: #fff; } .style-anime .hud-timer .bg { stroke: #0b0b10; } .style-anime .hud-timer b { color: #0b0b10; font-style: italic; }
.style-anime .ld-t h2 { font-style: italic; transform: skewX(-8deg); text-shadow: 5px 5px 0 var(--ga); }
.style-anime .ld-card { border-radius: 0; box-shadow: 0 0 0 5px #fff, 0 0 0 10px #0b0b10, 0 30px 80px rgba(0,0,0,.6); clip-path: polygon(0 4%, 100% 0, 97% 100%, 3% 96%); }
.style-anime .ld-bar { border-radius: 0; height: 12px; transform: skewX(-20deg); } .style-anime .ld-bar i { border-radius: 0; }

/* 子皮肤：忍者（卷轴 + 朱红笔触） */
.skin-shinobi .countdown b { font-family: var(--brush); font-style: normal; font-weight: 700; color: #f6efe0; -webkit-text-stroke: 4px #1a0b06; text-shadow: 0 0 40px #ff6a1a, 8px 8px 0 #b3261e; transform: none; animation: brush .75s cubic-bezier(.2,.9,.3,1) both; }
.skin-shinobi .countdown::before { background: radial-gradient(ellipse 60% 28% at 50% 50%, rgba(179,38,30,.85), rgba(179,38,30,.0) 70%); -webkit-mask: none; mask: none; animation: none; inset: 0; }
.skin-shinobi .countdown b.go { color: #ffcf6b; }
.skin-shinobi .ov-panel { background-color: #efe3c6; clip-path: none; border: 0; border-top: 16px solid #5a2615; border-bottom: 16px solid #5a2615; border-radius: 4px; box-shadow: 0 0 0 1px #c9a46b, 0 30px 80px rgba(0,0,0,.6); background-image: none; }
.skin-shinobi .ov-panel h2 { font-family: var(--brush); font-style: normal; transform: none; letter-spacing: .25em; text-shadow: 3px 3px 0 rgba(179,38,30,.5); }
.skin-shinobi .howto li { transform: none; background: rgba(255,255,255,.4); border: 0; border-left: 5px solid #b3261e; } .skin-shinobi .howto li > * { transform: none; }
.skin-shinobi .howto li em { background: #b3261e; font-family: var(--brush); font-style: normal; border-radius: 50%; }
.skin-shinobi .ov-panel .btn { transform: none; font-family: var(--brush); font-style: normal; letter-spacing: .2em; border-color: #5a2615; }
.skin-shinobi .ov-panel .btn.primary { background: #b3261e; border-color: #5a2615; box-shadow: 4px 4px 0 #5a2615; }
.skin-shinobi .hud-cue { font-family: var(--brush); font-style: normal; background: #efe3c6; clip-path: none; border: 0; border-top: 6px solid #5a2615; border-bottom: 6px solid #5a2615; box-shadow: 0 10px 30px rgba(0,0,0,.4); letter-spacing: .1em; }
/* 子皮肤：赛亚人（金色气场） */
.skin-saiyan .countdown b { color: #fff6c2; -webkit-text-stroke: 6px #6b3a00; text-shadow: 0 0 20px #ffe14d, 0 0 60px #ffb300, 0 0 120px #ff8a00; }
.skin-saiyan .countdown::before { background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,214,77,0) 0 3deg, rgba(255,214,77,.6) 3.5deg 4.5deg, rgba(255,214,77,0) 5deg 9deg); }
.skin-saiyan .countdown b.go { color: #ffe14d; }
/* 子皮肤：宇宙（星辉细体） */
.skin-cosmic .countdown b { font-family: var(--serif); font-style: normal; font-weight: 300; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 20px var(--ga2), 0 0 60px var(--ga), 0 0 120px var(--ga); transform: none; letter-spacing: .1em; animation: cosmicIn .75s ease-out both; }
.skin-cosmic .countdown::before { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ga) 35%, transparent), transparent 45%); -webkit-mask: none; mask: none; animation: none; }
.skin-cosmic .countdown b.go { color: var(--ga2); font-size: min(22vh, 190px); }
@keyframes cosmicIn { from { opacity: 0; filter: blur(14px); transform: scale(1.4); letter-spacing: .6em; } }
.skin-cosmic .ov-panel { background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--ga) 30%, transparent), rgba(8,4,24,.92) 60%); color: #f3efff; border: 1px solid color-mix(in srgb, var(--ga2) 40%, transparent); border-radius: 28px; clip-path: none; background-image: none; box-shadow: 0 0 60px color-mix(in srgb, var(--ga) 30%, transparent); backdrop-filter: blur(18px); }
.skin-cosmic .ov-panel h2 { font-family: var(--serif); font-style: normal; font-weight: 400; transform: none; color: #fff; text-shadow: 0 0 24px var(--ga); letter-spacing: .2em; }
.skin-cosmic .ov-panel .muted, .skin-cosmic .ov-panel .ht-go, .skin-cosmic .results .res-head small { color: #b9b2d9; }
.skin-cosmic .howto li { transform: none; background: rgba(255,255,255,.05); color: #f3efff; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; } .skin-cosmic .howto li > * { transform: none; }
.skin-cosmic .howto li em { border-radius: 50%; background: transparent; border: 1px solid var(--ga2); color: var(--ga2); font-style: normal; }
.skin-cosmic .ov-panel ol b { color: var(--ga2); }
.skin-cosmic .ht-tag { transform: none; border-radius: 999px; background: rgba(255,255,255,.08); } .skin-cosmic .ht-bar i { background: var(--ga2); }
.skin-cosmic .ov-panel .btn { transform: none; font-style: normal; border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.skin-cosmic .ov-panel .btn.primary { background: linear-gradient(100deg, var(--ga2), var(--ga)); color: var(--ga-ink); box-shadow: 0 0 30px var(--ga); border: 0; }
.skin-cosmic .hud-cue { background: rgba(8,4,24,.6); color: #fff !important; border: 1px solid var(--ga2); border-radius: 999px; clip-path: none; box-shadow: 0 0 24px var(--ga); font-style: normal; }
.skin-cosmic .join-slot, .skin-cosmic .join-cam { border-radius: 16px; border-color: rgba(255,255,255,.2); }
.skin-cosmic .pod-score { color: #fff; } .skin-cosmic .res-score { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 40px var(--ga); font-style: normal; }

/* ═════ 写实转播：体育电视台包装 ═════ */
.style-real .countdown b { font-family: 'Broadcast', var(--num); font-weight: 700; font-size: min(30vh, 250px); color: #fff; background: linear-gradient(180deg, #13284d, #0a1428); padding: .02em .38em .06em; border-left: .14em solid var(--ga); text-shadow: none; box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 -.04em 0 rgba(255,255,255,.08); transform: skewX(-8deg); animation: wipe .75s cubic-bezier(.2,.9,.3,1) both; }
.style-real .countdown b.go { background: var(--ga); color: var(--ga-ink); -webkit-background-clip: border-box; background-clip: border-box; filter: none; border-left-color: #fff; letter-spacing: .06em; }
@keyframes wipe { 0% { clip-path: inset(0 100% 0 0); transform: skewX(-8deg) translateX(-12%); } 45% { clip-path: inset(0 0 0 0); transform: skewX(-8deg); } }
.style-real .ov-panel { background: linear-gradient(180deg, rgba(14,30,58,.95), rgba(7,14,30,.96)); border: 0; border-top: 6px solid var(--ga); border-radius: 4px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.style-real .ov-panel h2 { font-family: 'Broadcast', var(--disp); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.style-real .howto li { border-radius: 2px; background: rgba(255,255,255,.04); border-left: 4px solid var(--ga); }
.style-real .howto li em { border-radius: 2px; font-family: 'Broadcast', var(--num); font-weight: 700; }
.style-real .ht-tag { border-radius: 2px; background: var(--ga); color: var(--ga-ink); font-family: 'Broadcast', var(--font); text-transform: uppercase; letter-spacing: 2px; }
.style-real .ht-bar, .style-real .ht-bar i { border-radius: 0; height: 5px; }
.style-real .ov-panel .btn { border-radius: 3px; font-family: 'Broadcast', var(--font); letter-spacing: 1px; font-weight: 600; }
.style-real .ov-panel .btn.primary { box-shadow: none; }
.style-real .join-slot { border-radius: 4px; } .style-real .join-cam { border-radius: 4px; }
.style-real .pod-col { border-radius: 2px; background: linear-gradient(to bottom, var(--c), color-mix(in srgb, var(--c) 25%, #0a1428)); }
.style-real .pod-name, .style-real .pod-score, .style-real .res-score { font-family: 'Broadcast', var(--num); font-weight: 700; } .style-real .pod-name { text-shadow: none; } .style-real .pod-title { border-radius: 2px; }
.style-real .res-badge { border-radius: 2px; font-family: 'Broadcast', var(--disp); text-transform: uppercase; }
.style-real .score-chip { border: 0; border-radius: 3px; background: linear-gradient(180deg, #13284d, #0a1428); box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 -3px 0 var(--c); padding: 0 16px 0 0; overflow: hidden; }
.style-real .score-chip .tag { border-radius: 0; align-self: stretch; display: grid; place-items: center; padding: 8px 12px; font-family: 'Broadcast', var(--num); font-weight: 700; }
.style-real .score-chip b { font-family: 'Broadcast', var(--num); font-weight: 600; font-size: 30px; }
.style-real .hud-timer { width: 96px; height: 50px; } .style-real .hud-timer svg { display: none; }
.style-real .hud-timer b { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(180deg, #13284d, #0a1428); border-radius: 3px; border-bottom: 3px solid var(--ga); font-family: 'Broadcast', var(--num); font-weight: 600; font-size: 30px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.style-real .hud-cue { font-family: 'Broadcast', var(--disp); font-weight: 600; border-radius: 3px; border: 0; border-left: 6px solid var(--ga); background: linear-gradient(90deg, rgba(10,20,40,.92), rgba(19,40,77,.88)); letter-spacing: 1px; }
.style-real .hud-big b { font-family: 'Broadcast', var(--disp); font-weight: 700; -webkit-text-stroke: 0; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 6px 24px rgba(0,0,0,.6); }
.style-real .hud-toast { border-radius: 3px; border: 0; border-left: 5px solid var(--ga); background: rgba(10,20,40,.92); }
.style-real .hud-bar div { border-radius: 0; height: 10px; } .style-real .hud-bar i { box-shadow: none; }
.style-real .g-title { font-family: 'Broadcast', var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 4px 12px; background: rgba(10,20,40,.8); border-left: 4px solid var(--ga); border-radius: 2px; }
.style-real .ld-t h2 { font-family: 'Broadcast', var(--disp); font-weight: 700; } .style-real .ld-t small { font-family: 'Broadcast'; font-weight: 600; letter-spacing: 6px; }
.style-real .ld-card { border-radius: 4px; box-shadow: 0 30px 90px rgba(0,0,0,.6), inset 0 -6px 0 var(--ga); }
.style-real .ld-bar { height: 6px; border-radius: 0; } .style-real .ld-bar i { border-radius: 0; } .style-real .ld-bar i::after { display: none; }
/* 子皮肤：机甲驾驶舱 HUD */
.skin-hud .countdown b { font-family: 'Russo', var(--num); background: none; border: 0; transform: none; color: #9ff3ff; padding: .1em .5em; text-shadow: 0 0 24px #22d3ee; box-shadow: none; outline: 2px solid rgba(159,243,255,.5); outline-offset: .08em; clip-path: polygon(0 0, 18% 0, 18% 4%, 82% 4%, 82% 0, 100% 0, 100% 100%, 82% 100%, 82% 96%, 18% 96%, 18% 100%, 0 100%); animation: hudIn .75s steps(6) both; }
.skin-hud .countdown b.go { background: rgba(34,211,238,.15); color: #e7fdff; }
@keyframes hudIn { 0% { opacity: 0; transform: scaleY(.05); } 30% { opacity: 1; transform: scaleY(1); } 40% { opacity: .4; } 50%, 100% { opacity: 1; } }
.skin-hud .ov-panel { border-top: 0; border: 1px solid rgba(159,243,255,.45); background: linear-gradient(180deg, rgba(4,18,30,.92), rgba(2,10,18,.95)); clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.skin-hud .ov-panel h2 { color: #e7fdff; text-shadow: 0 0 16px #22d3ee; }
.style-toon .podium { border-bottom: 4px solid #15101f; }
.style-pixel .podium { border-bottom: 4px solid #fff; }
.style-ink .podium { border-bottom: 1px solid #1d1a17; }