:root{
  --bg:#f7fcff;
  --accent:#7de0d6;
  --accent2:#ffd27a;
  --text:#222;
  --muted:#6b7280;
  --card-bg: rgba(255,255,255,0.9);
}

*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:Inter, system-ui, -apple-system, 'Helvetica Neue', Arial; background:linear-gradient(180deg,var(--bg),#e6fbff); color:var(--text); -webkit-font-smoothing:antialiased}
.card{max-width:900px; margin:18px auto; padding:18px; background:transparent}
.hero{background: linear-gradient(90deg, rgba(125,224,214,0.12), rgba(255,210,122,0.08)); padding:20px; border-radius:16px; text-align:center; box-shadow:0 8px 24px rgba(14,30,37,0.06)}
.hero h1{margin:0 0 6px; font-size:20px}
.hero .sub{margin:0 0 12px; color:var(--muted)}
/* Кнопка воспроизведения в левом верхнем углу */
.sticker-play{
  position:fixed;
  top:20px;
  left:20px;
  width:50px;
  height:50px;
  background:rgba(125,224,214,0.7);
  border:none;
  border-radius:50%;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(125,224,214,0.25);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  backdrop-filter:blur(10px);
}
.sticker-play:hover{
  transform:scale(1.1);
  background:rgba(125,224,214,0.9);
  box-shadow:0 8px 20px rgba(125,224,214,0.35);
}
.sticker-play:active{transform:scale(0.95)}

.gallery{margin-top:16px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.grid img{width:100%; height:200px; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,0.06); transform-origin:center; animation:float 6s ease-in-out infinite}

/* Заглавное фото - больше размер */
.hero-photo{height:250px !important; grid-column:1/-1; margin-bottom:10px}

/* Обычные фото - разные размеры */
.regular-photo:nth-child(2){height:180px}
.regular-photo:nth-child(3){height:220px}
.regular-photo:nth-child(4){height:160px}
.regular-photo:nth-child(5){height:200px}
.regular-photo:nth-child(6){height:190px}
@keyframes float{
  0%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0px)}
}

.info{margin-top:18px; background:var(--card-bg); padding:14px; border-radius:12px}
.info h2{margin-top:0}
.cards{display:flex; gap:10px; flex-wrap:wrap}
.card-small{flex:1 1 220px; background:linear-gradient(180deg,#fff,#fff); padding:10px; border-radius:10px; box-shadow:0 6px 18px rgba(2,6,23,0.04); font-size:14px}
.note{color:var(--muted); font-size:13px}

.mapwrap{margin-top:12px; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.05)}
.maplink{display:inline-block; margin-top:6px; color:var(--accent2); font-weight:600; text-decoration:none}

/* Мини-карта */
.mini-map{
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(2,6,23,0.08);
}
.mini-map iframe{
  width:100%;
  height:200px;
  border:none;
  border-radius:12px;
}

.footer{margin-top:16px; text-align:center; color:var(--muted); font-size:13px}

/* Конфетти-анимация */
.confetti{pointer-events:none; position:fixed; inset:0; z-index:10; overflow:hidden}
.confetti .piece{position:absolute; width:8px; height:10px; border-radius:2px; opacity:0.8; animation:fall 6s linear infinite}
@keyframes fall{
  0%{transform:translateY(-20vh) rotate(0deg) scale(1)}
  50%{transform:translateY(50vh) rotate(180deg) scale(0.9)}
  100%{transform:translateY(120vh) rotate(360deg) scale(0.7)}
}

/* Стили для телефонных ссылок */
a[href^="tel:"] {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

a[href^="tel:"]:hover {
  color: var(--accent2);
  text-decoration: underline;
}

a[href^="tel:"]:active {
  transform: scale(0.98);
}

/* мобильная адаптация */
@media (max-width:600px){
  .grid{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  
  /* Заглавное фото на мобильных - еще больше */
  .hero-photo{
    height:300px !important;
    width:100%;
    margin-bottom:15px;
  }
  
  /* Обычные фото на мобильных - вертикально, на всю ширину */
  .regular-photo:nth-child(2){height:200px; width:100%}
  .regular-photo:nth-child(3){height:180px; width:100%}
  .regular-photo:nth-child(4){height:220px; width:100%}
  .regular-photo:nth-child(5){height:190px; width:100%}
  .regular-photo:nth-child(6){height:210px; width:100%}
  
  .cards{flex-direction:column}
}