/*
  WHO'S THE BOSS? — WORLD LAYER. Игровой мир, а не фон страницы.

  design.md §6 (2.5D depth system), §26–§32 (HOME = CEO OFFICE), §113 (foreground
  objects), §114 (physics illusion), §116 (asset breakdown), §169 (final directive).

  Каждый крупный экран собирается слоями:

    L1 wb-world__sky    дальний фон (небо, город)
    L2 wb-world__bg     архитектура и окружение (сгенерированная сцена)
    L3 wb-world__mid    крупная мебель / накладки события
    L4 wb-world__cast   персонажи
    L5 wb-world__props  интерактивные предметы (hotspot)
    L6 wb-world__fore   передний план: край стола, принтер
    L7 wb-world__fx     частицы: бумага, пар, пыль, свет

  Мир занимает большую часть вьюпорта (§168 п. 18); интерфейс лежит поверх и
  помогает с ним взаимодействовать — он не заменяет его собой.

  Всё движение уважает data-motion='calm' (tokens.css гасит длительности).
  transform/opacity внутри SVG не используются (audit A113, A117) — только в HTML.
*/

/* ============================================================
   СЦЕНА
   ============================================================ */

.wb-world {
  position: fixed;
  inset: 0;
  z-index: var(--z-world);
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--ui-wood-900) 0%, var(--ui-wood-950) 100%);
}

.wb-world__layer {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-repeat: no-repeat;
  /* Арт не растягиваем (§125): кадрируем по большей стороне. */
  background-size: cover;
  will-change: transform;
  transition: opacity var(--duration-scene) var(--ease-out);
}

/* L1 — небо и дальний город. Видно в окнах сцены и по краям. */
.wb-world__sky {
  background: linear-gradient(180deg,
    var(--sky-high) 0%,
    var(--sky-mid) 46%,
    var(--sky-low) 100%);
}

/* L2 — сама сгенерированная сцена. */
.wb-world__bg { z-index: 2; }

/* L3 — накладка события (§117): база + overlay + props + FX. */
.wb-world__mid {
  z-index: 3;
  opacity: 0;
  background-size: cover;
}

.wb-world.has-event .wb-world__mid { opacity: 1; }

