/* Башня / Tower (19.08.2026) — экран #view-tower и карточка лобби.
   Палитра — общая с остальными играми апки: тёмные поверхности #12171d→#0c1014, лайм
   #8FE84F (действие), золото #ffb638 (забрать), красный #ff5a46 (ловушка). Сама башня и
   скелет рисуются на канвасе (tower.js), здесь — только рамка экрана и контролы. */

/* Экран занимает ровно высоту вьюпорта и НЕ скроллится (владелец, 20.08): ставка,
   ловушки и кнопки всегда на одном месте, до них не надо доезжать. Всё лишнее забирает
   сцена — она ужимается, канвас пересчитывает геометрию сам. */
.tower-view{
  width:min(100%, 460px);
  height:100svh; max-height:100svh; overflow:hidden;
  margin:0 auto;
  /* После расширения рядов до 20 клеток боковые поля 7px снова стали дорогими:
     отдаём сцене ещё 8px ширины. Safe-area по бокам здесь не нужен — весь экран
     и так ограничен прямоугольным Telegram WebView. */
  padding:max(8px, env(safe-area-inset-top)) 3px calc(82px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  color:var(--text);
  border-left:0; border-right:0;
}
.tw{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:10px; max-width:470px; width:100%; margin:0 auto; }

/* На ПК не зажимаем Tower в телефонные 460px. Дополнительная ширина уходит именно
   сцене и камням; мобильный WebView сохраняет прежнюю геометрию. Fine pointer нужен
   для узкого окна Telegram Desktop, которое формально может быть уже 700px. */
@media (min-width:700px), (min-width:420px) and (hover:hover) and (pointer:fine){
  .tower-view{ width:min(100%, 560px); }
  .tw{ max-width:570px; }
}

/* сцена: канвас растягивается на всю свободную высоту; геометрия башни считается от размера */
.tw-stage{
  /* min-height:0 обязателен: иначе фиксированные 380px не дают flex ужать сцену и
     контролы уезжают под нижнюю навигацию на маленьких экранах */
  position:relative; flex:1 1 auto; min-height:0;
  border:1px solid rgba(255,255,255,.07); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#0f1318 0%,#0a0d11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 40px rgba(0,0,0,.35);
}
/* touch-action:none — сцену тянут пальцем вверх/вниз, чтобы посмотреть верхние этажи;
   без этого жест перехватывает браузер (и свайп-закрытие мини-аппа Telegram). */
.tw-stage canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;
  /* Telegram WebView интерполировал canvas при несовпадении DPR и внутреннего scale:
     квадратная каменная мозаика превращалась в мыло. Ближайший пиксель сохраняет
     резкую фактуру и ничего не добавляет к стоимости кадра. */
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}
.tw-level-labels{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:visible;
  transform-origin:0 0; will-change:transform; contain:layout style;
}
.tw-level-label{
  position:absolute; display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; transform:translateY(-50%); overflow:hidden; white-space:nowrap;
  left:var(--tw-label-left); width:var(--tw-label-width); height:var(--tw-label-height);
  padding:0; border-radius:var(--tw-label-radius);
  font-family:"Montserrat","Manrope",system-ui,sans-serif; font-size:6px;
  font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
  color:rgba(244,245,247,.42); background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
}
.tw-level-label.is-hot{ color:#f4f5f7; background:rgba(143,232,79,.10); border-color:rgba(143,232,79,.4); }
.tw-level-label.is-passed{ color:rgba(143,232,79,.45); }
.tw-level-label.is-current{ color:#8FE84F; text-shadow:0 0 10px rgba(143,232,79,.7); }
.tw-level-label.is-cashed{ color:#ffd97a; }
.tw-level-label-num{ flex:0 0 auto; min-width:0; text-align:right; }
/* Весь видимый множитель центрируется как одна группа. Знак × остаётся в своём слоте,
   поэтому не липнет к цифрам, но короткое значение больше не прижато вправо. */
.tw-level-label-x{ flex:0 0 .72em; width:.72em; text-align:center; }
.tw-stage.shake{ animation:twShake .5s ease-out; }
@keyframes twShake{ 0%,100%{ transform:translateX(0); } 18%{ transform:translateX(-7px); } 38%{ transform:translateX(5px); } 58%{ transform:translateX(-3px); } 78%{ transform:translateX(2px); } }

/* поп выигрыша — как у майнса, по центру сцены */
.tw-win-pop{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  display:grid; gap:4px; justify-items:center; padding:14px 22px; pointer-events:none; z-index:3;
  border-radius:18px; border:1px solid rgba(255,210,120,.55);
  background:linear-gradient(180deg, rgba(26,22,12,.94), rgba(12,10,6,.96));
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,182,56,.25);
  animation:twPop .5s cubic-bezier(.18,1.2,.3,1) both;
}
.tw-win-pop[hidden]{ display:none; }
/* верхний этаж: «нашёл золото» — заголовок и более тёплая, яркая рамка */
.tw-win-title{ font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#ffd97a; }
.tw-win-title[hidden]{ display:none; }
.tw-win-pop.is-gold{ border-color:rgba(255,220,140,.85);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 18px 60px rgba(0,0,0,.6), 0 0 70px rgba(255,182,56,.5); }
.tw-win-x{ font-size:30px; font-weight:900; letter-spacing:-.01em; color:#ffd97a; text-shadow:0 0 18px rgba(255,182,56,.55); font-variant-numeric:tabular-nums; }
.tw-win-profit{ display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:800; color:#f7fbf7; font-variant-numeric:tabular-nums; }
.tw-win-profit .token-logo{ width:16px; height:16px; }
@keyframes twPop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 60%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } 100%{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* контролы — стиль майнса/краша */
.tw-controls{ display:grid; grid-template-columns:1fr 1.35fr; gap:8px; flex:0 0 auto; }
.tw-free-bet{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 11px; border:1px solid rgba(143,232,79,.42); border-radius:13px;
  background:linear-gradient(135deg,rgba(143,232,79,.14),rgba(255,217,122,.08));
  color:#eaffd9; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.tw-free-bet[hidden]{ display:none; }
.tw-free-bet strong{ flex:0 0 auto; font-size:11px; letter-spacing:.02em; }
.tw-free-bet span{ min-width:0; font-size:9px; color:#aeb9a8; text-align:right; }
.tw-free-bet b{ color:#ffd97a; font-size:11px; }
.tw-free-bet i{ color:#8fe84f; font-style:normal; }
.tw-field{
  position:relative; min-width:0; display:grid; gap:4px; margin:0; padding:8px 10px;
  border:1px solid rgba(255,255,255,.08); border-radius:14px;
  background:linear-gradient(165deg,#12171d,#0c1014); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.tw-field > span{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#8D929B; font-weight:900; }
.tw-field input{
  width:100%; padding:0; margin:0; border:0; outline:none; background:transparent; box-shadow:none;
  color:#F4F4F5; font-size:17px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums;
}
.tw-field input:disabled{ color:rgba(244,247,243,.5); }
.tw-field.tw-locked{ opacity:.62; }
.tw-field .bet-mods{ display:flex; gap:4px; justify-content:center; }
.tw-field .bet-mods button{
  flex:1 1 0; min-width:0; padding:4px 0; border-radius:8px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:#c9d0d8; font-size:10.5px; font-weight:800;
}
.tw-field .bet-mods button:active{ transform:translateY(1px); }

/* число чипов = TOWER_MAX_TRAPS с сервера (сейчас 2), поэтому колонки не фиксируем */
.tw-traps{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; }
.tw-traps button{
  min-width:0; padding:7px 0; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035); color:#c9d0d8; font-size:13px; font-weight:800; line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.tw-traps button.on{ color:#0c2408; border-color:rgba(190,255,130,.65);
  background:linear-gradient(180deg,#B8F878,#8FE84F 55%,#6FC93E); box-shadow:0 0 14px rgba(143,232,79,.25); }
.tw-traps button:disabled{ opacity:.55; }
.tw-traps button:disabled.on{ opacity:.85; }
.tw-traps-hint{ font-size:9px; color:#566069; text-align:center; letter-spacing:.06em; min-height:11px; }

.tw-actions{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tw-actions.solo{ grid-template-columns:1fr; }
.tw-actions.solo #tower-step{ display:none; }
/* компактнее по высоте: на маленьких экранах ради сцены жертвуем полями кнопок */
@media (max-height: 720px){
  .tw-btn{ min-height:46px; padding:7px 8px; }
  .tw-field{ padding:6px 9px; }
  .tw-traps button{ padding:6px 0; }
}
@media (max-width: 420px){
  .tw-free-bet{ align-items:flex-start; flex-direction:column; gap:2px; }
  .tw-free-bet span{ text-align:left; }
}
.tw-btn{
  display:grid; place-items:center; min-height:52px; padding:9px 10px; border-radius:16px;
  font-size:15px; font-weight:800; letter-spacing:.04em; line-height:1.1;
  border:1px solid rgba(190,255,130,.65); color:#0c2408;
  background:linear-gradient(180deg,#B8F878 0%,#8FE84F 45%,#6FC93E 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 10px 26px rgba(110,200,60,.32), inset 0 2px 0 rgba(255,255,255,.5);
}
.tw-btn:active{ transform:translateY(1px); }
/* Меню действий уезжает целиком, пока скелет идёт, лезет или падает: ни икса, ни
   «Забрать», ни «Играть» — исход не должен проступать раньше анимации (Глеб, 20.08).
   Место под кнопки остаётся, чтобы контролы не прыгали. */
.tw-actions .tw-btn{ transition:opacity .18s ease; }
.tw-actions.is-climbing .tw-btn{ opacity:0; pointer-events:none; }
.tw-btn:disabled{ opacity:.55; filter:grayscale(.35); transform:none; }
.tw-btn span, .tw-btn b{ display:block; pointer-events:none; }
.tw-btn span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.tw-btn b{ font-size:15px; margin-top:2px; font-variant-numeric:tabular-nums; }
/* «Забрать» — золото, как у майнса */
.tw-btn.is-cashout{ border-color:rgba(255,210,120,.7); color:#3a2400;
  background:linear-gradient(180deg,#ffd97a,#ffb638 50%,#f59a24);
  box-shadow:0 10px 26px rgba(255,160,50,.32), inset 0 2px 0 rgba(255,255,255,.5); }
/* «Шаг» — тёмная плашка с лаймовой рамкой: основное действие, но не кричит */
.tw-btn.is-step{ color:#e9ffd6; border-color:rgba(143,232,79,.45);
  background:linear-gradient(180deg,#1b2a17,#101a0e); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(143,232,79,.12); }
.tw-btn.is-step span{ width:100%; text-align:center; }
.tw-btn.is-step b{ color:#B9FF73; }

/* карточка лобби */
.lc-tower{ --lc-tint:rgba(80,130,255,.09); --lc-vig:.14; --lc-acc:rgba(120,170,255,.55); }  /* синяя обводка под синий арт (владелец, 21.08) */
.lc-tower .lc-art{ background-image:url("/app-assets/ui/lobby-tower.jpg?v=20260911-restored"); }
.lc-tower .lc-glow{ background:radial-gradient(130px 90px at 82% -10%, rgba(110,160,255,.16), transparent 70%); }

@media (prefers-reduced-motion: reduce){
  .tw-stage.shake{ animation:none; }
  .tw-win-pop{ animation:none; }
}