/* Мобильная презентация залов (24.10.2026) — поверх mx.css журнала.
   Залы: постер на входе → сторис (фото + короткая фраза) → финал с кнопкой.
   Разметку собирает tools/build_hx.py, поведение — hx.js. */
@media (max-width: 1099px) {
  #h1, #h6 { display: none !important; }
  .hp-seal { display: none !important; }

  .hx-top .hx-back { color: #111; }
  .hx-hall--secret .hx-top .hx-back { color: #FFF; }
  .hx-hall .mx-top { transition: opacity .35s; }
  .hx-hall.is-stories .mx-top { opacity: 0; pointer-events: none; }
  html.hx-st .m-burger { opacity: 0 !important; pointer-events: none !important; }

  /* ---------- постеры ---------- */
  .hx-poster { position: absolute; inset: 0; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
  .hx-hall.is-stories .hx-poster { opacity: 0; transform: scale(1.06); pointer-events: none; }
  .hx-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
  .hx-shade-t, .hx-shade-b { position: absolute; left: 38.46%; right: 0; pointer-events: none; }
  .hx-shade-t { top: 0; height: calc(130 * var(--y)); background: linear-gradient(rgba(0,0,0,.45), transparent); }
  .hx-shade-b { bottom: 0; height: calc(300 * var(--y)); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
  /* основная информация — вертикально в белой колонке */
  .hx-vinfo { position: absolute; left: calc(14 * var(--x)); top: calc(766 * var(--y)); width: calc(716 * var(--y)); transform-origin: 0 0; transform: rotate(-90deg); }
  .hx-vinfo__row { display: flex; justify-content: space-between; align-items: flex-start; }
  .hx-kick { font-size: calc(8.5 * var(--u)) !important; color: var(--r) !important; font-weight: 500; letter-spacing: .16em !important; }
  .hx-quote { margin-top: calc(4 * var(--u)) !important; font-size: calc(15 * var(--u)) !important; line-height: 1.02 !important; letter-spacing: 0 !important; }
  .hx-meta { display: flex; gap: calc(18 * var(--u)); padding-right: calc(8 * var(--u)); }
  .hx-meta .m:first-child { font-size: calc(7 * var(--u)); color: #999; }
  .hx-meta .m:last-child { font-size: calc(10.5 * var(--u)); font-weight: 500; }
  .hx-zal { position: absolute; right: calc(14 * var(--x)); bottom: calc(110 * var(--y)); margin: 0; font: italic 300 calc(112 * var(--u))/.8 "Noto Serif Display", serif; font-stretch: 62.5%; letter-spacing: -.02em; color: #D7262D; }
  .hx-play { position: absolute; left: calc(164 * var(--x)); right: calc(14 * var(--x)); bottom: max(calc(12 * var(--y)), env(safe-area-inset-bottom)); height: 44px; border: 1.5px solid rgba(255,255,255,.85); background: rgba(0,0,0,.15);
    color: #FFF !important; font-size: 11px !important; font-weight: 500; letter-spacing: .12em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hx-play:active { background: rgba(255,255,255,.2); }
  /* Secret Room: тёмный постер, вывеска по центру */
  .hx-poster--secret { background: #140405 center / cover no-repeat; }
  .hx-poster--secret::before { content: ""; position: absolute; inset: 0; background: rgba(20,4,5,.45); }
  .hx-vign { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 45%, transparent, rgba(10,2,3,.88)); }
  .hx-sk { position: absolute; left: 0; right: 0; top: calc(260 * var(--y)); text-align: center; color: rgba(255,255,255,.75) !important; letter-spacing: .3em !important; font-size: calc(9.5 * var(--u)) !important; }
  .hx-sr { position: absolute; left: 0; right: 0; top: calc(290 * var(--y)); margin: 0; text-align: center; font: italic 300 calc(110 * var(--u))/.85 "Noto Serif Display", serif; font-stretch: 62.5%; color: #FFF; }
  .hx-line { position: absolute; left: 50%; top: calc(520 * var(--y)); width: 1px; height: calc(70 * var(--y)); background: rgba(255,255,255,.5); }
  .hx-sm { position: absolute; left: 0; right: 0; top: calc(606 * var(--y)); text-align: center; color: rgba(255,255,255,.7) !important; font-size: calc(9.5 * var(--u)) !important; }
  .hx-poster--secret .hx-play { left: calc(14 * var(--x)); }

  /* ---------- сторис ---------- */
  .hx-stories { position: absolute; inset: 0; background: #0B0506; }
  .hx-bars { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 4px; z-index: 6; }
  .hx-bars i { flex: 1; height: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
  .hx-bars b { display: block; height: 100%; width: 0; background: #FFF; }
  .hx-bars i.is-done b { width: 100%; }
  .hx-bars i.is-cur b { animation: hx-fill var(--dur, 5s) linear forwards; }
  .hx-hall.is-paused .hx-bars i.is-cur b { animation-play-state: paused; }
  @keyframes hx-fill { from { width: 0; } to { width: 100%; } }
  .hx-head { position: absolute; left: 14px; right: 14px; top: 20px; height: 44px; display: flex; align-items: center; gap: 12px; z-index: 6; }
  .hx-home { color: #FFF !important; font-size: 10.5px !important; font-weight: 500; letter-spacing: .1em !important; padding: 12px 10px 12px 0; margin-right: 2px; border-right: 1px solid rgba(255,255,255,.3); }
  .hx-halls { display: flex; gap: 4px; }
  .hx-halls a { height: 30px; padding: 0 10px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.7) !important; font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .hx-halls a.is-on { background: #FFF; color: #111 !important; border-color: #FFF; }
  .hx-hall.is-light .hx-halls a { border-color: rgba(17,17,17,.25); color: #555 !important; }
  .hx-hall.is-light .hx-halls a.is-on { background: #111; color: #FFF !important; border-color: #111; }
  .hx-hall.is-light .hx-home { color: #111 !important; border-color: rgba(17,17,17,.25); }
  .hx-head__t { font: italic 400 22px/1 "Noto Serif Display", serif; font-stretch: 62.5%; color: #FFF; }
  .hx-head__s { flex: 1; font-size: 9px !important; color: rgba(255,255,255,.75) !important; }
  .hx-x { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .hx-x i { position: absolute; left: 13px; top: 21px; width: 18px; height: 1.5px; background: #FFF; transform: rotate(45deg); }
  .hx-x i + i { transform: rotate(-45deg); }
  .hx-slides { position: absolute; inset: 0; }
  .hx-slide { position: absolute; inset: 0; background: #0B0506 center / cover no-repeat; opacity: 0; transition: opacity .55s ease; }
  .hx-slide.is-on { opacity: 1; animation: hx-kb 7s ease-out both; }
  @keyframes hx-kb { from { transform: scale(1.06); } to { transform: scale(1); } }
  .hx-slide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(rgba(0,0,0,.6), transparent); }
  .hx-slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
  .hx-cap { position: absolute; left: calc(20 * var(--x)); right: calc(44 * var(--x)); bottom: max(calc(46 * var(--y)), calc(env(safe-area-inset-bottom) + 30px)); margin: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
  .hx-cap .m { font-size: 9.5px !important; color: rgba(255,255,255,.7) !important; }
  .hx-cap .t { font-size: calc(22 * var(--u)) !important; line-height: 1.22 !important; color: #FFF !important; }
  .hx-slide.is-on .hx-cap { animation: hx-cap .7s cubic-bezier(.2,.7,.2,1) .25s both; }
  @keyframes hx-cap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hx-tap { position: absolute; top: 70px; bottom: 90px; z-index: 4; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hx-tap--l { left: 0; width: 32%; } .hx-tap--r { right: 0; width: 68%; }
  .hx-hall.is-last .hx-tap { bottom: 140px; }
  /* финальные кадры */
  .hx-final { animation: none !important; }
  .hx-final::before, .hx-final::after { display: none; }
  .hx-final__bg { position: absolute; inset: 0; background: center / cover no-repeat; }
  .hx-final__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.25) 30%, rgba(0,0,0,.86) 66%); }
  .hx-final__in { position: absolute; left: calc(20 * var(--x)); right: calc(20 * var(--x)); top: calc(480 * var(--y)); }
  .hx-nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.4); padding-top: calc(12 * var(--u)); }
  .hx-nums .d { font-size: calc(44 * var(--u)) !important; color: #FFF !important; }
  .hx-nums .m { color: rgba(255,255,255,.8) !important; }
  .hx-final__txt { margin-top: calc(18 * var(--u)) !important; font-size: calc(17 * var(--u)) !important; line-height: 1.25 !important; color: #FFF !important; }
  .hx-cta { z-index: 5; left: calc(14 * var(--x)) !important; right: calc(14 * var(--x)) !important; }
  .hx-final--light { background: #EEEBE8; }
  .hx-final--light ~ * {}
  .hx-trio { position: absolute; left: 0; right: 0; top: calc(90 * var(--y)); height: calc(440 * var(--y)); }
  .hx-trio img { position: absolute; bottom: 0; height: 100%; width: auto; }
  .hx-trio img:nth-child(1) { left: -2%; } .hx-trio img:nth-child(2) { left: 31%; height: 98.6%; } .hx-trio img:nth-child(3) { left: 57%; }
  .hx-slide.is-on .hx-trio img { animation: hx-cap .8s cubic-bezier(.2,.7,.2,1) both; }
  .hx-slide.is-on .hx-trio img:nth-child(2) { animation-delay: .15s; } .hx-slide.is-on .hx-trio img:nth-child(3) { animation-delay: .3s; }
  .hx-final__quote { position: absolute; left: calc(20 * var(--x)); right: calc(20 * var(--x)); bottom: calc(150 * var(--y)); margin: 0; font-size: calc(22 * var(--u)) !important; line-height: 1.18 !important; font-style: italic; color: #111 !important; }
  .hx-final__meta { position: absolute; left: calc(20 * var(--x)); bottom: calc(112 * var(--y)); margin: 0; font-size: 9.5px !important; color: #555 !important; }
  .hx-hall.is-light .hx-bars i { background: rgba(17,17,17,.2); } .hx-hall.is-light .hx-bars b { background: #111; }
  .hx-hall.is-light .hx-head__t { color: #111; } .hx-hall.is-light .hx-head__s { color: #555 !important; } .hx-hall.is-light .hx-x i { background: #111; }


  /* основной: мигающая подсказка «Secret Room ↓» внизу каждого кадра */
  .hx-hint { position: absolute; left: 50%; bottom: max(calc(10 * var(--y)), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; height: 44px; padding: 0 16px; border: 0; background: none;
    display: flex; align-items: center; gap: 10px; color: #FFF !important; font-size: 10px !important; font-weight: 500; letter-spacing: .16em !important; cursor: pointer; }
  .hx-hint__arr { font-style: normal; font-size: 16px; animation: hx-blink 1.6s ease-in-out infinite; }
  @keyframes hx-blink { 0%, 100% { opacity: .25; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(4px); } }
  .hx-hall--main .hx-cap { bottom: max(calc(84 * var(--y)), calc(env(safe-area-inset-bottom) + 64px)); }
  .hx-hall--main .hx-final__in { top: calc(440 * var(--y)); }
  .hx-hall--main .hx-tap { bottom: 70px; }
  /* Secret Room: первый кадр — заставка */
  .hx-title::before { height: 100% !important; background: radial-gradient(120% 70% at 50% 45%, rgba(20,4,5,.35), rgba(10,2,3,.9)) !important; }
  .hx-title::after { display: none; }
  .hx-title .hx-sk, .hx-title .hx-sr, .hx-title .hx-line, .hx-title .hx-sm { z-index: 2; }
  .hx-title.is-on .hx-sr { animation: hx-cap 1s cubic-bezier(.2,.7,.2,1) .2s both; }
  .hx-cta .bk { border: 0; font: inherit; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #FFF; cursor: pointer; }
  /* карточка «Обсудить вечер» */
  .hx-card { position: absolute; inset: 0; z-index: 20; background: rgba(10,4,4,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-end; opacity: 0; transition: opacity .3s ease; touch-action: pan-y; }
  .hx-card.is-open { opacity: 1; }
  .hx-card[hidden] { display: none; }
  .hx-card__in { position: relative; width: 100%; background: #FFF; padding: calc(26 * var(--u)) calc(22 * var(--x)) max(calc(22 * var(--u)), calc(env(safe-area-inset-bottom) + 14px));
    transform: translateY(40px); transition: transform .45s cubic-bezier(.2,.8,.2,1); max-height: 92%; overflow-y: auto; }
  .hx-card.is-open .hx-card__in { transform: none; }
  .hx-card__x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
  .hx-card__x i { position: absolute; left: 13px; top: 21px; width: 18px; height: 1.5px; background: #111; transform: rotate(45deg); } .hx-card__x i + i { transform: rotate(-45deg); }
  .hx-card__k { color: #777 !important; font-size: 9.5px !important; }
  .hx-card__t { margin-top: calc(10 * var(--u)) !important; font-size: calc(54 * var(--u)) !important; line-height: .9 !important; }
  .hx-card__p { margin-top: calc(14 * var(--u)) !important; font-size: calc(17 * var(--u)) !important; line-height: 1.3 !important; color: #333 !important; }
  .hx-card .hx-bigbtn { height: 54px; margin-top: calc(20 * var(--u)); }
  .hx-card .hx-rows { margin-top: calc(16 * var(--u)); }
  .hx-card__home { display: inline-block; margin-top: calc(16 * var(--u)); padding: 10px 0; color: #111 !important; text-decoration: underline; text-underline-offset: 4px; }

  /* ---------- «Обсудить вечер» ---------- */
  .hx-bigbtn { display: flex; justify-content: space-between; align-items: center; padding: 0 18px; background: var(--r); color: #FFF !important;
    font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(80,10,12,.25); }
  .hx-bigbtn:active { background: #8E1619; }
  .hx-rows a { display: flex; align-items: center; gap: 14px; height: 48px; border-bottom: 1px solid var(--line); color: #111; }
  .hx-rows a:first-child { border-top: 1px solid var(--line); }
  .hx-rows .m:first-child { width: calc(96 * var(--x)); color: #777; }
  .hx-rows__v { flex: 1; font-size: 12px !important; font-weight: 500; }
  .hx-back2 { color: #111; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .hx-slide.is-on, .hx-slide.is-on .hx-cap, .hx-slide.is-on .hx-trio img { animation: none !important; }
  .hx-poster, .hx-stories, .hx-slide { transition: none !important; }
}