/* Gaming donut module — specific styles. Loaded only by gaming.html. */

/* ============================================================
   Controls card (left MV): stacked sections — toolbar, slider, legend
   ============================================================ */

.controls-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
}

.controls-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.controls-section--legend {
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.controls-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  font-weight: var(--fw-medium);
}

/* ============================================================
   Toolbar — metric toggle (now in controls card)
   ============================================================ */

.donut-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.metric-toggle {
  display: inline-flex;
  background: var(--mauve-3);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
  align-self: flex-end;   /* don't stretch in column-flex; right-aligned */
}

.metric-toggle-btn {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.metric-toggle-btn:hover {
  color: var(--fg-default);
}
.metric-toggle-btn[aria-pressed="true"] {
  background: var(--bg-card);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}
.metric-toggle-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ============================================================
   Controls strip — year range slider
   ============================================================ */

/* The controls slot (year-slider area) flows naturally inside controls-body now.
   No special styling needed — its children (head + slider) stack vertically via
   the .controls-section gap. */
.donut-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.range-output {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}


/* The dual-handle slider: two <input type=range> stacked on top of a
   visual track. Inputs are click-through except on their thumbs.
   margin-top adds breathing room from the "years 2018–2026" head above. */
.range-slider {
  position: relative;
  flex: 1;
  height: 28px;
  margin-top: var(--space-2);
  --range-start-pct: 0%;
  --range-end-pct: 100%;
}

.range-track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 4px;
  background: var(--mauve-4);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
}

.range-selection {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--range-start-pct);
  right: calc(100% - var(--range-end-pct));
  background: var(--accent-solid);
  border-radius: var(--radius-pill);
}

.range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  pointer-events: none;
}

/* Thumb styling — webkit + firefox.
   pointer-events: auto on the thumb only, so the input body stays click-through
   and the user can grab the thumb directly even when the other input overlaps. */
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-solid);
  cursor: grab;
  pointer-events: auto;
  margin-top: 0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}
.range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--accent-solid);
  cursor: grab;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
}
.range-input::-moz-range-track {
  background: transparent;
  border: none;
}
.range-input:focus { outline: none; }
.range-input:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.range-input:focus-visible::-moz-range-thumb     { box-shadow: var(--shadow-focus); }

/* When both handles are near each other we want either to remain grabbable;
   the JS toggles .range-input--front to lift the appropriate one. */
.range-input--front { z-index: 2; }

/* ============================================================
   Legend — interactive list of current slices
   ============================================================ */

[data-role="legend"] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
}

.legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-2);
  cursor: pointer;
  transition: background var(--motion-fast), opacity var(--motion-fast);
  font-size: var(--fs-sm);
}

.legend-row[data-clickable="0"] {
  cursor: default;
}

.legend-row:hover {
  background: var(--mauve-3);
}

.legend-row--hover {
  background: var(--accent-bg-subtle);
}

