* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
body { background: #1a1a2e; color: #fff; min-height: 100vh; }

.screen { display: none; max-width: 600px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.screen.active { display: block; }
.hidden { display: none !important; }

h1 { margin-bottom: 10px; }
h2 { margin-bottom: 20px; }

.btn { display: block; width: 100%; margin: 10px 0; padding: 15px;
       border: none; border-radius: 12px; font-size: 18px; cursor: pointer;
       background: #4361ee; color: #fff; transition: 0.2s; }
.btn:hover { background: #3a56d4; }
.btn-big { padding: 25px; font-size: 22px; }
.btn-secondary { background: #444; }
.btn-secondary:hover { background: #555; }

input { width: 100%; padding: 15px; margin: 10px 0; border-radius: 12px;
        border: none; font-size: 18px; }
.mascot {
  display: block;
  max-width: 180px;
  height: auto;
  margin: 0 auto 16px;
}

.intro-text {
  max-width: 600px;
  margin: 0 auto 24px;
  text-align: center;
  line-height: 1.5;
  color: #444;
}

.btn-site {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  background: #2b7a3e;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
}
.btn-site:hover {
  background: #1f5c2e;
}

#screen-register input,
#screen-name input {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 10px auto;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}
/* Шапка игры */
.game-header { display: flex; justify-content: space-between;
               margin-bottom: 15px; font-size: 16px; }

/* Таймер */
.timer-wrap { background: #333; border-radius: 10px; height: 24px;
              position: relative; margin: 20px 0; overflow: hidden; }
#timer-bar { height: 100%; width: 100%; background: #4caf50; transition: width 1s linear; }
#timer-bar.timer-danger { background: #e63946; }
#timer-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

/* Ответы */
.btn-answer.correct { background: #4caf50; }
.btn-answer.wrong { background: #e63946; }
#question-text { font-size: 20px; margin-bottom: 20px; }
#progress { margin-top: 15px; color: #aaa; }

/* Всплывающие баллы */
.points-popup { position: fixed; top: 40%; left: 50%; transform: translateX(-50%);
                font-size: 48px; color: #4caf50; font-weight: bold;
                animation: fly 1s ease-out forwards; }
@keyframes fly { to { transform: translate(-50%, -80px); opacity: 0; } }

/* Экран результатов */
.final-score { font-size: 32px; font-weight: bold; margin: 15px 0; color: #ffd700; }

.prize-won { background: #2d6a4f; border: 2px solid #4caf50;
             border-radius: 12px; padding: 20px; margin: 15px 0;
             font-size: 22px; font-weight: bold; }

.prize-none { background: #333; border-radius: 12px; padding: 15px;
              margin: 15px 0; color: #aaa; }

.volunteer-note { background: #ffd700; color: #1a1a2e;
                  border-radius: 12px; padding: 20px; margin: 20px 0;
                  font-size: 20px; font-weight: bold;
                  animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Таблица лидеров */
.lb-row { display: flex; align-items: center; gap: 10px;
          background: #2a2a45; border-radius: 10px;
          padding: 12px 15px; margin: 6px 0; text-align: left; }
.lb-top { background: #33335c; border: 1px solid #ffd700; }
.lb-place { min-width: 36px; font-size: 18px; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: bold; color: #ffd700; }