/* 游戏内界面（HUD）的 5 种风格（2026-11-02）。在 game-hud.css 之后加载，只在 html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) 上生效
   （由 game-hud-themes.js 设置）。分数 .hud-left / 时间 .hud-center / 命中率 .hud-right 是主角；
   品牌、训练项目、退出、FPS、输入状态、连续命中是「小标签」，用 --chip-* 变量统一外观。
   枪皮计数器（#weaponCounterHud）不在这里改样式，保持它自己的款式。
   摆放位置在 game-hud-layout.js 的 themeDefaults 里（宽高变了会自动重新排）。 */

/* Remaining time as a number that can be animated: the ring and the dock bar glide continuously
   between the once-a-second updates instead of jumping. */
@property --hud-time-progress{syntax:"<number>";inherits:true;initial-value:1}
#game{transition:--hud-time-progress 1s linear}

/* ---------- shared (every style except 经典方块, which keeps the original panels) ---------- */
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-node>.hud-widget{font-family:var(--font-ui,"Microsoft YaHei",sans-serif);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled :is(.hud,.hud-fps,.streak) strong{font-family:var(--font-num,"Microsoft YaHei",sans-serif);font-variant-numeric:tabular-nums;letter-spacing:0}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-node>:is(.game-brand,.game-protocol,#exitButton,.hud-fps,.hud-info,.streak){min-height:0;border:var(--chip-border,0);border-radius:var(--chip-radius,8px);background:var(--chip-bg,rgba(16,20,26,.62));box-shadow:var(--chip-shadow,none);color:var(--chip-ink,#fff);text-shadow:var(--chip-text-shadow,none)}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-brand{height:32px;padding:0 12px;font-size:12px;font-weight:600;letter-spacing:.5px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-brand svg{color:var(--chip-accent,#3ee6c5)}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-protocol{height:28px;padding:0 12px;gap:8px;align-items:center}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-protocol small{color:var(--chip-muted,rgba(255,255,255,.65));font-size:11px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-protocol strong{color:var(--chip-ink,#fff);font-size:12.5px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .game-protocol .game-scene-label{color:var(--chip-muted,rgba(255,255,255,.65));font-size:11px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled #exitButton{height:32px;padding:0 14px;color:var(--chip-ink,#fff);font-size:12px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-fps{display:flex;align-items:baseline;gap:8px;min-width:0;padding:7px 12px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-fps span{color:var(--chip-muted,rgba(255,255,255,.65));font-size:11px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-fps strong{margin:0;color:var(--chip-ink,#fff);font-size:16px;font-weight:700;text-shadow:var(--chip-text-shadow,none)}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-fps small{margin:0;color:var(--chip-muted,rgba(255,255,255,.65));font-size:11px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-info{padding:4px 10px;color:var(--chip-muted,rgba(255,255,255,.7));font-size:11px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .streak{gap:8px;padding:5px 12px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .streak span{color:var(--chip-muted,rgba(255,255,255,.7));font-size:12px;letter-spacing:0}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .streak strong{color:var(--chip-accent,#3ee6c5);font-size:17px;font-weight:700}
/* The three main stats: label / value / small line. */
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-node>:is(.hud-left,.hud-center,.hud-right){width:auto;min-width:0;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none;text-shadow:none}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled :is(.hud-left,.hud-center,.hud-right) span{color:var(--stat-muted,rgba(255,255,255,.7));font-size:12px;letter-spacing:1px}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled :is(.hud-left,.hud-center,.hud-right,.streak,.hud-fps) span:before{content:none;display:none}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled :is(.hud-left,.hud-center,.hud-right) strong{margin:0;color:var(--stat-ink,#fff);font-weight:700;line-height:1.05}
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled :is(.hud-left,.hud-center,.hud-right) small{margin:0;color:var(--stat-muted,rgba(255,255,255,.7));font-size:11.5px;opacity:1}

/* =====================================================================
   1 · 斜切顶栏 — one dark angled bar flush with the top edge.
   ===================================================================== */
html[data-hud-theme="bar"]{--chip-bg:rgba(16,20,24,.72);--chip-radius:6px}
html[data-hud-theme="bar"] .game.hud-enabled .hud-node:is([data-hud-element="score"],[data-hud-element="time"],[data-hud-element="accuracy"]){filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
html[data-hud-theme="bar"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-content:center;justify-content:center;column-gap:10px;width:300px;height:58px;padding:0 34px;background:rgba(16,20,24,.86)}
/* 左右两格是平行四边形，内侧斜边和中间倒梯形时间块的斜边平行。 */
html[data-hud-theme="bar"] .game.hud-enabled .hud-node>.hud-left{clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%)}
html[data-hud-theme="bar"] .game.hud-enabled .hud-node>.hud-right{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,20px 100%)}
html[data-hud-theme="bar"] .game.hud-enabled :is(.hud-left,.hud-right) span{grid-row:1/3;align-self:center;font-size:13px;font-weight:700;letter-spacing:1.5px}
html[data-hud-theme="bar"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:30px}
html[data-hud-theme="bar"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:10.5px}
html[data-hud-theme="bar"] .game.hud-enabled .hud-node>.hud-center{position:relative;display:grid;place-items:center;width:150px;height:58px;padding:0 0 6px;background:linear-gradient(180deg,rgba(20,30,34,.94),rgba(16,62,62,.94));clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 100%,0 100%)}
html[data-hud-theme="bar"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="bar"] .game.hud-enabled .hud-center strong{font-size:32px}
html[data-hud-theme="bar"] .game.hud-enabled .hud-center:after{content:"";position:absolute;left:50%;bottom:7px;width:44px;height:3px;border-radius:2px;background:#3ee6c5;transform:translateX(-50%)}

/* =====================================================================
   2 · 极简悬浮 — no panels, soft-shadowed numbers only.
   ===================================================================== */
html[data-hud-theme="float"]{--chip-bg:transparent;--chip-text-shadow:0 0 2px rgba(0,0,0,.6),0 1px 8px rgba(0,0,0,.6);--stat-muted:rgba(255,255,255,.78);--chip-accent:#ffd166}
html[data-hud-theme="float"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-center,.hud-right){display:grid;justify-items:center;gap:2px;min-width:150px;padding:0;background:transparent;text-shadow:0 0 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.6)}
html[data-hud-theme="float"] .game.hud-enabled :is(.hud-left,.hud-center,.hud-right) span{font-size:11px;letter-spacing:3px}
html[data-hud-theme="float"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:40px;font-weight:600}
html[data-hud-theme="float"] .game.hud-enabled .hud-center strong{font-size:56px}
html[data-hud-theme="float"] .game.hud-enabled .streak{padding:2px 4px}
html[data-hud-theme="float"] .game.hud-enabled .streak strong{font-size:18px}

/* =====================================================================
   3 · 玻璃胶囊 — frosted capsules; time is the bright white one.
   ===================================================================== */
html[data-hud-theme="glass"]{--chip-bg:rgba(16,24,32,.4);--chip-radius:999px;--chip-border:1px solid rgba(255,255,255,.18);--chip-accent:#ffd166}
html[data-hud-theme="glass"] .game.hud-enabled .hud-node>:is(.game-brand,.game-protocol,#exitButton,.hud-fps,.hud-info,.streak){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-hud-theme="glass"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:flex;align-items:baseline;justify-content:center;gap:10px;min-width:220px;height:54px;padding:0 24px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(16,24,32,.42);box-shadow:0 12px 30px -14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);align-content:center;line-height:54px}
html[data-hud-theme="glass"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:26px}
html[data-hud-theme="glass"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:11px}
html[data-hud-theme="glass"] .game.hud-enabled .hud-node>.hud-center{display:grid;place-items:center;min-width:120px;height:54px;padding:0 24px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 12px 30px -14px rgba(0,0,0,.45)}
html[data-hud-theme="glass"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="glass"] .game.hud-enabled .hud-center strong{color:#1b2128;font-size:28px}

/* =====================================================================
   4 · 环形计时 — the time is a countdown ring; score and accuracy are its wings.
   ===================================================================== */
html[data-hud-theme="ring"]{--chip-bg:rgba(16,22,28,.7);--chip-radius:999px}
html[data-hud-theme="ring"] .game.hud-enabled .hud-node[data-hud-element="time"]{z-index:3;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
html[data-hud-theme="ring"] .game.hud-enabled .hud-node>.hud-center{position:relative;display:grid;place-items:center;width:112px;height:112px;padding:0;border-radius:50%;background:conic-gradient(#3ee6c5 calc(var(--hud-time-progress,1) * 360deg),rgba(255,255,255,.2) 0)}
html[data-hud-theme="ring"] .game.hud-enabled .hud-center:before{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(16,22,28,.92)}
html[data-hud-theme="ring"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="ring"] .game.hud-enabled .hud-center strong{position:relative;font-size:26px}
html[data-hud-theme="ring"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:grid;align-content:center;gap:1px;width:230px;height:66px;margin-top:23px!important;background:rgba(16,22,28,.8)}
html[data-hud-theme="ring"] .game.hud-enabled .hud-node>.hud-left{justify-items:end;padding:0 28px;border-radius:33px}
html[data-hud-theme="ring"] .game.hud-enabled .hud-node>.hud-right{justify-items:start;padding:0 28px;border-radius:33px}
html[data-hud-theme="ring"] .game.hud-enabled :is(.hud-left,.hud-right) span{font-size:11px;letter-spacing:1px}
html[data-hud-theme="ring"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:28px}
html[data-hud-theme="ring"] .game.hud-enabled .streak{background:#3ee6c5;color:#08201c}
html[data-hud-theme="ring"] .game.hud-enabled .streak :is(span,strong){color:#08201c}

/* =====================================================================
   5 · 底部信息栏 — the top stays clear; stats along the bottom like an ammo readout.
   ===================================================================== */
html[data-hud-theme="dock"]{--chip-bg:rgba(10,14,20,.45);--chip-text-shadow:0 1px 6px rgba(0,0,0,.5);--stat-muted:rgba(255,255,255,.72)}
html[data-hud-theme="dock"] .game.hud-enabled:not(.hud-editing) .range:after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:23;height:150px;background:linear-gradient(0deg,rgba(10,14,20,.62),rgba(10,14,20,0));pointer-events:none}
html[data-hud-theme="dock"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-center,.hud-right){display:grid;gap:2px;padding:0;background:transparent;text-shadow:0 2px 10px rgba(0,0,0,.45)}
html[data-hud-theme="dock"] .game.hud-enabled .hud-node>.hud-right{justify-items:end}
html[data-hud-theme="dock"] .game.hud-enabled :is(.hud-left,.hud-right) span{font-size:12px;letter-spacing:2px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-left strong{font-size:60px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-right strong{font-size:44px}
html[data-hud-theme="dock"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:12.5px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-node>.hud-center{position:relative;justify-items:center;width:360px;padding-bottom:14px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="dock"] .game.hud-enabled .hud-center strong{font-size:30px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-center:before,html[data-hud-theme="dock"] .game.hud-enabled .hud-center:after{content:"";position:absolute;left:0;bottom:0;height:5px;border-radius:3px}
html[data-hud-theme="dock"] .game.hud-enabled .hud-center:before{right:0;background:rgba(255,255,255,.22)}
html[data-hud-theme="dock"] .game.hud-enabled .hud-center:after{width:calc(var(--hud-time-progress,1) * 100%);background:#fff}
html[data-hud-theme="dock"] .game.hud-enabled .streak{background:transparent}

/* =====================================================================
   开局 3-2-1 倒数（2026-11-02）：每种风格一款，和该风格的时间块同一套造型。
   数字每跳一次 game-hud-themes.js 会重新加上 .cd-tick，动画时长 = 两次跳动的间隔 0.7s。
   用户要求数字本身不做弹跳 / 缩放 / 下落动画，只有进度条、圆环、扩散圈在动。
   带 #game 是为了压过 styles.css 里通用的 countdown-pop 动画。
   ===================================================================== */
@property --cd-sweep{syntax:"<number>";inherits:false;initial-value:1}
@keyframes cd-drain{from{--cd-sweep:1}to{--cd-sweep:0}}
@keyframes cd-bar-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes cd-ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
html[data-hud-theme] #game.hud-enabled .countdown-number{position:relative;animation:none}
html[data-hud-theme] #game.hud-enabled .countdown-number[data-cd-kind="text"]{font-size:30px!important}
html[data-hud-theme] #game.hud-enabled .countdown-number[data-cd-kind="text"]:is(:before,:after){display:none}

/* 1 · 斜切顶栏：倒梯形深色块 + 底部青色条从满到空 */
html[data-hud-theme="bar"] #game.hud-enabled .countdown-number{width:176px;height:86px;border:0;border-radius:0;background:linear-gradient(180deg,rgba(20,30,34,.94),rgba(16,62,62,.94));box-shadow:none;color:#fff;font:700 50px/1 var(--font-num,Bahnschrift,sans-serif);clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 100%,0 100%);filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));padding-bottom:8px}
html[data-hud-theme="bar"] #game.hud-enabled .countdown-number:after{content:"";position:absolute;left:50%;bottom:10px;width:64px;height:3px;margin-left:-32px;border-radius:2px;background:#3ee6c5;transform-origin:left center}
html[data-hud-theme="bar"] #game.hud-enabled .countdown-number.cd-tick:after{animation:cd-bar-drain .7s linear both}

/* 2 · 极简悬浮：没有底板的大号数字，上面一行「准备」 */
html[data-hud-theme="float"] #game.hud-enabled .countdown>.hud-node>div>span{display:block;margin-bottom:2px;color:rgba(255,255,255,.85);font-size:12px;letter-spacing:6px;text-indent:6px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
html[data-hud-theme="float"] #game.hud-enabled .countdown-number{width:auto;height:auto;min-width:120px;border:0;background:transparent;box-shadow:none;color:#fff;font:700 104px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:0 0 2px rgba(0,0,0,.55),0 4px 24px rgba(0,0,0,.55);-webkit-backdrop-filter:none;backdrop-filter:none}

/* 3 · 玻璃胶囊：亮白圆片 + 向外扩散的玻璃圈 */
html[data-hud-theme="glass"] #game.hud-enabled .countdown-number{width:112px;height:112px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 14px 34px -12px rgba(0,0,0,.5);color:#1b2128;font:700 46px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:none}
html[data-hud-theme="glass"] #game.hud-enabled .countdown-number:before{content:"";position:absolute;inset:-10px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:-1}
html[data-hud-theme="glass"] #game.hud-enabled .countdown-number.cd-tick:before{animation:cd-ripple .7s ease-out both}

/* 4 · 环形计时：和时间圆环同款，每跳一次圆环转一整圈走空 */
html[data-hud-theme="ring"] #game.hud-enabled .countdown-number{width:120px;height:120px;border:0;border-radius:50%;background:conic-gradient(#3ee6c5 calc(var(--cd-sweep) * 360deg),rgba(255,255,255,.2) 0);box-shadow:0 10px 24px rgba(0,0,0,.35);color:#fff;font:700 44px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:none;isolation:isolate}
html[data-hud-theme="ring"] #game.hud-enabled .countdown-number:before{content:"";position:absolute;inset:8px;z-index:-1;border-radius:50%;background:rgba(16,22,28,.92)}
html[data-hud-theme="ring"] #game.hud-enabled .countdown-number.cd-tick{animation:cd-drain .7s linear both}
html[data-hud-theme="ring"] #game.hud-enabled .countdown-number[data-cd-kind="text"]{background:rgba(16,22,28,.92)}

/* 5 · 底部信息栏：无底板的大数字，下面一条白色进度条走空 */
html[data-hud-theme="dock"] #game.hud-enabled .countdown-number{width:200px;height:auto;padding-bottom:16px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;font:700 84px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:0 2px 14px rgba(0,0,0,.5);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-hud-theme="dock"] #game.hud-enabled .countdown-number:before,html[data-hud-theme="dock"] #game.hud-enabled .countdown-number:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:3px}
html[data-hud-theme="dock"] #game.hud-enabled .countdown-number:before{background:rgba(255,255,255,.22)}
html[data-hud-theme="dock"] #game.hud-enabled .countdown-number:after{background:#fff;transform-origin:left center}
html[data-hud-theme="dock"] #game.hud-enabled .countdown-number.cd-tick:after{animation:cd-bar-drain .7s linear both}

/* 6 · 经典方块：保留原来的方块（跟随布局编辑器里的材质设置），加一条走空的底线 */
html[data-hud-theme="blocks"] #game.hud-enabled .countdown-number{overflow:hidden}
html[data-hud-theme="blocks"] #game.hud-enabled .countdown-number:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;opacity:.55;transform-origin:left center}
html[data-hud-theme="blocks"] #game.hud-enabled .countdown-number.cd-tick:after{animation:cd-bar-drain .7s linear both}

@media(prefers-reduced-motion:reduce){html[data-hud-theme] #game.hud-enabled .countdown-number.cd-tick,html[data-hud-theme] #game.hud-enabled .countdown-number.cd-tick:is(:before,:after){animation:none}}

/* =====================================================================
   累计击破计数器（2026-11-02 用户要求跟随风格）：计数器本来就用 .hud-counter-material 读 --hud-* 材质变量，
   这里按风格改这些变量（底色、边框、圆角、阴影、文字色），排版和 7 种计数器款式本身不动。
   经典方块不改，继续跟随布局编辑器里的材质设置。
   ===================================================================== */
html[data-hud-theme]:where(:not([data-hud-theme="blocks"])) .game.hud-enabled .hud-counter-material{--hud-ink:#fff;--hud-muted:rgba(255,255,255,.66);--hud-accent:#3ee6c5;--hud-rule:transparent;--hud-topline:transparent;--hud-divider:rgba(255,255,255,.2);--hud-backdrop:none;--hud-text-shadow:none}
html[data-hud-theme="bar"] .game.hud-enabled .hud-counter-material{--hud-surface:rgba(16,20,24,.86);--hud-radius:0;--hud-shadow:none;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);padding-left:26px!important;padding-right:24px!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
html[data-hud-theme="float"] .game.hud-enabled .hud-counter-material{--hud-surface:transparent;--hud-radius:0;--hud-shadow:none;--hud-divider:rgba(255,255,255,.35);--hud-text-shadow:0 0 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.55);--hud-accent:#ffd166}
html[data-hud-theme="glass"] .game.hud-enabled .hud-counter-material{--hud-surface:rgba(16,24,32,.42);--hud-radius:18px;--hud-rule:rgba(255,255,255,.28);--hud-topline:rgba(255,255,255,.28);--hud-shadow:0 12px 30px -14px rgba(0,0,0,.45);--hud-backdrop:blur(14px) saturate(1.4);--hud-accent:#ffd166}
html[data-hud-theme="ring"] .game.hud-enabled .hud-counter-material{--hud-surface:rgba(16,22,28,.8);--hud-radius:22px;--hud-shadow:0 8px 18px rgba(0,0,0,.35)}
html[data-hud-theme="dock"] .game.hud-enabled .hud-counter-material{--hud-surface:linear-gradient(90deg,rgba(10,14,20,.55),rgba(10,14,20,0));--hud-radius:0;--hud-shadow:none;--hud-divider:rgba(255,255,255,.3);--hud-text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ---------- settings: style picker ---------- */
.hud-theme-picker{margin:0 0 18px}
.hud-theme-picker>header{display:grid;gap:3px;margin-bottom:12px}
.hud-theme-picker>header strong{font-size:14px}
.hud-theme-picker>header small{color:#7d8893;font-size:12px}
.hud-theme-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hud-theme-options button{display:grid;gap:4px;padding:10px;border:1px solid #e3e9ed;border-radius:14px;background:#fff;color:#1b2128;font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.hud-theme-options button:hover{border-color:#bfe3ea}
.hud-theme-options button[aria-checked="true"]{border-color:#13b8cf;box-shadow:0 0 0 3px rgba(19,184,207,.15)}
.hud-theme-options strong{margin-top:4px;font-size:13px}
.hud-theme-options small{color:#8a949d;font-size:11px}
/* Tiny previews drawn with three bars. */
.hud-theme-thumb{position:relative;display:block;height:64px;overflow:hidden;border-radius:9px;background:linear-gradient(180deg,#3a3f57,#7d93a0 60%,#d9dfe3 61%)}
.hud-theme-thumb b{position:absolute;display:block}
.hud-theme-thumb[data-thumb="bar"] b{top:0;height:13px;background:rgba(16,20,24,.86);clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,4px 100%)}
.hud-theme-thumb[data-thumb="bar"] b:nth-child(1){left:12%;width:30%;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}.hud-theme-thumb[data-thumb="bar"] b:nth-child(2){left:42%;width:16%;background:#1c4a4a}.hud-theme-thumb[data-thumb="bar"] b:nth-child(3){left:58%;width:30%;clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,4px 100%)}
.hud-theme-thumb[data-thumb="float"] b{top:8px;height:7px;border-radius:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hud-theme-thumb[data-thumb="float"] b:nth-child(1){left:20%;width:14%}.hud-theme-thumb[data-thumb="float"] b:nth-child(2){left:41%;width:18%;height:10px;top:6px}.hud-theme-thumb[data-thumb="float"] b:nth-child(3){left:66%;width:14%}
.hud-theme-thumb[data-thumb="glass"] b{top:6px;height:11px;border-radius:999px;background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hud-theme-thumb[data-thumb="glass"] b:nth-child(1){left:18%;width:20%}.hud-theme-thumb[data-thumb="glass"] b:nth-child(2){left:40%;width:20%;background:#fff}.hud-theme-thumb[data-thumb="glass"] b:nth-child(3){left:62%;width:20%}
.hud-theme-thumb[data-thumb="ring"] b{top:8px;height:10px;background:rgba(16,22,28,.85)}
.hud-theme-thumb[data-thumb="ring"] b:nth-child(1){left:22%;width:24%;border-radius:5px 0 0 5px}.hud-theme-thumb[data-thumb="ring"] b:nth-child(3){left:54%;width:24%;border-radius:0 5px 5px 0}
.hud-theme-thumb[data-thumb="ring"] b:nth-child(2){left:calc(50% - 12px);top:3px;width:24px;height:24px;z-index:1;border-radius:50%;background:conic-gradient(#3ee6c5 0 60%,rgba(255,255,255,.3) 0);box-shadow:inset 0 0 0 3px transparent}
.hud-theme-thumb[data-thumb="dock"]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(0deg,rgba(10,14,20,.6),transparent)}
.hud-theme-thumb[data-thumb="dock"] b{z-index:1;bottom:6px;height:8px;border-radius:2px;background:#fff}
.hud-theme-thumb[data-thumb="dock"] b:nth-child(1){left:6%;width:22%;height:11px}.hud-theme-thumb[data-thumb="dock"] b:nth-child(2){left:38%;width:24%;height:3px;bottom:7px}.hud-theme-thumb[data-thumb="dock"] b:nth-child(3){right:6%;width:16%}
.hud-theme-thumb[data-thumb="blocks"] b{top:6px;height:13px;border-radius:3px;background:rgba(16,33,42,.55);box-shadow:inset 0 0 0 1px rgba(214,239,245,.4)}
.hud-theme-thumb[data-thumb="blocks"] b:nth-child(1){left:20%;width:19%}.hud-theme-thumb[data-thumb="blocks"] b:nth-child(2){left:40.5%;width:19%}.hud-theme-thumb[data-thumb="blocks"] b:nth-child(3){left:61%;width:19%}

/* =====================================================================
   2026-11-05 新增 5 种异形 / 几何风格（试用，用户选定后再删减）：
   7 缎带旗标 banner · 8 六边蜂巢 hex · 9 战术框线 bracket · 10 箭头指向 arrow（棱镜切片试过后删掉了）
   每种都有：三块主数据的造型、开局 3-2-1 的造型、计数器材质、风格选择里的缩略图。
   ===================================================================== */

/* 7 · 缎带旗标：左右两条蓝色缎带，外侧是箭头尖、内侧斜切；时间夹在两个尖括号中间，没有底板。 */
html[data-hud-theme="banner"]{--chip-bg:rgba(30,44,120,.78);--chip-radius:2px;--chip-accent:#9fb4ff;--stat-muted:rgba(214,224,255,.85)}
html[data-hud-theme="banner"] .game.hud-enabled .hud-node:is([data-hud-element="score"],[data-hud-element="accuracy"]){filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
html[data-hud-theme="banner"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:flex;align-items:center;gap:12px;width:300px;height:56px;padding:0 44px;background:linear-gradient(180deg,rgba(64,98,226,.62) 0%,rgba(42,68,182,.55) 55%,rgba(30,50,150,.52) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-hud-theme="banner"] .game.hud-enabled .hud-node>.hud-left{justify-content:flex-start;clip-path:polygon(24px 0,100% 0,calc(100% - 18px) 100%,24px 100%,0 50%)}
html[data-hud-theme="banner"] .game.hud-enabled .hud-node>.hud-right{justify-content:center;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,18px 100%)}
html[data-hud-theme="banner"] .game.hud-enabled :is(.hud-left,.hud-right) span{font-size:11px;font-weight:800;letter-spacing:1.5px}
html[data-hud-theme="banner"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:30px}
html[data-hud-theme="banner"] .game.hud-enabled :is(.hud-left,.hud-right) small{display:none}
html[data-hud-theme="banner"] .game.hud-enabled .hud-node>.hud-center{position:relative;display:grid;place-items:center;width:170px;height:56px;padding:0;background:transparent;text-shadow:0 2px 10px rgba(0,0,0,.55)}
html[data-hud-theme="banner"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="banner"] .game.hud-enabled .hud-center strong{font-size:32px}
html[data-hud-theme="banner"] .game.hud-enabled .hud-center:before,html[data-hud-theme="banner"] .game.hud-enabled .hud-center:after{content:"";position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border:solid #fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
html[data-hud-theme="banner"] .game.hud-enabled .hud-center:before{left:14px;border-width:0 0 3px 3px;transform:rotate(45deg)}
html[data-hud-theme="banner"] .game.hud-enabled .hud-center:after{right:14px;border-width:3px 3px 0 0;transform:rotate(45deg)}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number{width:200px;height:96px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;font:700 64px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:0 3px 14px rgba(0,0,0,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number:before,html[data-hud-theme="banner"] #game.hud-enabled .countdown-number:after{content:"";position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border:solid #fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number:before{left:16px;border-width:0 0 4px 4px;transform:rotate(45deg)}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number:after{right:16px;border-width:4px 4px 0 0;transform:rotate(45deg)}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number.cd-tick:before{animation:cd-chevron-left .7s cubic-bezier(.2,.8,.2,1) both}
html[data-hud-theme="banner"] #game.hud-enabled .countdown-number.cd-tick:after{animation:cd-chevron-right .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cd-chevron-left{from{opacity:.2;transform:translateX(-22px) rotate(45deg)}to{opacity:1;transform:rotate(45deg)}}
@keyframes cd-chevron-right{from{opacity:.2;transform:translateX(22px) rotate(45deg)}to{opacity:1;transform:rotate(45deg)}}
html[data-hud-theme="banner"] .game.hud-enabled .hud-counter-material{--hud-surface:linear-gradient(180deg,rgba(64,98,226,.62),rgba(30,50,150,.52));--hud-radius:0;--hud-shadow:none;--hud-accent:#9fb4ff;--hud-backdrop:blur(6px);clip-path:polygon(16px 0,100% 0,calc(100% - 12px) 100%,16px 100%,0 50%);padding-left:28px!important;padding-right:22px!important;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}

/* 8 · 六边蜂巢：两侧是拉长的六边形，时间是琥珀色的正六边形，里面的亮色随剩余时间往下退。 */
html[data-hud-theme="hex"]{--chip-bg:rgba(12,18,26,.74);--chip-radius:3px;--chip-accent:#ffb547}
html[data-hud-theme="hex"] .game.hud-enabled .hud-node:is([data-hud-element="score"],[data-hud-element="time"],[data-hud-element="accuracy"]){filter:drop-shadow(0 8px 16px rgba(0,0,0,.38))}
html[data-hud-theme="hex"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:grid;align-content:center;gap:1px;width:250px;height:60px;margin-top:16px!important;padding:0 34px;background:linear-gradient(180deg,rgba(18,26,36,.9),rgba(10,15,22,.9));clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%)}
html[data-hud-theme="hex"] .game.hud-enabled .hud-node>.hud-left{justify-items:end}
html[data-hud-theme="hex"] .game.hud-enabled .hud-node>.hud-right{justify-items:start}
html[data-hud-theme="hex"] .game.hud-enabled :is(.hud-left,.hud-right) span{color:#ffcf85;font-size:11px;letter-spacing:2px}
html[data-hud-theme="hex"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:27px}
html[data-hud-theme="hex"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:10.5px}
html[data-hud-theme="hex"] .game.hud-enabled .hud-node>.hud-center{position:relative;display:grid;place-items:center;width:106px;height:92px;padding:0;overflow:hidden;background:#3a2a10;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
html[data-hud-theme="hex"] .game.hud-enabled .hud-center:before,html[data-hud-theme="hex"] .game.hud-enabled .hud-center:after{content:"";position:absolute;left:0;top:-11px;width:calc(100% + 60px);height:calc(100% + 12px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath fill='%23ffb547' d='M0 6 C10 0 20 0 30 6 S50 12 60 6 V12 H0Z'/%3E%3C/svg%3E") 0 0/60px 12px repeat-x,linear-gradient(#ffb547,#ffb547) 0 11px/100% 100% no-repeat;transform:translate(0,calc((1 - var(--hud-time-progress,1)) * 100%));animation:hud-liquid 2.4s linear infinite;will-change:transform}
html[data-hud-theme="hex"] .game.hud-enabled .hud-center:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath fill='%23ffd27a' d='M0 6 C10 0 20 0 30 6 S50 12 60 6 V12 H0Z'/%3E%3C/svg%3E") 0 0/60px 12px repeat-x,linear-gradient(#ffd27a,#ffd27a) 0 11px/100% 100% no-repeat;opacity:.55;animation-duration:3.6s;animation-direction:reverse}
html[data-hud-theme="hex"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="hex"] .game.hud-enabled .hud-center strong{position:relative;z-index:1;color:#fff;font-size:25px;text-shadow:0 1px 3px rgba(40,24,0,.65)}
html[data-hud-theme="hex"] #game.hud-enabled .countdown-number{width:130px;height:114px;border:0;border-radius:0;background:linear-gradient(180deg,#ffd27a,#ffab3d);box-shadow:none;color:#1e1404;font:700 52px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:none;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
html[data-hud-theme="hex"] #game.hud-enabled .countdown-number:after{content:"";position:absolute;inset:0;background:rgba(30,20,4,.22);transform-origin:50% 0;transform:scaleY(0)}
html[data-hud-theme="hex"] #game.hud-enabled .countdown-number.cd-tick:after{animation:cd-hex-fill .7s linear both}
@keyframes cd-hex-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html[data-hud-theme="hex"] .game.hud-enabled .hud-counter-material{--hud-surface:linear-gradient(180deg,rgba(18,26,36,.9),rgba(10,15,22,.9));--hud-radius:0;--hud-shadow:none;--hud-accent:#ffb547;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);padding-left:24px!important;padding-right:24px!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.38))}


/* 9 · 战术框线：没有底板，只有四角的框线和一排刻度，像瞄准镜里的读数；时间下面一条绿线随时间走空。 */
html[data-hud-theme="bracket"]{--chip-bg:rgba(0,0,0,.32);--chip-radius:0;--chip-border:1px solid rgba(255,255,255,.22);--chip-accent:#9dff6a;--chip-text-shadow:0 1px 4px rgba(0,0,0,.6);--stat-muted:rgba(220,255,210,.82)}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-center,.hud-right){--corner:linear-gradient(#fff,#fff);display:grid;align-content:center;gap:2px;height:66px;padding:0 22px;background:var(--corner) left top/14px 2px no-repeat,var(--corner) left top/2px 14px no-repeat,var(--corner) right top/14px 2px no-repeat,var(--corner) right top/2px 14px no-repeat,var(--corner) left bottom/14px 2px no-repeat,var(--corner) left bottom/2px 14px no-repeat,var(--corner) right bottom/14px 2px no-repeat,var(--corner) right bottom/2px 14px no-repeat,rgba(0,0,0,.18);text-shadow:0 1px 6px rgba(0,0,0,.6)}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){width:230px}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-node>.hud-left{justify-items:end}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-node>.hud-right{justify-items:start}
html[data-hud-theme="bracket"] .game.hud-enabled :is(.hud-left,.hud-right) span{font-size:10.5px;font-weight:700;letter-spacing:3px}
html[data-hud-theme="bracket"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:30px;font-weight:600}
html[data-hud-theme="bracket"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:10.5px;letter-spacing:1px}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-node>.hud-center{position:relative;justify-items:center;width:150px;padding-bottom:6px}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-center strong{color:#9dff6a;font-size:32px;font-weight:600;letter-spacing:1px}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-center:before{content:"";position:absolute;left:24px;right:24px;bottom:9px;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 8px)}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-center:after{content:"";position:absolute;left:24px;right:24px;bottom:7px;height:2px;background:#9dff6a;transform-origin:left center;transform:scaleX(var(--hud-time-progress,1))}
html[data-hud-theme="bracket"] #game.hud-enabled .countdown-number{--corner:linear-gradient(#9dff6a,#9dff6a);width:150px;height:116px;border:0;border-radius:0;background:rgba(0,0,0,.22);box-shadow:none;color:#9dff6a;font:600 60px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:0 1px 8px rgba(0,0,0,.6);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-hud-theme="bracket"] #game.hud-enabled .countdown-number:before{content:"";position:absolute;inset:0;background:var(--corner) left top/22px 3px no-repeat,var(--corner) left top/3px 22px no-repeat,var(--corner) right top/22px 3px no-repeat,var(--corner) right top/3px 22px no-repeat,var(--corner) left bottom/22px 3px no-repeat,var(--corner) left bottom/3px 22px no-repeat,var(--corner) right bottom/22px 3px no-repeat,var(--corner) right bottom/3px 22px no-repeat}
html[data-hud-theme="bracket"] #game.hud-enabled .countdown-number.cd-tick:before{animation:cd-lock .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cd-lock{from{opacity:.25;transform:scale(1.35)}to{opacity:1;transform:none}}
html[data-hud-theme="bracket"] .game.hud-enabled .hud-counter-material{--hud-surface:rgba(0,0,0,.24);--hud-radius:0;--hud-shadow:none;--hud-accent:#9dff6a;--hud-topline:rgba(157,255,106,.55);--hud-text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* 10 · 箭头指向：分数和命中率是两支指向中间的箭头，时间是白色菱形，菱形里的珊瑚色随时间往上涨。 */
html[data-hud-theme="arrow"]{--chip-bg:rgba(18,24,34,.8);--chip-radius:3px;--chip-accent:#ff7a5c}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-node:is([data-hud-element="score"],[data-hud-element="time"],[data-hud-element="accuracy"]){filter:drop-shadow(0 8px 16px rgba(0,0,0,.38))}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-node>:is(.hud-left,.hud-right){display:grid;align-content:center;gap:1px;width:260px;height:58px;margin-top:20px!important;padding:0 44px;background:linear-gradient(90deg,rgba(18,24,34,.9) 70%,rgba(48,30,32,.9))}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-node>.hud-left{justify-items:start;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,0 100%,18px 50%)}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-node>.hud-right{justify-items:end;background:linear-gradient(270deg,rgba(18,24,34,.9) 70%,rgba(48,30,32,.9));clip-path:polygon(28px 0,100% 0,calc(100% - 18px) 50%,100% 100%,28px 100%,0 50%)}
html[data-hud-theme="arrow"] .game.hud-enabled :is(.hud-left,.hud-right) span{color:#ffb4a4;font-size:11px;letter-spacing:2px}
html[data-hud-theme="arrow"] .game.hud-enabled :is(.hud-left,.hud-right) strong{font-size:28px}
html[data-hud-theme="arrow"] .game.hud-enabled :is(.hud-left,.hud-right) small{font-size:10.5px}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-node>.hud-center{position:relative;display:grid;place-items:center;width:98px;height:98px;padding:0;overflow:hidden;background:#fff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-center:before,html[data-hud-theme="arrow"] .game.hud-enabled .hud-center:after{content:"";position:absolute;left:0;top:-11px;width:calc(100% + 60px);height:calc(100% + 12px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath fill='%23ff7a5c' d='M0 6 C10 0 20 0 30 6 S50 12 60 6 V12 H0Z'/%3E%3C/svg%3E") 0 0/60px 12px repeat-x,linear-gradient(#ff7a5c,#ff7a5c) 0 11px/100% 100% no-repeat;transform:translate(0,calc(var(--hud-time-progress,1) * 100%));animation:hud-liquid 2.4s linear infinite;will-change:transform}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-center:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath fill='%23ffa48c' d='M0 6 C10 0 20 0 30 6 S50 12 60 6 V12 H0Z'/%3E%3C/svg%3E") 0 0/60px 12px repeat-x,linear-gradient(#ffa48c,#ffa48c) 0 11px/100% 100% no-repeat;opacity:.55;animation-duration:3.6s;animation-direction:reverse}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-center span{display:none}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-center strong{position:relative;z-index:1;color:#1b2128;font-size:22px}
html[data-hud-theme="arrow"] #game.hud-enabled .countdown-number{width:124px;height:124px;border:0;border-radius:0;background:#fff;box-shadow:none;color:#1b2128;font:700 50px/1 var(--font-num,Bahnschrift,sans-serif);text-shadow:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 8px 16px rgba(0,0,0,.4));isolation:isolate}
html[data-hud-theme="arrow"] #game.hud-enabled .countdown-number:before{content:"";position:absolute;inset:0;z-index:-1;background:#ff7a5c;transform-origin:50% 100%;transform:scaleY(0)}
html[data-hud-theme="arrow"] #game.hud-enabled .countdown-number.cd-tick:before{animation:cd-hex-fill .7s linear both}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-counter-material{--hud-surface:rgba(18,24,34,.9);--hud-radius:0;--hud-shadow:none;--hud-accent:#ff7a5c;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);padding-right:30px!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.38))}

/* 新风格的缩略图 */
.hud-theme-thumb[data-thumb="banner"] b{top:6px;height:12px;background:linear-gradient(180deg,rgba(64,98,226,.7),rgba(30,50,150,.6))}
.hud-theme-thumb[data-thumb="banner"] b:nth-child(1){left:12%;width:30%;clip-path:polygon(5px 0,100% 0,calc(100% - 4px) 100%,5px 100%,0 50%)}
.hud-theme-thumb[data-thumb="banner"] b:nth-child(2){left:calc(50% - 9px);top:8px;width:18px;height:8px;background:none;border-left:2px solid #fff;border-right:2px solid #fff}
.hud-theme-thumb[data-thumb="banner"] b:nth-child(3){left:58%;width:30%;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,4px 100%)}
.hud-theme-thumb[data-thumb="hex"] b{top:9px;height:11px;background:rgba(14,20,28,.9);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%)}
.hud-theme-thumb[data-thumb="hex"] b:nth-child(1){left:16%;width:26%}.hud-theme-thumb[data-thumb="hex"] b:nth-child(3){left:58%;width:26%}
.hud-theme-thumb[data-thumb="hex"] b:nth-child(2){left:calc(50% - 11px);top:4px;width:22px;height:20px;background:#ffb547;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hud-theme-thumb[data-thumb="bracket"] b{top:6px;height:13px;border:1px solid transparent;background:linear-gradient(#fff,#fff) left top/4px 1px no-repeat,linear-gradient(#fff,#fff) left top/1px 4px no-repeat,linear-gradient(#fff,#fff) right bottom/4px 1px no-repeat,linear-gradient(#fff,#fff) right bottom/1px 4px no-repeat,rgba(0,0,0,.18)}
.hud-theme-thumb[data-thumb="bracket"] b:nth-child(1){left:16%;width:24%}.hud-theme-thumb[data-thumb="bracket"] b:nth-child(2){left:42%;width:16%;box-shadow:inset 0 -2px 0 #9dff6a}.hud-theme-thumb[data-thumb="bracket"] b:nth-child(3){left:60%;width:24%}
.hud-theme-thumb[data-thumb="arrow"] b{top:9px;height:11px;background:rgba(18,24,34,.9)}
.hud-theme-thumb[data-thumb="arrow"] b:nth-child(1){left:16%;width:27%;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 50%,calc(100% - 5px) 100%,0 100%,3px 50%)}
.hud-theme-thumb[data-thumb="arrow"] b:nth-child(3){left:57%;width:27%;clip-path:polygon(5px 0,100% 0,calc(100% - 3px) 50%,100% 100%,5px 100%,0 50%)}
.hud-theme-thumb[data-thumb="arrow"] b:nth-child(2){left:calc(50% - 10px);top:4px;width:20px;height:20px;background:#fff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media(prefers-reduced-motion:reduce){html[data-hud-theme] #game.hud-enabled .countdown-number.cd-tick:before,html[data-hud-theme] #game.hud-enabled .countdown-number.cd-tick:after{animation:none}}

/* 液体计时器的流动（六边蜂巢、箭头指向） */
@keyframes hud-liquid{from{transform:translate(0,var(--hud-liquid-level))}to{transform:translate(-60px,var(--hud-liquid-level))}}
html[data-hud-theme="hex"] .game.hud-enabled .hud-center{--hud-liquid-level:calc((1 - var(--hud-time-progress,1)) * 100%)}
html[data-hud-theme="arrow"] .game.hud-enabled .hud-center{--hud-liquid-level:calc(var(--hud-time-progress,1) * 100%)}
@media(prefers-reduced-motion:reduce){html[data-hud-theme="hex"] .game.hud-enabled .hud-center:before,html[data-hud-theme="hex"] .game.hud-enabled .hud-center:after,html[data-hud-theme="arrow"] .game.hud-enabled .hud-center:before,html[data-hud-theme="arrow"] .game.hud-enabled .hud-center:after{animation:none}}