:root{
  /* === Фирменная палитра МГ «Отдел» === */
  --navy:#1E3250;        /* Delft Blue — основной тёмный */
  --navy-soft:#2c4468;
  --powder:#AAC8E6;      /* Powder Blue */
  --orange:#F07832;      /* Pumpkin — точечный акцент */
  --orange-deep:#d9631f;
  --card-bg:#F0F7FD;
  --bg-light:#F7FBFE;
  --border:#DCE7F0;
  --text-gray:#8C96A5;
  --text-on-dark:#F7FAFC;
  --ink:#1E3250;

  --font-head:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--navy);
}

#app{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:640px;
  overflow:hidden;
}

.screen{
  position:absolute;
  inset:0;
  display:none;
  width:100%;
  height:100%;
}
.screen[data-active="true"]{
  display:block;
  animation:screen-in .6s var(--ease) both;
}
@keyframes screen-in{
  from{opacity:0; transform:scale(1.01);}
  to{opacity:1; transform:scale(1);}
}
.screen-scroll{
  display:none;
  overflow:hidden;
  background:var(--navy);
}
.screen-scroll[data-active="true"]{
  display:block;
}

/* ===== Полноэкранная "сцена": фото + градиент + текст поверх, без белой подложки ===== */
.stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.visual-bg{
  position:absolute;
  inset:-2%;
  background-size:cover;
  background-position:center;
}
.kb-bg{
  animation:ken-burns 22s ease-in-out infinite alternate;
}
.kb-bg-slow{
  animation:ken-burns 34s ease-in-out infinite alternate;
}
@keyframes ken-burns{
  from{transform:scale(1);}
  to{transform:scale(1.09);}
}

/* Двухслойный кроссфейд для смены иллюстрации внутри игровой сцены */
.visual-bg-stack{
  position:absolute;
  inset:-2%;
}
.visual-bg-stack .visual-bg{
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.visual-bg-stack .visual-bg.layer-visible{
  opacity:1;
}

/* Тёмный градиент слева направо — под ним лежит текст, без отдельной панели */
.scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(15,24,40,.90) 0%,
    rgba(15,24,40,.82) 30%,
    rgba(15,24,40,.55) 48%,
    rgba(15,24,40,.16) 65%,
    rgba(15,24,40,0) 80%);
}
.scrim-strong{
  background:linear-gradient(100deg,
    rgba(15,24,40,.94) 0%,
    rgba(15,24,40,.88) 32%,
    rgba(15,24,40,.62) 50%,
    rgba(15,24,40,.22) 68%,
    rgba(15,24,40,0) 82%);
}
/* Ровная затемняющая пелена на весь экран — для скролл-экрана с карточками */
.scrim-flat{
  background:linear-gradient(180deg, rgba(15,24,40,.88), rgba(15,24,40,.86));
}

/* ===== Логотип (фирменное правило: правый верхний угол, ~12-15% ширины, не искажать), всегда белый — экраны фотографические ===== */
.logo{
  position:absolute;
  top:30px;
  right:34px;
  width:17%;
  min-width:170px;
  max-width:250px;
  height:auto;
  z-index:6;
  filter:brightness(0) invert(1);
  animation:logo-in .7s var(--ease) both;
  animation-delay:.15s;
}
@keyframes logo-in{
  from{opacity:0; transform:translateY(-8px);}
  to{opacity:1; transform:translateY(0);}
}

/* ===== Текстовый оверлей поверх фото ===== */
.overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:560px;
  padding:5.5vh 4.5vw;
  overflow-y:auto;
  color:var(--text-on-dark);
}

/* ===== Маскоты команды «Отдел» - правый нижний угол экрана ===== */
.mascot{
  position:absolute;
  right:1.5%;
  bottom:0;
  height:60%;
  max-height:480px;
  width:auto;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.4));
  animation:mascot-in .8s var(--ease) both;
  animation-delay:.5s;
}
.mascot-duo{ height:66%; max-height:540px; }
@keyframes mascot-in{
  from{opacity:0; transform:translateY(28px);}
  to{opacity:1; transform:translateY(0);}
}
/* Праздничная пара на стартовом экране - надпись "С Днём строителя!" над картинкой,
   flex-колонка вместо фиксированных % под текст+картинку по отдельности */
