:root {
  --primary-text-color: #f0f0f0;
  --accent-color: #ffd700;
  --text-shadow-main: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255,255,255,0.2);
  --text-shadow-timer: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 2px rgba(255,255,255,0.3);
  --timer-number-color: #ffffff;
  --timer-label-color: rgba(240, 240, 240, 0.85);
  --transition-1: all 0.3s ease;
  --debug-menu-width: 260px;
  --card-bg-debug: rgba(20, 30, 40, 0.85);
  --card-border-debug: rgba(100, 120, 140, 0.5);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent all scrolling */
}

body {
  background-color: #0f2027;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--primary-text-color);
  transition: background 1.5s ease;
  position: relative;
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-align: center;
}

/* Сезонные стили для фона */
body.january { background: linear-gradient(135deg, #0c2340 0%, #2d5a80 100%); }
body.february { background: linear-gradient(135deg, #2d3a4a 0%, #546a83 100%); }
body.march { background: linear-gradient(135deg, #3b5866 0%, #6e9fb0 100%); }
body.april { background: linear-gradient(135deg, #21606d 0%, #88c9be 100%); }
body.may { background: linear-gradient(135deg, #267383 0%, #8dd8f3 100%); }
body.june { background: linear-gradient(135deg, #325487 0%, #7caef4 100%); }
body.july { background: linear-gradient(135deg, #0077b3 0%, #58c9e6 100%); }
body.august { background: linear-gradient(135deg, #e86a25 0%, #ffd16b 100%); }
body.september { background: linear-gradient(135deg, #d75b26 0%, #f4cd72 100%); }
body.october { background: linear-gradient(135deg, #833012 0%, #d8b264 100%); }
body.november { background: linear-gradient(135deg, #5b5b63 0%, #a18496 100%); }
body.december { background: linear-gradient(135deg, #1a1e4c 0%, #4772b8 100%); }
body.new-year { background: linear-gradient(135deg, #12144d 0%, #425d9e 60%, #613a88 100%); }

/* Канвасы для эффектов */
#seasonal-canvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 1;
}
#fireworks-canvas {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 5; display: block;
}

/* Основной контейнер страницы */
.page-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 700px;
  margin: 0 auto; /* Center horizontally */
  min-height: 100vh; /* Fallback for older browsers */
  min-height: 100dvh; /* Use dynamic viewport height */
  padding: 30px 20px;
  box-sizing: border-box;
}

header {
  width: 100%;
  padding: 15px 0;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.current-date {
  font-size: 1em;
  font-style: italic;
  opacity: 0.85;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.season-info {
  display: flex;
  align-items: center;
  font-size: 1em;
  opacity: 0.9;
}

.season-icon {
  font-size: 1.5em;
  margin-right: 8px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.main-content.greeting-active .center-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}

.center-content {
  padding: 20px 0;
  animation: fadeInContent 1.5s ease-out;
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 2.6em;
  margin: 0 0 15px 0;
  font-weight: 300;
  color: var(--primary-text-color);
  text-shadow: var(--text-shadow-main);
  font-family: 'Comfortaa', cursive;
  line-height: 1.3;
}

h1 span#next-year {
  font-weight: 700;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}

.countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 15px 10px;
  transition: transform 0.3s ease;
}

.countdown .number {
  font-size: 3em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--timer-number-color);
  text-shadow: var(--text-shadow-timer);
  line-height: 1;
  margin-bottom: 5px;
}

.countdown .label {
  font-size: 0.7em;
  font-weight: 400;
  color: var(--timer-label-color);
  letter-spacing: 1.5px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.greeting {
  font-size: 2em;
  font-family: 'Comfortaa', cursive;
  margin: 0;
  padding: 0;
  color: var(--accent-color);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 15px var(--accent-color);
  animation: softGlowGreeting 2.5s infinite alternate;
  line-height: 1.2;
  transform: translateY(-0.5em);
}

.center-content.greeting-active { /* Используется js/ui.js для изменения поведения .center-content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  padding: 0;
}

@keyframes softGlowGreeting {
  from { text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 15px var(--accent-color); opacity: 0.9;}
  to { text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 25px var(--accent-color), 0 0 5px #fff; opacity: 1;}
}

footer {
  width: 100%;
  padding: 20px 0;
  font-size: 0.85em;
  font-style: italic;
  color: rgba(240, 240, 240, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: auto; /* Прижимает футер к низу */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Праздничные украшения */
.decorations {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity 1s ease;
}
.decorations.active { opacity: 1; }
.garland {
  position: absolute; top: 0; left: 0; width: 100%; height: 20px;
  display: flex; justify-content: space-around; align-items: center;
}
.garland.vertical { flex-direction: column; width: 20px; height: 100%; top: 0; justify-content: space-around; }
.garland.left { left: 0; }
.garland.right { left: auto; right: 0; }
.garland.bottom { top: auto; bottom: 0; }
.garland-light {
  width: 10px; height: 10px; border-radius: 50%;
  animation: gentleTwinkle 2s infinite alternate;
  box-shadow: 0 0 8px currentColor, 0 0 15px currentColor;
}
@keyframes gentleTwinkle {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.1); opacity: 0.9; }
}

/* Фоновая текстура-шум */
.texture-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.10;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c4zIgLAAAFDklEQVR4Ac2Z23KrMAyESYgxCISTD+H9X7TSSbmUQJJJ2u5Mfsww5bP9WZYl0qlSoYQqJZRQpYSqOylhLsKXMUKV3UTkEhZgLkJeCb+Zy6b7CCnmIs5FiIkpMBdhLoKqz0XQveYi/C5CJA9fjFBJ3yqh8s4wR8ldo+QupETJXaPkrlFy16i5ayW99t8rZF0hfGGF0AkrZF0heGEFMvCFFZKvELyw5hfuiEtE7cIlwRsxJ3iDl4g5wUvNJeJZiGvEpxA3iJqFKLdnOgjhAzXRQHhsIMEPNCF8Qxs+IKqKD4i6EboirAgdVlwTcUn0LCCuiHihCxRRJRnJchqRI0YkCGZEhhgRKhMjMsSIBCEyIkViLCMWk+8FMSKbEQ0Q24wYWQojuhnRHbHPiMpIhP9M1oAIWROyImRHcBLhI/oF0TciHCPER8SjgPgYbQEPFhDOSPYRUX+LkJgQ9bSAfBBsF6JK9oFYHWJDsE9ErSRvuoVYPXokUC3ORlULECb0IPRA1A3xPzU9EOITIh+IWUEWkQ9E/CqiBsTwWUQ2ICJGXDYgCkY8vkZUKSK+iKCKkHFFRJXuJ4Q8EVIf0QUmBIzI+yEqRsi4IErqoyJaHxGVGQEiHCPKgIjaRwQYEQZE6CNIRkyIMiAKI6JPCHVe7xoR1YKAfoSbEDeIUNuL/Q6RM6INiCIhMiBiB/G5QmxBRk/UZkbEdxEhwIyUhIi3iDAhWl8Iai+7I3JH7I7YHbE7YnfE7ojdEbshdsTuiH89okb03xDxX4aoPSOMCFUTQh4Im5/dT8Qw3xcQfkbwjBgQISKiThGxMxKfiFbORGnMiLCP6JJGRFXiCyGiBcR8IqRlxKsXfkaw84no+USEnBH9RpQBofOMoMWIuBbPiLqyaMUTEQdE/Zxti3+LqEJE3B3xuwhe5SHimxChIcJmRK0TMlWwS8QMxE5ItSKuQBSMuHQiOLWzVqzBf0ZogFhvi7iRY8THrIIVMQl5rYZwSF3OV/aQe1YuQvoV8TwQZDWEe39rvRBhQdC8WnbErBVXQNhpiHkVxDojypJgkwMhmxYhYtZBxK6FnIg2I2I11xXCxVyGqKshYg7LQtRmRO1YYm0giDcIEQtCXaohYkR0Rsg1wowQcVnJHRHtZfYFwooEXwxxrXLEQrZJF8jIwuSMyDlC/o/MBBFRLMj6j8ixGSG3LPw/Im9/ZJbMiD5FxKwLRORIZ6PMESAiZYrUGZHzAfCKkE94FCBeLHpCaNJiaGVTBDdBuG2I4BsiFN/Kwg2SrIcFsX0g2grUxDaJ0FKyZYQGNYlgjKg2ITo+FhG1Q0z3RKLhpCCEWmAq7QYRp0Gw9Ygxg4gTTxQqjxGj6Lgj6h9HhPGxgIiLj0VEnhF9QnB/IOZ6BdEzhPUbIqdXILgCkRuWXKsgfKG6HoFVEL1AyEtN2DcROryIuKVODy8RUh/O0A7h1wmOK9wmiKhrgnMcZWWDsOuE8ztRJQdCWRPahRZ3okoPxKMhsYJnF8TjdjJtLfBcINZ5cYp2N4h0gWCXCJ0hWtjTl8ORHlMOaLpAiOMCyRDinEuH5Yh4h5BzRLhE9JaP9IeIlBER5+GYEeFMn5q6HiP8PmKIg6j3CSKu6aOe6htxa/3pob0TsQQTUXLXKLlrlNw1Su4aJXeNkrvGMT8ZclQpVOtOCvWjlFClhKrnKX0B8ZbaSJw+5l4AAAAASUVORK5CYII=');
}

/* Адаптивность */
@media (max-width: 768px) {
  .page-container { padding: 20px 15px; max-width: 100%; }
  header { margin-bottom: 20px; flex-direction: column; gap: 10px; align-items: center; }
  .current-date, .season-info { text-align: center; }
  h1 { font-size: 2em; margin-bottom: 25px; }
  .countdown { font-size: 2.2em; gap: 15px; }
  .countdown .number { font-size: 1em; }
  .countdown .label { font-size: 0.3em; }
  .countdown span { min-width: 70px; padding: 10px 5px; }
  .greeting { font-size: 1.7em; }
}

@media (max-width: 480px) {
  .page-container { padding: 15px 10px; }
  header { padding: 10px 0; margin-bottom: 15px; }
  h1 { font-size: 1.6em; margin-bottom: 20px; }
  .countdown { font-size: 1.8em; gap: 10px; }
  .countdown .number { font-size: 1em; }
  .countdown .label { font-size: 0.3em; letter-spacing: 1px; }
  .countdown span { min-width: 55px; padding: 8px 4px; }
  .greeting { font-size: 1.4em; }
  .garland-light { width: 8px; height: 8px;}
  .garland { height: 15px; }
  .garland.vertical { width: 15px; }
  footer { font-size: 0.8em; padding: 15px 0; }
}

/* Затемнение фона для модального меню отладки */
body.debug-menu-open::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 20, 30, 0.75);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s 0.4s;
}

body.debug-menu-open::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s 0s;
}


/* Стили для меню отладки: "легкое" модальное окно */
.debug-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 90vw;
  max-width: 600px;
  background: rgba(30, 45, 60, 0.85);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(180, 200, 230, 0.25);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.3);
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s 0.35s;
}

.debug-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0s 0s;
}

.debug-menu h3 {
  width: 100%;
  margin: 0 0 18px 0;
  font-family: 'Comfortaa', cursive;
  text-align: center;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-size: 1.25em;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(180, 200, 230, 0.2);
}

/* Контейнер для кнопок меню, использующий Grid для адаптивного расположения */
.debug-menu-buttons-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}

.debug-menu button {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(200, 220, 255, 0.2);
  color: var(--primary-text-color);
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85em;
  text-align: left;
  width: 100%;
  box-shadow: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.debug-menu button:hover {
  background-color: rgba(200, 220, 255, 0.18);
  border-color: rgba(200, 220, 255, 0.35);
  transform: translateY(-1px);
}

.debug-menu button:active {
  background-color: rgba(200, 220, 255, 0.12);
  transform: scale(0.99);
}

.debug-menu button svg,
.debug-menu button img,
.debug-menu button::before { /* Для иконок (например, эмодзи уже являются текстом) */
  margin-right: 8px;
  opacity: 0.8;
  flex-shrink: 0;
}

.debug-menu button#close-debug-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none !important;
  border: none !important;
  font-size: 1.8em;
  color: rgba(255,255,255,0.65);
  padding: 8px;
  line-height: 1;
  width: auto;
  opacity: 1;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.debug-menu button#close-debug-menu:hover {
  color: #fff;
  transform: rotate(90deg) scale(1.1);
}

.debug-menu button#reset-debug-mode {
  grid-column: 1 / -1; /* Растягиваем на все колонки грида */
  margin-top: 10px;
  background-color: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.35);
  text-align: center;
  font-weight: 400;
  color: rgba(255,210,210,0.9);
  justify-content: center;
}
.debug-menu button#reset-debug-mode:hover {
  background-color: rgba(255, 80, 80, 0.3);
  border-color: rgba(255, 80, 80, 0.55);
  color: #fff;
}