/* L6 — передний план создаёт глубину (§113): виньетка и тёплая рамка кадра. */
.wb-world__fore {
  z-index: 6;
  background:
    radial-gradient(120% 78% at 50% 42%, transparent 40%, rgba(21, 14, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(21, 14, 11, 0.55) 0%, transparent 22%);
}

/* L7 — частицы. */
.wb-world__fx { z-index: 7; }

/*
  Кинематографичный свет поверх всей сцены (§5 lighting bible): тёплая лампа
  сверху-слева и холодный дневной свет справа из окна.
*/
.wb-world__light {
  z-index: 8;
  background:
    radial-gradient(70% 46% at 18% 4%, rgba(255, 214, 138, 0.20) 0%, transparent 70%),
    radial-gradient(60% 50% at 92% 22%, rgba(120, 190, 255, 0.14) 0%, transparent 70%);
}

/*
  Затемнение под интерфейсом. Ровно столько, чтобы кремовый текст читался
  поверх любой сцены — и ни каплей больше: мир должен остаться главным.
*/
.wb-world__scrim {
  z-index: 9;
  background: linear-gradient(180deg,
    rgba(21, 14, 11, 0.62) 0%,
    rgba(21, 14, 11, 0.20) 18%,
    rgba(21, 14, 11, 0.16) 44%,
    rgba(21, 14, 11, 0.78) 84%,
    rgba(21, 14, 11, 0.92) 100%);
}

/* Экраны фокус-режима (бой, победа) гасят фон сильнее (§232). */
.wb-world.is-focus .wb-world__scrim {
  background: linear-gradient(180deg, rgba(21, 14, 11, 0.72) 0%, rgba(21, 14, 11, 0.86) 100%);
}

/* Смена локации: сцена сменяется мягко, вкладки — мгновенно (§272). */
.wb-world__bg.is-swapping { opacity: 0; }

/* ============================================================
   ВРЕМЯ СУТОК (design.md §108). Атмосфера, механики за ней нет.
   ============================================================ */

.wb-world[data-daytime='evening'] .wb-world__sky {
  background: linear-gradient(180deg, var(--sky-high-evening) 0%, var(--sky-mid-evening) 52%, var(--sky-low-evening) 100%);
}

.wb-world[data-daytime='evening'] .wb-world__light {
  background:
    radial-gradient(80% 50% at 22% 6%, rgba(255, 190, 110, 0.26) 0%, transparent 70%),
    radial-gradient(70% 60% at 88% 30%, rgba(255, 140, 60, 0.16) 0%, transparent 70%);
}

.wb-world[data-daytime='night'] .wb-world__sky {
  background: linear-gradient(180deg, var(--sky-high-night) 0%, var(--sky-mid-night) 56%, var(--sky-low-night) 100%);
}

.wb-world[data-daytime='night'] .wb-world__bg { filter: brightness(0.74) saturate(0.86); }

.wb-world[data-daytime='night'] .wb-world__light {
  background:
    radial-gradient(70% 46% at 18% 4%, rgba(255, 204, 120, 0.24) 0%, transparent 66%),
    radial-gradient(80% 60% at 84% 46%, rgba(90, 130, 220, 0.16) 0%, transparent 74%);
}

/* ============================================================
   ПЕРСОНАЖИ (design.md §110–§112). Слой L4.
   Grok рисует утверждённые позы, движение делает CSS.
   ============================================================ */

.wb-world__cast {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.wb-char {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 52%;
  transform: translateX(-50%);
  /* Персонаж отделяется от фона тенью и лёгким контровым светом (§5). */
  filter: drop-shadow(0 12px 18px rgba(12, 6, 3, 0.65))
          drop-shadow(0 0 2px rgba(255, 224, 170, 0.35));
  pointer-events: none;
  user-select: none;
}

/* Тап по Боссу — реакция (§32). Персонаж-кнопка перехватывает события. */
.wb-char--tap {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.wb-char--tap:active { transform: translateX(-50%) translateY(3px); }

/*
  IDLE (§110, §111). Не один цикл каждые две секунды: три дорожки разной
  длины расходятся по фазе, и повтор не читается.
*/
@keyframes wb-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-0.7%) scale(1.006); }
}

@keyframes wb-sway {
  0%, 100% { transform: translateX(-50%) rotate(-0.5deg); }
  50% { transform: translateX(-50%) rotate(0.5deg); }
}

.wb-char--idle { animation: wb-breathe 4.3s ease-in-out infinite; }
.wb-char--idle2 { animation: wb-sway 6.7s ease-in-out infinite; }

/* Короткие реакции — их запускает JS, снимая класс по animationend. */
@keyframes wb-react-nod {
  0% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) translateY(2%) rotate(-2deg); }
  60% { transform: translateX(-50%) translateY(0) rotate(1.5deg); }
  100% { transform: translateX(-50%) rotate(0); }
}

@keyframes wb-react-jolt {
  0% { transform: translateX(-50%) scale(1); }
  25% { transform: translateX(-50%) translateY(-2.5%) scale(1.04); }
  55% { transform: translateX(-50%) translateY(0.6%) scale(0.985); }
  100% { transform: translateX(-50%) scale(1); }
}

.wb-char.is-reacting { animation: wb-react-nod 520ms var(--ease-out) 1; }
.wb-char.is-jolt { animation: wb-react-jolt 460ms var(--ease-pop) 1; }

/* Позиции на сцене. */
.wb-char--left { left: 22%; height: 40%; }
.wb-char--right { left: 78%; height: 40%; }
.wb-char--far { height: 30%; filter: drop-shadow(0 8px 12px rgba(12, 6, 3, 0.5)) brightness(0.86); }

