/* =========================================================================
   Первый экран: ночной хребет, в котором стоит корпус гостиницы.
   Каждое окно — конкретный номер. Свет горит — номер свободен.
   ========================================================================= */

/* ---------- Сцена ---------- */
.scene{
  position:relative;
  min-height:min(88vh,840px);
  display:flex;align-items:flex-end;
  padding-block:clamp(3rem,2rem + 5vw,6rem) clamp(2rem,1.5rem + 3vw,4rem);
  background:var(--night);
  overflow:hidden;
  isolation:isolate;
}

/* Панорама ложится широкой полосой по нижнему краю: видно весь хребет,
   а не увеличенный кусок середины. Небо над ним — чистая ночь. */
.scene__ridge{
  position:absolute;inset:0;z-index:-2;
  background:url('../img/ridge-night.png') no-repeat center bottom;
  background-size:132% auto;
  filter:brightness(1.42) saturate(.95);
}
/* кадр гасится сверху в ночь, слева — под текст, снизу — под панель выбора */
.scene__ridge::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--night) 0%,rgba(11,22,38,.84) 22%,rgba(11,22,38,.24) 48%,
                    rgba(11,22,38,.14) 72%,rgba(11,22,38,.6) 100%),
    linear-gradient(90deg,rgba(11,22,38,.9) 0%,rgba(11,22,38,.42) 32%,rgba(11,22,38,.06) 62%,
                    rgba(11,22,38,.22) 100%);
}
/* плёночное зерно поверх всей сцены */
.scene::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .5px);
  background-size:3px 3px;
}
.scene__in{position:relative;z-index:2;width:100%}

