/*
  1UP Stats styling plugin: cinematic theme tokens.
  Edit this file for color, depth, typography scale, global surface feel.
  Loaded after the legacy inline CSS, so these values win.
*/

:root,
:root[data-theme="cinematic"] {
  --theme-name: cinematic;
  --bg: #03040a;
  --bg2: rgba(8, 12, 24, .88);
  --bg3: rgba(13, 17, 32, .92);
  --bg4: #111827;
  --surface-glass: rgba(8, 12, 24, .72);
  --surface-strong: rgba(10, 15, 30, .92);
  --line: rgba(190, 204, 230, .11);
  --line-hot: rgba(0, 212, 255, .28);
  --glow-green: rgba(0, 255, 136, .12);
  --glow-blue: rgba(0, 212, 255, .13);
  --glow-purple: rgba(204, 136, 255, .13);
  --radius-ui: 8px;
  --radius-hero: 12px;
  --shadow-panel: 0 18px 48px rgba(0, 0, 0, .20);
  --shadow-hero: 0 30px 90px rgba(0, 0, 0, .30);
  --motion-fast: .18s cubic-bezier(.22, .68, 0, 1);
  --motion-med: .42s cubic-bezier(.22, .68, 0, 1);
}

body {
  background:
    radial-gradient(circle at 20% 10%, var(--glow-blue), transparent 28vw),
    radial-gradient(circle at 80% 0%, var(--glow-purple), transparent 30vw),
    linear-gradient(180deg, #03040a 0%, #05060e 48%, #080c18 100%);
}

nav {
  background: rgba(5, 6, 14, .76);
  border-bottom-color: rgba(0, 212, 255, .16);
}

.panel,
.kpi-card,
.stat-card {
  border-color: var(--line);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel {
  background: linear-gradient(180deg, var(--surface-strong), rgba(5, 8, 18, .76));
}

.kpi-card {
  background: linear-gradient(180deg, rgba(10, 15, 30, .90), rgba(6, 9, 20, .75));
}

.tool-input,
.tool-btn,
.health-cell,
.app-card,
.lb-row,
.action-row {
  border-radius: 6px;
}

.master-view.active {
  animation: riseIn var(--motion-med);
}