/* ════════════════════════════════════════════════════════════════
   base.css — переменные темы, скроллбар, фон, базовая типографика
   Содержание:
   1. Design tokens (:root)
   2. Скроллбар (.app-scroll)
   3. Базовый body
   4. Фоновые пятна (.background-spots, .spot, bigMove)
   5. Типографика и заголовки
   6. Макет (.section, .body-wrap, .content-wrap)
   7. Разное (#version, i)
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ── */

:root {
  --color-bg: #dce6ec;
  --color-section: rgb(255 255 255 / 90%); 
  --color-section2: rgba(243, 243, 243, 0.5); 
  --color-text: #656571;
  --color-text-muted: #737373;
  --color-heading: #5a5a5a;
  --color-surface: #ffffffb3;
  --color-surface-alt: rgb(255 255 255 / 45%);
  --color-panel: #ebeef0;
  --color-border: #ddd;
  --color-input-bg: #ffffffb3;
  --color-input-text: #656571;
  --color-green: #1f7a53;
  --color-green-dark: #103f2c;
  --color-green-hover: #1a7d5260;
  --color-red: #a85a5a;
  --color-red-dark: #5e2121;
  --color-red-hover: #b55b5b5b;
  --color-blue: #2a8fb5;
  --color-blue-dark: #0e475f;
  --color-blue-hover: #2a90b55e;
  --color-blue-muted: #8a96a1;
  --color-gold: #e0bc51;
  --color-gold-light: #f5e9c8;
  --glass-blur: 28px;
  --glass-saturate: 1.4;
  --color-gold-border: rgb(224 188 81 / 50%);
  --color-gold-ring: #e0bc5196;
  --color-teal: #1378a0;
  --color-teal-accent: #1378a0;
  --color-scores: #179ed3;
  --color-scores-deep: #1280ad;
  --color-scores-soft: #3b9fc9;
  --color-settings-active: #c89214;
  --color-timeline-dot: #3c4a61a6;
  --color-timeline-line: rgb(60 74 97 / 28%);
  --color-menu-label: #555c57f7;
  --color-menu-icon: var(--color-menu-label);
  --color-menu-icon-hover: #44444c;
  --color-menu-label-hover: #44444c;
  --color-menu-item-hover-bg: #e8d9a7;
  --menu-item-hover-inset-y: 3px;
  --menu-item-hover-inset-x: 8px;
  --menu-item-hover-inset-right: 4px;
  --menu-hover-duration: 0.48s;
  --menu-hover-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --color-button-text: #44444c;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-section-shadow: #6767672e;
  --color-section-box-shadow: 0px 1px 1px 2px var(--color-section-shadow);
  --elev-1:
    0 1px 2px rgb(15 23 42 / 4%),
    0 1px 1px rgb(15 23 42 / 3%);
  --elev-2:
    0 2px 8px -2px rgb(15 23 42 / 8%),
    0 1px 3px rgb(15 23 42 / 4%);
  --elev-3:
    0 10px 28px -8px rgb(15 23 42 / 12%),
    0 4px 10px -4px rgb(15 23 42 / 6%);
  --surface-glass: rgb(255 255 255 / 72%);
  --surface-glass-border: rgb(255 255 255 / 58%);
  --surface-glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 -10px 24px -12px rgb(15 23 42 / 10%);
  --color-info-border: #d43f3fe8;
  --color-question-border: #009fff;
  --color-toast: #1f7a53;
  --color-grid-head-round: #1f7a53;
  --color-grid-head-scores: #1378a0;
  --color-grid-head-scores-text: #ffffff;
  --color-grid-head-history: #e0bc51;
  --color-modal-backdrop: rgba(0, 0, 0, 0.35);
  --color-payment: #af4c4c;
  --color-positive: #2e7d32;
  --color-negative: #c62828;
  --color-delta-positive-bg: #e8f5e9;
  --color-delta-negative-bg: #ffebee;
  --color-delta-zero-bg: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  --color-delta-positive-shadow: rgba(46, 125, 50, 0.2);
  --color-delta-negative-shadow: rgba(198, 40, 40, 0.2);
  --scrollbar-size: 8px;
  --scrollbar-track: #f0f0f0;
  --scrollbar-thumb: #888;
  --scrollbar-thumb-hover: #555;
  --scrollbar-thumb-border: #f0f0f0;
}

/* ── 2. Скроллбар ── */

.app-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.app-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.app-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.app-scroll::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--scrollbar-thumb-border);
}