/* Вход и выход персонажа (§12 ENTER_ROOM / LEAVE_ROOM). */
@keyframes wb-enter-room {
  from { opacity: 0; transform: translateX(-50%) translateY(8%) scale(0.94); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.wb-char.is-entering { animation: wb-enter-room var(--duration-slow) var(--ease-pop) both; }
.wb-char.is-leaving { animation: wb-enter-room var(--duration-slow) var(--ease-out) reverse both; }

/* ============================================================
   РЕПЛИКА ПЕРСОНАЖА (design.md §225). Небольшой пузырь для ambient.
   ============================================================ */

.wb-bubble {
  position: absolute;
  z-index: 5;
  max-width: 62%;
  padding: var(--space-2) var(--space-3);
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ui-ivory-100) 0%, var(--ui-ivory-200) 100%);
  color: var(--text-on-ivory);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  box-shadow: var(--shadow-object);
  animation: wb-bubble-in 200ms var(--ease-pop) both;
}

.wb-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 26px;
  width: 14px;
  height: 14px;
  background: var(--ui-ivory-200);
  border-right: var(--outline-w) solid var(--border-outline);
  border-bottom: var(--outline-w) solid var(--border-outline);
  transform: rotate(45deg);
}

@keyframes wb-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.wb-bubble.is-out { animation: wb-bubble-in 160ms var(--ease-out) reverse both; }

/* ============================================================
   ИНТЕРАКТИВНЫЕ ПРЕДМЕТЫ (design.md §28). Слой L5.
   Компьютер → компания, телефон → друзья, лифт → башня…
   ============================================================ */

.wb-world__props {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.wb-hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ui-gold-500);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Латунная «клёпка» на предмете: подсказывает, что сюда можно нажать. */
.wb-hotspot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(242, 178, 51, 0.55);
  background: radial-gradient(circle at 50% 34%, rgba(255, 221, 138, 0.34) 0%, rgba(242, 178, 51, 0.10) 62%, transparent 100%);
  box-shadow: 0 0 14px rgba(242, 178, 51, 0.28);
  animation: wb-hot-pulse 2.6s var(--ease-out) infinite;
}

@keyframes wb-hot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

.wb-hotspot:active::before { transform: scale(0.92); }

.wb-hotspot .wb-icon {
  position: relative;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* Подпись предмета — маленькая латунная табличка под клёпкой. */
.wb-hotspot__label {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  /*
    Подпись центрируется по предмету, но у края экрана уезжает за кадр.
    max-width от вьюпорта и перенос по границе слова оставляют её внутри:
    обрезанная подпись хуже, чем перенесённая.
  */
  max-width: 34vw;
  white-space: normal;
  text-align: center;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--radius-badge);
  background: rgba(21, 14, 11, 0.82);
  color: var(--ui-ivory-200);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-min);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  pointer-events: none;
}

/* У правого и левого края подпись прижимается к своей стороне, а не к центру. */
.wb-hotspot[style*='left: 8'] .wb-hotspot__label,
.wb-hotspot[style*='left: 9'] .wb-hotspot__label { left: auto; right: 0; transform: none; }
.wb-hotspot[style*='left: 1%'] .wb-hotspot__label,
.wb-hotspot[style*='left: 2%'] .wb-hotspot__label,
.wb-hotspot[style*='left: 3%'] .wb-hotspot__label { left: 0; transform: none; }

/* Есть что забрать / новое — точка на предмете (§193). */
.wb-hotspot.is-claimable::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ui-wood-950);
  border-radius: 50%;
  background: var(--ui-danger);
}

.wb-hotspot.is-locked { filter: grayscale(0.8) brightness(0.6); }
.wb-hotspot.is-locked::before { animation: none; }