.mascot-holiday-wrap{
  position:absolute;
  right:1.5%;
  bottom:0;
  height:68%;
  max-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  z-index:3;
  pointer-events:none;
  animation:mascot-in .8s var(--ease) both;
  animation-delay:.5s;
}
.mascot-holiday-heading{
  flex-shrink:0;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(22px, 2.9vw, 38px);
  line-height:1.08;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 4px 18px rgba(0,0,0,.55);
  margin-bottom:14px;
}
.mascot-holiday-img{
  flex:1;
  min-height:0;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.4));
}
@media (max-width:760px){
  .mascot-holiday-wrap{ display:none; }
}

@media (max-width:760px){
  .mascot{ display:none; } /* мало места на мобильном - не перекрываем текст и карточки */
}

/* ===== Пагинация (точки прогресса) для игровых сцен ===== */
.progress-track{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:5;
}
.progress-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:1.5px solid rgba(255,255,255,0.85);
  transition:all .3s var(--ease);
}
.progress-dot.done{background:var(--orange);border-color:var(--orange);}
.progress-dot.current{background:#fff;border-color:#fff;transform:scale(1.4);box-shadow:0 0 0 4px rgba(255,255,255,0.25);}

/* ===== Reveal-анимация: элементы поочерёдно проявляются ===== */
.reveal{
  animation:reveal-up .55s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 90ms + .1s);
}
@keyframes reveal-up{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}

.eyebrow{
  font-family:var(--font-head);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  margin:0 0 10px;
}
.headline{
  font-family:var(--font-head);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.2;
  margin:0 0 18px;
  font-weight:800;
  color:#ffffff;
}
.body-text{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.3;
  margin:0 0 12px;
  color:rgba(255,255,255,.86);
}
.fine-print{
  font-family:var(--font-body);
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin-top:20px;
  line-height:1.3;
}

