* { box-sizing: border-box; }

:root {
  --scoreboard-text: #c4ccca;
  --scoreboard-text-muted: #8f9996;
  --scoreboard-text-strong: #d8dfdd;
  --media-radius: 6px;
  --scoreboard-font-latin: "Stratum2", "Stratum 2", "Stratum", "Bahnschrift SemiCondensed", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed";
  --scoreboard-font-cjk: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB";
  --scoreboard-font: var(--scoreboard-font-latin), var(--scoreboard-font-cjk), "Segoe UI", Arial, sans-serif;
  --scoreboard-weight: 600;
  --scoreboard-strong-weight: 700;
  --scoreboard-surface: radial-gradient(circle, rgba(225, 236, 238, .055) 0 .7px, transparent .8px) 0 0 / 3px 3px, linear-gradient(90deg, rgba(38, 40, 40, .78), rgba(54, 56, 53, .69) 56%, rgba(42, 43, 42, .64)), rgba(36, 38, 37, .72);
  --scoreboard-surface-shadow: inset 0 -18px 34px rgba(0, 0, 0, .14);
  --scoreboard-backdrop-filter: blur(8px) saturate(.82) brightness(.82);
  --demo-scale: 1.08;
}

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; color: var(--scoreboard-text); font-family: var(--scoreboard-font); font-weight: var(--scoreboard-weight); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; }

