:root{
  --glass:rgba(255,255,255,.10);
  --brd:rgba(255,255,255,.26);
  --glow:rgba(255,255,255,.35);
}
*{
  box-sizing:border-box
}
html,body{
  height:100%;
  margin:0;
}
body{
  background:#0b0f15;
  color:#fff;
  overflow: auto;
  font-family:Inter,Segoe UI,Calibri,Arial,sans-serif;
}

/* Фоновый слой как на главной */
.bg{
  position:fixed;
  inset:0;
  background:#0b0f15;
  z-index:0
}

#snow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none
}

.center{
  position:fixed;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  z-index:2;
  border-radius:22px;
  padding:14px 20px;
  text-align:center;
  min-width:min(540px,94%);
}
.center.glass{
  background:var(--glass);
  border:1px solid var(--brd);
  backdrop-filter:blur(18px);
}

.countdown{
  white-space:nowrap;
  line-height:.9;
  font-weight:900;
  font-size:clamp(46px,14vw,160px);
  text-shadow:0 0 18px rgba(0,0,0,.55),0 0 22px var(--glow);
  transform-origin:center;
  animation:gentle 6s ease-in-out infinite;
}
.sub{
  opacity:.96;
  font-weight:800;
  margin:6px 0;
}

/* Анимация для плавного движения */
@keyframes gentle{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

/* СТИЛИ ДЛЯ SOUNDPROMPT (перенесены из index.css) */
.dlg{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  z-index:5
}
.hidden{
  display:none
}
.card{
  background:var(--glass);
  border:1px solid var(--brd);
  border-radius:18px;
  padding:20px 24px;
  min-width:min(420px,92%);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  text-align:center;
  animation:pop .18s ease
}
.row{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap
}
.btn{
  appearance:none;
  border:1px solid var(--brd);
  background:var(--glass);
  backdrop-filter:blur(14px);
  border-radius:14px;
  color:#fff;
  padding:12px 18px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s,background .18s,box-shadow .18s
}
.btn:hover{
  transform:translateY(-1px) scale(1.015);
  background:rgba(255,255,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.35)
}
@keyframes pop{
  from{transform:scale(.98);opacity:.7}
  to{transform:scale(1);opacity:1}
}

@media (max-height: 720px) {
    .card {
        margin-top: 100px;
    }
}

/* Стили для кнопок управления музыкой в топбаре */
.topbar .music-controls {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap; /* Запрещаем перенос строк */
}

.topbar .music-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--brd);
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Запрещаем сжатие кнопок */
}

.topbar .music-btn:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.05);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .topbar .music-controls {
        gap: 6px;
        position: static; /* Убираем абсолютное позиционирование */
        transform: none;
        left: auto;
    }
    
    .topbar .music-btn {
        font-size: 12px;
        min-width: 36px;
        min-height: 36px;
        padding: 6px 8px;
    }
    
    /* Улучшаем отображение топбара на мобильных */
    .topbar {
        flex-wrap: nowrap;
        overflow-x: auto; /* Добавляем горизонтальную прокрутку если нужно */
        overflow-y: hidden;
        padding: 8px 10px;
    }
    
    .topbar nav {
        margin-left: auto;
        flex-wrap: nowrap;
    }
    
    .topbar a.link {
        flex-shrink: 0;
        min-width: auto;
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .topbar .music-controls {
        gap: 4px;
    }
    
    .topbar .music-btn {
        font-size: 11px;
        min-width: 32px;
        min-height: 32px;
        padding: 4px 6px;
    }
    
    .topbar {
        padding: 6px 8px;
    }
    
    .topbar a.link {
        padding: 6px 8px;
        font-size: 12px;
    }
}

:fullscreen {
    background: #0b0f15 !important;
}

:-webkit-full-screen {
    background: #0b0f15 !important;
}

:-moz-full-screen {
    background: #0b0f15 !important;
}

:fullscreen .bg {
    display: block !important;
}

:fullscreen #snow {
    display: block !important;
}