/* =============================================================================
   Game-analytics dashboard (Phase F). Lazy-loaded into #proj-analytics which
   lives in game .stat-side (the 400px right column under the 6-tile
   summary + "Аналитика" button). Auto-fill grid adapts: ~3 tiles per row at
   this width, gracefully degrades on narrower viewports.
   ============================================================================= */

.ga-load-btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-md);
  cursor: pointer;
}

.ga-loading,
.ga-empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ga-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  flex-wrap: wrap;
}
.ga-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ga-range-row {
  margin-left: auto;
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
}
.ga-range {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: calc(var(--r-md) - 4px);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.ga-range:hover { color: var(--text); }
.ga-range.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.ga-sec {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Auto-fill grid sized for the 400px right column: at the 110px min, three
   tiles fit per row (~125px each). On wider viewports/columns the same rule
   gives more tiles per row automatically — adaptive. */
.ga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

.ga-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 50px;
  min-width: 0;
}
.ga-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-lbl {
  font-size: 11px;
  color: var(--muted);
}

.ga-chart-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ga-chart-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.ga-chart-tab:hover { color: var(--text); }
.ga-chart-tab.active {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-2);
}

.ga-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
}
.ga-bar {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, #348370 0%, #1c503b 100%);
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s ease;
}
.ga-bar:hover { opacity: 0.85; }
.ga-chart-empty {
  width: 100%;
  text-align: center;
  color: var(--muted);
  align-self: center;
  font-size: 12px;
}

/* X-axis date labels under the chart. One cell per bar (flex:1) with the same
   gap + horizontal padding as .ga-chart so labels line up with their bars.
   Most cells are empty — only first/last/markers carry text (see drawChart). */
.ga-axis {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  padding: 0 8px;
}
.ga-axis-cell {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}

/* Loading skeleton — subtle opacity pulse over surface-2, mirrors the approach
   in stats.css (.stat-skeleton) but kept local to this module. Lightweight. */
@keyframes ga-skel-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}
.ga-skeleton {
  background: var(--surface-2);
  border-color: transparent;
  animation: ga-skel-pulse 1.2s ease-in-out infinite;
}
.ga-skeleton-grid { margin-bottom: 16px; }
.ga-tile.ga-skeleton { min-height: 50px; }
.ga-chart.ga-skeleton-chart .ga-bar.ga-skeleton {
  background: var(--surface-2);
  height: 38%;
}
.ga-chart.ga-skeleton-chart .ga-bar.ga-skeleton:nth-child(3n)   { height: 64%; }
.ga-chart.ga-skeleton-chart .ga-bar.ga-skeleton:nth-child(3n+1) { height: 26%; }

/* =============================================================================
   Wide analytics modal — opened from the stats screen game tiles. Reuses the
   shared .modal-back / .modal shell (misc.css) but the base .modal is only
   480px wide (too narrow for the dashboard) and has its own padding, so we
   widen it, drop the base padding, and let head/body own their spacing.
   ============================================================================= */
.ga-modal {
  max-width: min(880px, 94vw);
  width: min(880px, calc(100vw - 16px));
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ga-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.ga-modal-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ga-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ga-modal-open {
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
}
.ga-modal-open:hover { color: var(--text); background: var(--surface-2); }
.ga-modal-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
}
.ga-modal-close:hover { color: var(--text); background: var(--surface-2); }
.ga-modal-body {
  padding: 14px 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* =============================================================================
   Mobile adaptive — additive, desktop untouched
   ============================================================================= */

/* Tablet ≤768px */
@media (max-width: 768px) {
  .ga-modal {
    max-height: 92vh;
  }
}

/* Mobile ≤640px: tap targets, head layout */
@media (max-width: 640px) {
  .ga-range {
    padding: 10px 10px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ga-chart-tab {
    padding: 10px 10px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ga-modal-open {
    padding: 10px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ga-modal-close {
    width: 44px;
    height: 44px;
  }
  .ga-axis-cell {
    /* hide middle labels at narrow widths — JS keeps first/last visible */
    font-size: 9px;
  }
  .ga-modal-body {
    padding: 10px 12px;
  }
}

/* Narrow phone ≤480px: modal head wraps title above actions */
@media (max-width: 480px) {
  .ga-modal-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .ga-modal-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .ga-modal-title {
    white-space: normal;
  }
}

/* Extra-narrow ≤380px */
@media (max-width: 380px) {
  .ga-range {
    padding: 10px 7px;
    font-size: 11px;
  }
  .ga-chart-tab {
    padding: 10px 7px;
    font-size: 11px;
  }
  .ga-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

/* Touch: bars always show pointer cursor; hover-only decorations stripped */
@media (hover: none) {
  .ga-bar:hover { opacity: 1; }
  .ga-range:hover { color: var(--muted); }
  .ga-chart-tab:hover { color: var(--muted); }
  .ga-modal-open:hover { color: var(--muted); background: transparent; }
  .ga-modal-close:hover { color: var(--muted); background: transparent; }
}

/* Touch: axis cells — always show first/last, clip overflow cleanly */
@media (hover: none) and (max-width: 640px) {
  .ga-axis-cell {
    overflow: hidden;
    text-overflow: clip;
  }
}