@cs2dak/react 0.2.0

package/src/theme.css

@@ -0,0 +1,1721 @@
+:root {
+  --dak-bg: #090b0f;
+  --dak-bg-subtle: #0d1117;
+  --dak-panel: #11161d;
+  --dak-panel-hi: #161d26;
+  --dak-border: #27313e;
+  --dak-border-hi: #3a4655;
+  --dak-fg: #eef3f8;
+  --dak-fg-mid: #a2acb8;
+  --dak-fg-dim: #687381;
+  --dak-accent: #ff7a21;
+  --dak-accent-soft: rgba(255, 122, 33, 0.13);
+  --dak-accent-b: #49b6ff;
+  --dak-accent-b-soft: rgba(73, 182, 255, 0.13);
+  --dak-ok: #53d77e;
+  --dak-warn: #ffc64d;
+  --dak-danger: #ff5a72;
+  --dak-font: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --dak-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+.dak-shell {
+  min-height: 100vh;
+  background:
+    linear-gradient(rgba(39, 49, 62, 0.34) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(39, 49, 62, 0.34) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(15, 21, 30, 0.86), rgba(9, 11, 15, 0.96)),
+    var(--dak-bg);
+  background-size: 32px 32px, 32px 32px, auto, auto;
+  color: var(--dak-fg);
+  font-family: var(--dak-font);
+}
+
+.dak-workspace {
+  width: min(1480px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 26px 0 44px;
+}
+
+.dak-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 20px;
+  align-items: end;
+  border-bottom: 1px solid var(--dak-border);
+  padding-bottom: 18px;
+  margin-bottom: 14px;
+}
+
+.dak-eyebrow {
+  color: var(--dak-accent);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.dak-title {
+  margin: 6px 0 0;
+  font-size: 42px;
+  line-height: 0.96;
+  letter-spacing: 0;
+}
+
+.dak-subtitle,
+.dak-mapline {
+  color: var(--dak-fg-mid);
+  margin: 10px 0 0;
+  font-size: 14px;
+}
+
+.dak-scoreblock {
+  text-align: right;
+}
+
+.dak-scoreline {
+  font-family: var(--dak-mono);
+  font-size: 46px;
+  font-weight: 900;
+}
+
+.dak-kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0 0 14px;
+}
+
+.dak-metric {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 12px;
+  background: rgba(17, 22, 29, 0.88);
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+}
+
+.dak-metric-icon {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  color: var(--dak-accent);
+  background: var(--dak-accent-soft);
+  border: 1px solid rgba(255, 122, 33, 0.26);
+  border-radius: 4px;
+}
+
+.dak-metric-label,
+.dak-metric-detail {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.dak-metric-value {
+  margin: 2px 0;
+  font-family: var(--dak-mono);
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.dak-tabs {
+  display: flex;
+  gap: 8px;
+  margin: 0 0 16px;
+  overflow-x: auto;
+}
+
+.dak-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  font: inherit;
+}
+
+.dak-tab-active {
+  color: var(--dak-fg);
+  border-color: rgba(255, 122, 33, 0.62);
+  background: linear-gradient(180deg, rgba(255, 122, 33, 0.2), rgba(255, 122, 33, 0.08));
+}
+
+.dak-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.24fr) minmax(380px, 0.76fr);
+  gap: 16px;
+}
+
+.dak-grid-even {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.dak-selection-layout {
+  display: grid;
+  grid-template-columns: 270px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.dak-stack {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+}
+
+.dak-panel {
+  min-width: 0;
+  background: rgba(17, 22, 29, 0.9);
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.dak-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--dak-border);
+  background: var(--dak-panel-hi);
+}
+
+.dak-panel-title {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.dak-panel-body {
+  padding: 14px;
+}
+
+.dak-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.dak-table th,
+.dak-table td {
+  border-bottom: 1px solid var(--dak-border);
+  padding: 9px 8px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.dak-table th:first-child,
+.dak-table td:first-child {
+  text-align: left;
+  min-width: 150px;
+}
+
+.dak-table th {
+  color: var(--dak-fg-dim);
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.dak-row-clickable {
+  cursor: pointer;
+}
+
+.dak-row-clickable:hover td {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.dak-row-clickable:focus-visible {
+  outline: 2px solid var(--dak-accent);
+  outline-offset: -2px;
+}
+
+.dak-rr {
+  color: var(--dak-accent);
+  font-weight: 800;
+}
+
+.dak-econ-conv {
+  overflow-x: auto;
+}
+
+.dak-econ-conv .dak-empty {
+  padding: 16px 0;
+  text-align: center;
+  font-style: italic;
+  color: var(--dak-fg-dim);
+}
+
+.dak-econ-conv-bar-col {
+  width: 33%;
+}
+
+.dak-winrate-bar {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--dak-bg-subtle);
+  overflow: hidden;
+}
+
+.dak-winrate-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--dak-accent);
+  transition: width 0.2s ease;
+}
+
+.dak-team-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--dak-fg);
+}
+
+.dak-team-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.dak-muted {
+  color: var(--dak-fg-mid);
+}
+
+.dak-mono {
+  font-family: var(--dak-mono);
+}
+
+.dak-timeline {
+  display: grid;
+  gap: 8px;
+  max-height: 470px;
+  overflow: auto;
+}
+
+.dak-timeline-row {
+  display: grid;
+  grid-template-columns: 52px 64px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 9px 10px;
+  background: var(--dak-bg-subtle);
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+}
+
+.dak-timeline-row span:last-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dak-timeline-more {
+  padding: 10px;
+  color: var(--dak-fg-dim);
+  border: 1px dashed var(--dak-border);
+  border-radius: 3px;
+  background: rgba(13, 17, 23, 0.58);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: center;
+}
+
+.dak-timeline-more:hover {
+  color: var(--dak-fg);
+  border-color: var(--dak-border-hi);
+  background: rgba(73, 182, 255, 0.08);
+}
+
+.dak-badge {
+  display: inline-flex;
+  justify-content: center;
+  min-width: 48px;
+  border: 1px solid var(--dak-border-hi);
+  border-radius: 3px;
+  padding: 3px 6px;
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+  font-family: var(--dak-mono);
+}
+
+.dak-qa-ok {
+  color: var(--dak-ok);
+}
+
+.dak-qa-warn {
+  color: var(--dak-warn);
+}
+
+.dak-chart {
+  width: 100%;
+  min-height: 276px;
+}
+
+.dak-heatmap {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  aspect-ratio: 1;
+  background-color: #111821;
+  background-size: cover;
+  background-position: center;
+  border: 1px solid var(--dak-border);
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Heatmap wrap: vertical layout (filters / radar / tuning) ── */
+.dak-heatmap-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  height: 100%;
+}
+
+.dak-heatmap-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+/* Mode + side filter in one row */
+.dak-heatmap-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.dak-heatmap-side-filter {
+  display: flex;
+  gap: 3px;
+  margin-left: 2px;
+}
+
+.dak-sf-chip {
+  padding: 2px 7px;
+  border-radius: 4px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background: rgba(255,255,255,0.04);
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms, border-color 120ms, color 120ms;
+}
+
+.dak-sf-chip:hover { color: var(--dak-fg); border-color: rgba(255,255,255,0.24); }
+
+.dak-sf-chip-active {
+  color: var(--dak-fg);
+  border-color: rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.10);
+}
+
+/* Tuning sliders: full-width row below the radar */
+.dak-heatmap-tuning {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  padding: 8px;
+  flex-shrink: 0;
+  background: rgba(9, 11, 15, 0.78);
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+}
+
+.dak-heatmap-tuning label {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+  font-family: var(--dak-mono);
+}
+
+.dak-heatmap-tuning input {
+  min-width: 0;
+  accent-color: var(--dak-accent);
+}
+
+.dak-mode {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: rgba(9, 11, 15, 0.78);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+
+.dak-mode span {
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+}
+
+.dak-mode-active {
+  color: var(--dak-fg);
+  border-color: rgba(255, 122, 33, 0.72);
+  background: rgba(255, 122, 33, 0.18);
+}
+
+/* Grenade sub-type filter row */
+.dak-heatmap-grenade-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 8px 0;
+  z-index: 5;
+  position: relative;
+}
+
+.dak-gf-chip {
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(255,255,255,0.12);
+  background: rgba(255,255,255,0.04);
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 120ms, border-color 120ms, color 120ms;
+}
+
+.dak-gf-chip:hover { color: var(--dak-fg); border-color: rgba(255,255,255,0.26); }
+
+.dak-gf-chip-active {
+  color: var(--dak-warn);
+  border-color: rgba(255,184,0,0.55);
+  background: rgba(255,184,0,0.12);
+}
+
+/* Player filter chip row */
+.dak-heatmap-player-filter {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 8px 0;
+  z-index: 5;
+  position: relative;
+}
+
+.dak-pf-chip {
+  padding: 2px 7px;
+  border-radius: 4px;
+  border: 1px solid rgba(255,255,255,0.10);
+  background: rgba(255,255,255,0.04);
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+  cursor: pointer;
+  transition: background 120ms, border-color 120ms, color 120ms;
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-pf-chip:hover { color: var(--dak-fg); border-color: rgba(255,255,255,0.24); }
+
+.dak-pf-all { font-weight: 600; }
+
+.dak-pf-chip-teamA.dak-pf-chip-active {
+  color: var(--dak-accent);
+  border-color: rgba(255, 122, 33, 0.6);
+  background: rgba(255, 122, 33, 0.14);
+}
+
+.dak-pf-chip-teamB.dak-pf-chip-active {
+  color: var(--dak-blue);
+  border-color: rgba(73, 182, 255, 0.6);
+  background: rgba(73, 182, 255, 0.14);
+}
+
+.dak-pf-all.dak-pf-chip-active {
+  color: var(--dak-fg);
+  border-color: rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.10);
+}
+
+.dak-radar-schematic {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(135deg, transparent 0 19%, rgba(255,255,255,0.06) 19.2% 20%, transparent 20.2% 100%),
+    linear-gradient(45deg, transparent 0 27%, rgba(255,255,255,0.05) 27.2% 28%, transparent 28.2% 100%),
+    radial-gradient(circle at 25% 27%, rgba(255, 122, 33, 0.13), transparent 19%),
+    radial-gradient(circle at 72% 70%, rgba(73, 182, 255, 0.13), transparent 20%),
+    #0c131c;
+}
+
+.dak-radar-grid {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
+  background-size: 64px 64px;
+}
+
+.dak-site,
+.dak-radar-label {
+  position: absolute;
+  z-index: 1;
+  font-family: var(--dak-mono);
+  font-weight: 800;
+  color: rgba(238, 243, 248, 0.72);
+}
+
+.dak-site {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border: 2px solid rgba(238, 243, 248, 0.32);
+  border-radius: 50%;
+  background: rgba(9, 11, 15, 0.34);
+}
+
+.dak-site-a {
+  left: 20%;
+  top: 21%;
+}
+
+.dak-site-b {
+  right: 20%;
+  bottom: 22%;
+}
+
+.dak-radar-label-mid {
+  left: 47%;
+  top: 45%;
+  color: rgba(238, 243, 248, 0.36);
+}
+
+.dak-radar-label-name {
+  left: 14px;
+  bottom: 12px;
+  color: rgba(238, 243, 248, 0.36);
+  text-transform: uppercase;
+}
+
+.dak-lane {
+  position: absolute;
+  height: 2px;
+  background: rgba(238, 243, 248, 0.14);
+  transform-origin: left center;
+}
+
+.dak-lane-main {
+  left: 24%;
+  top: 31%;
+  width: 54%;
+  transform: rotate(38deg);
+}
+
+.dak-lane-side {
+  left: 18%;
+  top: 68%;
+  width: 48%;
+  transform: rotate(-23deg);
+}
+
+.dak-lane-mid {
+  left: 37%;
+  top: 49%;
+  width: 36%;
+  transform: rotate(4deg);
+}
+
+/* Canvas heatmap layer — fills the radar image area */
+.dak-heatmap-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.dak-heatmap-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--dak-fg-dim);
+  font-size: 12px;
+  text-align: center;
+  padding: 24px;
+}
+
+.dak-heatmap-legend {
+  position: absolute;
+  z-index: 3;
+  right: 10px;
+  bottom: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px 8px;
+  background: rgba(9, 11, 15, 0.72);
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  color: var(--dak-fg-mid);
+  font-size: 11px;
+}
+
+.dak-heatmap-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.dak-heatmap-legend i {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.dak-legend-kill    { background: var(--dak-ok); }
+.dak-legend-death   { background: var(--dak-danger); }
+.dak-legend-grenade { background: var(--dak-warn); }
+
+.dak-heatmap-legend-scale {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.dak-legend-cold {
+  display: inline-block;
+  width: 40px;
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(to right, blue, cyan, lime, yellow, red);
+}
+
+.dak-legend-warm { display: none; }
+
+.dak-qa {
+  display: grid;
+  gap: 12px;
+}
+
+.dak-qa-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.dak-qa-summary span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
+  font-size: 12px;
+}
+
+.dak-qa-list {
+  display: grid;
+  gap: 8px;
+}
+
+.dak-qa-row {
+  display: grid;
+  grid-template-columns: 78px 220px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  padding: 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  background: var(--dak-bg-subtle);
+}
+
+.dak-qa-row span:last-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dak-roundfact-list {
+  display: grid;
+  gap: 7px;
+  max-height: 600px;
+  overflow: auto;
+}
+
+.dak-roundfact-row {
+  display: grid;
+  grid-template-columns: 52px minmax(90px, 1fr) minmax(120px, 1fr) 64px minmax(110px, 1fr);
+  gap: 9px;
+  align-items: center;
+  padding: 8px 10px;
+  background: var(--dak-bg-subtle);
+  border: 1px solid var(--dak-border);
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.dak-tags {
+  color: var(--dak-accent);
+  overflow-wrap: anywhere;
+}
+
+.dak-module-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: 0 0 14px;
+}
+
+.dak-module-summary {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: rgba(13, 17, 23, 0.72);
+}
+
+.dak-module-icon {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  color: var(--dak-accent-b);
+  border: 1px solid rgba(73, 182, 255, 0.24);
+  background: var(--dak-accent-b-soft);
+  border-radius: 4px;
+}
+
+.dak-module-summary b,
+.dak-module-summary span,
+.dak-module-summary small {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-module-summary b {
+  font-size: 11px;
+  color: var(--dak-fg-mid);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.dak-module-summary span {
+  margin-top: 1px;
+  color: var(--dak-fg);
+  font-family: var(--dak-mono);
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.dak-module-summary small {
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+}
+
+.dak-story-list {
+  display: grid;
+  gap: 9px;
+  color: var(--dak-fg-mid);
+  line-height: 1.65;
+}
+
+.dak-story-list p {
+  margin: 0;
+}
+
+.dak-mini-rounds,
+.dak-mode-list,
+.dak-player-list,
+.dak-breakdown {
+  display: grid;
+  gap: 8px;
+}
+
+.dak-mini-round,
+.dak-mode-row,
+.dak-breakdown-row,
+.dak-fact {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 9px 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  font-size: 12px;
+}
+
+.dak-mini-round {
+  grid-template-columns: 52px 44px minmax(0, 1fr);
+}
+
+.dak-mode-row b,
+.dak-fact b,
+.dak-breakdown-row b {
+  color: var(--dak-fg);
+}
+
+.dak-note {
+  margin-top: 10px;
+}
+
+.dak-round-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+.dak-round-pill {
+  width: 58px;
+  min-height: 56px;
+  display: grid;
+  place-items: center;
+  gap: 1px;
+  padding: 6px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  font: inherit;
+}
+
+.dak-round-pill span,
+.dak-round-pill b,
+.dak-round-pill small {
+  display: block;
+  line-height: 1;
+}
+
+.dak-round-pill b {
+  color: var(--dak-fg);
+  font-family: var(--dak-mono);
+}
+
+.dak-round-pill small {
+  color: var(--dak-fg-dim);
+  font-size: 10px;
+}
+
+.dak-round-pill-active {
+  border-color: rgba(255, 122, 33, 0.62);
+  background: var(--dak-accent-soft);
+  color: var(--dak-fg);
+}
+
+.dak-round-detail,
+.dak-replay-meta {
+  display: grid;
+  gap: 12px;
+}
+
+.dak-fact-grid,
+.dak-replay-meta {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.dak-player-button {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.dak-player-button span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-player-button b {
+  color: var(--dak-fg);
+  font-family: var(--dak-mono);
+}
+
+.dak-player-button-active {
+  border-color: rgba(73, 182, 255, 0.62);
+  background: var(--dak-accent-b-soft);
+}
+
+.dak-breakdown-row {
+  grid-template-columns: 96px minmax(120px, 1fr) 72px;
+}
+
+.dak-breakdown-row meter {
+  width: 100%;
+  height: 8px;
+}
+
+.dak-replay-stage {
+  position: relative;
+  min-height: 520px;
+  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: cover;
+  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);
+  border-radius: 999px;
+  color: #fff;
+  font-size: 9px;
+  font-weight: 900;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.38);
+}
+
+.dak-replay-token-teamA {
+  background: var(--dak-accent);
+}
+
+.dak-replay-token-teamB {
+  background: var(--dak-accent-b);
+}
+
+.dak-replay-token i {
+  position: absolute;
+  right: -8px;
+  bottom: -7px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: var(--dak-ok);
+  color: #08100b;
+  font-size: 9px;
+  font-style: normal;
+  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-tab {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  grid-template-areas:
+    "icon label"
+    "icon detail";
+  align-items: center;
+  gap: 1px 9px;
+  min-height: 54px;
+  padding: 8px 10px;
+  text-align: left;
+}
+
+.dak-tab svg {
+  grid-area: icon;
+}
+
+.dak-tab span {
+  grid-area: label;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--dak-fg);
+  font-weight: 800;
+}
+
+.dak-tab small {
+  grid-area: detail;
+  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,
+.dak-player-button:hover,
+.dak-round-pill:hover,
+.dak-module-action:hover,
+.dak-layer-button:hover,
+.dak-speed:hover,
+.dak-icon-button:hover,
+.dak-timeline-more:hover {
+  border-color: var(--dak-border-hi);
+  color: var(--dak-fg);
+}
+
+.dak-tab:focus-visible,
+.dak-player-button:focus-visible,
+.dak-round-pill:focus-visible,
+.dak-module-action:focus-visible,
+.dak-layer-button:focus-visible,
+.dak-speed:focus-visible,
+.dak-play-button:focus-visible,
+.dak-icon-button:focus-visible,
+.dak-scrubber:focus-visible,
+.dak-timeline-more:focus-visible {
+  outline: 2px solid var(--dak-accent-b);
+  outline-offset: 2px;
+}
+
+.dak-module-actions {
+  display: grid;
+  gap: 8px;
+}
+
+.dak-module-action {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.dak-module-action b,
+.dak-module-action span,
+.dak-module-action small {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dak-module-action b {
+  color: var(--dak-fg);
+  font-size: 13px;
+}
+
+.dak-module-action span {
+  margin-top: 1px;
+  font-family: var(--dak-mono);
+  font-size: 12px;
+}
+
+.dak-module-action small {
+  margin-top: 2px;
+  color: var(--dak-fg-dim);
+  font-size: 11px;
+}
+
+.dak-panel-eyebrow {
+  margin-bottom: 3px;
+  color: var(--dak-fg-dim);
+  font-size: 10px;
+  font-family: var(--dak-mono);
+}
+
+.dak-layer-controls {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.dak-layer-button {
+  width: 100%;
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 10px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.dak-layer-button-active {
+  color: var(--dak-fg);
+  border-color: rgba(255, 122, 33, 0.64);
+  background: rgba(255, 122, 33, 0.12);
+}
+
+.dak-mode-row-muted {
+  opacity: 0.48;
+}
+
+.dak-pending-layers {
+  display: grid;
+  gap: 7px;
+  margin-top: 12px;
+}
+
+.dak-mode-row-disabled {
+  opacity: 0.62;
+  background: rgba(13, 17, 23, 0.44);
+}
+
+.dak-replay-layout {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr) 260px;
+  gap: 14px;
+  align-items: start;
+}
+
+.dak-playback {
+  display: grid;
+  grid-template-columns: 42px 34px minmax(0, 1fr) 34px;
+  gap: 8px;
+  align-items: center;
+  margin: 14px 0 10px;
+}
+
+.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-icon-button {
+  width: 34px;
+  height: 34px;
+  background: var(--dak-bg-subtle);
+}
+
+.dak-scrubber {
+  min-width: 0;
+  accent-color: var(--dak-accent);
+  cursor: pointer;
+}
+
+.dak-speed-group {
+  display: grid;
+  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);
+  color: var(--dak-fg-mid);
+  cursor: pointer;
+  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-meta {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+.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-token {
+  transition: left 80ms linear, top 80ms linear, opacity 120ms ease;
+}
+
+.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-token-dead {
+  opacity: 0.28;
+  filter: grayscale(1);
+}
+
+.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-frame-player-list {
+  display: grid;
+  gap: 7px;
+  max-height: 620px;
+  overflow: auto;
+}
+
+.dak-frame-player-row {
+  display: grid;
+  grid-template-columns: 10px 18px minmax(0, 1fr) 52px;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 9px;
+  border: 1px solid var(--dak-border);
+  border-radius: 4px;
+  background: var(--dak-bg-subtle);
+  font-size: 12px;
+}
+
+.dak-frame-player-name,
+.dak-frame-player-row small {
+  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-frame-player-row small {
+  grid-column: 2 / 5;
+  color: var(--dak-fg-dim);
+  font-family: var(--dak-mono);
+}
+
+.dak-frame-player-row-dead {
+  opacity: 0.38;
+}
+
+.dak-hp-bar-wrap {
+  height: 6px;
+  background: rgba(238, 243, 248, 0.08);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.dak-hp-bar {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 80ms linear, background 200ms ease;
+}
+
+.dak-team-dot-teamA {
+  background: var(--dak-accent);
+}
+
+.dak-team-dot-teamB {
+  background: var(--dak-accent-b);
+}
+
+.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-player-round-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin: 12px 0;
+}
+
+.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-player-round-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.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-player-round-meta,
+.dak-player-round-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.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-player-round-tags span {
+  color: var(--dak-accent);
+  border-color: rgba(255, 122, 33, 0.26);
+  background: rgba(255, 122, 33, 0.08);
+}
+
+.dak-economy-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  margin: 10px 0;
+  color: var(--dak-fg-mid);
+  font-size: 12px;
+}
+
+.dak-economy-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.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-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); }
+
+@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));
+  }
+}
+
+@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 {
+    min-height: 380px;
+  }
+
+  .dak-player-round-summary {
+    grid-template-columns: 1fr;
+  }
+}