/* ============================================================
   Pigletfighters — Telegram Mini App.
   Дизайн-система редизайна (хендофф Claude Design, «Свинарник»):
   токены цвета/типографики, кейфреймы и каркас fullscreen-страницы.

   Три решения, на которых держится вся система:
     1. ИЕРАРХИЯ — ровно один латунный акцент (--brass) на экран,
        остальное живёт на тихих поверхностях.
     2. ПРОГРЕССИВНОЕ РАСКРЫТИЕ — второстепенное прячется в
        раскрываемые блоки, а не сыпется в поток.
     3. ОТДАЧА — награда видна до тапа и после (чипы, всплывающие
        числа, кулдаун как таймер).

   Разметка экранов — строки в JS (см. core/kit.js: PFKit — общий
   набор компонентов). Здесь только токены, анимации и каркас.
   ============================================================ */

/* Bitter — заголовки, Manrope — интерфейс, IBM Plex Mono — все числа игры. */
@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap");

*      { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 13px;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   THEME TOKENS
   Имена ролей из хендоффа (canvas/panel/raised/bar/edge/brass/…)
   заведены как основные; старые имена (--bg/--surface/--accent/…)
   сохранены как алиасы — экраны переезжают на новые постепенно,
   ничего не ломается по дороге.
   ============================================================ */
:root {
  --font-display: Bitter, Georgia, "Times New Roman", serif;
  --font-ui: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Шкала отступов и радиусов — из спеки «РАЗМЕРЫ И ДВИЖЕНИЕ». */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 10px; --sp-5: 12px;
  --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 26px;
  --r-chip: 6px; --r-btn: 12px; --r-card: 14px; --r-hero: 18px; --r-pill: 20px;
  --tap-min: 44px; --tap: 48px; --tap-cta: 56px;
  --screen-pad: 16px;

  /* ── Тактическая карта (v3.2) ──────────────────────────────────────
     Поле боя — «распечатанная карта на столе», а не поверхность
     интерфейса: палитра одна на обе темы, иначе фишки и подсветка на
     тёмной подложке теряют контраст в светлой теме. Значения читает
     canvas через getComputedStyle, поэтому живут здесь, а не в JS. */
  --map-frame:#14110D;   --map-grid:rgba(0,0,0,.34);  --map-shadow:rgba(0,0,0,.45);
  --map-ink:#F6F1E6;     --map-dead:#7A6F60;
  --map-ally:#4FB0E0;    --map-ally-bg:#131C24;
  --map-foe:#C2603A;     --map-foe-bg:#2A1C14;
  --map-turn:#E9A93F;    --map-pick:#F5D06B;
  --map-move:rgba(147,194,78,.75);   --map-move-fill:rgba(147,194,78,.26);
  --map-target:rgba(214,58,74,.9);   --map-target-off:rgba(140,127,106,.5);
  --map-hazard:#FF6A3C;  --map-hazard-fill:rgba(255,106,60,.22);
  --map-hp-good:#93C24E; --map-hp-low:#FF6A3C; --map-hp-out:#D63A4A;
  --map-relief:rgba(255,255,255,.15); --map-outline:rgba(0,0,0,.45);
  --map-label:rgba(246,241,230,.6);

  /* Подложки местности: пол · пятна пола · грязь · стена · верх стены ·
     бочки/колонны · крапинка. Одна строка на карту — тюнить локацию
     можно не трогая код отрисовки. */
  --map-mud-floor:#3B3125;   --map-mud-floor2:#453A2B; --map-mud-rough:#5A4423;
  --map-mud-wall:#191510;    --map-mud-walltop:#2C2419; --map-mud-prop:#7B5A2F;
  --map-mud-tint:#0D0B08;
  --map-wood-floor:#4A3A26;  --map-wood-floor2:#54432C; --map-wood-rough:#6D5A2C;
  --map-wood-wall:#20180F;   --map-wood-walltop:#3A2C1B; --map-wood-prop:#8A6535;
  --map-wood-tint:#100C07;
  --map-bog-floor:#33382A;   --map-bog-floor2:#3B4130; --map-bog-rough:#2F4436;
  --map-bog-wall:#161C15;    --map-bog-walltop:#26301F; --map-bog-prop:#6B6A3C;
  --map-bog-tint:#0A0D09;
  --map-stone-floor:#3C3A35; --map-stone-floor2:#45433D; --map-stone-rough:#4E4433;
  --map-stone-wall:#1B1916;  --map-stone-walltop:#2F2C26; --map-stone-prop:#736B5C;
  --map-stone-tint:#0C0B0A;
}

[data-theme="dark"] {
  --canvas:#0D0B09;  --panel:#16130F;  --raised:#1E1A14;  --bar:#131009;  --sunk:#0F0C08;
  --edge:#2A241B;    --edge-2:#3B3223; --edge-hot:#8A5F22;
  --brass:#E9A93F;   --brass-ink:#17130C; --gold:#F5D06B;
  --moss:#93C24E;    --ember:#FF6A3C;  --blood:#D63A4A;  --sky:#4FB0E0;  --rust:#C2603A;
  --text:#F6F1E6;    --text2:#AFA491;  --text3:#8C7F6A;
  --ember-soft:#FF9A6A;
  --hot-fill: linear-gradient(120deg,#2A2114,#16130F);
  --hot-fill-hero: linear-gradient(150deg,#2A2114,#14110B);
  --tile-fill: linear-gradient(160deg,#241C12,#12100C);
  --track:#221D16;
  --scrim: linear-gradient(to top,#0D0B09 6%,rgba(13,11,9,.72) 62%,rgba(13,11,9,.35));
  --scrim-tall: linear-gradient(to top,#0D0B09 4%,rgba(13,11,9,.55) 46%,rgba(13,11,9,.15));
  --glass: rgba(13,11,9,.62);
  --on-art:#fff;     --on-art-2:#D6CBB6;
  --shadow: 0 8px 24px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-lift: 0 8px 22px rgba(0,0,0,.6);
  --grime:.42;

  /* --- алиасы прежних имён --- */
  --bg:var(--canvas); --bg2:var(--bar); --surface:var(--panel); --surface2:var(--raised);
  --line:var(--edge); --line2:var(--edge-2); --line3:var(--edge-hot);
  --accent:var(--brass); --accent2:var(--gold); --accent-ink:var(--brass-ink);
  --good:var(--moss); --heal:var(--moss); --crit:var(--ember); --bad:var(--blood);
  --warn:#D9843C; --death:#7A6F60; --ours:var(--sky); --twari:var(--rust); --mud:#7A5D38;
  --slot-a:#1A160F; --slot-b:#211B12;
}

[data-theme="light"] {
  --canvas:#F1EADB;  --panel:#FBF6EC;  --raised:#EDE4D2;  --bar:#E7DDC8;  --sunk:#E4D9C1;
  --edge:#DACDB2;    --edge-2:#C3B394; --edge-hot:#A9711C;
  --brass:#A9711C;   --brass-ink:#FFF8EC; --gold:#8A6A1E;
  --moss:#5E8E22;    --ember:#C2461B;  --blood:#B01F30;  --sky:#2D6F9D;  --rust:#8A4527;
  --text:#1C1710;    --text2:#5C5140;  --text3:#8A7C66;
  --ember-soft:#A83C15;
  --hot-fill: linear-gradient(120deg,#F5E7CC,#FBF6EC);
  --hot-fill-hero: linear-gradient(150deg,#F5E7CC,#FBF6EC);
  --tile-fill: linear-gradient(160deg,#F0E4CB,#FBF6EC);
  --track:#E9E0CC;
  --scrim: linear-gradient(to top,#F1EADB 6%,rgba(241,234,219,.7) 62%,rgba(241,234,219,.25));
  --scrim-tall: linear-gradient(to top,#F1EADB 4%,rgba(241,234,219,.5) 46%,rgba(241,234,219,.1));
  --glass: rgba(251,246,236,.7);
  --on-art:#1C1710;  --on-art-2:#3C3427;
  --shadow: 0 5px 16px rgba(90,66,30,.2), 0 1px 0 rgba(255,255,255,.55) inset;
  --shadow-lift: 0 8px 20px rgba(90,66,30,.26);
  --grime:.18;

  --bg:var(--canvas); --bg2:var(--bar); --surface:var(--panel); --surface2:var(--raised);
  --line:var(--edge); --line2:var(--edge-2); --line3:var(--edge-hot);
  --accent:var(--brass); --accent2:var(--gold); --accent-ink:var(--brass-ink);
  --good:var(--moss); --heal:var(--moss); --crit:var(--ember); --bad:var(--blood);
  --warn:#B4651A; --death:#6E6559; --ours:var(--sky); --twari:var(--rust); --mud:#8A6A3F;
  --slot-a:#E2D4B6; --slot-b:#DCCAA6;
}

/* ============================================================
   ТИПОГРАФИКА — роли из спеки
   ============================================================ */
.t-hero    { font: 800 26px/1.05 var(--font-display); color: var(--text); }
.t-title   { font: 800 19px/1.1  var(--font-display); color: var(--text); }
.t-card    { font: 800 16px/1.15 var(--font-display); color: var(--text); }
.t-row     { font: 700 13.5px/1.2 var(--font-ui); color: var(--text); }
.t-body    { font: 500 12.5px/1.5 var(--font-ui); color: var(--text2); }
.t-micro   { font: 500 11px/1.35 var(--font-ui); color: var(--text3); }
.t-label   { font: 700 10px/1 var(--font-num); letter-spacing: .14em;
             text-transform: uppercase; color: var(--text3); }
.t-num     { font: 700 22px/1 var(--font-num); color: var(--text); }
.num       { font-family: var(--font-num); font-weight: 700; }

/* ============================================================
   KEYFRAMES И МИКРОВЗАИМОДЕЙСТВИЯ
   Тап .98/90мс · урон 340мс + число 900мс · лечение 600мс ·
   смена экрана 180мс (opacity + 8px вверх).
   ============================================================ */
@keyframes fxpop     { 0%{opacity:0; transform:translate(-50%,4px) scale(.8);} 15%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-34px) scale(1.05);} }
@keyframes shk       { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-5px) rotate(-1deg);} 40%{transform:translateX(5px) rotate(1deg);} 60%{transform:translateX(-3px);} 80%{transform:translateX(3px);} }
@keyframes pulse     { 0%,100%{box-shadow:0 0 0 0 rgba(233,169,63,.55);} 50%{box-shadow:0 0 0 7px rgba(233,169,63,0);} }
@keyframes healpulse { 0%,100%{box-shadow:0 0 0 0 rgba(147,194,78,.5);} 50%{box-shadow:0 0 0 6px rgba(147,194,78,0);} }
@keyframes dyingthrob{ 0%,100%{opacity:.6;} 50%{opacity:1;} }
@keyframes rowin     { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@keyframes screenin  { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes shimmer   { from{background-position:-360px 0;} to{background-position:360px 0;} }

[data-shake="1"] { animation: shk .34s ease; }
.logrow  { animation: rowin .22s ease; }
.screen  { animation: screenin .18s ease both; }
.heal-pulse { animation: healpulse .6s ease; }

/* Тап — одна строка на весь интерфейс вместо :active в каждом компоненте. */
[data-tap]:active { transform: scale(.98); }
[data-tap] { transition: transform 90ms ease, border-color 140ms ease, background-color 140ms ease; }
[data-tap][disabled], [data-tap][aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Скелетон загрузки: каркас рисуется сразу, данные втекают в готовые места. */
.sk { background: var(--panel); border-radius: 6px; position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  background-size: 360px 100%; background-repeat: no-repeat;
  animation: shimmer 1.1s linear infinite;
}

::-webkit-scrollbar { width:0; height:0; }

/* уважаем prefers-reduced-motion и ручной тумблер */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   APP LAYOUT — fullscreen (страница сама — экран Mini App)
   ============================================================ */
#app {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* грязевая текстура поверх фона */
.grime {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  opacity: var(--grime); mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 15% 12%, rgba(60,40,20,.5), transparent 9%),
    radial-gradient(circle at 82% 30%, rgba(50,35,18,.45), transparent 7%),
    radial-gradient(circle at 40% 78%, rgba(40,28,14,.5), transparent 11%),
    radial-gradient(circle at 68% 92%, rgba(30,20,10,.5), transparent 8%);
}

#header { position: relative; z-index: 20; flex: 0 0 auto; }
#body   { position: relative; z-index: 10; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
#bar    { position: relative; z-index: 30; flex: 0 0 auto; }

/* Нижний бар везде занят одним делом, которое от игрока ждут сейчас;
   safe-area — чтобы CTA не уезжал под домашний индикатор. */
.pf-bar {
  padding: 10px var(--screen-pad) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--bar);
  border-top: 1px solid var(--edge);
}

/* ============================================================
   v4 «НОВАЯ ЭРА» — тактическая песочница (волна 2 R1).
   Мастер героя и лист персонажа живут в нижней шторке. Это клон
   #tac-sheet из tactical.html, но классом, а не id: на боевом
   экране их может быть две одновременно (шторка боя + лист
   поверх неё), и z-index у v4-шторки выше.
   ============================================================ */
.v4-sheet-back {
  position: fixed; inset: 0; z-index: 47; background: rgba(0,0,0,.5);
}
.v4-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  max-height: 84dvh; display: flex; flex-direction: column;
  background: var(--bar); border-top: 1px solid var(--edge-2);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0,0,0,.45);
  animation: screenin .18s ease both;
}
.v4-sheet-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px var(--screen-pad); border-bottom: 1px solid var(--edge);
}
.v4-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px var(--screen-pad) 14px;
}
.v4-sheet-foot {
  flex: 0 0 auto; display: flex; gap: 8px;
  padding: 10px var(--screen-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--edge);
}

/* Ранги навыков/спасбросков на листе персонажа: цвет = ранг, чтобы
   тренированность считывалась без чтения подписи. Фиолетового токена в
   палитре нет, поэтому «мастер» задан значением — с парой на светлую
   тему, где сиреневый на кремовом фоне не читался бы. */
.v4-rank-0 { color: var(--text3); }
.v4-rank-1 { color: var(--text); }
.v4-rank-2 { color: var(--sky); }
.v4-rank-3 { color: #A66BD8; }
[data-theme="light"] .v4-rank-3 { color: #7A3FA8; }
.v4-rank-4 { color: var(--gold); }

/* ── Поле боя (core/battlemap.js) ────────────────────────────────────────
   Живёт здесь, а не в разметке одной страницы: с R5 сетку рисует и
   штатный боевой экран (index.html), и админский стенд (tactical.html).
   «Стол» с картой одинаков в обеих темах — как настоящая распечатанная
   карта, положенная на стол. */
#mapwrap {
  position: relative; border: 1px solid var(--edge-2); border-radius: var(--r-card);
  background: var(--map-frame); overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55);
  display: grid; place-items: center;
}
/* Прокрутку бокса заменила камера холста (v5.1): скроллом её не совместить
   — палец тянул бы то поле, то бокс, и после каждой перерисовки холста
   позиция скролла терялась. `touch-action: none` отдаёт жест панораме. */
#map { display: block; touch-action: none; margin: auto; }

/* Бой на карте в штатном экране: карта занимает свободную высоту, панель
   действий закреплена снизу. Без этого поле выталкивало бы за экран всё
   остальное — ровно та болезнь, от которой лечился стенд в v3.2.2. */
body.pf-mapbattle #app { height: 100dvh; overflow: hidden; }
body.pf-mapbattle #body {
  display: flex; flex-direction: column; gap: 9px;
  min-height: 0; overflow: hidden;
  padding: 10px var(--screen-pad) 0;
}
body.pf-mapbattle #mapwrap {
  flex: 1 1 auto; min-height: 140px; display: grid; place-items: center;
}
/* Всё, что не карта, держит свою высоту (v5.1). Раньше эти блоки были
   обычными флекс-детьми и сжимались НИЖЕ содержимого: карточка активного
   бойца обрезалась посередине, и игрок видел половину строки. */
body.pf-mapbattle .pf-fixedrow { flex: 0 0 auto; }
/* Свои и твари под картой: список сжимается, а не растит страницу. */
body.pf-mapbattle .pf-mapbattle-scroll {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.pf-mapbattle .pf-mapbattle-scroll::-webkit-scrollbar { display: none; }
.pf-xscroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pf-xscroll::-webkit-scrollbar { display: none; }

/* Шторка «бойцы и лог»: вторичное живёт поверх карты, чтобы не отнимать
   у неё высоту, и закрывается тапом по фону. */
#pf-sheet-back {
  position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5);
  animation: pfsheetfade .18s ease-out;
}
#pf-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  max-height: 72dvh; display: flex; flex-direction: column;
  background: var(--bar); border-top: 1px solid var(--edge-2);
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
  animation: pfsheetup .22s cubic-bezier(.2, .8, .3, 1);
}
#pf-sheet-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 11px var(--screen-pad); border-bottom: 1px solid var(--edge);
}
#pf-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px var(--screen-pad) calc(16px + env(safe-area-inset-bottom, 0px));
}
@keyframes pfsheetfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pfsheetup { from { transform: translateY(100%); } to { transform: none; } }