* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0500;
  background: linear-gradient(180deg, #0a0500 0%, #1a0800 50%, #0d0300 100%);
  color: #ffaa55;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
}

header {
  text-align: center;
  padding: 40px 20px 30px;
  border-bottom: 2px solid #ff660033;
}

header h1 {
  font-size: 2.4rem;
  color: #ff8833;
  text-shadow: 0 0 20px #ff6600aa, 0 0 40px #ff660044;
  letter-spacing: 1px;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* --- Вкладки --- */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}

.tab-btn {
  background: #1a0a00;
  color: #cc7733;
  border: 2px solid #ff660044;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.tab-btn:hover {
  background: #2a1000;
  border-color: #ff8833aa;
  color: #ffaa55;
  box-shadow: 0 0 12px #ff660044;
}

.tab-btn.active {
  background: linear-gradient(135deg, #ff6600, #cc4400);
  color: #fff;
  border-color: #ff8833;
  box-shadow: 0 0 18px #ff660066;
}

/* --- Контент вкладок --- */
.tab-content {
  background: #110700;
  border: 1px solid #ff660033;
  border-radius: 14px;
  padding: 35px;
  line-height: 1.7;
  box-shadow: inset 0 0 30px #ff660008;
}

.tab-content.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.tab-content h2 {
  color: #ff9944;
  font-size: 1.5rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ff660033;
}

.tab-content p {
  color: #eebb88;
  font-size: 1.1rem;
}

/* --- Кнопка внизу --- */
.site-footer {
  text-align: center;
  padding: 40px 20px;
}

.footer-btn {
  display: inline-block;
  background: linear-gradient(135deg, #00bfa5, #00897b);
  color: #fff;
  text-decoration: none;
  border: 2px solid #26a69a;
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 18px #00bfa544;
}

.footer-btn:hover {
  background: linear-gradient(135deg, #26c6da, #00897b);
  box-shadow: 0 0 24px #00bfa588;
  transform: translateY(-2px);
}

.footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.footer-btn-download {
  background: linear-gradient(135deg, #5c6bc0, #3949ab);
  border-color: #7986cb;
  box-shadow: 0 0 18px #5c6bc044;
}

.footer-btn-download:hover {
  background: linear-gradient(135deg, #7986cb, #3949ab);
  box-shadow: 0 0 24px #5c6bc088;
  transform: translateY(-2px);
}

.footer-btn-phone {
  background: linear-gradient(135deg, #26a69a, #00796b);
  border-color: #4db6ac;
  box-shadow: 0 0 18px #26a69a44;
}

.footer-btn-phone:hover {
  background: linear-gradient(135deg, #4db6ac, #00796b);
  box-shadow: 0 0 24px #26a69a88;
  transform: translateY(-2px);
}

/* --- Ползунок сложности --- */
.difficulty-slider-wrap {
  margin: 20px 0 30px;
}

.difficulty-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #44aa44 0%, #cccc33 20%, #dd8822 40%, #ff5500 60%, #cc0000 80%, #9933cc 100%);
  outline: none;
  cursor: pointer;
}

.difficulty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff8833;
  box-shadow: 0 0 10px #ff660088;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.difficulty-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff8833;
  box-shadow: 0 0 10px #ff660088;
  cursor: pointer;
}

.difficulty-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.difficulty-labels span {
  color: #887755;
  transition: color 0.3s;
  cursor: default;
}

.difficulty-labels span.active {
  color: #ffcc66;
  text-shadow: 0 0 8px #ff660066;
}

/* --- Панели сложностей --- */
.diff-panel {
  display: none;
  background: #110700;
  border: 1px solid #ff660033;
  border-radius: 12px;
  padding: 25px 30px;
  margin-top: 10px;
  line-height: 1.7;
  transition: background 0.4s, border-color 0.4s;
}

.diff-panel.active {
  display: block;
}

.diff-panel h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.diff-panel p {
  color: #eebb88;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

/* Цвета по сложностям */
.diff-panel.themed-orange {
  background: #1a0a00;
  border-color: #ff550044;
}

.diff-panel.themed-orange h3 { color: #ff6622; }
.diff-panel.themed-orange p { color: #ffcc99; }

.diff-panel.themed-red {
  background: #1a0500;
  border-color: #cc000044;
}

.diff-panel.themed-red h3 { color: #ff2222; }
.diff-panel.themed-red p { color: #ffaaaa; }

.diff-panel.themed-purple {
  background: #10001a;
  border-color: #9933cc44;
}

.diff-panel.themed-purple h3 { color: #bb55ee; }
.diff-panel.themed-purple p { color: #ddccee; }

.diff-extreme { color: #ff6622 !important; }
.diff-impossible { color: #ff2222 !important; }
.diff-hollow { color: #bb55ee !important; }

/* --- Тренировка реакции --- */
.reaction-subtitle {
  text-align: center;
  color: #cc9955;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.reaction-screen {
  text-align: center;
  padding: 40px 20px;
}

.reaction-big-text {
  font-size: 1.8rem;
  color: #ffcc66;
  text-shadow: 0 0 16px #ff660044;
  margin-bottom: 30px;
  line-height: 1.4;
}

.reaction-wait-text {
  color: #ff9944;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
}

.reaction-btn {
  background: linear-gradient(135deg, #ff6600, #cc4400);
  color: #fff;
  border: 2px solid #ff8833;
  border-radius: 14px;
  padding: 16px 48px;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px #ff660044;
}

.reaction-btn:hover {
  background: linear-gradient(135deg, #ff8833, #ff5500);
  box-shadow: 0 0 28px #ff660088;
  transform: translateY(-2px);
}

/* Игровое поле */
.reaction-field {
  position: relative;
  width: 100%;
  height: 350px;
  background: #0d0500;
  border: 2px solid #ff660033;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 10px;
}

.reaction-hint {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: #887755;
  font-size: 0.9rem;
  pointer-events: none;
}

.reaction-target {
  position: absolute;
  width: 70px;
  height: 50px;
  background: linear-gradient(135deg, #ff6600, #ff3300);
  border: 2px solid #ff8833;
  border-radius: 8px;
  box-shadow: 0 0 18px #ff660088;
  display: none;
  cursor: pointer;
  transition: transform 0.1s;
}

.reaction-target:hover {
  transform: scale(1.08);
}

/* Результат */
.reaction-record-text {
  font-size: 1.2rem;
  color: #00e676;
  margin-bottom: 25px;
}

.reaction-record-text.no-record {
  color: #887755;
}

/* --- Генератор челленджей --- */
.challenge-subtitle {
  text-align: center;
  color: #cc9955;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.challenge-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 30px 0;
  flex-wrap: wrap;
}

.challenge-btn {
  padding: 18px 36px;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 14px;
  cursor: pointer;or: pointer;
  transition: all 0.3s ease;
  border: 2px solid;
  color: #fff;
}

.challenge-easy {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  border-color: #66bb6a;
  box-shadow: 0 0 16px #43a04744;
}

.challenge-easy:hover {
  background: linear-gradient(135deg, #66bb6a, #2e7d32);
  box-shadow: 0 0 24px #43a04788;
  transform: translateY(-2px);
}

.challenge-hard {
  background: linear-gradient(135deg, #e53935, #b71c1c);
  border-color: #ef5350;
  box-shadow: 0 0 16px #e5393544;
}

.challenge-hard:hover {
  background: linear-gradient(135deg, #ef5350, #b71c1c);
  box-shadow: 0 0 24px #e5393588;
  transform: translateY(-2px);
}

/* --- Звёзды рейтинга --- */
.star-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.star {
  font-size: 1.4rem;
  color: #443322;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s, transform 0.2s;
  user-select: none;
  line-height: 1;
}

.star:hover {
  color: #ffcc00;
  transform: scale(1.2);
}

.star.lit {
  color: #ffcc00;
  text-shadow: 0 0 10px #ffaa0088;
}

.challenge-result {
  text-align: center;
  background: #110700;
  border: 1px solid #ff660033;
  border-radius: 14px;
  padding: 30px;
  margin-top: 20px;
}

.challenge-diff {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.challenge-task {
  font-size: 1.25rem;
  color: #eebb88;
  margin-bottom: 25px;
  line-height: 1.6;
}

/* --- Рекорды --- */
.records-subtitle {
  text-align: center;
  color: #cc9955;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.records-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.rec-tab-btn {
  background: #1a0a00;
  color: #cc7733;
  border: 2px solid #ff660044;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.rec-tab-btn:hover {
  background: #2a1000;
  border-color: #ff8833aa;
  color: #ffaa55;
}

.rec-tab-btn.active {
  background: linear-gradient(135deg, #ff6600, #cc4400);
  color: #fff;
  border-color: #ff8833;
  box-shadow: 0 0 14px #ff660055;
}

.record-panel {
  display: none;
  background: #110700;
  border: 1px solid #ff660033;
  border-radius: 12px;
  padding: 25px 30px;
  line-height: 1.7;
}

.record-panel.active {
  display: block;
}

.record-panel h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.record-panel p {
  color: #eebb88;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.record-note {
  color: #cc8844 !important;
  font-style: italic;
  font-size: 0.95rem !important;
}

/* Адаптив */
@media (max-width: 600px) {
  header h1 {
    font-size: 1.5rem;
  }
  .tab-btn {
    padding: 10px 14px;
    font-size: 0.82rem;
  }
  .tab-content {
    padding: 20px;
  }
}