.btn{
  border:none;
  cursor:pointer;
  font-family:var(--font-head);
  font-weight:700;
  border-radius:8px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease;
  position:relative;
  overflow:hidden;
}
.btn span{position:relative; z-index:1;}
.btn-primary{
  background:var(--orange);
  color:#ffffff;
  font-size:15px;
  letter-spacing:.02em;
  padding:16px 32px;
  margin-top:14px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--orange-deep);
  transform:translateX(-101%);
  transition:transform .28s var(--ease);
}
.btn-primary:hover::after{transform:translateX(0);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ===== Игровая сцена ===== */
.step-label{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.scene-title{
  font-family:var(--font-head);
  font-size:clamp(20px,2.1vw,26px);
  margin:0 0 10px;
  font-weight:800;
  color:#ffffff;
}
.scene-intro p{
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.28;
  color:rgba(255,255,255,.78);
  margin:0 0 6px;
}
.question{
  font-family:var(--font-head);
  font-size:17px;
  font-weight:700;
  margin:12px 0 10px;
  color:#ffffff;
}

.answers{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.answer-card{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:10px 16px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:10px;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.3;
  color:#ffffff;
  transition:border-color .16s ease, background .16s ease, transform .12s var(--ease), opacity .16s ease;
  animation:reveal-up .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms + .25s);
}
.answer-card:hover{border-color:var(--orange); transform:translateX(3px);}
.answer-card .a-index{
  flex:0 0 26px;
  height:26px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:700;
  color:#ffffff;
  transition:all .18s var(--ease);
}
.answer-card .a-body strong{display:block;font-family:var(--font-head); font-size:15px;margin-bottom:2px; font-weight:700;}
.answer-card .a-sub{font-size:13.5px;color:rgba(255,255,255,.7);font-weight:400;}
.answer-card.selected{
  border-color:var(--orange);
  background:rgba(240,120,50,.16);
  animation:card-pop .35s var(--ease);
}
@keyframes card-pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.015);}
  100%{transform:scale(1);}
}
.answer-card.selected .a-index{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
/* Без явного animation:none карточка, потеряв .selected, снова попадала бы под
   базовое правило .answer-card{animation:reveal-up...}, а смена значения animation
   перезапускает его с нуля (opacity:0) - карточка на миг пропадала и появлялась заново */
.answer-card.dimmed{opacity:.55; animation:none;}
.answer-card.dimmed:hover{opacity:.85;}

.btn-continue{
  align-self:flex-start;
  margin-top:10px;
  animation:reveal-up .4s var(--ease) both;
}

/* ===== Финальный результат — открытка с поздравлением, отличается от остальных экранов ===== */
.scrim-postcard{
  background:radial-gradient(ellipse 70% 85% at 50% 45%,
    rgba(15,24,40,.82) 0%,
    rgba(15,24,40,.68) 45%,
    rgba(15,24,40,.4) 72%,
    rgba(15,24,40,.22) 100%);
}
.overlay-centered{
  margin:0 auto;
  max-width:640px;
  align-items:center;
  text-align:center;
}
.overlay-centered .result-greeting{
  text-align:left;
}
.postcard-frame{
  position:absolute;
  inset:16px;
  border:1.5px solid rgba(240,120,50,.55);
  z-index:3;
  pointer-events:none;
}
.result-kicker{
  font-family:var(--font-head);
  font-size:14px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--orange);margin-bottom:8px;
}
.result-title{font-family:var(--font-head); font-size:clamp(22px,2.4vw,30px);margin:0 0 4px;font-weight:800; color:#ffffff;}
.result-role{font-family:var(--font-head); font-size:16px;font-weight:700;color:rgba(255,255,255,.8); margin-bottom:12px;}
.result-text p{font-family:var(--font-body); font-size:15px;line-height:1.3;color:rgba(255,255,255,.82); margin:0 0 10px;}
.result-greeting{
  position:relative;
  margin:16px 0 6px;
  padding:16px 20px 16px 22px;
  background:rgba(240,120,50,.14);
  border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;
  font-family:var(--font-head);
  font-size:17px;
  font-weight:700;
  font-style:italic;
  line-height:1.35;
  color:#ffffff;
}
.result-greeting::before{
  content:"“";
  position:absolute;
  left:-2px;
  top:-14px;
  font-family:Georgia,serif;
  font-size:46px;
  font-style:normal;
  font-weight:700;
  color:var(--orange);
  opacity:.7;
}

/* ===== Экран выбора подарка ===== */
.stage-fixed-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.scroll-content{
  position:relative;
  z-index:1;
  height:100%;
  overflow-y:auto;
  padding:16vh 6vw 4vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.gift-header{max-width:900px;margin:0 auto 18px;text-align:left;}
.gift-header .headline{font-size:clamp(20px,2.2vw,27px); margin-bottom:10px;}
.gift-header .body-text{margin-bottom:6px;}
.gift-header .fine-print{margin-top:8px;}
.gift-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1180px;
  margin:0 auto;
  width:100%;
}
@media(min-width:900px){
  .gift-grid{grid-template-columns:repeat(6,1fr);}
  .gift-grid .gift-card{grid-column:span 2;}
  .gift-grid .gift-card:nth-child(4){grid-column:2 / span 2;}
  .gift-grid .gift-card:nth-child(5){grid-column:4 / span 2;}
}
.gift-card{
  background:rgba(30,50,80,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:18px 18px;
  display:flex;
  flex-direction:column;
  transition:border-color .18s ease, transform .18s var(--ease), background .18s ease;
  animation:reveal-up .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 80ms + .1s);
}
.gift-card:hover{
  border-color:var(--orange);
  background:rgba(30,50,80,.68);
  transform:translateY(-4px);
}
.gift-icon{
  width:38px;height:38px;
  border-radius:9px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  margin-bottom:10px;
}
.gift-name{font-family:var(--font-head); font-size:15px;font-weight:800;margin:0 0 10px; color:#ffffff;line-height:1.3;flex:1;}
.gift-card .btn-primary{align-self:flex-start;padding:9px 18px;font-size:13px;margin-top:0;}

/* ===== Модалка (отдельный диалог поверх экрана — остаётся плотной белой карточкой для читаемости) ===== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,25,42,0.55);
  display:none;
  align-items:center;justify-content:center;
  z-index:50;
  padding:24px;
}
.modal-overlay[data-active="true"]{
  display:flex;
  animation:overlay-in .25s ease both;
}
@keyframes overlay-in{from{opacity:0;} to{opacity:1;}}
.modal-card{
  background:#fff;
  border-radius:16px;
  max-width:560px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  padding:36px 34px;
  position:relative;
  animation:modal-in .32s var(--ease) both;
}
@keyframes modal-in{
  from{opacity:0; transform:translateY(16px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.modal-close{
  position:absolute;top:18px;right:18px;
  width:32px;height:32px;border-radius:50%;
  border:none;background:var(--card-bg);
  cursor:pointer;font-size:14px;color:var(--text-gray);
  transition:background .15s ease;
}
.modal-close:hover{background:var(--border);}
.modal-icon{font-size:28px;margin-bottom:10px;}
.modal-title{font-family:var(--font-head); font-size:22px;font-weight:800;margin:0 0 12px; color:var(--navy);}
.modal-desc{font-family:var(--font-body); font-size:15px;color:var(--navy); opacity:.8; line-height:1.3;margin:0 0 14px;}
.modal-section-label{font-family:var(--font-head); font-size:13px;font-weight:800;color:var(--navy);margin:0 0 8px;}
.modal-list{margin:0 0 14px;padding-left:20px;}
.modal-list li{font-family:var(--font-body); font-size:14.5px;color:var(--navy); opacity:.75; line-height:1.3;margin-bottom:6px;}
.modal-footnote{font-family:var(--font-body); font-size:13px;color:var(--text-gray);line-height:1.25;margin:0 0 18px;}

/* ===== Подтверждение подарка ===== */
.check-badge{
  width:52px;height:52px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-size:24px;font-weight:800;margin-bottom:18px;
  animation:badge-pop .5s var(--ease) both, reveal-up .5s var(--ease) both;
}
@keyframes badge-pop{
  0%{transform:scale(0);}
  60%{transform:scale(1.15);}
  100%{transform:scale(1);}
}
.chosen-gift{
  display:inline-block;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:8px;
  padding:8px 18px;
  font-family:var(--font-head);
  font-size:14px;
  font-weight:700;
  color:#ffffff;
  margin-bottom:16px;
}
.signature{margin-top:10px;font-weight:600;color:#ffffff;}
.confirm-actions{display:flex;align-items:center;gap:22px;margin-top:8px;flex-wrap:wrap;}
.link-action{
  font-family:var(--font-head);
  font-size:14px;font-weight:700;color:rgba(255,255,255,.75);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  transition:opacity .15s ease;
}
.link-action:hover{opacity:1;}

/* ===== Конфетти (фирменные цвета) ===== */
.confetti-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
}
.confetti-piece{
  position:absolute;
  top:-24px;
  width:8px;
  height:14px;
  opacity:0;
  animation:confetti-fall linear forwards;
  border-radius:2px;
}
@keyframes confetti-fall{
  0%{opacity:1; transform:translateY(0) rotate(0deg);}
  100%{opacity:.9; transform:translateY(112vh) rotate(540deg);}
}

/* ===== Адаптив ===== */
@media(max-width:900px){
  .overlay{max-width:none; padding-left:22px; padding-right:22px;}
  .gift-grid{grid-template-columns:1fr;}
  .gift-grid .gift-card:nth-child(4),
  .gift-grid .gift-card:nth-child(5){grid-column:auto;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}