:root{
  --bg:#14120f; --panel:#1e1b16; --panel-2:#252118;
  --line:#332e26; --line-soft:#262218;
  --text:#d8d2c6; --dim:#8a8274;
  --rust:#b5622f; --rust-dim:#5c3319;
  --blood:#8f3a34; --steel:#5c6b73; --ok:#6f7d4f;
  --rail:180px; --bottom:132px; --belt:46px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:500 14px/1.4 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;
}
#app{height:100%}

/* ── вход и создание персонажа: обычная колонка ─────────────── */
.sheet{
  height:100%;overflow-y:auto;max-width:560px;margin:0 auto;
  padding:14px 16px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
h1{font-size:20px;margin:0 0 4px}
.lead{color:var(--dim);font-size:13px;margin:0 0 18px}
.spacer{flex:1}

.topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-height:30px}
.brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--rust)}
.langs{margin-left:auto;display:flex;gap:2px}
.langs button{
  padding:5px 8px;font-size:11px;font-weight:700;text-transform:uppercase;
  background:none;border:1px solid transparent;border-radius:4px;color:var(--dim);
}
.langs button.on{border-color:var(--rust-dim);color:var(--rust)}

label{display:block;font-size:12px;color:var(--dim);margin:0 0 5px}
input{
  width:100%;padding:13px 12px;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:6px;font:500 16px/1 inherit;
}
input:focus{outline:none;border-color:var(--rust-dim)}
.field{margin-bottom:13px}

button.primary{
  width:100%;padding:15px;background:var(--rust);color:#14120f;border:0;border-radius:6px;
  font:800 15px/1 inherit;
}
button.primary:disabled{background:var(--line);color:var(--dim)}
button.link{
  width:100%;margin-top:12px;padding:10px;background:none;border:0;
  color:var(--dim);font:600 13px/1 inherit;text-decoration:underline;
}
.err{
  margin:0 0 13px;padding:10px 12px;border-radius:6px;
  background:#2a1614;border:1px solid var(--blood);color:#e5b8b4;font-size:13px;
}

.pool{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 13px;margin-bottom:12px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);font-size:13px;
}
.pool.done{border-color:var(--rust-dim);color:var(--rust)}
.pool b{font-variant-numeric:tabular-nums}
.stat{display:flex;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line-soft)}
.stat:last-of-type{border-bottom:0}
.stat .who{flex:1;min-width:0}
.stat .who b{display:block;font-size:15px;font-weight:600}
.stat .who small{color:var(--dim);font-size:11px}
.stat .val{width:34px;text-align:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.stat button{
  width:40px;height:40px;flex:none;border-radius:6px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);font:700 20px/1 inherit;
}
.stat button:disabled{opacity:.3}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:14px}

/* ── игровой экран: полный экран, ландшафт ──────────────────── */
.game{
  height:100%;display:grid;gap:6px;padding:6px;
  padding-left:calc(6px + env(safe-area-inset-left));
  padding-right:calc(6px + env(safe-area-inset-right));
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  grid-template-columns:1fr var(--rail);
  grid-template-rows:1fr var(--belt) var(--bottom);
  grid-template-areas:"scene rail" "belt belt" "bottom bottom";
}

.scene{
  grid-area:scene;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:8px;
  background:var(--panel) center/cover no-repeat;
}
.stage{position:absolute;left:0;top:0;width:1008px;height:418px;transform-origin:0 0;background-repeat:repeat}
.stage .obj{position:absolute;pointer-events:none}
/* Строение на сцене: рисунок стоит в своей точке, подпись под ним. */
.stage .house{position:absolute;z-index:8;padding:0;background:none;border:0;color:var(--text);font:700 13px/1 inherit;cursor:pointer}
.stage .house img{display:block}
.stage .house span{
  position:absolute;left:50%;bottom:6px;transform:translate(-50%,100%);
  padding:4px 8px;border-radius:3px;white-space:nowrap;
  background:#14120fd9;border:1px solid #8f7734;
}
.stage .house.closed{cursor:default;z-index:7}
.stage .house.closed span{color:var(--dim);border-color:var(--line)}
.stage .house:disabled img{filter:none}
.scene::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, #14120fcc 0%, #14120f22 30%, #14120f00 55%, #14120f88 100%);
}
.scene-head{position:absolute;left:12px;top:10px;right:12px}
.scene-head h2{margin:0;font-size:17px;text-shadow:0 1px 4px #000}
.scene-head .meta{color:#c9c2b4;font-size:11px;text-shadow:0 1px 4px #000}

.marker{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px;background:none;border:0;color:var(--text);font:700 11px/1 inherit;
}
.marker .pin{
  width:15px;height:15px;border-radius:50%;
  background:var(--rust);border:2px solid #14120f;box-shadow:0 0 0 1px var(--rust);
}
.marker .pin.mine{background:var(--steel)}
.marker .pin.landmark{background:var(--blood)}
.marker .pin.dump{background:var(--ok)}
.marker span{
  padding:3px 7px;border-radius:4px;white-space:nowrap;
  background:#14120fe6;border:1px solid var(--line);
}
.marker:disabled{opacity:.4}
/* Строение объекта — только в классике, свой скин его не находит. */
.marker .bld{display:none}

.road-strip{
  position:absolute;left:12px;right:12px;bottom:10px;
  display:flex;align-items:baseline;gap:8px;padding:8px 11px;border-radius:6px;
  background:#14120fe6;border:1px solid var(--rust-dim);
}
.road-strip small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--rust)}
.road-strip span{margin-left:auto;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}

