@cs2dak/react 0.2.1 → 1.1.0

package/src/theme.css

@@ -151,6 +151,64 @@
   background: linear-gradient(180deg, rgba(255, 122, 33, 0.2), rgba(255, 122, 33, 0.08));
 }
 
+.dak-finding-panel {
+  display: grid;
+  gap: 9px;
+  padding: 14px;
+  border: 1px solid var(--dak-border-hi);
+  border-radius: 8px;
+  background: var(--dak-panel);
+}
+
+.dak-finding-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.dak-finding-head small,
+.dak-finding-meta,
+.dak-limit-note {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+}
+
+.dak-finding-head h3,
+.dak-finding-panel p {
+  margin: 0;
+}
+
+.dak-finding-head h3 {
+  margin-top: 3px;
+  font-size: 14px;
+}
+
+.dak-finding-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.dak-limit-note {
+  margin: 0;
+  line-height: 1.45;
+}
+
+.dak-limit-note b {
+  margin-right: 6px;
+  color: var(--dak-fg-mid);
+}
+
+.dak-leaderboard .dak-col-sortable {
+  cursor: pointer;
+}
+
+.dak-leaderboard .dak-col-sorted {
+  color: var(--dak-fg);
+  background: rgba(255, 122, 33, 0.08);
+}
+
 .dak-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.24fr) minmax(380px, 0.76fr);
@@ -209,6 +267,11 @@
   font-size: 13px;
 }
 
+.dak-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
 .dak-table th,
 .dak-table td {
   border-bottom: 1px solid var(--dak-border);
@@ -291,6 +354,213 @@
   border-radius: 50%;
 }
 
