/* Cinematic skin for app/viz pages. Overrides legacy rounded light UI
   without rewriting visualization JS. */

body.cine {
  background: var(--pitch-black) !important;
}

/* --- Shared controls --- */
body.cine .control-button,
body.cine .spiral-button,
body.cine .therace-button,
body.cine .wall-control-btn,
body.cine .matchday-calendar-toggle-btn,
body.cine .retry-button,
body.cine .save-button,
body.cine .confirm-button,
body.cine button.primary {
  border-radius: 0 !important;
  background: var(--flash-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.cine .control-button:hover,
body.cine .wall-control-btn:hover {
  box-shadow: 0 0 20px rgba(239, 1, 7, 0.55) !important;
}

body.cine .controls,
body.cine .therace-controls,
body.cine .wall-controls {
  background: var(--glass-fill) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(16px) saturate(160%);
}

body.cine .brand-title,
body.cine .spiral-branding .brand-title,
body.cine .therace-branding .brand-title {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--flash-red) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase;
}

body.cine .brand-subtitle,
body.cine .spiral-branding .brand-subtitle,
body.cine .therace-branding .brand-subtitle,
body.cine h1,
body.cine .subtitle {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
}

/* D3 axes and row labels on pitch black */
body.cine #chart .tick text,
body.cine #chart .axis-label {
  fill: #e8e8e8 !important;
}

body.cine #chart .tick line,
body.cine #chart .domain {
  stroke: #666 !important;
}

/* --- Viz canvases --- */
body.cine .therace-container,
body.cine .spiral-container,
body.cine .wall-container {
  background: #0a0a0a !important;
  color: var(--on-surface) !important;
}

body.cine .wall-header {
  background: #000 !important;
  border-bottom: 1px solid rgba(239, 1, 7, 0.45) !important;
  box-shadow: none !important;
}

body.cine .wall-control-btn {
  border: 1px solid var(--flash-red) !important;
  background: transparent !important;
  color: var(--flash-red) !important;
}

body.cine .spiral-container,
body.cine .wall-container {
  top: 72px !important;
  height: calc(100vh - 72px) !important;
}

body.cine::before,
body.cine::after {
  display: none !important;
}

/* --- Fridge --- */
body.cine .header {
  background: transparent !important;
  color: #fff !important;
}

body.cine .header h2,
body.cine .header h3,
body.cine .scroll-link a,
body.cine .matchday-section h3 {
  color: var(--on-surface-variant) !important;
}

body.cine .pill-link {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--glass-border) !important;
  color: #fff !important;
}

body.cine .matchday-section {
  background: #120807 !important;
  border-color: var(--outline-variant) !important;
  box-shadow: none !important;
}

body.cine .week-number,
body.cine .week-number a,
body.cine .week-number span {
  border-radius: 0 !important;
  background: #2a1613 !important;
  color: #fff !important;
}

body.cine .selected-week,
body.cine .current-week {
  background: var(--flash-red) !important;
  color: #fff !important;
}

body.cine .londonisred,
body.cine .londonisred a,
body.cine .brand-fridge {
  color: #fff !important;
  font-family: var(--font-display) !important;
}

body.cine .top-controls {
  top: 84px !important;
}

/* --- Matchday chrome --- */
body.cine .drawer,
body.cine .drawer-right,
body.cine .overlay-content,
body.cine .stat-card {
  background: #120807 !important;
  color: #fff !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
}

body.cine .drawer-toggle,
body.cine .drawer-toggle-ladder,
body.cine .autosave-toast {
  border-radius: 0 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid var(--glass-border) !important;
}

body.cine #homeHint,
body.cine #awayHint {
  border-radius: 0 !important;
  background: #000 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px !important;
}

body.cine footer {
  color: rgba(255, 255, 255, 0.55) !important;
}

body.cine .clickable-area {
  font-family: var(--font-display);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}