/* ============================================================
   AMBIENT FX (design.md §30, §102–§107, §157). Слой L7.
   Половина юмора работает без текста: бумага, пар, принтер, лифт.
   ============================================================ */

.wb-fx {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Лист бумаги планирует через кадр — иллюзия физики на CSS (§114). */
.wb-fx--paper {
  width: 26px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(160deg, var(--ui-ivory-100) 0%, var(--ui-ivory-300) 100%);
  box-shadow: 0 2px 5px rgba(12, 6, 3, 0.5);
  animation: wb-paper-drift 5.5s linear forwards;
}

@keyframes wb-paper-drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  25% { transform: translate(-32px, 22vh) rotate(120deg); }
  50% { transform: translate(36px, 44vh) rotate(-90deg); }
  75% { transform: translate(-22px, 68vh) rotate(200deg); }
  92% { opacity: 1; }
  100% { transform: translate(14px, 92vh) rotate(320deg); opacity: 0; }
}

/* Пар над кофе. */
.wb-fx--steam {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 230, 0.55) 0%, transparent 70%);
  animation: wb-steam 3.2s ease-out infinite;
}

@keyframes wb-steam {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  22% { opacity: 0.8; }
  100% { transform: translateY(-52px) scale(2.1); opacity: 0; }
}

/* Пылинки в луче света. */
.wb-fx--dust {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 226, 170, 0.7);
  animation: wb-dust 11s linear infinite;
}

@keyframes wb-dust {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.75; }
  85% { opacity: 0.4; }
  100% { transform: translate(24px, -140px); opacity: 0; }
}

/* Монета/награда вылетает вверх. */
.wb-fx--coin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--ui-gold-300) 0%, var(--ui-gold-500) 52%, var(--ui-gold-700) 100%);
  box-shadow: 0 0 10px rgba(242, 178, 51, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  animation: wb-coin-pop 900ms var(--ease-out) forwards;
}

@keyframes wb-coin-pop {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  30% { transform: translateY(-44px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-96px) scale(0.9); opacity: 0; }
}

/* Конфетти корпоративного праздника (§82). */
.wb-fx--confetti {
  width: 8px;
  height: 12px;
  border-radius: 1px;
  animation: wb-confetti 3.4s linear forwards;
}

@keyframes wb-confetti {
  0% { transform: translateY(-10vh) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* Ding лифта — короткая золотая вспышка на створках. */
@keyframes wb-ding {
  0%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

.wb-fx--ding {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 221, 138, 0.75) 0%, transparent 70%);
  animation: wb-ding 900ms var(--ease-out) forwards;
}

/* ============================================================
   ПАРАЛЛАКС (design.md §6, §24). Двигает JS, здесь только контракт.
   ============================================================ */

:root[data-motion='calm'] .wb-world__layer,
:root[data-motion='calm'] .wb-fx {
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   ЗАСТАВКА (design.md §22–§24). Реальный loading bar.
   ============================================================ */

.wb-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ui-wood-950);
  transition: opacity var(--duration-slow) var(--ease-out);
}

.wb-splash.is-out { opacity: 0; pointer-events: none; }

.wb-splash__art {
  position: absolute;
  inset: 0;
  background-image: var(--splash-portrait);
  background-position: center 42%;
  background-size: cover;
  animation: wb-splash-push 9s var(--ease-out) infinite alternate;
}

/* Лёгкий наезд камеры — «slight parallax» из §24. */
@keyframes wb-splash-push {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

.wb-splash__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 40%, transparent 42%, rgba(21, 14, 11, 0.72) 100%),
    linear-gradient(180deg, rgba(21, 14, 11, 0.72) 0%, transparent 26%, transparent 52%, rgba(21, 14, 11, 0.94) 100%);
}

.wb-splash__logo {
  position: absolute;
  top: calc(var(--space-5) + var(--tg-safe-top));
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  /* Название накладываем отдельно, а не рисуем внутри арта (§23). */
}

