/* ============================================================
   Учимся играя — общие стили сайта (gameforkids.ru)
   Подключается на каждой странице:  <link rel="stylesheet" href="/styles.css">
   Специфичные для конкретной игры стили остаются в самой странице.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Comfortaa:wght@700&display=swap');

:root {
  --sky: #7ec8e3;
  --sky-deep: #4aa3c7;
  --grass: #8ed081;
  --sun: #ffd23f;
  --coral: #ff7a5c;
  --coral-deep: #f25c3d;
  --berry: #b565d8;
  --berry-deep: #9a4dbd;
  --cream: #fff9ef;
  --ink: #3a2e4d;
  --shadow: rgba(58, 46, 77, 0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Nunito', sans-serif;
  background: linear-gradient(180deg, var(--sky) 0%, #b3e0ef 55%, var(--grass) 100%);
  min-height: 100vh;
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
}

/* ---------- Фоновые декорации: облака и солнце ---------- */
.sun {
  position: fixed; top: 24px; right: 30px;
  width: 80px; height: 80px;
  background: radial-gradient(circle, var(--sun) 60%, #ffb700 100%);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(255, 210, 63, 0.8);
  z-index: 0;
  animation: pulse 4s ease-in-out infinite;
}
.sun.small { width: 64px; height: 64px; top: 20px; right: 24px; box-shadow: 0 0 40px rgba(255,210,63,0.7); }

.cloud {
  position: fixed;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 100px;
  filter: blur(2px);
  z-index: 0;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.cloud1 { width: 120px; height: 40px; top: 8%; left: -160px; animation-duration: 45s; }
.cloud1::before { width: 55px; height: 55px; top: -22px; left: 18px; }
.cloud1::after  { width: 45px; height: 45px; top: -16px; left: 60px; }
.cloud2 { width: 90px; height: 32px; top: 20%; left: -140px; animation-duration: 60s; animation-delay: 8s; }
.cloud2::before { width: 42px; height: 42px; top: -18px; left: 14px; }
.cloud2::after  { width: 34px; height: 34px; top: -12px; left: 46px; }

/* ---------- Контейнер страницы ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---------- Заголовки ---------- */
header { text-align: center; margin-bottom: 18px; }
header h1, .page-title {
  font-family: 'Comfortaa', cursive;
  font-size: clamp(28px, 7vw, 44px);
  color: #fff;
  text-shadow: 2px 3px 0 var(--coral), 4px 6px 8px var(--shadow);
  letter-spacing: 1px;
}
.lead, .subtitle {
  color: #fff; font-size: 15px; font-weight: 700; margin-top: 6px;
  opacity: 0.92; text-shadow: 1px 1px 2px var(--shadow);
}

/* ---------- Меню игр (вставляется скриптом menu.js) ---------- */
.games-menu {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.games-menu a {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 14px; color: #fff;
  text-decoration: none; padding: 10px 16px; border-radius: 16px;
  box-shadow: 0 4px 0 var(--shadow);
  transition: transform .1s, box-shadow .1s, filter .15s;
  display: flex; align-items: center; gap: 6px;
}
.games-menu a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.games-menu a.active { outline: 3px solid #fff; filter: brightness(1.1) saturate(1.2); }
/* Цвета пунктов меню задаются инлайн из menu.js, чтобы легко добавлять новые игры */

/* ---------- Кнопки ---------- */
.btn {
  font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 14px;
  padding: 11px 16px; border: none; border-radius: 16px;
  background: var(--cream); color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 0 var(--shadow);
  transition: transform .1s, box-shadow .1s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.btn.primary { background: var(--grass); color: #fff; }
.btn.accent  { background: var(--berry); color: #fff; }
.btn.coral   { background: var(--coral); color: #fff; }

/* ---------- Карточка ---------- */
.card {
  background: var(--cream);
  border-radius: 24px;
  padding: 26px 24px;
  margin-bottom: 20px;
  box-shadow: 0 8px 0 var(--shadow), 0 12px 24px rgba(0, 0, 0, 0.08);
  border: 4px solid #fff;
}
.card h2 {
  font-family: 'Comfortaa', cursive; font-size: 22px; color: var(--coral-deep);
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.card h3 { font-size: 18px; color: var(--berry); margin: 16px 0 6px; }
.card p { margin-bottom: 12px; line-height: 1.65; }
.card ul { margin: 0 0 12px 22px; }
.card li { margin-bottom: 8px; line-height: 1.6; }

.tip-box {
  background: rgba(142, 208, 129, 0.18);
  border-left: 5px solid var(--grass);
  border-radius: 12px; padding: 14px 16px; margin: 14px 0; font-weight: 700;
}

/* ---------- Подвал ---------- */
.site-footer {
  text-align: center; margin-top: 30px; font-size: 14px;
  color: var(--ink); opacity: 0.75;
}
.site-footer a { color: var(--berry); font-weight: 700; }

/* ---------- Общие анимации ---------- */
@keyframes pulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes drift   { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 200px)); } }
@keyframes popIn   { 0% { transform: scale(0.7) rotate(-3deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bounceIn { 0% { transform: scale(0.5) translateY(10px); } 60% { transform: scale(1.1); } 100% { transform: scale(1) translateY(0); } }
@keyframes shake    { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, .cloud, .sun { animation: none !important; }
}