/* Кабинет «Мира Зверей». Раскладка — КАБИНЕТ «всё сразу» (решение Жени, 05.08):
   на большом экране три колонки, на телефоне тот же кабинет колонкой с вкладками.
   Палитра взята с промо-сайта, чтобы игра и сайт выглядели одним миром. */
:root{
  --ground:#0b0c0a; --card:#141612; --line:#2a2c24;
  --bone:#ece3d0; --dim:#9d9784; --amber:#e6a23c; --amber-dim:#b8801f;
  --blood:#8c2f2a; --moss:#4a5c3a;
  --r:12px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:"Iowan Old Style",Palatino,Georgia,serif;
  /* Отступ под шапку Telegram — тот же расчёт, что в loot_codex. */
  --top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top,0px))
             + var(--tg-content-safe-area-inset-top, 0px));
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0; background:var(--ground); color:var(--bone);
  font:400 16px/1.5 var(--f); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
button{font:inherit; color:inherit; cursor:pointer}

/* Внешний слой: скроллится содержимое, а не оболочка Telegram. */
.shell{position:fixed; inset:0; padding-top:var(--top);
       overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
.boot{padding:40px 20px; color:var(--dim); text-align:center}

/* ── шапка зверя: видна ВСЕГДА, в обеих раскладках ───────── */
.top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(11,12,10,.92); position:sticky; top:0; z-index:20;
}
.top__name{font-family:var(--f-display); font-size:19px}
.top__lvl{color:var(--dim); font-size:14px}
.top__bars{display:flex; gap:10px 12px; margin-left:auto; flex-wrap:wrap; min-width:0}
/* flex:1 с базой, а не жёсткий min-width: четыре полосы по 104 px не
   влезали в узкий экран и раздували ВЕСЬ документ — обрезались и карточка,
   и четвёртая вкладка (поймано рендером 06.08). */