.wb-splash__small {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(15px, 4.4vw, 20px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ui-ivory-100);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 0, 0, 0.8);
}

.wb-splash__boss {
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: clamp(42px, 15vw, 74px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--ui-gold-300) 0%, var(--ui-gold-500) 48%, var(--ui-gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Обводка «золотой вывески»: тень несёт форму, а не только цвет. */
  filter: drop-shadow(0 3px 0 rgba(60, 26, 6, 0.9)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}

.wb-splash__foot {
  position: relative;
  width: min(340px, 78vw);
  margin-bottom: calc(var(--space-6) + var(--tg-safe-bottom));
  display: grid;
  gap: var(--space-2);
  justify-items: center;
}

.wb-splash__bar {
  width: 100%;
  height: 18px;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ui-wood-950) 0%, var(--ui-wood-900) 100%);
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 2px 0 rgba(0, 0, 0, 0.5);
}

.wb-splash__fill {
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ui-gold-300) 0%, var(--ui-gold-500) 55%, var(--ui-gold-700) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: width 220ms var(--ease-out);
}

.wb-splash__hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--ui-ivory-200);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  text-align: center;
}

/* ============================================================
   ТЕМАТИЧЕСКАЯ ЗАГРУЗКА (design.md §99, §230)
   Принтер печатает лист — вместо спиннера в центре экрана.
   ============================================================ */

.wb-loader {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
}

.wb-loader__printer {
  position: relative;
  width: 62px;
  height: 40px;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #9AA3AD 0%, #5E6670 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--shadow-object);
  overflow: hidden;
}

.wb-loader__printer::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--ui-wood-950);
}

.wb-loader__sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ui-ivory-100) 0%, var(--ui-ivory-300) 100%);
  animation: wb-print 1.4s var(--ease-out) infinite;
}

@keyframes wb-print {
  0% { transform: translateY(24px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}

.wb-loader__text {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   ВЕРХНИЙ HUD (design.md §183–§188). Минимум вертикали.
   ============================================================ */

.wb-hud {
  position: sticky;
  top: 0;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-2) + var(--tg-safe-top)) var(--space-2) var(--space-2);
  /* HUD не панель: он лежит на мире, поэтому только мягкий градиент. */
  background: linear-gradient(180deg, rgba(21, 14, 11, 0.88) 0%, rgba(21, 14, 11, 0.35) 72%, transparent 100%);
}

.wb-hud__profile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Портретная рамка (§185): дерево + латунь, а не круглый аватар. */
.wb-hud__frame {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ui-wood-600) 0%, var(--ui-wood-800) 100%);
  box-shadow: inset 0 0 0 2px var(--ui-brass-500), var(--shadow-object);
  overflow: hidden;
}

.wb-hud__frame img { width: 100%; height: 100%; object-fit: cover; }

.wb-hud__level {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border: 2px solid var(--border-outline);
  border-radius: var(--radius-badge);
  background: linear-gradient(180deg, var(--ui-gold-300) 0%, var(--ui-gold-700) 100%);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: var(--text-min);
  font-variant-numeric: tabular-nums;
}

.wb-hud__id { min-width: 0; overflow: hidden; }

.wb-hud__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: var(--text-sm);
  color: var(--ui-ivory-100);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30vw;
}

.wb-hud__title {
  display: block;
  font-size: var(--text-min);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--ui-gold-500);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30vw;
}

.wb-hud__xp { display: block; width: 84px; height: 6px; margin-top: 3px; }

.wb-hud__res { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }

/* На узком экране пилюли ужимаются, но не исчезают (§183: не 7 ресурсов). */
@media (max-width: 374px) {
  .wb-hud__name, .wb-hud__title { max-width: 22vw; }
  .wb-hud__xp { width: 62px; }
}