.app-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* ── 3. Базовый body ── */

body {
  font-family: 'Inter', sans-serif;
  background-color: #a4afb5;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  /* overflow: hidden; */
}

/* ── 4. Фоновые пятна ── */

/* Контейнер для пятен */
.background-spots {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

/* Пятно 1 — мята (большое) */
.spot-1 {
  top: -15%;
  left: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(112, 205, 170, 0.72) 0%, rgba(75, 180, 140, 0.42) 50%, transparent 80%);
  animation: bigMove1 28s ease-in-out infinite alternate;
}

/* Пятно 2 — небесно-голубой (большое) */
.spot-2 {
  top: 70%;
  left: 80%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(122, 185, 245, 0.42) 0%, rgba(88, 150, 220, 0.3) 50%, transparent 80%);
  animation: bigMove2 34s ease-in-out infinite alternate;
}

/* Пятно 3 — жёлтый (большое) */
.spot-3 {
  top: 40%;
  left: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(250, 200, 70, 0.68) 0%, rgba(232, 178, 44, 0.44) 50%, transparent 80%);
  animation: bigMove3 26s ease-in-out infinite alternate;
}

/* Пятно 4 — салатовый (большое) */
.spot-4 {
  top: -20%;
  left: 70%;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(122, 62, 255, 0.55) 0%, rgba(245, 185, 110, 0.42) 50%, transparent 80%);
  animation: bigMove4 30s ease-in-out infinite alternate;
}

/* Пятно 5 — бирюзовый (большое) */
.spot-5 {
  top: 30%;
  left: 30%;
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, rgba(122, 210, 215, 0.8) 0%, rgba(92, 182, 188, 0.6) 50%, transparent 80%);
  animation: bigMove5 24s ease-in-out infinite alternate;
}

/* Анимации — большие круги медленно перетекают по экрану через transform (без reflow) */
@keyframes bigMove1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(65vw, 25vh) scale(1.1); }
  50%  { transform: translate(35vw, 75vh) scale(0.9); }
  75%  { transform: translate(85vw, 45vh) scale(1.05); }
  100% { transform: translate(75vw, 100vh) scale(0.95); }
}

@keyframes bigMove2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-20vw, -75vh) scale(1.15); }
  50%  { transform: translate(-90vw, -30vh) scale(0.85); }
  75%  { transform: translate(-40vw, -50vh) scale(1.1); }
  100% { transform: translate(-5vw, 10vh) scale(0.9); }
}

@keyframes bigMove3 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(45vw, -45vh) scale(1.05); }
  50%  { transform: translate(70vw, 25vh) scale(0.9); }
  75%  { transform: translate(90vw, -30vh) scale(1.15); }
  100% { transform: translate(10vw, 15vh) scale(0.95); }
}

@keyframes bigMove4 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-40vw, 70vh) scale(0.9); }
  50%  { transform: translate(-60vw, 30vh) scale(1.15); }
  75%  { transform: translate(-25vw, 90vh) scale(0.95); }
  100% { transform: translate(5vw, 10vh) scale(1.05); }
}

@keyframes bigMove5 {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(-40vw, -40vh) scale(1.2); }
  40%  { transform: translate(-25vw, 45vh) scale(0.8); }
  60%  { transform: translate(50vw, -25vh) scale(1.1); }
  80%  { transform: translate(20vw, 55vh) scale(0.85); }
  100% { transform: translate(-5vw, 5vh) scale(1); }
}

/* ── 5. Типографика и заголовки ── */

h2 {
  cursor: pointer;
  color: var(--color-heading);
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 30px;
  font-size: 1.8em;
}

.section h2,
.playerNames h2 {
  font-size: 1.5em;
  color: var(--color-heading);
  padding: 8px !important;
  border-radius: 30px !important;
  margin: 0 0 21px;
}

/* ── 6. Макет ── */

.section {
  position: relative;
  background: var(--color-section2);
  border-radius: 20px;
  width: 1080px;
  min-width: 615px;
  padding: 20px;
  margin: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgb(255 255 255 / 55%);
  box-shadow:
    0 12px 40px rgb(15 23 42 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 60%);
  contain: paint;
}

.section:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.body-wrap {
  width: calc(100% - 72px);
  height: 100%;
  display: flex;
}

.content-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ── 7. Разное ── */

#version {
  position: fixed;
  top: 0px;
  right: 0px;
  font-size: 10px;
  color: var(--color-text-muted);
}

#historyScore {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

i {
    margin-right: 10px;
  }