/* Раскладка интерфейса: mobile first. Каждый слой живёт в своей зоне экрана (js/core/layout.js меряет высоты):
     верх  — канал (слева) и кнопки (справа);
     низ   — цель, кнопка действия, чат;
     док   — над низом: выделенный игрок, панель кино (в столбик);
     чат   — лог над доком, касания проходят сквозь него в мир; открытый чат — шторкой сверху;
     тосты — под верхней полосой, не больше двух.
   Десктоп (широкий экран + мышь) — отдельный блок в конце. Подключается последним. */

:root{
  --gap:8px;
  --sa-t:env(safe-area-inset-top,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --top-h:52px; --bot-h:52px; --dock-h:0px;
  --low:calc(var(--safe-b) + var(--gap) + var(--bot-h) + 6px + var(--dock-h));   /* где кончаются низ и док */
}

/* ---------- касания: без задержек, лупы и выделения текста ---------- */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
button,a,label,select,summary,[role=button],.slot,.d-opt,.app,.shop-tab,.pbtn,.hbtn{touch-action:manipulation}

/* ---------- верх ---------- */
/* колонка слева сверху: канал, под ним — цель */
.hud-tlc{position:absolute;top:calc(var(--sa-t) + var(--gap));left:calc(var(--sa-l) + var(--gap));width:min(300px,calc(100vw - 132px - var(--sa-l) - var(--sa-r)));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hud-tlc>*{pointer-events:auto}
.hud-tl{position:relative}
.hud-tl .pi{padding:7px 10px 7px 7px}
.h-chan{font-size:8px}
.h-stats{gap:4px 10px;margin-top:6px;font-size:9px}
.h-xp{margin-top:6px;height:5px}
.ic-coin,.ic-subs{width:12px;height:12px}
.h-stats .h-clock{display:none}                 /* время — в телефоне */
.hud-tr{top:calc(var(--sa-t) + var(--gap));right:calc(var(--sa-r) + var(--gap));gap:6px}
.hud-tr .hbtn{width:44px;height:44px;padding:0}
.hud-tr .hbtn kbd,#btn-sound{display:none}     /* звук — в настройках телефона */
.net-chip{min-width:56px;height:44px;padding:0 10px;justify-content:center;gap:6px;border:0;font-family:var(--px);font-size:11px;cursor:pointer}
.net-chip span{display:none}
.net-chip b{font-weight:400}

/* ---------- низ: цель · действие · чат ---------- */
.hud-bot{position:absolute;left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));bottom:calc(var(--safe-b) + var(--gap));display:flex;align-items:stretch;gap:6px;min-height:52px;pointer-events:none}
.hud-bot>*{pointer-events:auto}
.hud-quest{gap:0;padding:0;font-size:12.5px;line-height:1.35}
.q-head{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:6px 10px;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.q-head .q-k{flex:none}
.q-line{flex:1;min-width:0;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.q-arr{flex:none;margin-left:auto;width:10px;height:6px;background:var(--hl);clip-path:polygon(0 100%,50% 0,100% 100%)}
.q-body{padding:0 10px 9px}
.q-all{display:block;margin-top:6px;padding:0;border:0;background:none;font-family:var(--px);font-size:8px;color:var(--hl);cursor:pointer}
.hud-quest.closed .q-body{display:none}
.hud-quest.closed .q-line{display:block}
.hud-quest.closed .q-arr{transform:rotate(180deg)}
.hud-quest.new{animation:qNew 1.2s steps(2) 3}
@keyframes qNew{50%{box-shadow:inset 0 0 0 2px var(--frame),inset 0 0 0 4px var(--hl)}}
body.m-edit .hud-quest{display:none}
.act-btn{flex:0 1 auto;margin-left:auto;max-width:46vw;min-height:52px;padding:0 14px;border:0;font-family:var(--px);font-size:9px;line-height:1.35;color:#1a1300;background:var(--yellow);box-shadow:inset 0 -4px 0 var(--yellow-d),0 0 0 2px #5a2a0c;cursor:pointer;text-align:center;animation:actIn .18s ease-out}
.act-btn:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 var(--yellow-d),0 0 0 2px #5a2a0c}
.act-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes actIn{from{transform:scale(.9);opacity:0}}
.chat-btn{flex:none;position:relative}

/* ---------- док ---------- */
.hud-dock{position:absolute;left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));bottom:calc(var(--safe-b) + var(--gap) + var(--bot-h) + 6px);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hud-dock>*{pointer-events:auto}
.hud-dock:empty{display:none}
.tgt,.cine-bar:not(.big){position:static;width:auto;transform:none}
/* выделенный игрок: компактно, одна строка + кнопки */
.tgt .pi{grid-template-columns:auto 1fr auto;gap:2px 10px;padding:7px 8px}
.tgt-pt{width:36px;height:36px}
.tgt-name{font-size:9px}
.tgt-sub,.tgt-st{font-size:11.5px}
.tgt-x{width:34px;height:34px}
.tgt-acts .pbtn{min-height:34px;font-size:8.5px;padding:0 9px}
.cb-vol{display:none}                          /* громкость на телефоне — кнопками устройства */

/* ---------- подсказка управления ---------- */
.hud-hint{left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));bottom:calc(var(--low) + 4px);transform:none;justify-content:center;white-space:normal;text-align:center;font-size:8px}
body.m-dock .hud-hint{display:none}

/* ---------- чат ---------- */
.chat{left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));width:auto;max-width:440px;bottom:calc(var(--low) + var(--hint-h,0px) + 2px)}
.chat-log{max-height:76px}
.chat-line{font-size:12.5px}
.chat.open{top:calc(var(--sa-t) + var(--gap));bottom:auto;max-width:none}
.chat.open .chat-log{max-height:min(38vh,260px)}

/* ---------- тосты, объявления, приглашения: под верхней полосой ---------- */
.toasts{top:calc(var(--sa-t) + var(--gap) * 2 + var(--top-h));left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));transform:none;align-items:stretch}
.toast{max-width:none;padding:6px 10px 6px 7px}
.toast .t-ic{width:24px;height:24px;font-size:10px}
.toast b{font-size:9px}
.toast small{font-size:12px}
.announce{top:calc(var(--sa-t) + var(--gap) * 2 + var(--top-h));left:var(--gap);right:var(--gap);transform:none;max-width:none;font-size:14px}
.invites{width:auto}                           /* приглашения — карточки в доке */

/* ---------- подсказка «E» над предметом — только на десктопе; на телефоне её роль у кнопки действия ---------- */
.prompt{display:none}

/* ---------- режимы: убираем то, что мешает ---------- */
/* диалог и планировщик квартиры занимают низ экрана */
body.m-dialog .hud-bot,body.m-dialog .hud-dock,body.m-dialog .hud-hint,body.m-dialog .chat:not(.open),
body.m-edit .hud-bot,body.m-edit .hud-dock,body.m-edit .hud-hint,body.m-edit .chat:not(.open){visibility:hidden}
body.m-chat .hud-hint,body.m-chat .toasts{visibility:hidden}

/* ---------- телефон боком: экран низкий, всё компактнее ---------- */
@media (max-height:500px) and (orientation:landscape){
  :root{--gap:6px}
  .hud-bot{min-height:44px}
  .act-btn,.chat-btn{min-height:44px;height:44px}
  .chat-btn{width:44px}
  .hud-quest{font-size:11.5px}
  .q-head{min-height:30px;padding:4px 9px}
  .h-xp{display:none}
  .chat-log{max-height:40px}
  .hud-hint{display:none}
  .chat{max-width:46vw}
  .toast:nth-last-child(n+2){display:none}
  /* док — колонкой справа, мир остаётся в середине; чат и тосты — слева */
  .hud-dock{left:auto;right:calc(var(--sa-r) + var(--gap));top:calc(var(--sa-t) + var(--gap) * 2 + var(--top-h));bottom:calc(var(--safe-b) + var(--gap) + var(--bot-h) + 6px);width:min(340px,44vw);justify-content:flex-end}
  .chat{bottom:calc(var(--safe-b) + var(--gap) + var(--bot-h) + 6px)}
  .toasts{right:auto;width:min(360px,46vw)}
  .tgt-st{display:none}
}

/* ---------- десктоп: большой экран и мышь ---------- */
@media (min-width:1100px) and (pointer:fine){
  :root{--gap:12px}
  .hud-tlc{width:330px}
  .hud-tl .pi{padding:10px 12px 10px 10px}
  .h-chan{font-size:10px}
  .h-stats{font-size:11px;margin-top:9px;gap:5px 16px}
  .h-xp{margin-top:8px;height:6px}
  .ic-coin,.ic-subs{width:16px;height:16px}
  .h-stats .h-clock{display:inline-flex}
  .hud-tr .hbtn{width:auto;height:40px;padding:0 10px}
  .hud-tr .hbtn kbd,#btn-sound{display:inline-flex}
  .cb-vol{display:block}
  .net-chip{min-width:0;height:40px;padding:0 10px;font-size:9px}
  .net-chip span{display:inline}
  .net-chip span::after{content:" ·"}
  /* кнопки действия нет (подсказка «E» над предметом), чат — справа внизу */
  .hud-quest{font-size:13px}
  .act-btn{display:none!important}
  .hud-bot{left:auto;min-height:0}
  .prompt{display:flex}
  /* док — по центру сверху, между каналом и кнопками */
  .hud-dock{left:50%;right:auto;bottom:auto;top:calc(var(--sa-t) + var(--gap));transform:translateX(-50%);width:min(520px,calc(100vw - 2 * (330px + 3 * var(--gap))))}
  .hud-hint{left:50%;right:auto;bottom:calc(var(--safe-b) + 14px);transform:translateX(-50%);white-space:nowrap;font-size:9px}
  body.m-dock .hud-hint{display:flex}
  .chat{left:var(--gap);right:auto;width:min(440px,calc(100vw - 2 * var(--gap)));bottom:calc(var(--safe-b) + 64px)}
  .chat-log{max-height:190px}
  .chat-line{font-size:13.5px}
  .chat.open{top:auto;bottom:calc(var(--safe-b) + 64px);max-width:440px}
  .chat.open .chat-log{max-height:190px}
  /* тосты — по центру сверху, под доком */
  .toasts{left:50%;right:auto;transform:translateX(-50%);top:calc(var(--sa-t) + var(--gap) + var(--dock-h) + 4px);align-items:center;width:min(520px,calc(100vw - 2 * (330px + 3 * var(--gap))))}
  .toast{max-width:min(520px,100%);padding:9px 14px 9px 10px}
  .toast .t-ic{width:28px;height:28px;font-size:12px}
  .toast b{font-size:10px}
  .toast small{font-size:12.5px}
  .announce{left:50%;right:auto;transform:translateX(-50%);max-width:min(640px,calc(100vw - 24px));top:calc(var(--sa-t) + 64px);font-size:15px}
  body.m-chat .toasts{visibility:visible}
}

/* мини-игра на весь экран: тосты и приглашения не лезут поверх кадра */
body.m-mg .toasts,body.m-mg .invites,body.m-mg .announce{visibility:hidden}
.invites .pi{padding:9px 10px}
.invites .w-row{margin-top:8px;flex-wrap:nowrap}
.invites .w-row .pbtn{flex:1 1 0;min-height:38px}

/* ---------- фон вокруг помещений: тёмная кладка под холстом (js/core/world.js) ---------- */
body{background:transparent}                   /* фон — у html, иначе фон body закроет кладку */
#bgtex{position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:#120b10;image-rendering:pixelated;background-repeat:no-repeat,repeat}

/* ---------- безопасные зоны: вырез экрана и кнопки Telegram в полноэкранном режиме (--sa-*, js/core/tg.js) ---------- */
.title{padding-top:calc(20px + var(--sa-t));padding-left:calc(20px + var(--sa-l));padding-right:calc(20px + var(--sa-r))}
.mg-top{height:calc(44px + var(--sa-t));padding-top:var(--sa-t);padding-left:calc(10px + var(--sa-l));padding-right:calc(10px + var(--sa-r))}
.win{max-height:calc(100dvh - var(--sa-t) - 32px)}
.cm-skip{top:calc(12px + var(--sa-t))}
html.cm-on .cm-top{height:calc(12vh + var(--sa-t))}
@media (max-width:720px){
  .phone-wrap{padding:var(--sa-t) var(--sa-r) 0 var(--sa-l)}
  .phone{height:calc(100dvh - var(--sa-t))}
  .win{max-height:calc(100dvh - var(--sa-t) - 8px)}
}
.ph-zoom span{display:flex;flex-direction:column}
.ph-zoom em{font-style:normal;font-size:12px;color:var(--muted)}

/* ---------- статус онлайна и таблица игроков (js/net/plist.js) ---------- */
.net-chip:hover{background:#fbe6c0}
.pl-back{position:fixed;inset:0;z-index:26}
.plist{position:fixed;z-index:27;top:calc(var(--sa-t) + var(--gap) * 2 + var(--top-h));left:calc(var(--sa-l) + var(--gap));right:calc(var(--sa-r) + var(--gap));max-width:560px;margin:0 auto;animation:actIn .15s ease-out}
.plist .pi{display:flex;flex-direction:column;max-height:min(64vh,calc(100dvh - var(--sa-t) - var(--top-h) - var(--safe-b) - 48px));padding:10px}
.pl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 8px;border-bottom:2px solid var(--edge)}
.pl-title{font-family:var(--px);font-size:11px;font-weight:400}
.pl-n{font-family:var(--px);font-size:9px;color:var(--hl)}
.pl-rows{display:flex;flex-direction:column;gap:3px;margin-top:8px;overflow-y:auto;overscroll-behavior:contain}
.pl-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;padding:5px 8px;border:0;text-align:left;color:var(--text);background:var(--panel-2);box-shadow:inset 0 0 0 2px transparent;cursor:default}
.pl-row.here{cursor:pointer}
.pl-row.here:hover{box-shadow:inset 0 0 0 2px var(--hl)}
.pl-row.me{background:#fff3d6;box-shadow:inset 0 0 0 2px var(--hl)}
.pl-row canvas{grid-row:1/3;width:28px;height:28px;image-rendering:pixelated;background:#e9c48c}
.pl-nick{font-family:var(--px);font-size:9px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-nick em{font-family:var(--body);font-style:normal;font-size:11px;color:var(--hl)}
.pl-nick em.fr{color:var(--good)}
.pl-lvl{grid-column:3;grid-row:1/3;font-family:var(--px);font-size:9px;color:var(--muted)}
.pl-where{grid-column:2;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-row.here .pl-where{color:var(--good)}
.pl-foot{margin-top:8px;padding:0 4px;font-size:12px;color:var(--muted)}