.rail{grid-area:rail;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
.rail .box{flex:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px}
.tools{flex:none;display:flex;gap:6px;height:100%}
.tools button{
  aspect-ratio:1;height:100%;padding:0;border-radius:6px;background:var(--panel);
  border:1px solid var(--line);color:var(--text);font:700 15px/1 inherit;
}
.belt .spacer{flex:1}
.tools button:active{background:var(--panel-2)}

.mini .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:126px;margin:0 auto}
.mini .cell{
  aspect-ratio:1;border-radius:3px;position:relative;padding:0;
  background:var(--panel-2);border:1px solid var(--line-soft);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font:700 9px/1 inherit;
}
.mini .cell:disabled{opacity:.4}
.mini .cell.here{border-color:var(--rust);color:var(--rust);background:#2a2116}
.mini .cell.void{background:transparent;border-style:dashed}
.mini .cell.road{border-color:var(--rust-dim)}
.mini .cell .mark{position:absolute;right:2px;bottom:1px;color:var(--rust);font-size:7px}
.mini .caption{margin-top:6px;color:var(--dim);font-size:10px;text-align:center;font-variant-numeric:tabular-nums}

.vitals b{display:block;font-size:14px;margin-bottom:1px}
.vitals > small{color:var(--dim);font-size:10px}
.vital{margin-top:6px}
.vital .row{display:flex;justify-content:space-between;font-size:10px;color:var(--dim)}
.vital .row i{font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
.bar{height:3px;margin-top:3px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar.ap i{background:var(--rust)}
.bar.load i{background:var(--steel)}
.bar.xp i{background:#c9a24a}

/* Пояс: полоса ячеек во всю ширину, как в оригинале. */
.belt{grid-area:belt;display:flex;gap:4px;min-width:0;overflow:hidden}
.belt .bcell{
  position:relative;height:100%;aspect-ratio:1;flex:none;
  border:1px solid var(--line);border-radius:6px;
  background:var(--panel);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.belt .bcell.act{cursor:pointer}
.belt .bcell.on{border-color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}
.belt .bcell .icon{width:100%;height:100%;object-fit:contain;padding:3px}
.belt .bcell small{font-size:9px;color:var(--dim);text-align:center;padding:2px;line-height:1.1}
.belt .bcell u{
  position:absolute;left:2px;top:1px;font:700 10px/1 inherit;
  color:#ffe1a3;text-decoration:none;text-shadow:0 1px 2px #000;
}

/* Индикатор и сетка слотов — детали классики, своя вёрстка их прячет. */
.dial,.gear{display:none}

.bottom{grid-area:bottom;display:grid;grid-template-columns:1fr 220px;gap:6px;min-height:0}
.log{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;overflow-y:auto;font-size:12px;color:var(--dim);
}
.log p{margin:0 0 3px}
.log p b{color:var(--text);font-weight:600}
.presence{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;overflow-y:auto;
}
.presence h3{
  margin:0 0 5px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700;
}
.presence .who{display:flex;align-items:baseline;gap:6px;padding:2px 0;font-size:12px}
.presence .who small{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.presence .who.me b{color:var(--rust)}
.presence .who.npc b{color:var(--steel)}

.rotate{
  position:fixed;inset:0;display:none;z-index:20;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--bg);color:var(--dim);text-align:center;padding:24px;
}
.rotate b{color:var(--text);font-size:16px}
.rotate i{font-size:34px;font-style:normal;color:var(--rust)}

@media (orientation:portrait) and (max-width:900px){
  .game{display:none}
  .rotate{display:flex}
}
@media (max-height:430px){
  :root{--bottom:98px;--rail:152px}
  .bottom{grid-template-columns:1fr 168px}
  .scene-head h2{font-size:15px}
}

.sheetpanel{
  position:absolute;inset:8px;display:grid;gap:10px;
  grid-template-columns:200px 1fr 260px;
  background:#14120ff5;border:1px solid var(--line);border-radius:8px;padding:12px;
}
.sheetpanel .close{
  position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:4px;z-index:2;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim);font:700 13px/1 inherit;
}
.sheetpanel .col{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.sheetpanel .col + .col{border-left:1px solid var(--line-soft);padding-left:12px}
.sheetpanel h3{
  margin:0 0 6px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--rust);font-weight:700;
}
.sheetpanel .line + h3{margin-top:12px}
.line{display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:11px;color:var(--dim)}
.line i{font-style:normal;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* фигурка со слотами */
.col.figure{align-items:center;justify-content:center;overflow:hidden;padding:0}
.figure-stack{position:relative;height:100%;width:100%;max-width:240px;margin:0 auto;touch-action:none}
.figure-stack .layer{
  position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);
  object-fit:contain;pointer-events:none;
}
/* Оружие лежит в кисти стволом вниз: поза фигурки от него не меняется. */
.figure-stack .held{
  position:absolute;top:54%;width:30%;
  object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 5px #000b);
}
/* Оружие лежит горизонтально, как в оригинале: одноручное — на своей руке,
   двуручное — через весь пояс по центру. */
.figure-stack .held{top:46%}
.figure-stack .held.right{left:77%;right:auto;transform:translate(-50%,-50%)}
.figure-stack .held.left{left:23%;right:auto;transform:translate(-50%,-50%)}
.figure-stack .held.heavy{left:50%;top:54%;width:46%;transform:translate(-50%,-50%)}
/* Слотом служит сама часть тела: невидимая область, подсветка при наведении. */
.zone{position:absolute;border-radius:6px;transition:background .12s}
.zone.lit{background:#0009;box-shadow:inset 0 0 0 2px var(--rust)}
/* Цель перетаскивания светится по контуру вещи, а не рамкой вокруг неё. */
.figure-stack .layer.lit{
  filter:drop-shadow(0 0 2px var(--rust)) drop-shadow(0 0 6px var(--rust));
}
.zone.z-head{left:36%;top:1%;width:28%;height:12%}
.zone.z-body{left:28%;top:15%;width:44%;height:33%}
.zone.z-arm-left{left:9%;top:20%;width:15%;height:28%}
.zone.z-arm-right{right:9%;top:20%;width:15%;height:28%}
.zone.z-legs{left:30%;top:50%;width:40%;height:41%}
.zone.z-feet{left:28%;top:92%;width:44%;height:7%}
.zone.z-hand-left{left:4%;top:50%;width:17%;height:14%}
.zone.z-hand-right{right:4%;top:50%;width:17%;height:14%}

.ghost{
  position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);
  width:52px;height:52px;padding:4px;border-radius:6px;
  background:#14120fe6;border:1px solid var(--rust);
  display:flex;align-items:center;justify-content:center;
}
.ghost img{max-width:100%;max-height:100%;object-fit:contain}
.ghost small{font-size:8px;text-align:center;color:var(--text)}
.col.bag.lit{background:#0006;box-shadow:inset 0 0 0 2px var(--rust);border-radius:6px}

/* рюкзак сеткой с вкладками */
.col.bag{min-width:0}
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tabs button{
  flex:1;padding:6px 0;border-radius:4px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--dim);font:700 9px/1 inherit;
  text-transform:uppercase;letter-spacing:.05em;
}
.tabs button.on{border-color:var(--rust-dim);color:var(--rust)}
.grid-bag{
  flex:1;min-height:0;overflow-y:auto;align-content:start;
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
}
.bagcell{
  position:relative;aspect-ratio:1;padding:3px;border-radius:5px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font:600 8px/1.1 inherit;text-align:center;
}
.bagcell.worn{border-color:var(--rust-dim)}
.bagcell .icon{object-fit:contain;max-width:100%;max-height:100%}
.bagcell i{
  position:absolute;right:2px;bottom:1px;font-style:normal;
  font-size:9px;font-weight:700;color:var(--text);text-shadow:0 1px 2px #000;
}
.col.bag .foot{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);color:var(--dim);font-size:11px;display:flex;justify-content:space-between;align-items:center}
.purse{display:inline-flex;align-items:center;gap:6px;color:var(--fg);font-size:12px}
.purse .coin{width:22px;height:22px;object-fit:contain}

@media (max-width:900px){
  .sheetpanel{grid-template-columns:150px 1fr 200px;gap:8px}
  .doll .slot{width:38px;height:38px}
  .grid-bag{grid-template-columns:repeat(3,1fr)}
}
}

.scene.indoor::before{background:linear-gradient(180deg,#14120fe6 0%,#14120f99 40%,#14120fcc 100%)}
.actions{
  position:absolute;left:12px;bottom:12px;display:flex;gap:8px;
}
.actions button{
  padding:11px 18px;border-radius:6px;background:#14120fe6;
  border:1px solid var(--rust-dim);color:var(--rust);font:700 13px/1 inherit;
}
.actions button:last-child{border-color:var(--line);color:var(--dim)}
.actions button:active{background:var(--panel-2)}

/* ── бой: поле по центру, рейка справа, журнал снизу — та же раскладка */
.combat .field{
  grid-area:scene;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;
}
.combat .field{padding:0;overflow:hidden}
/* пещера шире экрана: прокрутка внутри поля, фон на холсте, фигурки поверх */
.cave{position:relative;width:100%;height:100%;overflow:auto;cursor:crosshair;background:#17140f}
.cave-world{position:relative;transform-origin:0 0}
.cave-ground{display:block}
.cave-range{position:absolute;left:0;top:0;pointer-events:none}
.cave-units{position:absolute;inset:0;pointer-events:none}
.cave .unit{
  position:absolute;width:0;height:0;overflow:visible;transition:left .18s linear,top .18s linear;
}
.cave .unit .mob-art{position:absolute;left:-18px;top:-30px;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 2px #0009)}
.cave .unit.faces-right .mob-art{transform:scaleX(-1)}
.cave .unit .token{
  position:absolute;left:-10px;top:-24px;width:20px;height:20px;border-radius:50%;
  background:var(--steel);color:#0e1113;font:800 11px/20px inherit;text-align:center;
}
.cave .unit .tag{
  position:absolute;left:-45px;top:8px;width:90px;text-align:center;font:600 9px/1.15 inherit;
  color:#e8e0cf;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:normal;overflow-wrap:anywhere;
}
.cave .unit.me .tag{color:var(--rust)}
.cave .unit .hpbar{position:absolute;left:-14px;top:2px;width:28px;height:3px;background:#000a;border-radius:2px}
.cave .unit .hpbar i{display:block;height:100%;background:#8fd68f;border-radius:2px}
.cave .unit.mob .hpbar i{background:var(--blood)}
.cave .unit.dead{opacity:.85}
.cave .unit.dead .mob-art,.cave .unit.dead .mini-figure,.cave .unit.dead .token{opacity:.45;filter:grayscale(1)}
.cave .unit.dead .tag,.cave .unit.dead .hpbar{display:none}
.mini-figure{position:absolute;left:-18px;top:-74px;width:36px;height:80px}
.mini-figure .layer{position:absolute;left:0;top:0;width:160px;height:350px;transform-origin:0 0;transform:scale(.225)}
.cave .pile{position:absolute;width:0;height:0}
.cave .pile img,.cave .pile .crate-fallback{position:absolute;left:-11px;top:-12px;width:22px;height:18px;object-fit:contain;filter:drop-shadow(0 1px 1px #000)}
.cave .pile .crate-fallback{background:#8a6a3a;border:1px solid #3a2a12;border-radius:2px;box-shadow:inset 0 0 0 2px #b08a4a}
.cave .pile i{position:absolute;left:4px;top:-2px;font:800 9px/1 inherit;color:#fff;text-shadow:0 0 2px #000}
/* фигурки оригинала: кадр лежит нулём под ногами; свой скин — паперкукла, положения условно */
.cave .unit img.frame{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 2px #0008)}
.cave .unit.dead img.frame{filter:grayscale(.4) brightness(.8)}
.cave .unit.run-3 .mini-figure{transform:scaleY(.72);transform-origin:50% 100%}
.cave .unit.run-5 .mini-figure{transform:scaleY(.4);transform-origin:50% 100%}
.stances{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.stances button{flex:1 1 45%;padding:5px 0;border-radius:4px;background:#1c1915;border:1px solid var(--line);color:var(--dim);font:700 10px/1 inherit}
.stances button.on{border-color:var(--rust-dim);color:var(--rust)}
.plan .hint.loot{color:#cfe0a0}
.cave .mark{position:absolute;font:800 10px/16px inherit;text-align:center;pointer-events:none}
.cave .mark.step{left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#e0c87acc;color:#1a1408}
.cave .mark.step.ghost{background:#e0c87a66;color:#f4ecd0;border:1px dashed #e0c87a}
.cave .mark.start{left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #e0c87a99;background:transparent}
.cave .mark.shot{width:28px;margin-left:-14px;color:#ff7d7d;text-shadow:0 0 3px #000}
.cave .float{position:absolute;margin-left:-16px;width:32px;text-align:center;font:800 12px/1 inherit;animation:rise .9s ease-out forwards;pointer-events:none}
.cave .float.dmg{color:#ff7d7d;text-shadow:0 0 3px #000}
.cave .float.miss{color:#cfd6cf;text-shadow:0 0 3px #000;font-size:10px}
@keyframes rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-26px);opacity:0}}
.cave .mark.blast{transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #ff9a5aaa;background:#ff7d3a22}
.cave .boom{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff3c0 0%,#ff9a3a 35%,#ff3a1a88 60%,transparent 72%);animation:boom .7s ease-out forwards;pointer-events:none}
@keyframes boom{from{opacity:1;scale:.3}to{opacity:0;scale:1.1}}
.cave.shake{animation:shake .5s linear}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-2px)}80%{transform:translate(3px,2px)}}
.weapon .ammo .hint{color:var(--fg-dim,#9a9082)}

.plan .odline{display:flex;justify-content:space-between;font-size:12px;margin:4px 0}
.plan .hint{margin:4px 0 0;font-size:10px;color:var(--dim)}

.queue{max-height:40%;overflow-y:auto}
.queue h3{
  margin:0 0 5px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:700;
}
.queue .who{display:flex;align-items:baseline;gap:6px;padding:2px 0;font-size:12px}
.queue .who small{margin-left:auto;color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.queue .who.now b{color:var(--rust)}
.queue .who.dead{opacity:.35;text-decoration:line-through}

.apline{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--dim)}
.pips{display:flex;gap:2px;margin-left:auto}
.pips i{width:5px;height:11px;border-radius:1px;background:var(--line)}
.pips i.on{background:var(--rust)}

.combat .acts{flex:none;display:flex;flex-direction:column;gap:6px}
.combat .acts button{
  padding:11px 0;border-radius:6px;background:var(--panel);
  border:1px solid var(--line);color:var(--text);font:700 13px/1 inherit;
}
.combat .acts button:active{background:var(--panel-2)}
.combat .acts button[disabled]{opacity:.35}
.hint{margin:0 0 4px;font-size:11px;color:var(--dim)}

/* ── прилавок скупки */
.shoppanel{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background:#14120fe8;padding:10px 12px;overflow-y:auto;
}
.shophead{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.shophead h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.shophead b{margin-left:auto;color:var(--rust);font-size:13px}
.deals{display:flex;flex-direction:column;gap:3px;max-width:560px}
.deal{
  display:flex;align-items:center;gap:9px;padding:5px 8px;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:5px;
}
.deal.none{opacity:.45}
.deal .icon{width:26px;height:26px;object-fit:contain}
.deal b{font-size:12px;font-weight:600}
.deal .price{margin-left:auto;font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.deal .price.low{color:var(--blood)}
.deal .appetite{width:52px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.deal .appetite u{display:block;height:100%;background:var(--ok);text-decoration:none}
.deal button{
  flex:0 0 auto;padding:5px 9px;font:700 11px/1 inherit;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
}
.deal button[disabled]{opacity:.4}
.shophead .tab{
  padding:5px 10px;font:700 11px/1 inherit;text-transform:uppercase;letter-spacing:.06em;
  background:none;border:1px solid transparent;border-radius:4px;color:var(--dim);
}
.shophead .tab.on{border-color:var(--rust);color:var(--rust)}
.deal .stock{color:var(--dim);font-size:10px}
.deal .price{margin-left:auto}

/* Подсказка по вещи: одна на всю игру, всплывает у курсора. */
.tip{
  position:fixed;z-index:60;min-width:190px;max-width:260px;padding:9px 11px;
  background:#14120ff2;border:1px solid var(--rust);border-radius:6px;
  color:var(--text);font-size:12px;line-height:1.4;pointer-events:none;
  box-shadow:0 6px 18px #000a;
}
.tip h4{margin:0 0 5px;font-size:13px;color:#d8a24a}
.tip h5{margin:7px 0 2px;font:600 10px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tip .row{display:flex;justify-content:space-between;gap:12px}
.tip .row b{font-weight:600}
.tip .row.good b{color:#8fc36a}
.tip .row.bad,.tip .row.bad b{color:#d0644a}
.tip p{margin:7px 0 0;color:var(--dim);font-style:italic}

/* окно подбора: слева ящик, справа рюкзак, между ними перетаскивание */
.combat .field{position:relative}
.loot-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:50}
.loot-win{width:min(640px,92%);max-height:92%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rust-dim);border-radius:8px;padding:10px 12px;gap:8px}
.loot-win .head{display:flex;justify-content:space-between;align-items:center}
.loot-win .head h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--rust)}
.loot-win .head button{width:28px;padding:4px 0}
.loot-win .panes{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:160px}
.loot-win .pane{background:#14120f;border:1px solid var(--line);border-radius:6px;padding:6px;overflow-y:auto;max-height:46vh}
.loot-win .pane.over{border-color:var(--rust)}
.loot-win h4{margin:0 0 6px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.loot-win .stack{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;font-size:12px;cursor:grab}
.loot-win .stack:hover{background:#221e18}
.loot-win .stack .icon{width:28px;height:28px;object-fit:contain}
.loot-win .stack span{flex:1}
.loot-win .stack.planned{color:#cfe0a0;cursor:pointer}
.loot-win .stack.own{color:var(--dim);cursor:default}
.loot-win .ask{display:flex;align-items:center;gap:8px;font-size:12px;background:#221e18;border-radius:6px;padding:6px 8px}
.loot-win .ask span{flex:1}
.loot-win .howmany{width:64px;padding:4px;background:#0f0d0a;border:1px solid var(--line);color:var(--fg);border-radius:4px}
.loot-win .foot{display:flex;justify-content:flex-end;gap:8px}
.loot-win .foot button,.loot-win .ask button{padding:7px 14px;border-radius:5px;background:#1c1915;border:1px solid var(--rust-dim);color:var(--rust);font:700 12px/1 inherit}

/* панель оружия и список плана в бою */
.weapon .modes{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.weapon .modes button{flex:1 1 45%;padding:5px 4px;border-radius:4px;background:#1c1915;border:1px solid var(--line);color:var(--dim);font:700 10px/1 inherit}
.weapon .modes button.on{border-color:var(--rust-dim);color:var(--rust)}
.planlist ol{margin:4px 0 6px;padding-left:18px;font-size:11px;color:var(--fg);max-height:110px;overflow-y:auto}
.planlist li{margin:2px 0}
.planlist button{width:100%;padding:5px 0;border-radius:4px;background:#1c1915;border:1px solid var(--line);color:var(--dim);font:700 10px/1 inherit}
.aim{position:fixed;transform:translate(-50%,-100%);margin-top:-8px;background:#14120fee;border:1px solid var(--rust-dim);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:4px;z-index:60}
.aim h4{margin:0 0 2px;font-size:10px;color:var(--rust);text-align:center}
.aim button{padding:5px 12px;border-radius:4px;background:#1c1915;border:1px solid var(--line);color:var(--fg);font:700 11px/1 inherit}
.combat .rail{overflow-y:auto}
.combat .rail .queue{max-height:22%}
.combat .rail .spacer{min-height:4px}

/* шахта: карта комнат 7×7 слева, как в оригинале */
.minepanel{position:absolute;left:16px;top:56px;background:#14120fe6;border:1px solid var(--line);border-radius:8px;padding:8px}
.minepanel .rooms{display:grid;grid-template-columns:repeat(7,32px);gap:1px}
.minepanel .room{position:relative;width:32px;height:32px;background:#5a5346;border:1px solid #2b271f;overflow:hidden}
.minepanel .room.rock{background:#3a2f22}
.minepanel .room .tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.minepanel .room i{position:absolute;right:2px;top:1px;font:700 8px/1 inherit;color:#e8e0cf;text-shadow:0 0 2px #000;font-style:normal}
.minepanel .room .me{position:absolute;left:12px;top:6px;width:12px;height:24px;border-radius:6px;background:#9fd07a}
.minepanel .room .out{position:absolute;left:8px;top:8px;width:20px;height:20px;border-radius:3px;background:#5fa34a;border:1px solid #1f3a18}
.minepanel .room .go{position:absolute;inset:0;background:transparent;border:0;color:#b6e08a;font:900 15px/32px inherit;text-shadow:0 0 3px #000;cursor:pointer}
.minepanel .room .go:hover{background:#ffffff22}
.minepanel .depth{margin:6px 0 0;font-size:10px;color:var(--dim);text-align:center}
.minepanel .depth.ignored{color:#cfe0a0}
.minepanel .room.path{outline:1px solid #e0c87a88;outline-offset:-2px}
.minepanel .room.next{outline:2px solid #e0c87a;outline-offset:-2px}
/* крысы в штольне: кликабельные, подпись при наведении */
.tunnel-rat{position:absolute;width:0;height:0;background:none;border:0;padding:0;cursor:pointer;overflow:visible}
.tunnel-rat img{position:absolute;filter:drop-shadow(0 2px 3px #000c)}
.tunnel-rat .rat-frame{left:-59px;top:-47px;width:118px;height:79px}
.tunnel-rat .rat-icon{left:-24px;top:-36px;width:48px;height:48px;object-fit:contain}
.tunnel-rat:hover img{filter:drop-shadow(0 0 4px #ff8a6a)}
.minepanel .ask{display:flex;gap:6px;align-items:center;margin-bottom:6px;font-size:10px;color:var(--dim)}
.minepanel .roomno{width:56px;padding:3px;background:#0f0d0a;border:1px solid var(--line);color:var(--fg);border-radius:4px}
.minepanel .ask button{padding:4px 10px;border-radius:4px;background:#1c1915;border:1px solid var(--rust-dim);color:var(--rust);font:700 10px/1 inherit}

/* правая рейка боя: карта, круг с кнопками вокруг, положения, оружие — без прокрутки */
.combat .rail{overflow:hidden;gap:6px}
.combat .rail .box{padding:6px}
.combat .rail .box h3{margin:0 0 4px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700}
.mapbox .minimap{display:block;width:100%;image-rendering:pixelated;border:1px solid var(--line);background:#000}
.vitals .vhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:11px;margin-bottom:2px}
.vitals .vhead span{font-size:9px;color:var(--dim);white-space:nowrap}
.vitals .vhead b{color:var(--rust)}
.dialwrap{position:relative;width:156px;height:150px;margin:6px auto 2px}
/* перебиваем классику: там у круга свой размер и отступы */
.combat .dialwrap .dial{position:absolute;left:28px;top:25px;width:100px;height:100px;margin:0;max-width:none}
.dialwrap .ring{
  position:absolute;width:44px;height:40px;border-radius:8px;padding:0;overflow:hidden;
  background:#1c1915;border:1px solid var(--rust-dim);color:var(--rust);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font:800 15px/1 inherit;text-align:center;
}
.dialwrap .ring small{font:700 7px/1 inherit;letter-spacing:0;text-transform:uppercase;color:var(--dim);max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialwrap .ring:disabled{opacity:.35}
.dialwrap .ring.undo{left:0;top:0}
.dialwrap .ring.end{right:0;top:0;background:#2a1f14;border-color:var(--rust)}
.dialwrap .ring.end small{color:var(--rust)}
.dialwrap .ring.reset{left:0;bottom:0}
.dialwrap .ring.flee{right:0;bottom:0;color:var(--dim);border-color:var(--line)}
.vitals .stances{margin:4px 0 0}
.vitals .stances button{flex:1 1 22%;font-size:9px;padding:4px 0}
.vitals .hint.loot{margin:6px 0 0;font-size:10px;color:#cfe0a0}
/* силуэт для выбора зоны */
.aim .silhouette{position:relative;margin:2px auto 0}
.aim .silhouette.human{width:60px;height:96px}
.aim .silhouette.beast{width:70px;height:40px}
.aim .part{position:absolute;padding:0;border:1px solid #6a5a48;background:#3a332a;cursor:pointer}
.aim .part:hover{background:#c8362a;border-color:#ff8a6a}
.aim .z-head{left:20px;top:0;width:20px;height:20px;border-radius:50%}
.aim .z-body{left:16px;top:22px;width:28px;height:36px;border-radius:4px}
.aim .z-arm-l{left:2px;top:24px;width:12px;height:34px;border-radius:4px}
.aim .z-arm-r{right:2px;top:24px;width:12px;height:34px;border-radius:4px}
.aim .z-leg-l{left:16px;top:60px;width:12px;height:36px;border-radius:3px}
.aim .z-leg-r{left:32px;top:60px;width:12px;height:36px;border-radius:3px}
.aim .z-beast{left:4px;top:8px;width:62px;height:26px;border-radius:14px 18px 14px 18px}
.sheetpanel .points{margin:0 0 4px;font-size:10px;color:#cfe0a0}
.sheetpanel .line .plus{margin-left:6px;width:18px;height:18px;padding:0;border-radius:4px;background:#2a1f14;border:1px solid var(--rust);color:var(--rust);font:800 12px/1 inherit}
.weapon .ammo{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:2px 0 4px;font-size:10px;color:var(--fg)}
.weapon .ammo .reload{padding:4px 8px;border-radius:4px;background:#1c1915;border:1px solid var(--rust-dim);color:var(--rust);font:700 10px/1 inherit}
.weapon .ammo .reload:disabled{opacity:.4}
.bcell .clip{position:absolute;left:2px;bottom:1px;font:800 8px/1 inherit;color:#cfe0a0;text-shadow:0 0 2px #000}
.bcell .clip.dry{color:#ff7d7d}

/* магазин, как в оригинале: окно отделов и комиссионка с рюкзаком */
.loot-win.shopwin{width:min(820px,94%)}
.shopwin .head b{margin-left:auto;margin-right:10px;font-size:12px;color:var(--fg)}
.shopwin .tabs{display:flex;gap:4px;margin-bottom:6px}
.shopwin .tabs button{padding:3px 8px;font-size:10px}
.shopwin .tabs button.on{border-color:var(--rust-dim);color:var(--rust)}
.shopwin .goods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:56vh;overflow-y:auto}
.shopwin .good{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name name" "icon price" "icon stock" "buy buy";gap:2px 8px;background:#14120f;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:11px}
.shopwin .good b{grid-area:name;font-size:12px}
.shopwin .good .icon{grid-area:icon;width:48px;height:48px;object-fit:contain}
.shopwin .good .price{grid-area:price;color:var(--rust);font-style:normal}
.shopwin .good .stock{grid-area:stock;color:var(--dim)}
.shopwin .good .buy{grid-area:buy;display:flex;gap:4px;margin-top:4px}
.shopwin .good .buy button{padding:3px 8px;font-size:10px}
.shopwin .good.none{opacity:.5}
.shopwin .empty{color:var(--dim);font-size:12px;margin:8px}
.shopwin .noicon{display:inline-block;background:#0f0d0a;border:1px dashed var(--line);border-radius:4px}
.shopwin .counter .row{display:grid;grid-template-columns:1fr 64px 48px;gap:6px;padding:3px 6px;font-size:12px;border-radius:4px}
.shopwin .counter .row.head{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.shopwin .counter .row u{text-decoration:none;text-align:right}
.shopwin .counter .row u.low{color:#c98a4a}
.shopwin .counter .row.none{color:var(--dim)}
.shopwin .counter .row:not(.head):hover{background:#221e18}
.shopwin .pane.bag .tabs{margin-bottom:4px}
.shopwin .mass{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
.shopwin .mass u{display:block;height:5px;background:#0f0d0a;border-radius:3px;overflow:hidden}
.shopwin .mass u i{display:block;height:100%;background:#8bc34a}
.shopwin .purse{margin-top:6px;padding:4px 6px;background:#0f0d0a;border-radius:4px}
@media (max-width:900px){.shopwin .goods{grid-template-columns:repeat(2,1fr)}}

/* NPC и задания: разговор как QSELECT, журнал как QUEST оригинала */
.presence .who.npc{cursor:pointer;color:var(--rust)}
.presence .who.npc small{color:var(--dim)}
.presence .who.npc:hover b{text-decoration:underline}
.loot-win.talkwin{width:min(560px,92%)}
.talkwin .speech{display:flex;gap:12px;align-items:flex-start;background:#14120f;border:1px solid var(--line);border-radius:6px;padding:10px}
.talkwin .portrait{width:64px;height:64px;object-fit:cover;border-radius:4px;flex:none;background:#0f0d0a}
.talkwin .speech p{margin:0;font-size:13px;line-height:1.45}
.talkwin .replies{display:flex;flex-direction:column;gap:6px}
.talkwin .reply{text-align:left;padding:6px 10px;font-size:12px}
.talkwin .reply.take{border-color:#6f9a3a;color:#cfe0a0}
.talkwin .reply.refuse{border-color:#8a4a3a;color:#d9a08a}
.loot-win.journalwin{width:min(640px,92%)}
.journalwin .questlist .row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:6px 8px;border-radius:4px;font-size:12px;cursor:pointer}
.journalwin .questlist .row:hover{background:#221e18}
.journalwin .questlist .row small{color:var(--dim)}
.journalwin .questlist .row i{font-style:normal;color:var(--dim);font-size:11px}
.journalwin .questlist .row.active i{color:var(--rust)}
.journalwin .questlist .row.done i{color:#8bc34a}
.journalwin .questcard h4{margin:0 0 6px;font-size:13px}
.journalwin .questcard .desc{margin:0 0 8px;font-size:12px;color:var(--dim);line-height:1.4}
.journalwin .steps{margin:0 0 8px;padding-left:18px;font-size:12px;line-height:1.5}
.journalwin .steps li.done{color:#8bc34a;text-decoration:line-through}
.journalwin .steps li.active{color:var(--fg)}
.journalwin .steps li.available{color:var(--dim)}
.journalwin .reward h5{margin:0 0 4px;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
.journalwin .reward .stack{display:inline-flex;align-items:center;gap:6px;margin:0 10px 6px 0;font-size:12px}
.journalwin .reward .icon{width:24px;height:24px;object-fit:contain}
.journalwin .empty{color:var(--dim);font-size:12px}