/* ---------- Компоновка первого экрана ---------- */
.hero{display:grid;gap:clamp(2.4rem,1.5rem + 4vw,4rem);align-items:end}
@media (min-width:980px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(300px,370px)}
}
.hero__place{
  font-family:var(--font-tech);font-weight:500;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--snow-3);margin-bottom:clamp(1.6rem,1rem + 3.6vw,3.2rem);
}
.hero__title{
  font-size:clamp(2.1rem,1.3rem + 2.9vw,3.35rem);
  margin-bottom:1.2rem;max-width:15ch;
  text-shadow:0 2px 30px rgba(4,10,20,.75);
}
.hero .lead{max-width:44ch;text-shadow:0 1px 16px rgba(4,10,20,.7)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__fact{
  margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid rgba(169,184,203,.22);
  color:var(--snow-2);font-size:15px;max-width:44ch;
}
.hero__fact b{color:var(--lamp);font-weight:600}

/* ---------- Корпус ---------- */
.tower{position:relative;width:min(100%,330px);margin-inline:auto}

/* свет, который здание льёт вокруг себя */
.tower::before{
  content:"";position:absolute;left:-45%;right:-45%;top:8%;bottom:-18%;z-index:-1;
  background:radial-gradient(58% 52% at 50% 60%,rgba(255,178,84,.28) 0%,rgba(255,178,84,.1) 42%,
             transparent 72%);
  pointer-events:none;
}

/* Корпус — тёмная масса в ночи, а не карточка: границ нет, светятся только окна.
   Слева по всей высоте идёт лунный кант, справа масса уходит в тень. */
.tower__roof{
  position:relative;z-index:2;height:clamp(26px,5.4vw,34px);
  background:linear-gradient(180deg,#13223B 0%,#0C1728 100%);
  border:none;border-radius:2px 2px 0 0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(170,200,235,.2),inset 1px 0 0 rgba(150,185,225,.1);
}
.tower__sign{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(11px,2.2vw,14px);letter-spacing:.3em;
  color:var(--lamp-hi);padding-left:.3em;
  text-shadow:0 0 10px rgba(255,196,107,.7),0 0 26px rgba(255,196,107,.32);
}

.tower__body{
  position:relative;z-index:2;
  background:linear-gradient(100deg,rgba(15,27,45,.97) 0%,rgba(10,19,33,.98) 58%,
             rgba(6,13,23,.99) 100%);
  border:none;
  padding:clamp(14px,3.4vw,22px);
  display:grid;gap:clamp(11px,2.5vw,17px);
  box-shadow:inset 1px 0 0 rgba(150,185,225,.1);
}

/* боковая грань: прямоугольник становится объёмом и уходит в тень */
.tower__side{
  position:absolute;top:0;bottom:0;right:0;width:clamp(13px,3.2vw,20px);
  transform:translateX(100%);
  background:linear-gradient(90deg,rgba(6,13,23,.98) 0%,rgba(3,8,15,.99) 100%);
  border:none;
  clip-path:polygon(0 0,100% 5%,100% 96%,0 100%);
  z-index:1;
}

/* низ корпуса растворяется в лесу, а не обрывается линией */
.tower__plinth{
  position:relative;z-index:2;height:clamp(16px,3.4vw,24px);
  background:linear-gradient(180deg,rgba(7,14,25,.98) 0%,rgba(7,14,25,.6) 45%,
             rgba(7,14,25,0) 100%);
  border:none;
}
.tower__shadow{
  position:absolute;left:-20%;right:-26%;bottom:-14px;height:32px;z-index:0;
  background:radial-gradient(52% 50% at 50% 50%,rgba(3,7,14,.7) 0%,transparent 72%);
  pointer-events:none;
}

/* ---------- Этаж ---------- */
.lvl{position:relative}
.lvl__no{display:none}
@media (min-width:560px){
  .lvl__no{
    display:block;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
    font-family:var(--font-tech);font-weight:500;font-size:11px;color:var(--snow-3);
    line-height:1;opacity:.8;
  }
}
.lvl__wins{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media (min-width:560px){.lvl__wins{gap:8px}}

/* ---------- Окно ---------- */
.win{
  position:relative;display:block;width:100%;aspect-ratio:1/1.55;
  padding:0;cursor:pointer;border-radius:1px;
  border:1px solid #0A1526;
  background:linear-gradient(168deg,#1C3252 0%,#0A1422 68%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -3px 6px -4px #000;
  transition:filter var(--t-fast) ease,box-shadow var(--t) ease,background var(--t) ease;
}
.win::before{
  content:"";position:absolute;left:0;right:0;top:36%;height:1px;background:#08121F;opacity:.9;
}
.win::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#08121F;opacity:.6;
}

/* свет горит — номер свободен. Четыре оттенка: в живом доме нет двух одинаковых окон */
.win--free{box-shadow:0 0 15px -3px rgba(255,184,96,.4),inset 0 -7px 11px -7px rgba(120,66,0,.55)}
.win--free::before{background:rgba(110,60,0,.45);opacity:1}
.win--free::after{background:rgba(110,60,0,.3)}

.win--free[data-j="0"]{background:linear-gradient(176deg,#FFE0AE 0%,#FFC673 46%,#E0A249 100%)}
.win--free[data-j="1"]{
  background:linear-gradient(176deg,#FFD79C 0%,#F5B65F 48%,#C98B35 100%);
  box-shadow:0 0 12px -4px rgba(255,184,96,.3),inset 0 -7px 11px -7px rgba(120,66,0,.55);
}
.win--free[data-j="2"]{
  background:linear-gradient(176deg,#FFEDCB 0%,#FFD189 44%,#E8AC53 100%);
  box-shadow:0 0 20px -3px rgba(255,196,107,.5),inset 0 -7px 11px -7px rgba(120,66,0,.5);
}
.win--free[data-j="3"]{
  background:linear-gradient(176deg,#F0C489 0%,#D9A257 50%,#B07E30 100%);
  box-shadow:0 0 9px -4px rgba(255,184,96,.22),inset 0 -7px 11px -7px rgba(120,66,0,.6);
}

/* у категорий с балконом под окном есть ограждение */
.win--balcony{overflow:visible}
.win__rail{
  position:absolute;left:-3px;right:-3px;bottom:-5px;height:5px;
  background:linear-gradient(180deg,rgba(8,16,28,.96) 0%,rgba(5,11,20,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(150,185,225,.28);
  border-radius:0 0 1px 1px;
}

.win:hover{filter:brightness(1.12)}
.win--free:hover{box-shadow:0 0 26px -2px rgba(255,196,107,.66)}
.win[aria-pressed="true"]{box-shadow:0 0 0 2px var(--lamp),0 0 32px -2px rgba(255,196,107,.62);z-index:3}
.win[data-hidden="true"]{opacity:.12;pointer-events:none}

.win__no{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  font-family:var(--font-tech);font-weight:500;font-size:11px;letter-spacing:.04em;
  color:var(--night);background:var(--lamp);padding:2px 6px;border-radius:2px;
  opacity:0;pointer-events:none;white-space:nowrap;z-index:4;
  transition:opacity var(--t-fast) ease;
}
.win:hover .win__no,.win:focus-visible .win__no,.win[aria-pressed="true"] .win__no{opacity:1}

/* ---------- Первый этаж ---------- */
.lvl--ground .lvl__base{
  display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch;
  height:clamp(38px,7.4vw,50px);
}
@media (min-width:560px){.lvl--ground .lvl__base{gap:8px}}
.base__glass{
  border:1px solid #0A1526;border-radius:1px;
  background:linear-gradient(180deg,#C89B58 0%,#7C5620 100%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  box-shadow:inset 0 -6px 10px -7px rgba(90,50,0,.7);
}
.base__glass span{font-family:var(--font-tech);font-weight:500;font-size:11px;
                  letter-spacing:.05em;color:#1F1503}
.base__door{
  width:clamp(30px,6.4vw,42px);border:1px solid #0A1526;border-radius:1px 1px 0 0;
  background:linear-gradient(180deg,#FFDDA8 0%,#D0913A 100%);
  position:relative;box-shadow:0 0 18px -4px rgba(255,196,107,.55);
}
.base__door::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(90,50,0,.5);
}

/* ---------- Легенда ---------- */
.legend{
  display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;margin-top:1.6rem;
  font-family:var(--font-tech);font-weight:500;font-size:12px;letter-spacing:.03em;
  color:var(--snow-3);justify-content:center;
}
.legend i{display:inline-block;width:12px;height:16px;border-radius:1px;margin-right:.5em;
          vertical-align:-3px;border:1px solid #0A1526}
.legend .i-free{background:linear-gradient(176deg,#FFE0AE,#E0A249)}
.legend .i-busy{background:linear-gradient(168deg,#1C3252,#0A1422)}

/* ---------- Панель выбранного номера ---------- */
.pick{
  margin-top:clamp(1.6rem,1rem + 2vw,2.6rem);
  border:1px solid var(--night-3);border-radius:4px;
  background:rgba(16,31,53,.86);padding:1.3rem 1.4rem;
}
@supports (backdrop-filter:blur(6px)){.pick{backdrop-filter:blur(8px)}}
.pick__empty{color:var(--snow-3);font-size:15px;margin:0}
.pick__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:.85rem}
.pick__no{font-family:var(--font-display);font-weight:700;
          font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);color:var(--lamp);line-height:1}
.pick__cat{font-weight:600;font-size:17px}
.pick__state{font-family:var(--font-tech);font-weight:500;font-size:11.5px;letter-spacing:.07em;
             text-transform:uppercase;padding:.3em .7em;border-radius:2px;margin-left:auto}
.pick__state--free{background:rgba(255,196,107,.16);color:var(--lamp)}
.pick__state--busy{background:var(--night-3);color:var(--snow-3)}
.pick__rows{display:grid;gap:.45rem;margin:0 0 1.1rem;padding:0;list-style:none;font-size:15px}
.pick__rows li{display:flex;gap:1rem;justify-content:space-between;
               border-bottom:1px solid var(--night-3);padding-bottom:.45rem;color:var(--snow-2)}
.pick__rows li:last-child{border-bottom:none;padding-bottom:0}
.pick__rows b{color:var(--snow);font-weight:500;text-align:right}
.pick__price{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--snow)}
.pick__acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ---------- Розжиг окон: один авторский момент ---------- */
@media (prefers-reduced-motion:no-preference){
  .tower[data-lit="pending"] .win--free{
    background:linear-gradient(168deg,#1C3252 0%,#0A1422 68%);box-shadow:none;
  }
  .tower[data-lit="on"] .win--free{animation:lightUp .55s var(--ease) backwards;
                                   animation-delay:calc(var(--d,0) * 60ms)}
}
@keyframes lightUp{
  from{background:linear-gradient(168deg,#1C3252 0%,#0A1422 68%);box-shadow:none}
  60% {box-shadow:0 0 30px -2px rgba(255,196,107,.72)}
}

/* ---------- Фильтры ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem;justify-content:center}
.filters button{
  font-family:var(--font-text);font-size:14.5px;font-weight:500;
  min-height:44px;padding:.4em 1em;border-radius:2px;cursor:pointer;
  background:rgba(16,31,53,.6);color:var(--snow-2);border:1px solid var(--night-3);
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.filters button:hover{border-color:var(--night-4);color:var(--snow)}
.filters button[aria-pressed="true"]{border-color:var(--lamp);color:var(--lamp)}

/* На телефоне широкая панорама уходит в нижние 170 px и пропадает — там кадр
   разворачивается на всю сцену, иначе от гор не остаётся ничего. */
@media (max-width:760px){
  .scene__ridge{background-size:210% auto;background-position:26% bottom}
  .scene__ridge::after{
    background:
      linear-gradient(180deg,var(--night) 0%,rgba(11,22,38,.8) 26%,rgba(11,22,38,.5) 58%,
                      rgba(11,22,38,.74) 100%);
  }
}