/* ============================================================
   НИЖНЯЯ НАВИГАЦИЯ (design.md §189–§193)
   ============================================================ */

.wb-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: var(--z-hud);
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--space-1);
  height: var(--nav-total);
  padding: var(--space-1) var(--space-2) calc(var(--space-1) + var(--tg-safe-bottom));
  border-top: 3px solid var(--border-outline);
  background: linear-gradient(180deg, var(--ui-wood-700) 0%, var(--ui-wood-900) 100%);
  box-shadow:
    inset 0 2px 0 var(--ui-brass-500),
    0 -10px 26px rgba(12, 6, 3, 0.6);
}

.wb-nav__item {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  height: 62px;
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ui-ivory-300);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-min);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/*
  Иконка вкладки — нарисованный предмет, и красить её нельзя. Поэтому
  неактивная вкладка приглушает предмет светом, а не цветом: он остаётся
  узнаваемым, но не спорит с активным. Форму не трогаем совсем (§174).
*/
.wb-nav__item .wb-icon {
  width: 26px;
  height: 26px;
  filter: brightness(0.78) saturate(0.72) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

/* Активная вкладка — приподнятая плитка (§191). */
.wb-nav__item.is-active {
  transform: translateY(-6px);
  background: linear-gradient(180deg, var(--ui-ivory-100) 0%, var(--ui-ivory-300) 100%);
  color: var(--text-on-ivory);
  font-weight: var(--weight-display-heavy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 var(--ui-wood-950),
    0 0 16px rgba(242, 178, 51, 0.28);
}

.wb-nav__item.is-active .wb-icon {
  width: 32px;
  height: 32px;
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 2px 3px rgba(20, 10, 4, 0.5));
}

/* Центральная кнопка действия (§192): в бой. */
.wb-nav__item--central {
  margin-top: -20px;
  height: 74px;
  background: linear-gradient(180deg, var(--ui-gold-300) 0%, var(--ui-gold-500) 46%, var(--ui-gold-700) 100%);
  border: var(--outline-w) solid var(--ui-gold-900);
  color: var(--text-on-accent);
  font-weight: var(--weight-display-heavy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 0 var(--ui-gold-900),
    0 0 22px rgba(242, 178, 51, 0.34);
}

.wb-nav__item--central:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-gold-900); }

.wb-nav__badge {
  position: absolute;
  top: 4px;
  right: 22%;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ui-wood-900);
  border-radius: 50%;
  background: var(--ui-danger);
}

/* Клавиатура открыта — навигация уходит (§267). */
body.is-keyboard .wb-nav { display: none; }

/* ============================================================
   РАСКЛАДКА ЭКРАНА-СЦЕНЫ (design.md §3 баланс 65–75% арта)
   ============================================================ */

/* Приложение лежит поверх мира и само по себе прозрачно. */
body.has-world { background: transparent; }

body.has-world .app {
  position: relative;
  z-index: var(--z-base);
  background: transparent;
}

/* Место под фиксированную навигацию, чтобы контент не уезжал под неё (§266). */
body.has-nav .app { padding-bottom: calc(var(--nav-total) + var(--space-4)); }

/*
  Сцена экрана: верхняя часть отдана миру, интерфейс начинается ниже.
  Это и есть требуемый баланс — арта больше, чем интерфейса.
*/
.wb-stage {
  position: relative;
  height: clamp(180px, 38vh, 340px);
  margin: 0 calc(-1 * var(--space-3)) var(--space-3);
  pointer-events: none;
}

.wb-stage--tall { height: clamp(240px, 52vh, 460px); }
.wb-stage--short { height: clamp(120px, 24vh, 220px); }

/* Табличка-вывеска экрана поверх сцены (§210). */
.wb-stage__sign {
  position: absolute;
  left: var(--space-3);
  top: var(--space-2);
  pointer-events: auto;
}

.wb-stage > * { pointer-events: auto; }