.legend-row--dimmed {
  opacity: 0.45;
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-row-label {
  color: var(--fg-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.legend-row-playing {
  color: var(--accent-solid);
  font-size: 10px;
}

.legend-row-stat {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}

.legend-row-pct {
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  min-width: 3ch;
  text-align: right;
}

.legend-empty {
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  font-style: italic;
  padding: var(--space-2);
}

/* ============================================================
   Donut card body — chart + center overlay
   ============================================================ */

.donut-body {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.donut-chart {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Note: no min-height. A min-height on a flex child can force the parent to
     grow past its grid-row allocation, which we saw as the chart overflowing
     the card edges on narrow viewports. Let the chart size to its container. */
  min-height: 0;
}

.donut-svg {
  /* SVG width/height attributes are set in JS to the measured pixel
     dimensions of the chart-host. Don't override with CSS — % heights on
     SVGs interact unpredictably with flex sizing and let the chart inflate. */
  display: block;
}

.donut-svg .slice {
  transition: opacity 120ms ease, stroke-width 120ms ease, filter 120ms ease;
}
.donut-svg .slice--dimmed {
  opacity: 0.45;
}
.donut-svg .slice--hover {
  stroke-width: 2;
  filter: brightness(1.05) saturate(1.1);
}

/* ============================================================
   Leader-line labels around the donut
   ============================================================ */

.slice-label-line {
  stroke-width: 1;
  opacity: 0.55;
  fill: none;
}

.slice-label-name {
  fill: var(--fg-default);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.slice-label-meta {
  fill: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Fade labels slightly so the slice stays the hero. */
.slice-labels { pointer-events: none; opacity: 0.95; }

/* Subtle pulse for slices containing a currently-playing game.
   Targets the slice itself; uses opacity + outline so it works alongside the
   d3-driven d="..." transitions without fighting them. */
@keyframes donut-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50%      { filter: drop-shadow(0 0 6px currentColor); }
}
.donut-svg .slice--playing {
  animation: donut-pulse 2.4s ease-in-out infinite;
}

/* ============================================================
   Center label — also the zoom-out affordance
   ============================================================ */

.donut-center {
  position: absolute;
  inset: 0;
  margin: auto;
  /* width/height set in JS to match the donut's inner-ring diameter. */
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  cursor: default;
  pointer-events: auto;
  padding: var(--space-2);
  /* CRITICAL: clip both painting *and* hit-testing to an actual circle so the
     button doesn't steal mouseenter/leave events from slices on the left and
     right strips of its bounding rect. */
  clip-path: circle(50%);
}

.donut-center--zoomable {
  cursor: pointer;
}

.donut-center:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.donut-center-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.donut-center-stat {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--fg-default);
}

.donut-center-label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.donut-center-back {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  opacity: 0;
  transition: opacity var(--motion-fast);
  margin-top: var(--space-1);
}

.donut-center--zoomable:hover .donut-center-back,
.donut-center--zoomable:focus-visible .donut-center-back {
  opacity: 1;
}

/* ============================================================
   Tooltip — overrides the base .tooltip alignment
   (cursor-anchored, slightly offset up-and-right)
   ============================================================ */

.donut-tooltip {
  transform: translate(8px, -110%);
}

/* ============================================================
   Side panel
   ============================================================ */

.panel-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
}

.panel-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.panel-empty-eyebrow {
  font-size: var(--fs-lg);
  color: var(--accent-solid);
  opacity: 0.5;
}
.panel-empty-line {
  line-height: var(--lh-default);
}
.panel-empty-line--muted {
  color: var(--fg-subtle);
}

.panel-game-breadcrumb {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.panel-game-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  margin: 0;
}

.panel-game-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-bg-subtle);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  align-self: flex-start;
}
.panel-game-status-glyph {
  font-size: var(--fs-sm);
  line-height: 1;
}

.panel-game-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
}
.panel-game-stats dt {
  color: var(--fg-subtle);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  align-self: center;
}
.panel-game-stats dd {
  margin: 0;
  color: var(--fg-default);
}

.panel-game-comment {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--mauve-2);
  border-left: 3px solid var(--accent-solid);
  border-radius: var(--radius-1);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-style: italic;
}

/* When the panel is showing a sticky (clicked) game, give it a subtle pinned
   indicator. Hover-preview state has no special border — it transitions in
   and out, and a permanent border on transient state feels jittery. */
.panel-body--sticky .panel-game-breadcrumb .panel-pin {
  font-size: 0.85em;
  margin-left: var(--space-1);
  opacity: 0.75;
}
.panel-body--preview {
  /* Slightly de-emphasize the preview state so the sticky feels more "stable".
     Currently a no-op visually, but reserves the hook for future styling. */
}

/* ============================================================
   Group preview — used for genre / Misc / genre-in-misc hovers
   ============================================================ */

.panel-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.panel-group-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.panel-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  margin: 0;
}

.panel-group-badge {
  font-size: var(--fs-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-bg-subtle);
  color: var(--accent-text);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

.panel-group-listhead {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  margin-top: var(--space-3);
}

.panel-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
}

.panel-group-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px dotted var(--border-subtle);
}
.panel-group-list li:last-child {
  border-bottom: none;
}

.panel-group-list-title {
  color: var(--fg-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.panel-group-list-hours {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.panel-group-list-more {
  border-bottom: none !important;
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-style: italic;
  justify-content: center !important;
}