.bar{flex:1 1 96px; min-width:0; max-width:180px}
.bar__t{font-size:12px; color:var(--dim); display:flex; justify-content:space-between; gap:8px}
.bar__l{height:6px; border-radius:99px; background:#20221c; margin-top:3px; overflow:hidden}
.bar__f{height:100%; border-radius:99px; transition:width .3s ease}
.bar--hp .bar__f{background:linear-gradient(90deg,var(--blood),#c25b4e)}
.bar--food .bar__f{background:linear-gradient(90deg,var(--moss),#7d9c5e)}
.bar--water .bar__f{background:linear-gradient(90deg,#2f5c6c,#5e9cb0)}
.bar--xp .bar__f{background:linear-gradient(90deg,var(--amber-dim),var(--amber))}

/* ── кабинет: три колонки на большом экране ──────────────── */
.cab{
  display:grid; gap:14px; padding:14px 16px 28px; max-width:100%;
  /* minmax(0,…) обязателен: с minmax(230px,…) сетка не даёт колонкам сжаться
     уже содержимого, и длинная карточка уезжает за правый край экрана. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);
  align-items:start;
}
.col{display:flex; flex-direction:column; gap:14px; min-width:0}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
       padding:14px; min-width:0; overflow-wrap:anywhere}
.panel__h{
  font:600 12px/1 var(--f); letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-dim); margin-bottom:12px;
}
.muted{color:var(--dim)}
.center{text-align:center}

/* кукла: четыре слота — оружие, броня, амулет, тотем */
.doll{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.slot{
  border:1px dashed var(--line); border-radius:10px; padding:10px 8px; text-align:center;
  min-height:74px; display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.slot--on{border-style:solid; border-color:#3c3f31; background:#181a15}
.slot__i{font-size:20px}
.slot__n{font-size:12px; color:var(--dim); word-break:break-word}

/* характеристики */
.stats{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; font-size:14px}
.stats div{display:flex; justify-content:space-between; gap:8px; align-items:center}
/* Название тянется, кнопки не сжимаются: без этого строка предмета с двумя
   кнопками отжимала текст в ноль, и он рассыпался в столбик по букве
   (поймано рендером 06.08). */
.stats div > span:first-child{flex:1 1 auto; min-width:0}
.stats .mini{flex:0 0 auto}
.stats b{font-weight:600; flex:0 0 auto}
/* Строки с кнопками ставим в одну колонку — двум кнопкам в половине ширины тесно. */
.stats--wide{grid-template-columns:1fr}

/* центр: место действия */
.stage{min-height:220px; display:flex; flex-direction:column; gap:12px}
.stage__title{font-family:var(--f-display); font-size:22px}
.stage__art{border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.stage__text{color:var(--dim)}
.acts{display:flex; flex-wrap:wrap; gap:8px}
.act{
  border:1px solid var(--line); background:#181a15; border-radius:999px;
  padding:10px 16px; font-size:15px;
}
.act:hover{border-color:var(--amber-dim); color:var(--amber)}
.act--go{background:linear-gradient(160deg,#f0b455,var(--amber-dim)); color:#1a1405; border-color:transparent}
.act--go[disabled]{opacity:.45; filter:grayscale(.5)}
.act[disabled]{opacity:.45; cursor:default}
/* выбранная зона удара/защиты — видно, что ход собран наполовину */
.act--on{border-color:var(--amber); color:var(--amber); background:#231f14}
.stage__art img{width:100%; max-height:320px; object-fit:cover}

/* лог и события */
.feed{display:flex; flex-direction:column; gap:8px; font-size:14px}
.feed__i{border-left:2px solid var(--line); padding-left:10px; color:var(--dim)}

/* вкладки — только для телефона */
.tabs{display:none}

/* ── телефон: тот же кабинет колонкой ────────────────────── */
/* Лавка на большом экране живёт в правой колонке под событиями. */
@media (min-width:901px){
  .col--shop{grid-column:3; grid-row:2}
}

@media (max-width:900px){
  .cab{grid-template-columns:minmax(0,1fr); padding:12px 12px 84px}
  .col{display:none}
  .col--on{display:flex}
  .tabs{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:rgba(11,12,10,.96); border-top:1px solid var(--line);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .tab{flex:1 1 0; min-width:0; background:none; border:0; padding:8px 2px; font-size:11px; color:var(--dim)}
  .tab__i{display:block; font-size:19px; margin-bottom:2px}
  .tab--on{color:var(--amber)}
  .top__bars{width:100%; margin-left:0}
  /* В бою кнопки должны быть под рукой, а не за портретом: на телефоне он
     занимал пол-экрана, и «Ударить» уезжало под вкладки (рендер 06.08). */
  .stage__art img{max-height:190px}
  .blog{max-height:34vh}
  .bar{flex:1 1 44%; max-width:none}
}

/* всплывашка: короткий ответ на действие */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-20px);
  top:calc(var(--top) + 12px); z-index:60; max-width:min(520px,92vw);
  background:#1d1f18; border:1px solid var(--line); border-radius:10px;
  padding:11px 16px; color:var(--bone); font-size:15px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.toast--on{opacity:1; transform:translateX(-50%) translateY(0)}

/* лог схватки: читается как лента, прокручивается сам */
.blog{
  background:#101208; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-top:10px; font-size:14.5px; line-height:1.55;
  white-space:pre-wrap; max-height:46vh; overflow-y:auto;
}

/* мелкая кнопка действия у строки предмета */
.mini{
  border:1px solid var(--line); background:#181a15; color:var(--dim);
  border-radius:8px; padding:3px 9px; font-size:12.5px; white-space:nowrap;
}
.mini:hover:not([disabled]){border-color:var(--amber-dim); color:var(--amber)}
.mini[disabled]{opacity:.5; cursor:default}
.slot[data-unequip]{cursor:pointer}
.slot[data-unequip]:hover{border-color:var(--amber-dim)}