/* ============================================================
   ЭКРАН БОЯ: фокус-режим (design.md §232–§237)
   ============================================================ */

body.is-focus .wb-nav,
body.is-focus .wb-hud__res { display: none; }

/* Урон/эффект: крупно и коротко, корпоративным языком (§237). */
@keyframes wb-hit-float {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  22% { transform: translate(-50%, -18px) scale(1.14); opacity: 1; }
  100% { transform: translate(-50%, -74px) scale(0.95); opacity: 0; }
}

.wb-hit {
  position: absolute;
  left: 50%;
  z-index: 8;
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ui-gold-300);
  text-shadow: 0 2px 0 rgba(60, 26, 6, 0.9), 0 0 14px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: wb-hit-float 900ms var(--ease-out) forwards;
}

.wb-hit--bad { color: var(--ui-burgundy-300); }

/* Кнопка способности (§235–§236). */
.wb-ability {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 72px;
  padding: var(--space-1);
  border: var(--outline-w) solid var(--border-outline);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, var(--ui-navy-500) 0%, var(--ui-navy-900) 100%);
  color: var(--ui-ivory-100);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-min);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--highlight-top), 0 3px 0 var(--ui-navy-900);
}

.wb-ability:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ui-navy-900); }
.wb-ability .wb-icon { width: 30px; height: 30px; }

.wb-ability__cd {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(21, 14, 11, 0.72);
  color: var(--ui-ivory-100);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Пьедестал зала славы (design.md §72) и витрина магазина (§65)
   ============================================================ */

.wb-podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.wb-podium__slot {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.wb-podium__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--ui-wood-600) 0%, var(--ui-wood-900) 100%);
  box-shadow: inset 0 0 0 3px var(--ui-brass-500), var(--shadow-object);
  overflow: hidden;
}

.wb-podium__portrait img { width: 100%; height: 100%; object-fit: cover; }

.wb-podium__slot--1 .wb-podium__portrait { box-shadow: inset 0 0 0 3px var(--ui-gold-500), 0 0 22px rgba(242, 178, 51, 0.4), var(--shadow-object); }

.wb-podium__base {
  width: 100%;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ui-ivory-300) 0%, var(--ui-wood-500) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.wb-podium__slot--1 .wb-podium__base { height: 44px; background: linear-gradient(180deg, var(--ui-gold-300) 0%, var(--ui-gold-700) 100%); }
.wb-podium__slot--2 .wb-podium__base { height: 30px; }
.wb-podium__slot--3 .wb-podium__base { height: 22px; }

/* ============================================================
   ГОРИЗОНТАЛЬНАЯ КАРУСЕЛЬ ГАРДЕРОБА (design.md §248–§249)
   ============================================================ */

.wb-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.wb-rail::-webkit-scrollbar { display: none; }

.wb-rail__item {
  flex: 0 0 88px;
  scroll-snap-align: center;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--outline-w) solid var(--border-outline);
  border-radius: var(--radius-control);
  background: linear-gradient(180deg, var(--ui-wood-600) 0%, var(--ui-wood-900) 100%);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--highlight-inset), 0 3px 0 var(--ui-wood-950);
  transition: transform var(--duration-fast) var(--ease-out);
}

.wb-rail__item img { width: 100%; height: 100%; object-fit: contain; }
.wb-rail__item.is-selected { transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--ui-gold-500), 0 3px 0 var(--ui-wood-950); }
.wb-rail__item.is-locked { filter: saturate(0.35) brightness(0.62); }

/* ============================================================
   360px и десктоп Telegram (design.md §125, §265)
   ============================================================ */

@media (min-width: 520px) {
  /* На десктопе мир не растягиваем на всю ширину: держим портретный кадр. */
  .wb-world { left: 50%; width: min(100vw, 560px); transform: translateX(-50%); }
  .wb-world::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 100vmax var(--ui-wood-950);
    pointer-events: none;
  }
}