+/* ── 队伍对比（TeamComparisonPanel） ── */
+
+.dak-team-compare {
+  min-width: 0;
+}
+
+.dak-team-compare-grid {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.9fr) minmax(200px, 1.2fr) minmax(180px, 0.9fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.dak-team-side {
+  min-width: 0;
+}
+
+.dak-team-side h3 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.dak-team-side table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.dak-team-side th,
+.dak-team-side td {
+  padding: 5px 4px;
+  border-bottom: 1px solid var(--dak-border);
+  text-align: right;
+  white-space: nowrap;
+}
+
+.dak-team-side th:first-child,
+.dak-team-side td:first-child {
+  text-align: left;
+  min-width: 60px;
+}
+
+.dak-team-side th {
+  color: var(--dak-fg-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.dak-team-weapons,
+.dak-team-economy {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.dak-team-weapons span,
+.dak-team-economy span {
+  min-height: 22px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 7px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+}
+
+.dak-team-weapons b,
+.dak-team-economy b {
+  color: var(--dak-fg);
+}
+
+/* 雷达对比行 */
+.dak-team-radar {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.dak-team-radar-row {
+  display: grid;
+  grid-template-columns: minmax(64px, 0.5fr) 44px minmax(0, 1fr) 44px 44px;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.dak-team-radar-row span {
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-team-radar-row b {
+  text-align: right;
+  font-family: var(--dak-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.dak-team-radar-row i {
+  display: block;
+  height: 7px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--dak-accent), var(--dak-accent-b));
+  min-width: 4%;
+}
+
+.dak-team-radar-row em {
+  font-style: normal;
+  color: var(--dak-fg-dim);
+  text-align: right;
+  font-family: var(--dak-mono);
+  font-size: 11px;
+}
+
+/* 选队下拉（A vs B） */
+.dak-team-picker {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.dak-team-picker-vs {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+}
+
+.dak-team-select {
+  flex: 1;
+  min-width: 0;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg);
+  font: inherit;
+  font-size: 12px;
+}
+
+.dak-team-select:disabled {
+  opacity: 0.7;
+}
+
+/* 该队比赛列表（赛前侦察素材，可点跳回放） */
+.dak-team-matches {
+  display: grid;
+  gap: 4px;
+  margin-top: 10px;
+}
+
+.dak-team-match {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+}
+
+.dak-team-match:hover:not(:disabled) {
+  color: var(--dak-fg);
+  border-color: var(--dak-border-hi);
+  background: var(--dak-accent-soft);
+}
+
+.dak-team-match:disabled {
+  cursor: default;
+}
+
+.dak-team-match-opp {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-team-match small {
+  color: var(--dak-fg-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.dak-team-match-win {
+  color: var(--dak-pos, #4caf7d);
+  font-weight: 700;
+}
+
+.dak-team-match-loss {
+  color: var(--dak-neg, #d2685a);
+  font-weight: 700;
+}
+
 .dak-muted {
   color: var(--dak-fg-mid);
 }
@@ -378,6 +648,20 @@
   overflow: hidden;
 }
 
+.dak-radar-field-map {
+  background-color: #0f151d;
+}
+
+.dak-radar-field-map::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+}
+
 /* ── Heatmap wrap: vertical layout (filters / radar / tuning) ── */
 .dak-heatmap-wrap {
   display: flex;
@@ -421,6 +705,11 @@
 
 .dak-sf-chip:hover { color: var(--dak-fg); border-color: rgba(255,255,255,0.24); }
 
+.dak-sf-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
 .dak-sf-chip-active {
   color: var(--dak-fg);
   border-color: rgba(255,255,255,0.35);
@@ -453,6 +742,27 @@
   accent-color: var(--dak-accent);
 }
 
+.dak-radar-timebar {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.dak-radar-play-button {
+  width: 36px;
+  height: 36px;
+}
+
+.dak-radar-time-slider {
+  min-width: 0;
+}
+
+.dak-radar-time-meta {
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
 .dak-mode {
   display: inline-flex;
   align-items: center;
@@ -555,6 +865,19 @@
   background: rgba(255,255,255,0.10);
 }
 
+.dak-empty-state {
+  display: grid;
+  gap: 8px;
+  min-height: 220px;
+  align-content: center;
+  text-align: center;
+}
+
+.dak-empty-state h2,
+.dak-empty-state p {
+  margin: 0;
+}
+
 .dak-radar-schematic {
   position: absolute;
   inset: 0;
@@ -712,6 +1035,16 @@
   background: linear-gradient(to right, blue, cyan, lime, yellow, red);
 }
 
+.dak-legend-radar-field {
+  width: 44px;
+  height: 6px;
+  border-radius: 999px;
+}
+
+.dak-legend-radar-field {
+  background: linear-gradient(to right, rgb(34,47,86), rgb(48,91,145), rgb(48,145,176), rgb(103,188,146), rgb(220,174,82), rgb(245,128,86));
+}
+
 .dak-legend-warm { display: none; }
 
 .dak-qa {
@@ -986,27 +1319,104 @@
   height: 8px;
 }
 
-.dak-replay-stage {
-  position: relative;
-  min-height: 520px;
-  overflow: hidden;
+.dak-rr-explain {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+  padding: 12px;
   border: 1px solid var(--dak-border);
-  border-radius: 4px;
-  background:
-    linear-gradient(rgba(238, 243, 248, 0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(238, 243, 248, 0.04) 1px, transparent 1px),
-    radial-gradient(circle at 50% 50%, rgba(73, 182, 255, 0.08), transparent 48%),
-    #07090d;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+  border-radius: 8px;
+  background: var(--dak-panel);
 }
 
-.dak-replay-token {
-  position: absolute;
-  width: 26px;
-  height: 26px;
-  transform: translate(-50%, -50%);
+.dak-rr-explain-head,
+.dak-rr-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.dak-rr-explain-head span {
+  color: var(--dak-fg-mid);
+  font-size: 12px;
+}
+
+.dak-rr-explain-head small,
+.dak-rr-status span {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+}
+
+.dak-rr-metric-groups {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.dak-rr-metric-group h4 {
+  margin: 0 0 6px;
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dak-rr-metric-row {
+  display: grid;
+  grid-template-columns: minmax(86px, 1fr) minmax(72px, 1.4fr) 48px;
+  align-items: center;
+  gap: 8px;
+  min-height: 22px;
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+}
+
+.dak-rr-metric-track {
+  height: 5px;
+  overflow: hidden;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.dak-rr-metric-track i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--dak-accent), var(--dak-accent-b));
+}
+
+.dak-rr-metric-row b {
+  text-align: right;
+  color: var(--dak-fg);
+  font-size: 11px;
+}
+
+.dak-replay-stage {
+  position: relative;
+  /* 雷达图与回放坐标都以正方形为基准：强制 1:1 防止容器变窄时左右被裁剪 */
+  aspect-ratio: 1 / 1;
+  width: min(100%, calc(100vh - 240px));
+  min-width: 320px;
+  margin: 0 auto;
+  overflow: hidden;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background:
+    linear-gradient(rgba(238, 243, 248, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(238, 243, 248, 0.04) 1px, transparent 1px),
+    radial-gradient(circle at 50% 50%, rgba(73, 182, 255, 0.08), transparent 48%),
+    #07090d;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.dak-replay-token {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  transform: translate(-50%, -50%);
   display: grid;
   place-items: center;
   border: 2px solid rgba(238, 243, 248, 0.8);
@@ -1038,67 +1448,49 @@
   text-transform: uppercase;
 }
 
-.dak-workbench {
-  display: grid;
-  grid-template-columns: 238px minmax(0, 1fr);
-  gap: 14px;
-  align-items: start;
-}
-
-.dak-workbench-sidebar {
-  position: sticky;
-  top: 12px;
-  min-width: 0;
-}
-
-.dak-workbench-main {
-  min-width: 0;
-}
-
-.dak-tabs {
-  display: grid;
-  gap: 7px;
-  margin: 0;
-  overflow: visible;
+/* 比赛工作台：顶部横向分段导航 + 单一全宽主区（一次一个视图，无重叠） */
+.dak-ws-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid var(--dak-border);
+  border-radius: 10px;
+  background: var(--dak-panel);
 }
 
-.dak-tab {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr);
-  grid-template-areas:
-    "icon label"
-    "icon detail";
+.dak-ws-navtab {
+  display: inline-flex;
   align-items: center;
-  gap: 1px 9px;
-  min-height: 54px;
-  padding: 8px 10px;
-  text-align: left;
+  gap: 6px;
+  padding: 7px 14px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--dak-fg-dim);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
 }
 
-.dak-tab svg {
-  grid-area: icon;
+.dak-ws-navtab svg {
+  flex: 0 0 auto;
 }
 
-.dak-tab span {
-  grid-area: label;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dak-ws-navtab:hover {
   color: var(--dak-fg);
-  font-weight: 800;
+  background: var(--dak-bg-subtle);
+}
+
+.dak-ws-navtab-active {
+  color: var(--dak-accent);
+  border-color: var(--dak-accent);
+  background: var(--dak-accent-soft, rgba(47, 224, 168, 0.08));
 }
 
-.dak-tab small {
-  grid-area: detail;
+.dak-ws-main {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dak-fg-dim);
-  font-size: 10px;
-  font-family: var(--dak-mono);
 }
 
 .dak-tab:hover,
@@ -1229,493 +1621,1546 @@
 
 .dak-replay-layout {
   display: grid;
-  grid-template-columns: 300px minmax(0, 1fr) 260px;
+  grid-template-columns: minmax(210px, 260px) minmax(520px, 1fr) minmax(210px, 260px);
+  grid-template-areas:
+    "controls controls controls"
+    "roster-left stage roster-right";
   gap: 14px;
   align-items: start;
 }
 
-.dak-playback {
+.dak-replay-controlbar {
+  grid-area: controls;
   display: grid;
-  grid-template-columns: 42px 34px minmax(0, 1fr) 34px;
-  gap: 8px;
+  grid-template-columns: 270px minmax(360px, 1fr) auto;
+  gap: 12px;
   align-items: center;
-  margin: 14px 0 10px;
-}
-
-.dak-play-button,
-.dak-icon-button {
-  display: inline-grid;
-  place-items: center;
+  padding: 10px;
   border: 1px solid var(--dak-border);
   border-radius: 4px;
-  cursor: pointer;
-  color: var(--dak-fg);
-}
-
-.dak-play-button {
-  width: 42px;
-  height: 42px;
-  background: var(--dak-accent);
-  border-color: rgba(255, 122, 33, 0.78);
-}
-
-.dak-icon-button {
-  width: 34px;
-  height: 34px;
-  background: var(--dak-bg-subtle);
+  background: linear-gradient(180deg, rgba(238, 243, 248, 0.035), transparent), var(--dak-panel);
 }
 
-.dak-scrubber {
+.dak-replay-round-nav {
   min-width: 0;
-  accent-color: var(--dak-accent);
-  cursor: pointer;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
 }
 
-.dak-speed-group {
+.dak-round-select-label {
+  min-width: 0;
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
-  margin-bottom: 12px;
+  gap: 4px;
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+  font-size: 10px;
+  text-transform: uppercase;
 }
 
-.dak-speed {
-  min-height: 30px;
+.dak-round-select {
+  width: 100%;
+  min-width: 0;
+  height: 34px;
+  padding: 0 9px;
   border: 1px solid var(--dak-border);
   border-radius: 4px;
   background: var(--dak-bg-subtle);
-  color: var(--dak-fg-mid);
-  cursor: pointer;
+  color: var(--dak-fg);
   font: inherit;
   font-family: var(--dak-mono);
-  font-size: 12px;
 }
 
-.dak-speed-active {
-  color: var(--dak-fg);
-  border-color: rgba(73, 182, 255, 0.62);
-  background: rgba(73, 182, 255, 0.13);
+.dak-replay-togglebar {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) auto auto;
+  gap: 10px;
+  align-items: center;
 }
 
-.dak-replay-meta {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
+.dak-replay-statusline {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  color: var(--dak-fg-mid);
+  font-family: var(--dak-mono);
+  font-size: 11px;
 }
 
-.dak-replay-gridlines {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(rgba(238, 243, 248, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(238, 243, 248, 0.05) 1px, transparent 1px);
-  background-size: 48px 48px;
+.dak-replay-clock {
+  min-width: 104px;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: baseline;
+  gap: 8px;
+  padding: 5px 8px;
+  border: 1px solid var(--dak-border-hi);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
 }
 
-.dak-replay-token {
-  transition: left 80ms linear, top 80ms linear, opacity 120ms ease;
+.dak-replay-clock span {
+  color: var(--dak-fg-mid);
+  font-family: var(--dak-font);
+  font-size: 10px;
 }
 
-.dak-replay-token::after {
-  content: "";
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  width: 2px;
-  height: 7px;
-  background: rgba(238, 243, 248, 0.9);
-  transform: translateX(-50%);
+.dak-replay-clock strong {
+  color: var(--dak-fg);
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
 }
 
-.dak-replay-token-dead {
-  opacity: 0.28;
-  filter: grayscale(1);
+.dak-replay-clock-bomb strong {
+  color: var(--dak-danger);
 }
 
-.dak-replay-token-flashed {
-  box-shadow: 0 0 0 3px rgba(255, 198, 77, 0.45), 0 8px 18px rgba(0, 0, 0, 0.38);
+.dak-replay-clock-round-end strong {
+  color: var(--dak-warn);
 }
 
-.dak-frame-player-list {
-  display: grid;
-  gap: 7px;
-  max-height: 620px;
-  overflow: auto;
+.dak-replay-techline {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
 }
 
-.dak-frame-player-row {
-  display: grid;
-  grid-template-columns: 10px 18px minmax(0, 1fr) 52px;
-  gap: 8px;
+.dak-replay-techline span {
+  min-height: 22px;
+  display: inline-flex;
   align-items: center;
-  padding: 8px 9px;
+  padding: 0 7px;
   border: 1px solid var(--dak-border);
-  border-radius: 4px;
+  border-radius: 3px;
   background: var(--dak-bg-subtle);
-  font-size: 12px;
+  white-space: nowrap;
 }
 
-.dak-frame-player-name,
-.dak-frame-player-row small {
+.dak-replay-stage-panel {
+  grid-area: stage;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.dak-frame-player-num {
-  font-family: var(--dak-mono);
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--dak-fg-dim);
-  text-align: center;
+.dak-replay-roster-panel {
+  min-width: 0;
 }
 
-.dak-frame-player-row small {
-  grid-column: 2 / 5;
-  color: var(--dak-fg-dim);
-  font-family: var(--dak-mono);
+.dak-replay-roster-left {
+  grid-area: roster-left;
 }
 
-.dak-frame-player-row-dead {
-  opacity: 0.38;
+.dak-replay-roster-right {
+  grid-area: roster-right;
 }
 
-.dak-hp-bar-wrap {
-  height: 6px;
-  background: rgba(238, 243, 248, 0.08);
-  border-radius: 3px;
-  overflow: hidden;
-}
+.dak-replay-stage-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: var(--dak-fg-mid);
+  font-family: var(--dak-mono);
+  font-size: 12px;
+}
 
-.dak-hp-bar {
-  height: 100%;
-  border-radius: 3px;
-  transition: width 80ms linear, background 200ms ease;
+.dak-replay-stage-head span {
+  color: var(--dak-fg);
+  font-weight: 800;
 }
 
-.dak-team-dot-teamA {
+.dak-playback {
+  display: grid;
+  grid-template-columns: 42px 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+}
+
+.dak-play-button,
+.dak-icon-button {
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--dak-fg);
+}
+
+.dak-play-button {
+  width: 42px;
+  height: 42px;
   background: var(--dak-accent);
+  border-color: rgba(255, 122, 33, 0.78);
 }
 
-.dak-team-dot-teamB {
-  background: var(--dak-accent-b);
+.dak-icon-button {
+  width: 34px;
+  height: 34px;
+  background: var(--dak-bg-subtle);
 }
 
-.dak-player-roundfacts {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 10px;
-  margin-top: 14px;
-  max-height: 560px;
-  overflow: auto;
+.dak-icon-button:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
 }
 
-.dak-player-round-summary {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
-  margin: 12px 0;
+.dak-scrubber {
+  min-width: 0;
+  accent-color: var(--dak-accent);
+  cursor: pointer;
 }
 
-.dak-player-round-card {
+/* v0.2：scrubber 上方的事件锚点（首杀/击杀/下包/拆包），点击跳帧 */
+.dak-scrubber-wrap {
+  position: relative;
+  flex: 1;
   min-width: 0;
-  display: grid;
-  gap: 9px;
-  padding: 11px;
-  border: 1px solid var(--dak-border);
-  border-radius: 4px;
-  background:
-    linear-gradient(180deg, rgba(73, 182, 255, 0.06), transparent 42%),
-    var(--dak-bg-subtle);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
-.dak-player-round-head {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
+.dak-scrubber-wrap .dak-scrubber {
+  width: 100%;
 }
 
-.dak-player-round-head span:nth-child(2) {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--dak-fg-mid);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
+.dak-scrubber-anchors {
+  position: relative;
+  height: 10px;
 }
 
-.dak-player-round-meta,
-.dak-player-round-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+.dak-scrubber-anchor {
+  position: absolute;
+  top: 0;
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  cursor: pointer;
+  background: var(--dak-text-dim);
 }
 
-.dak-player-round-meta span,
-.dak-player-round-tags span {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  padding: 0 7px;
+.dak-scrubber-anchor-firstkill { background: var(--dak-ok); }
+.dak-scrubber-anchor-kill { background: var(--dak-danger); }
+.dak-scrubber-anchor-bomb { background: var(--dak-warn); }
+.dak-scrubber-anchor-defuse { background: #4db8ff; }
+
+/* v0.3：比赛报告导出按钮 */
+.dak-report-button {
+  margin-top: 8px;
+  background: transparent;
   border: 1px solid var(--dak-border);
-  border-radius: 3px;
-  background: rgba(9, 11, 15, 0.38);
-  color: var(--dak-fg-mid);
-  font-size: 11px;
+  border-radius: 8px;
+  color: var(--dak-text-dim, #8b97a5);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
 }
 
-.dak-player-round-tags span {
+.dak-report-button:hover {
+  border-color: var(--dak-accent);
   color: var(--dak-accent);
-  border-color: rgba(255, 122, 33, 0.26);
-  background: rgba(255, 122, 33, 0.08);
 }
 
-.dak-economy-legend {
+/* v0.2：回合筛选器 */
+.dak-round-filterbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px 12px;
-  margin: 10px 0;
-  color: var(--dak-fg-mid);
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.dak-round-filter-select {
+  background: var(--dak-bg-subtle);
+  color: var(--dak-text);
+  border: 1px solid var(--dak-border);
+  border-radius: 8px;
+  padding: 4px 8px;
   font-size: 12px;
 }
 
-.dak-economy-legend span {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
+/* v0.2：统计跳回放的可点击行/卡片 */
+.dak-timeline-row-link,
+.dak-player-round-card-link {
+  cursor: pointer;
 }
 
-.dak-economy-legend i {
-  width: 12px;
-  height: 12px;
-  display: block;
-  border: 1px solid var(--dak-border);
-  border-radius: 3px;
+.dak-timeline-row-link:hover,
+.dak-player-round-card-link:hover {
+  background: rgba(47, 224, 168, 0.08);
 }
 
-.dak-economy-rounds {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 7px;
-  margin-top: 10px;
+/* v0.2：走位轨迹与击杀连线图层 */
+.dak-replay-playertrace {
+  fill: none;
+  stroke-width: 0.35;
+  stroke-linejoin: round;
+  opacity: 0.55;
 }
 
-.dak-economy-round {
+.dak-replay-playertrace-teamA { stroke: var(--dak-team-a, #4db8ff); }
+.dak-replay-playertrace-teamB { stroke: var(--dak-team-b, #ff7a21); }
+
+.dak-replay-killline {
+  stroke: rgba(255, 92, 92, 0.85);
+  stroke-width: 0.3;
+  stroke-dasharray: 1.4 0.9;
+}
+
+.dak-replay-killline-victim {
+  fill: rgba(255, 92, 92, 0.9);
+}
+
+.dak-speed-group {
   display: grid;
-  gap: 3px;
-  padding: 8px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.dak-speed {
+  min-height: 30px;
   border: 1px solid var(--dak-border);
   border-radius: 4px;
   background: var(--dak-bg-subtle);
-  font-size: 11px;
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  font: inherit;
+  font-family: var(--dak-mono);
+  font-size: 12px;
 }
 
-.dak-economy-round b {
+.dak-speed-active {
   color: var(--dak-fg);
-  font-family: var(--dak-mono);
+  border-color: rgba(73, 182, 255, 0.62);
+  background: rgba(73, 182, 255, 0.13);
 }
 
-.dak-economy-round span {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--dak-fg-dim);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dak-replay-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(70px, 1fr));
+  gap: 6px;
 }
 
-.dak-economy-round .dak-economy-winner {
-  color: var(--dak-ok);
+.dak-replay-gridlines {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(238, 243, 248, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(238, 243, 248, 0.05) 1px, transparent 1px);
+  background-size: 48px 48px;
 }
 
-.dak-economy-round-upset {
-  border-color: rgba(255, 198, 77, 0.4);
-  background: linear-gradient(135deg, rgba(255, 198, 77, 0.07), var(--dak-bg-subtle));
+.dak-replay-token {
+  transition: left 80ms linear, top 80ms linear, opacity 120ms ease;
 }
 
-.dak-economy-upsets {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  margin: 8px 0 4px;
+.dak-replay-token::after {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  width: 2px;
+  height: 7px;
+  background: rgba(238, 243, 248, 0.9);
+  transform: translateX(-50%);
 }
 
-.dak-upset-chip {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  padding: 0 8px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid transparent;
+.dak-replay-token-dead {
+  opacity: 0.28;
+  filter: grayscale(1);
 }
 
-.dak-upset-chip-eco   { background: rgba(255,84,114,0.15); color: var(--dak-danger); border-color: rgba(255,84,114,0.3); }
-.dak-upset-chip-semi  { background: rgba(73,182,255,0.13); color: var(--dak-accent-b); border-color: rgba(73,182,255,0.28); }
-.dak-upset-chip-force { background: rgba(255,122,33,0.13); color: var(--dak-accent); border-color: rgba(255,122,33,0.28); }
+/* 双层地图：另一层的选手以幽灵态显示，可感知存在但不干扰当前层阅读 */
+.dak-replay-token-offlevel {
+  opacity: 0.22;
+  filter: grayscale(0.65);
+}
 
-.dak-upset-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 5px;
-  border-radius: 2px;
-  font-size: 10px;
-  font-weight: 800;
-  white-space: nowrap;
+.dak-replay-token-flashed {
+  box-shadow: 0 0 0 3px rgba(255, 198, 77, 0.45), 0 8px 18px rgba(0, 0, 0, 0.38);
 }
 
-.dak-upset-badge-eco   { background: rgba(255,84,114,0.18); color: var(--dak-danger); }
-.dak-upset-badge-semi  { background: rgba(73,182,255,0.16); color: var(--dak-accent-b); }
-.dak-upset-badge-force { background: rgba(255,122,33,0.16); color: var(--dak-accent); }
+.dak-frame-player-list {
+  display: grid;
+  gap: 5px;
+}
 
-/* ── Kill feed overlay ──────────────────────────────────────────────────────── */
+.dak-roster-board {
+  display: grid;
+  gap: 9px;
+  padding: 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, rgba(238, 243, 248, 0.035), transparent 48%),
+    var(--dak-panel);
+}
 
-.dak-killfeed {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 5;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  pointer-events: none;
+.dak-roster-team {
   min-width: 0;
-  max-width: 260px;
+  display: grid;
+  gap: 6px;
 }
 
-.dak-killfeed-row {
-  display: flex;
+.dak-roster-team-head {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  gap: 7px;
   align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
-  background: rgba(9, 11, 15, 0.78);
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.dak-roster-team-head b {
+  color: var(--dak-fg);
+  font-size: 12px;
+}
+
+.dak-roster-team-head small {
+  color: var(--dak-fg-dim);
+}
+
+.dak-frame-player-row {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-content: center;
+  gap: 6px 10px;
+  /* min-height 预留「名字 + 2 行 loadout + 血条」的空间：
+     逐帧道具增减时高度稳定（不跳动），罕见超长 loadout 才轻微增高，信息始终完整显示 */
+  min-height: 82px;
+  padding: 10px 12px;
   border: 1px solid var(--dak-border);
-  border-radius: 3px;
-  font-size: 11px;
-  white-space: nowrap;
-  overflow: hidden;
+  border-radius: 6px;
+  background: var(--dak-bg-subtle);
+  font-size: 12px;
 }
 
-.dak-killfeed-name {
+.dak-frame-player-row .dak-frame-player-num {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  align-self: center;
+}
+
+.dak-frame-player-row .dak-frame-player-name {
+  grid-column: 2;
+  grid-row: 1;
   font-weight: 700;
-  max-width: 80px;
+  color: var(--dak-fg);
+}
+
+.dak-frame-player-row .dak-frame-loadout {
+  grid-column: 2;
+  grid-row: 2;
+  /* 预留 2 行高度：常见 loadout 不会让卡片忽高忽低 */
+  min-height: 32px;
+  align-content: flex-start;
+}
+
+.dak-frame-player-row .dak-frame-weapon {
+  grid-column: 2;
+  grid-row: 2;
+  min-height: 32px;
+}
+
+.dak-frame-player-row .dak-hp-bar-wrap {
+  grid-column: 2;
+  grid-row: 3;
+  width: 100%;
+  align-self: center;
+}
+
+.dak-frame-player-name,
+.dak-frame-player-row small {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-shrink: 0;
+  white-space: nowrap;
 }
 
-.dak-killfeed-name-teamA { color: var(--dak-accent); }
-.dak-killfeed-name-teamB { color: var(--dak-accent-b); }
-.dak-killfeed-name-none  { color: var(--dak-fg-dim); }
+.dak-frame-player-num {
+  font-family: var(--dak-mono);
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--dak-fg-dim);
+  text-align: center;
+}
 
-.dak-killfeed-weapon {
+.dak-frame-weapon {
+  display: block;
   color: var(--dak-fg-dim);
   font-family: var(--dak-mono);
-  font-size: 10px;
-  flex-shrink: 0;
+  font-size: 11px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.dak-killfeed-victim {
-  color: var(--dak-fg-mid);
+.dak-frame-loadout {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
   min-width: 0;
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+  font-size: 10px;
+}
+
+.dak-frame-loadout span {
+  flex: 0 0 auto;
+  max-width: 92px;
   overflow: hidden;
+  padding: 1px 5px;
+  border: 1px solid rgba(238, 243, 248, 0.11);
+  border-radius: 3px;
+  background: rgba(9, 11, 15, 0.34);
   text-overflow: ellipsis;
-  flex: 1;
+  white-space: nowrap;
 }
 
-.dak-killfeed-badges {
+.dak-frame-loadout .dak-frame-primary {
+  color: var(--dak-fg);
+  border-color: rgba(73, 182, 255, 0.28);
+  background: rgba(73, 182, 255, 0.09);
+}
+
+.dak-frame-loadout .dak-frame-current {
+  color: var(--dak-warn);
+  border-color: rgba(255, 198, 77, 0.28);
+  background: rgba(255, 198, 77, 0.08);
+}
+
+.dak-frame-player-row-dead {
+  opacity: 0.38;
+}
+
+.dak-hp-bar-wrap {
+  /* 垂直叠层：HP 条（6px）+ 护甲条（2px），之间 1px 间隙，不重叠 */
   display: flex;
-  gap: 3px;
-  flex-shrink: 0;
+  flex-direction: column;
+  gap: 1px;
+  height: 9px;
 }
 
-.dak-kf-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 4px;
+.dak-hp-bar-track {
+  flex: none;
+  height: 6px;
   border-radius: 2px;
-  font-size: 9px;
-  font-weight: 800;
-  font-style: normal;
-  text-transform: uppercase;
+  background: rgba(238, 243, 248, 0.08);
+  overflow: hidden;
 }
 
-.dak-kf-hs  { background: rgba(255, 84, 114, 0.22); color: var(--dak-danger); }
-.dak-kf-tr  { background: rgba(255, 122, 33, 0.18); color: var(--dak-accent); }
-.dak-kf-smk { background: rgba(162, 172, 184, 0.14); color: var(--dak-fg-mid); }
-.dak-kf-ns  { background: rgba(73, 182, 255, 0.16); color: var(--dak-accent-b); }
-.dak-kf-fa  { background: rgba(83, 215, 126, 0.18); color: var(--dak-ok); }
+.dak-hp-bar {
+  flex: none;
+  height: 6px;
+  border-radius: 2px;
+  transition: width 80ms linear, background 200ms ease;
+}
 
-@media (max-width: 1080px) {
-  .dak-header,
-  .dak-grid,
-  .dak-grid-even,
-  .dak-selection-layout,
-  .dak-kpi-strip,
-  .dak-fact-grid,
-  .dak-workbench,
-  .dak-replay-layout {
-    grid-template-columns: 1fr;
-  }
+/* 护甲独立细条：在 HP 下方，不覆盖 */
+.dak-armor-bar {
+  flex: none;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--dak-accent-b);
+  transition: width 80ms linear;
+}
 
-  .dak-workbench-sidebar {
-    position: static;
-  }
+.dak-team-dot-teamA {
+  background: var(--dak-accent);
+}
 
-  .dak-tabs {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+.dak-team-dot-teamB {
+  background: var(--dak-accent-b);
+}
 
-  .dak-scoreblock {
-    text-align: left;
-  }
+.dak-player-roundfacts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+  max-height: 560px;
+  overflow: auto;
+}
 
-  .dak-scoreline {
-    font-size: 34px;
-  }
+.dak-player-round-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin: 12px 0;
+}
 
-  .dak-title {
-    font-size: 32px;
-  }
+.dak-player-round-card {
+  min-width: 0;
+  display: grid;
+  gap: 9px;
+  padding: 11px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background:
+    linear-gradient(180deg, rgba(73, 182, 255, 0.06), transparent 42%),
+    var(--dak-bg-subtle);
+}
 
-  .dak-qa-row,
-  .dak-roundfact-row {
-    grid-template-columns: 1fr;
-  }
+.dak-player-round-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
 
-  .dak-player-round-summary {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.dak-player-round-head span:nth-child(2) {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dak-fg-mid);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
 }
 
-@media (max-width: 720px) {
-  .dak-workspace {
-    width: min(100vw - 18px, 1480px);
-    padding-top: 14px;
-  }
+.dak-player-round-meta,
+.dak-player-round-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
 
-  .dak-tabs,
-  .dak-kpi-strip,
-  .dak-speed-group,
-  .dak-heatmap-tuning {
-    grid-template-columns: 1fr;
-  }
+.dak-player-round-meta span,
+.dak-player-round-tags span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 7px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: rgba(9, 11, 15, 0.38);
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+}
 
-  .dak-tab {
-    min-height: 46px;
-  }
+.dak-player-round-tags span {
+  color: var(--dak-accent);
+  border-color: rgba(255, 122, 33, 0.26);
+  background: rgba(255, 122, 33, 0.08);
+}
 
-  .dak-title {
-    font-size: 28px;
-  }
+.dak-economy-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  margin: 10px 0;
+  color: var(--dak-fg-mid);
+  font-size: 12px;
+}
 
-  .dak-replay-stage {
-    min-height: 380px;
-  }
+.dak-economy-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
 
-  .dak-player-round-summary {
-    grid-template-columns: 1fr;
+.dak-economy-legend i {
+  width: 12px;
+  height: 12px;
+  display: block;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+}
+
+.dak-economy-rounds {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 7px;
+  margin-top: 10px;
+}
+
+.dak-economy-round {
+  display: grid;
+  gap: 3px;
+  padding: 8px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  font-size: 11px;
+}
+
+.dak-economy-round b {
+  color: var(--dak-fg);
+  font-family: var(--dak-mono);
+}
+
+.dak-economy-round span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--dak-fg-dim);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-economy-round .dak-economy-winner {
+  color: var(--dak-ok);
+}
+
+.dak-economy-round-clickable {
+  cursor: pointer;
+}
+
+.dak-economy-round-clickable:hover {
+  border-color: var(--dak-border-hi);
+  background: var(--dak-panel);
+}
+
+.dak-economy-round-upset {
+  border-color: rgba(255, 198, 77, 0.4);
+  background: linear-gradient(135deg, rgba(255, 198, 77, 0.07), var(--dak-bg-subtle));
+}
+
+.dak-economy-upsets {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 8px 0 4px;
+}
+
+.dak-upset-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid transparent;
+}
+
+.dak-upset-chip-eco   { background: rgba(255,84,114,0.15); color: var(--dak-danger); border-color: rgba(255,84,114,0.3); }
+.dak-upset-chip-semi  { background: rgba(73,182,255,0.13); color: var(--dak-accent-b); border-color: rgba(73,182,255,0.28); }
+.dak-upset-chip-force { background: rgba(255,122,33,0.13); color: var(--dak-accent); border-color: rgba(255,122,33,0.28); }
+
+.dak-upset-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-size: 10px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.dak-upset-badge-eco   { background: rgba(255,84,114,0.18); color: var(--dak-danger); }
+.dak-upset-badge-semi  { background: rgba(73,182,255,0.16); color: var(--dak-accent-b); }
+.dak-upset-badge-force { background: rgba(255,122,33,0.16); color: var(--dak-accent); }
+
+/* ── Kill feed overlay ──────────────────────────────────────────────────────── */
+
+.dak-killfeed {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  pointer-events: none;
+  min-width: 0;
+  max-width: 260px;
+}
+
+.dak-killfeed-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  background: rgba(9, 11, 15, 0.78);
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dak-killfeed-name {
+  font-weight: 700;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.dak-killfeed-name-teamA { color: var(--dak-accent); }
+.dak-killfeed-name-teamB { color: var(--dak-accent-b); }
+.dak-killfeed-name-none  { color: var(--dak-fg-dim); }
+
+.dak-killfeed-weapon {
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.dak-killfeed-victim {
+  color: var(--dak-fg-mid);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.dak-killfeed-badges {
+  display: flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.dak-kf-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 4px;
+  border-radius: 2px;
+  font-size: 9px;
+  font-weight: 800;
+  font-style: normal;
+  text-transform: uppercase;
+}
+
+.dak-kf-hs  { background: rgba(255, 84, 114, 0.22); color: var(--dak-danger); }
+.dak-kf-tr  { background: rgba(255, 122, 33, 0.18); color: var(--dak-accent); }
+.dak-kf-smk { background: rgba(162, 172, 184, 0.14); color: var(--dak-fg-mid); }
+.dak-kf-ns  { background: rgba(73, 182, 255, 0.16); color: var(--dak-accent-b); }
+.dak-kf-fa  { background: rgba(83, 215, 126, 0.18); color: var(--dak-ok); }
+.dak-kf-wb  { background: rgba(255, 198, 77, 0.18); color: var(--dak-warn); }
+
+@media (max-width: 1080px) {
+  .dak-header,
+  .dak-grid,
+  .dak-grid-even,
+  .dak-selection-layout,
+  .dak-kpi-strip,
+  .dak-fact-grid,
+  .dak-workbench,
+  .dak-replay-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dak-workbench-sidebar {
+    position: static;
+  }
+
+  .dak-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .dak-scoreblock {
+    text-align: left;
+  }
+
+  .dak-scoreline {
+    font-size: 34px;
+  }
+
+  .dak-title {
+    font-size: 32px;
+  }
+
+  .dak-qa-row,
+  .dak-roundfact-row {
+    grid-template-columns: 1fr;
+  }
+
+  .dak-player-round-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dak-replay-layout {
+    grid-template-areas:
+      "controls controls"
+      "roster-left roster-right"
+      "stage stage";
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dak-replay-controlbar,
+  .dak-replay-togglebar {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+@media (max-width: 720px) {
+  .dak-workspace {
+    width: min(100vw - 18px, 1480px);
+    padding-top: 14px;
+  }
+
+  .dak-tabs,
+  .dak-kpi-strip,
+  .dak-speed-group,
+  .dak-heatmap-tuning {
+    grid-template-columns: 1fr;
+  }
+
+  .dak-tab {
+    min-height: 46px;
+  }
+
+  .dak-title {
+    font-size: 28px;
+  }
+
+  .dak-replay-stage {
+    width: 100%;
   }
+
+  .dak-roster-board {
+    grid-template-columns: 1fr;
+  }
+
+  .dak-replay-layout {
+    grid-template-areas:
+      "controls"
+      "roster-left"
+      "roster-right"
+      "stage";
+    grid-template-columns: 1fr;
+  }
+
+  .dak-player-round-summary {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── 2D 回放：道具效果 / C4 ───────────────────────────────── */
+
+.dak-replay-fx {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.dak-replay-fx-smoke {
+  background: radial-gradient(circle, rgba(214, 222, 230, 0.55) 0%, rgba(214, 222, 230, 0.35) 65%, transparent 100%);
+  border: 1px solid rgba(214, 222, 230, 0.42);
+  box-shadow: inset 0 0 0 1px rgba(9, 11, 15, 0.42), 0 0 12px rgba(214, 222, 230, 0.18);
+}
+
+.dak-replay-fx-smoke.dak-replay-fx-ct {
+  border-color: color-mix(in srgb, var(--dak-accent-b) 72%, white 12%);
+  box-shadow: inset 0 0 0 1px rgba(9, 11, 15, 0.45), 0 0 14px rgba(73, 182, 255, 0.34);
+}
+
+.dak-replay-fx-smoke.dak-replay-fx-t {
+  border-color: color-mix(in srgb, var(--dak-accent) 76%, white 10%);
+  box-shadow: inset 0 0 0 1px rgba(9, 11, 15, 0.45), 0 0 14px rgba(255, 122, 33, 0.34);
+}
+
+.dak-replay-fx-fire {
+  background: radial-gradient(circle, rgba(255, 138, 61, 0.7) 0%, rgba(255, 84, 38, 0.4) 60%, transparent 100%);
+  animation: dak-fx-flicker 0.5s ease-in-out infinite alternate;
+}
+
+.dak-replay-fx-he {
+  background: radial-gradient(circle, rgba(255, 233, 178, 0.9) 0%, rgba(255, 95, 110, 0.5) 55%, transparent 100%);
+  animation: dak-fx-burst 0.7s ease-out forwards;
+}
+
+.dak-replay-fx-flash {
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 246, 200, 0.4) 60%, transparent 100%);
+  animation: dak-fx-burst 0.7s ease-out forwards;
+}
+
+.dak-replay-fx-countdown {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: rgba(28, 34, 40, 0.85);
+  text-shadow: 0 0 3px rgba(255, 255, 255, 0.7);
+}
+
+.dak-replay-fx-decoy {
+  background: radial-gradient(circle, rgba(111, 125, 138, 0.6) 0%, transparent 100%);
+}
+
+@keyframes dak-fx-flicker {
+  from { opacity: 0.75; }
+  to { opacity: 1; }
+}
+
+@keyframes dak-fx-burst {
+  from { opacity: 1; scale: 0.4; }
+  to { opacity: 0; scale: 1.15; }
+}
+
+.dak-replay-projectile {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 1px solid #0b0e10;
+  background: #eef3f8;
+  pointer-events: none;
+}
+
+.dak-replay-projectile-flashbang { background: #ffd84d; }
+.dak-replay-projectile-smoke { background: #9aa6b2; }
+.dak-replay-projectile-molotov,
+.dak-replay-projectile-incendiary { background: #ff8a3d; }
+.dak-replay-projectile-hegrenade { background: #ff5f6e; }
+.dak-replay-projectile-decoy { background: #6f7d8a; }
+
+/* 道具飞行尾迹：随播放逐帧延伸，颜色与落点标记一致 */
+.dak-replay-trajectories {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.dak-replay-trail {
+  fill: none;
+  stroke: #eef3f8;
+  stroke-width: 1.5px;
+  vector-effect: non-scaling-stroke;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.65;
+  stroke-dasharray: 1.6 1.2;
+}
+
+.dak-replay-trail-flashbang { stroke: #ffd84d; }
+.dak-replay-trail-smoke { stroke: #9aa6b2; }
+.dak-replay-trail-molotov,
+.dak-replay-trail-incendiary { stroke: #ff8a3d; }
+.dak-replay-trail-hegrenade { stroke: #ff5f6e; }
+.dak-replay-trail-decoy { stroke: #6f7d8a; }
+
+.dak-replay-bomb {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #0b0e10;
+  background: var(--dak-warn, #f5a623);
+  border: 1px solid #0b0e10;
+  pointer-events: none;
+}
+
+.dak-replay-bomb-armed { animation: dak-bomb-pulse 1s ease-in-out infinite; }
+.dak-replay-bomb-defused { background: var(--dak-ok, #38c87d); animation: none; }
+.dak-replay-bomb-exploding { animation: dak-fx-burst 1.2s ease-out forwards; }
+.dak-replay-bomb-exploded { opacity: 0.35; }
+.dak-replay-bomb-dropped {
+  background: rgba(245, 166, 35, 0.55);
+  border: 1px dashed #f5a623;
+  animation: dak-bomb-blink 1.2s ease-in-out infinite;
+  font-size: 9px;
+  padding: 1px 5px;
+}
+
+/* 地面掉落的拆弹器：蓝色虚线，与橙色 C4 区分。 */
+.dak-replay-defuser {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #0b0e10;
+  pointer-events: none;
+}
+
+.dak-replay-defuser-dropped {
+  background: rgba(77, 184, 255, 0.55);
+  border: 1px dashed #4db8ff;
+  animation: dak-bomb-blink 1.2s ease-in-out infinite;
+  padding: 1px 5px;
+}
+
+@keyframes dak-bomb-blink {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 0.9; }
+}
+
+@keyframes dak-bomb-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.7); }
+  50% { box-shadow: 0 0 0 7px rgba(245, 166, 35, 0); }
+}
+
+.dak-replay-token .dak-replay-c4-tag {
+  background: var(--dak-warn, #f5a623);
+  color: #0b0e10;
+}
+
+/* ── 武器统计 / 对位 ─────────────────────────────────────── */
+
+.dak-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.dak-weapon-bar-cell {
+  width: 120px;
+  min-width: 80px;
+}
+
+.dak-weapon-bar {
+  height: 7px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--dak-accent), rgba(255, 122, 33, 0.35));
+}
+
+.dak-duel-scroll {
+  overflow-x: auto;
+}
+
+.dak-duel-matrix {
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.dak-duel-matrix th,
+.dak-duel-matrix td {
+  border: 1px solid var(--dak-border);
+  padding: 0;
+}
+
+.dak-duel-head {
+  height: 110px;
+  min-width: 30px;
+  vertical-align: bottom;
+  padding: 6px 4px;
+}
+
+.dak-duel-head span {
+  display: inline-block;
+  max-height: 100px;
+  overflow: hidden;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.dak-duel-rowhead {
+  max-width: 140px;
+  overflow: hidden;
+  padding: 5px 8px;
+  font-weight: 600;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-duel-teamA {
+  color: var(--dak-accent);
+}
+
+.dak-duel-teamB {
+  color: var(--dak-accent-b);
+}
+
+.dak-duel-cell {
+  width: 34px;
+  height: 30px;
+  text-align: center;
+  font-family: var(--dak-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.dak-duel-cell-same {
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-dim);
+}
+
+/* ── 原语（EmptyState / MetricInfo / EvidenceLink） ───────────────── */
+
+.dak-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 80px 24px;
+  border: 1px dashed var(--dak-border-hi);
+  border-radius: 3px;
+  text-align: center;
+}
+
+.dak-empty-mark {
+  font-size: 34px;
+  color: var(--dak-accent);
+}
+
+.dak-empty h2 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.dak-empty p {
+  margin: 0;
+  max-width: 460px;
+  color: var(--dak-fg-mid);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.dak-empty-error h2 {
+  color: var(--dak-danger);
+}
+
+/* ⓘ 口径说明 */
+.dak-info {
+  position: relative;
+  display: inline-block;
+  margin-left: 4px;
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  cursor: help;
+}
+
+.dak-info-tip {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%) translateY(2px);
+  z-index: 30;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 2px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s ease, transform .12s ease;
+}
+
+.dak-info:hover .dak-info-tip,
+.dak-info:focus-visible .dak-info-tip {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.dak-evidence {
+  background: var(--dak-panel);
+  border: 1px solid var(--dak-border);
+  border-radius: 2px;
+  color: var(--dak-accent);
+  font-size: 12px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.dak-evidence:hover:not(:disabled) {
+  border-color: var(--dak-border-hi);
+  background: var(--dak-panel-hi);
+}
+
+.dak-evidence:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* ── Map roles ───────────────────────────────────────────────────────── */
+.dak-role-panel { display: grid; min-width: 0; gap: 12px; }
+.dak-role-panel .dak-table th,
+.dak-role-panel .dak-table td { white-space: normal; }
+.dak-role-panel .dak-info-tip {
+  right: 0;
+  left: auto;
+  transform: translateY(2px);
+}
+.dak-role-panel .dak-info:hover .dak-info-tip,
+.dak-role-panel .dak-info:focus-visible .dak-info-tip { transform: translateY(0); }
+.dak-role-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
+.dak-role-head h3 { margin: 0; }
+.dak-role-head p, .dak-role-note { margin: 4px 0 0; color: var(--dak-fg-dim); font-size: 12px; line-height: 1.5; }
+.dak-role-summary, .dak-role-declarations, .dak-role-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--dak-fg-mid); font-size: 12px; }
+.dak-role-summary b, .dak-role-declarations b, .dak-role-evidence b { color: var(--dak-fg); }
+.dak-role-tag, .dak-role-status { border: 1px solid var(--dak-border); border-radius: 2px; padding: 2px 6px; font-size: 11px; }
+.dak-role-status-ready { color: var(--dak-ok); }
+.dak-role-status-mixed { color: var(--dak-warn); }
+.dak-role-status-insufficient, .dak-role-status-unknown { color: var(--dak-fg-dim); }
+
+/* ── Event Bracket（瑞士轮 + 淘汰赛，DOM + SVG 双模式） ─────────────────── */
+
+.dak-bracket-diagram {
+  overflow-x: auto;
+  margin: 10px 0 16px;
+  border: 1px solid var(--dak-border);
+  border-radius: 7px;
+  background: var(--dak-bg);
+}
+
+.dak-bracket-diagram svg {
+  display: block;
+}
+
+.dak-bracket-edge {
+  fill: none;
+  stroke: var(--dak-accent);
+  stroke-width: 2;
+}
+
+.dak-bracket-edge-loss {
+  stroke: var(--dak-fg-dim);
+  stroke-dasharray: 5 4;
+}
+
+.dak-bracket-box {
+  fill: var(--dak-panel);
+  stroke: var(--dak-border-hi);
+}
+
+.dak-bracket-box-title,
+.dak-bracket-box-match {
+  fill: var(--dak-fg);
+  font-family: var(--dak-sans);
+  font-size: 12px;
+}
+
+.dak-bracket-lane-separator {
+  stroke: var(--dak-border);
+  stroke-width: 1;
+}
+
+.dak-bracket-lane-label {
+  fill: var(--dak-fg-mid);
+  font-family: var(--dak-sans);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dak-bracket-box-match {
+  fill: var(--dak-fg-dim);
+  font-size: 10px;
+}
+
+.dak-bracket-round,
+.dak-bracket-links {
+  display: grid;
+  gap: 8px;
+}
+
+.dak-bracket-node {
+  border: 1px solid var(--dak-border);
+  border-radius: 7px;
+  background: var(--dak-panel);
+  padding: 10px;
+}
+
+.dak-bracket-links {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+}
+
+.dak-eb {
+  display: flex;
+  gap: 18px;
+  align-items: stretch;
+  overflow-x: auto;
+  padding: 6px 2px 12px;
+}
+
+.dak-eb-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 210px;
+  align-self: stretch;
+}
+
+.dak-eb-col-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+.dak-eb-elim {
+  align-items: stretch;
+}
+
+.dak-eb-elim-col .dak-eb-col-body {
+  justify-content: space-evenly;
+}
+
+.dak-eb-elim-matches {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex: 1;
+}
+
+.dak-eb-col-head {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--dak-fg-mid);
+}
+
+.dak-eb-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dak-eb-group-head {
+  font-family: var(--dak-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--dak-fg-dim);
+}
+
+.dak-eb-box {
+  display: grid;
+  gap: 1px;
+  border: 1px solid var(--dak-border);
+  border-radius: 7px;
+  background: var(--dak-panel);
+  overflow: hidden;
+  text-align: left;
+  width: 100%;
+  padding: 0;
+}
+
+.dak-eb-box-click {
+  cursor: pointer;
+}
+
+.dak-eb-box-click:hover {
+  border-color: var(--dak-border-hi);
+}
+
+.dak-eb-box-sel {
+  border-color: var(--dak-accent);
+}
+
+.dak-eb-team {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 9px;
+  font-size: 13px;
+  color: var(--dak-fg-mid);
+  background: var(--dak-panel);
+}
+
+.dak-eb-team b {
+  font-family: var(--dak-mono);
+  color: var(--dak-fg);
+}
+
+.dak-eb-win {
+  color: var(--dak-fg);
+  font-weight: 700;
+  border-left: 3px solid var(--dak-ok);
+}
+
+.dak-eb-lose {
+  color: var(--dak-fg-dim);
+  border-left: 3px solid var(--dak-danger);
+}
+
+.dak-eb-date {
+  padding: 3px 9px;
+  font-size: 10px;
+  color: var(--dak-fg-dim);
+  border-top: 1px solid var(--dak-border);
+}
+
+.dak-eb-box-empty {
+  padding: 12px 9px;
+  border-style: dashed;
+  color: var(--dak-fg-dim);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.dak-eb-box-empty:hover {
+  border-color: var(--dak-accent);
+  color: var(--dak-accent);
+}
+
+.dak-eb-add {
+  border: 1px dashed var(--dak-border-hi);
+  border-radius: 7px;
+  background: transparent;
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.dak-eb-add:hover {
+  border-color: var(--dak-accent);
+  color: var(--dak-accent);
+}
+
+.dak-eb-outcomes {
+  gap: 14px;
+}
+
+.dak-eb-outcome {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  border-radius: 7px;
+}
+
+.dak-eb-advanced {
+  background: color-mix(in srgb, var(--dak-ok) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dak-ok) 40%, transparent);
+}
+
+.dak-eb-eliminated {
+  background: color-mix(in srgb, var(--dak-danger) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--dak-danger) 38%, transparent);
+}
+
+.dak-eb-outcome-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--dak-fg);
+}
+
+.dak-eb-outcome-row b {
+  font-family: var(--dak-mono);
+  color: var(--dak-fg-mid);
 }