/* ==========================================================================
   Game ID — Analytics Page
   ========================================================================== */

.analytics-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.analytics-page .page-header {
  margin-bottom: 24px;
}

/* ---- Metric cards (top row) --------------------------------------------- */
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.analytics-metric {
  background: var(--bg-layer);
  border: 1px solid var(--stroke-divider);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}

.analytics-metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.analytics-metric-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.analytics-metric-sub {
  font-size: 12px;
  color: var(--fg-tertiary);
  margin-top: 6px;
}

/* ---- Charts grid -------------------------------------------------------- */
.analytics-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.analytics-charts .widget--full {
  grid-column: 1 / -1;
}

.widget {
  background: var(--bg-layer);
  border: 1px solid var(--stroke-divider);
  border-radius: var(--r-lg);
  padding: 20px 24px;
}

.widget-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-title .widget-icon { font-size: 18px; }

.widget-subtitle {
  font-size: 12px;
  color: var(--fg-tertiary);
  font-weight: 400;
  margin-top: 2px;
}

/* ---- chart tooltip ------------------------------------------------------- */
.chart-tooltip {
  position: fixed;
  background: var(--bg-layer-selected);
  border: 1px solid var(--stroke-default);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg-primary);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  white-space: nowrap;
  display: none;
}

/* ---- micro bar chart ----------------------------------------------------- */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-size: 12px;
  color: var(--fg-tertiary);
  width: 110px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-subtle);
  border-radius: var(--r-circular);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--r-circular);
  transition: width var(--t-normal) var(--ease-decelerate);
}

.bar-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-primary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- donut --------------------------------------------------------------- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.donut-canvas-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.donut-canvas-wrap canvas { display: block; }

.donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.donut-legend-label { flex: 1; color: var(--fg-secondary); }
.donut-legend-value { font-weight: 600; color: var(--fg-primary); }
.donut-legend-pct { color: var(--fg-tertiary); font-size: 11px; width: 36px; text-align: right; }

/* ---- scatter ------------------------------------------------------------- */
.scatter-wrap {
  position: relative;
  width: 100%;
  height: 320px;
}

.scatter-wrap canvas { display: block; width: 100%; height: 100%; }

/* ---- time line ----------------------------------------------------------- */
.time-line-wrap {
  position: relative;
  width: 100%;
  height: 200px;
}

.time-line-wrap canvas { display: block; width: 100%; height: 100%; }

/* ---- notes --------------------------------------------------------------- */
.analytics-notes {
  font-size: 11px;
  color: var(--fg-tertiary);
  line-height: 1.5;
}

.analytics-notes ul {
  list-style: disc;
  padding-left: 16px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .analytics-charts { grid-template-columns: 1fr; }
  .analytics-charts .widget--full { grid-column: auto; }
  .analytics-metrics { grid-template-columns: 1fr; }
  .donut-wrap { flex-direction: column; align-items: flex-start; }
  .bar-label { width: 80px; font-size: 11px; }
}