.hud-root { position: absolute; bottom: 0; left: 50%; width: 1920px; height: 1080px; transform: translateX(-50%) scale(var(--demo-scale)); transform-origin: 50% 100%; }
.panel { position: relative; width: 100%; height: 100%; --surface-width: 196px; --surface-height: 126px; --surface-radius: 10px; --result-content-height: 96px; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: scale(1.7); transform-origin: 50% 100%; }
.panel::before { content: ""; position: absolute; bottom: 0; left: 50%; z-index: 0; width: var(--surface-width); height: var(--surface-height); transform: translateX(-50%); border-radius: var(--surface-radius); background: var(--scoreboard-surface); box-shadow: var(--scoreboard-surface-shadow); backdrop-filter: var(--scoreboard-backdrop-filter); -webkit-backdrop-filter: var(--scoreboard-backdrop-filter); transition: width 220ms cubic-bezier(.22,1,.36,1), height 180ms ease, border-radius 180ms ease; pointer-events: none; }
.panel.popup-hidden::before, .panel.popup-hidden .topbar, .panel.popup-hidden .content { opacity: 0; visibility: hidden; animation: none; pointer-events: none; }
.panel.popup-hidden::before, .panel.popup-hidden .topbar { transform: translate(-50%, 100%); }
.panel.popup-enter::before { animation: popup-surface-in 180ms cubic-bezier(.22,1,.36,1); }
.panel.popup-enter .topbar { animation: popup-topbar-in 180ms cubic-bezier(.22,1,.36,1); }
@keyframes popup-surface-in { from { opacity: 0; transform: translate(-50%, 100%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popup-topbar-in { from { opacity: 0; transform: translate(-50%, 100%); } to { opacity: 1; transform: translate(-50%, 0); } }

.topbar { position: absolute; bottom: 0; left: 50%; z-index: 2; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: var(--surface-width); padding: 6px; transform: translateX(-50%); border: 0; background: transparent; transition: width 220ms cubic-bezier(.22,1,.36,1); }
.meta { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: visible; color: var(--scoreboard-text); font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 18px; white-space: nowrap; }
.meta span { flex: 0 0 auto; min-width: max-content; overflow: visible; }
.overlay-brand { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; line-height: 18px; }
.default-icon { display: block; width: 18px; height: 18px; transform: translateX(-4px); }
.default-icon.hidden, .utility-icon.hidden { display: none; }
.utility-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; mask: var(--utility-icon) center / contain no-repeat; -webkit-mask: var(--utility-icon) center / contain no-repeat; transform: translateY(-2px); }
.utility-smoke { --utility-icon: url("./assets/utility-icons/smoke.svg"); }
.utility-molotov { --utility-icon: url("./assets/utility-icons/molotov.svg"); }
.utility-he { --utility-icon: url("./assets/utility-icons/he.svg"); }
.utility-flash { --utility-icon: url("./assets/utility-icons/flash.svg"); }
.overlay-brand .lineup-route { display: flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 170px; color: var(--scoreboard-text); font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 18px; white-space: nowrap; opacity: 1; transition: opacity 120ms ease; transform: translateX(-4px); }
.lineup-route.hidden { display: none; }
.lineup-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lineup-arrow { color: var(--scoreboard-text-muted); font-weight: var(--scoreboard-weight); opacity: .72; transform: translateY(-.5px); }
.actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.status-tag { color: var(--scoreboard-text-strong); font-size: 12px; font-weight: var(--scoreboard-strong-weight); line-height: 18px; opacity: 1; transition: opacity 120ms ease; }
.status-tag.idle { color: var(--scoreboard-text-muted); }
.status-tag .hotkey-emphasis { color: var(--scoreboard-text-strong); font-weight: var(--scoreboard-strong-weight); }
.status-tag .throw-plus { margin: 0 4px; color: var(--scoreboard-text-muted); font-weight: var(--scoreboard-weight); opacity: .62; }
.status-tag.recording { color: #ff3b30; animation: rec-pulse 1.15s ease-in-out infinite; }
.status-tag.transcribing { color: var(--scoreboard-text-strong); animation: thinking-pulse 1.15s ease-in-out infinite; }
.status-tag.done { color: var(--scoreboard-text-strong); }
@keyframes rec-pulse { 0%,100% { color:#ff3b30; opacity:1; } 50% { color:#ff3b30; opacity:.62; } }
@keyframes thinking-pulse { 0%,100% { color:var(--scoreboard-text-strong); opacity:1; } 50% { color:var(--scoreboard-text-strong); opacity:.62; } }

.content { position: absolute; bottom: 30px; left: 50%; z-index: 1; width: var(--surface-width); height: var(--result-content-height); max-height: var(--result-content-height); opacity: 0; visibility: hidden; overflow: hidden; padding: 8px 6px 0; transform: translate(-50%,0); border: 0; background: transparent; pointer-events: none; transition: width 220ms cubic-bezier(.22,1,.36,1), height 180ms ease, max-height 180ms ease, opacity 140ms ease, visibility 0ms linear 180ms; }
.content.visible { opacity: 1; visibility: visible; transition: width 220ms cubic-bezier(.22,1,.36,1), height 180ms ease, max-height 180ms ease, opacity 140ms ease, visibility 0ms; }
.panel.quickbar-list .content { overflow: hidden; padding-top: 6px; }
.result { min-height: 0; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--scoreboard-text); font-family: inherit; font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 1.35; overflow: visible; overflow-wrap: anywhere; white-space: normal; }
.panel.quickbar-list .result { height: 100%; margin-top: 0; }
.message { margin: 0; color: var(--scoreboard-text); font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 18px; }
.message:empty { display: none; }

.lineup-browser-list { display: grid; gap: 4px; min-width: 0; }
.lineup-browser-tabs { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding-bottom: 1px; }
.lineup-browser-tab { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: 2px; padding: 2px 4px; border-radius: 3px; color: rgba(196,204,202,.44); font-size: 10px; line-height: 14px; text-align: center; white-space: nowrap; }
.lineup-browser-tab.selected { background: rgba(196,204,202,.13); color: var(--scoreboard-text-strong); }
.lineup-browser-tab-icon { flex: 0 0 11px; width: 11px; height: 13px; background: currentColor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; }
.lineup-browser-tab-icon.quick { mask-image: url("./assets/quick_fill.svg"); mask-size: 24px 13px; -webkit-mask-image: url("./assets/quick_fill.svg"); -webkit-mask-size: 24px 13px; }
.lineup-browser-tab-icon.saved { mask-image: url("./assets/saved_fill.svg"); -webkit-mask-image: url("./assets/saved_fill.svg"); }
.lineup-browser-tab-icon.must-know { mask-image: url("./assets/must_know_fill.svg"); mask-size: 16px 13px; -webkit-mask-image: url("./assets/must_know_fill.svg"); -webkit-mask-size: 16px 13px; }
.quickbar-rows { display: grid; gap: 0; color: var(--scoreboard-text); }
.quickbar-row { display: grid; grid-template-columns: 10px 15px minmax(0,1fr); align-items: center; gap: 0; min-width: 0; padding: 3px 0; border-radius: 4px; color: var(--scoreboard-text-muted); line-height: 16px; }
.quickbar-row.selected { background: rgba(196,204,202,.13); color: var(--scoreboard-text-strong); }
.quickbar-shortcut { display: grid; width: 10px; height: 16px; place-items: center; color: rgba(196,204,202,.86); font: inherit; font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 16px; white-space: nowrap; }
.quickbar-shortcut.selected-indicator::before { width: 5px; height: 7px; background: currentColor; content: ""; mask: url("./assets/selection_indicator.svg") center / contain no-repeat; transform: translateX(1px); -webkit-mask: url("./assets/selection_indicator.svg") center / contain no-repeat; }
.quickbar-row-utility { align-self: center; justify-self: center; width: 15px; height: 15px; color: var(--scoreboard-text); font-size: 9px; transform: translateY(-2px); }
.quickbar-route { min-width: 0; overflow: hidden; color: var(--scoreboard-text); font-size: 12px; font-weight: var(--scoreboard-weight); line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.lineup-browser-footer { display: flex; overflow: hidden; align-items: center; justify-content: space-between; gap: 8px; color: var(--scoreboard-text-muted); font-size: 9px; line-height: 12px; white-space: nowrap; }
.lineup-browser-footer-group { display: inline-flex; min-width: 0; align-items: center; gap: 2px; }
.lineup-browser-footer-group:last-child { margin-left: auto; }
.lineup-browser-footer-key { margin: 0 1px; padding: 0; border: 0; background: transparent; color: var(--scoreboard-text-strong); font: inherit; font-weight: var(--scoreboard-strong-weight); line-height: inherit; }
.lineup-browser-chevron { flex: 0 0 6px; width: 6px; height: 6px; overflow: visible; color: var(--scoreboard-text-strong); }
.lineup-browser-chevron path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }

.lineup-media { display: none; width: 100%; margin-top: 10px; gap: 6px; border-radius: var(--media-radius); overflow: hidden; }
.panel.has-video .content { padding: 6px 6px 0; overflow: hidden; }
.panel.has-video .message, .panel.has-video .result { display: none; margin-right: 14px; margin-left: 14px; }
.panel.has-video .lineup-media { width: 100%; margin: 0; }
.lineup-media.visible { display: grid; grid-template-columns: repeat(var(--media-columns,2),minmax(0,1fr)); }
.lineup-media-item, .lineup-media-runtime-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--media-radius); background: var(--scoreboard-surface); object-fit: contain; overflow: hidden; }
.lineup-media-runtime-frame { position: relative; }
.lineup-media-runtime-frame .lineup-media-item { height: 100%; aspect-ratio: auto; border-radius: 0; }
.media-placeholder { background: radial-gradient(circle at center, rgba(216,223,221,.035), transparent 40%), var(--scoreboard-surface); }
.runtime-crosshair { position: absolute; top: 50%; left: 50%; z-index: 2; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #00ff00; box-shadow: 0 0 0 1px rgba(0,0,0,.72), 0 0 4px rgba(0,255,0,.72); pointer-events: none; }

.panel.result-header-exiting .lineup-route, .panel.result-header-exiting .status-tag { opacity: 0; }
.panel.content-switching::before, .panel.content-switching .topbar, .panel.content-switching .content { transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }