/* HUD (WP-H). Подключается из index.html. Все элементы пассивны (pointer-events: none).
   Элементы по id из раздела 5.1 контракта: #money #income #tasks #garden #cross #prompt #progress
   #progressFill #carryBar #toasts #worldLabels. */

.hud { position: fixed; pointer-events: none; }

/* деньги крупно, доход мелко под ними */
#money {
  left: 16px; top: 10px; font-size: 34px; font-weight: 800; line-height: 1.1; color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums;
}
#income {
  left: 18px; top: 50px; font-size: 15px; font-weight: 700; color: #c5e1a5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* задачи: две строки под доходом */
#tasks {
  left: 16px; top: 82px; width: min(300px, 46vw); display: flex; flex-direction: column; gap: 6px;
}
.task {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; background: rgba(18, 22, 28, 0.72);
  color: #fff; font-size: 15px; line-height: 1.3; text-shadow: 0 1px 2px #000;
  animation: taskIn 0.25s ease-out;
}
.task .t-text { flex: 1; min-width: 0; }
.task .t-prog { color: #ffe082; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task .t-ok { display: none; color: #66bb6a; font-weight: 900; font-size: 18px; }
.task.done { background: rgba(27, 60, 34, 0.8); color: #c8e6c9; }
.task.done .t-text { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.8; }
.task.done .t-ok { display: inline-block; animation: checkPop 0.4s ease-out; }
@keyframes taskIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes checkPop {
  0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); }
}

/* сад: правый верх */
#garden {
  right: 16px; top: 14px; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(18, 22, 28, 0.72); border-radius: 10px; padding: 6px 12px;
  font-variant-numeric: tabular-nums;
}

/* прицел по центру */
#cross {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  transition: width 0.12s, height 0.12s, background 0.12s;
}
#cross.on { width: 9px; height: 9px; background: #fff8e1; box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.9); }
#cross.full { background: #ffb74d; animation: crossShake 0.12s linear infinite; }
@keyframes crossShake {
  0% { transform: translate(-53%, -50%); } 50% { transform: translate(-47%, -50%); } 100% { transform: translate(-53%, -50%); }
}

/* подсказка под прицелом */
#prompt {
  left: 50%; top: calc(50% + 22px); transform: translateX(-50%);
  font-size: 18px; white-space: nowrap; color: #fff;
  background: rgba(18, 22, 28, 0.62); border-radius: 8px; padding: 4px 10px;
  text-shadow: 0 1px 3px #000;
}

/* прогресс осмотра */
#progress {
  left: 50%; top: calc(50% + 62px); transform: translateX(-50%);
  width: 160px; height: 8px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; overflow: hidden;
}
#progressFill { height: 100%; width: 0; background: #ffd54f; }

/* полоса ноши: низ по центру. dots — кружки на место, иначе текст */
#carryBar {
  left: 50%; bottom: 16px; transform: translateX(-50%);
  font-size: 16px; white-space: nowrap; color: #fff;
  background: rgba(18, 22, 28, 0.72); border-radius: 12px; padding: 8px 12px;
  text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums;
}
#carryBar.dots { display: flex; gap: 6px; align-items: center; }
#carryBar .slot { position: relative; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; }
#carryBar .slot.empty { border: 2px solid rgba(255, 255, 255, 0.4); }
#carryBar .slot.apple { box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.25); }
#carryBar .slot.held { outline: 2px solid #fff; outline-offset: 2px; }
#carryBar .slot .st {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* тосты: правый верх под садом, стопкой */
#toasts {
  right: 16px; top: 56px; display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; max-width: 60vw;
}
.toast {
  background: rgba(18, 22, 28, 0.85); color: #fff; padding: 8px 12px; border-radius: 8px;
  font-size: 15px; border-left: 4px solid #90a4ae; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: taskIn 0.25s ease-out;
}
.toast.good { border-left-color: #66bb6a; }
.toast.warn { border-left-color: #ffa726; }

/* кнопка полного экрана на оверлеях start и pause (pointer-events включены, в отличие от HUD) */
#pause { flex-direction: column; gap: 12px; }
.fsWrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; }
#pause .fsWrap { background: rgba(18, 22, 28, 0.9); border-radius: 14px; padding: 14px 20px; }
.fsBtn {
  font: 700 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px;
  padding: 6px 14px;
}
.fsBtn:hover { background: rgba(255, 255, 255, 0.22); }
.fsHint { font-size: 13px; color: rgba(255, 255, 255, 0.7); text-align: center; }

/* метки над миром: цена продажи, сок, серия */
.wlabel {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  background: rgba(20, 24, 30, 0.8); color: #fff; padding: 4px 8px; border-radius: 6px;
  font-size: 15px; font-weight: 700; text-shadow: 0 1px 2px #000;
}
.wlabel.good { color: #a5d6a7; }
.wlabel.bad { color: #ef9a9a; }
.wlabel.combo { color: #ffe082; font-size: 17px; }

/* MP (WP-V): командная панель, журнал, баннеры связи, код, цель, стрелки меток, полоса покупки.
   Узлы создаются только в MP (hud.js mpNode), в соло их нет. */
#team {
  left: 16px; top: 200px; display: flex; flex-direction: column; gap: 4px; min-width: 200px;
  background: rgba(18, 22, 28, 0.72); border-radius: 10px; padding: 6px 10px; font-size: 15px;
  text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums;
}
.trow { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.trow.self { font-weight: 800; }
.trow .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.trow .nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trow .cnt { color: #ffe082; }
.trow .ping { min-width: 56px; text-align: right; font-weight: 700; }
.trow .ping-good { color: #66bb6a; }
.trow .ping-mid { color: #ffd54f; }
.trow .ping-bad { color: #ef5350; }
.trow .ping-none { color: #b0bec5; }
.trow.ghost { color: #90a4ae; }
.trow.ghost .ping { color: #90a4ae; }

#goal {
  left: 16px; top: 166px; font-size: 14px; font-weight: 700; color: #ffe082;
  background: rgba(18, 22, 28, 0.72); border-radius: 8px; padding: 3px 9px; white-space: nowrap;
}
#school {
  left: 16px; bottom: 170px; font-size: 13px; color: #c5e1a5; background: rgba(18, 22, 28, 0.6);
  border-radius: 8px; padding: 2px 8px;
}

/* журнал: слева снизу, 5 строк по 6 с (цвет игрока задаётся inline) */
#log {
  left: 16px; bottom: 16px; width: min(380px, 46vw); display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px;
}
.lrow {
  background: rgba(18, 22, 28, 0.72); border-radius: 6px; padding: 3px 8px; font-size: 14px;
  text-shadow: 0 1px 2px #000; animation: taskIn 0.25s ease-out;
}

/* баннер связи: сверху по центру */
#netBanner {
  left: 50%; top: 12px; transform: translateX(-50%); font-size: 16px; font-weight: 700; color: #fff;
  background: rgba(183, 28, 28, 0.9); border-radius: 10px; padding: 6px 14px; white-space: nowrap;
}

/* полоса покупки ≥ 500 ₵ и отсчёт финала: сверху по центру, под баннером */
#buyStrip, #finaleBar {
  left: 50%; top: 56px; transform: translateX(-50%); font-size: 17px; font-weight: 700; color: #fff;
  background: rgba(18, 22, 28, 0.85); border-radius: 10px; padding: 6px 14px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
#finaleBar { color: #ffe082; }

/* код комнаты: справа снизу, кликабельный */
#roomCode {
  right: 16px; bottom: 16px; font-size: 14px; color: #fff; background: rgba(18, 22, 28, 0.72);
  border-radius: 8px; padding: 4px 10px; pointer-events: auto; cursor: pointer; user-select: text;
}

/* панель быстрых фраз: C открывает, 1–6 шлют (кликабельна, в отличие от HUD) */
#phrases {
  left: 50%; top: 62%; transform: translate(-50%, -50%); pointer-events: auto; display: flex; flex-direction: column;
  gap: 4px; background: rgba(18, 22, 28, 0.9); border-radius: 12px; padding: 8px; min-width: 240px;
}
.phrase {
  font-size: 16px; font-weight: 700; color: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
}
.phrase:hover { background: rgba(255, 255, 255, 0.2); }

/* стрелки к меткам за кадром */
#markArrows { left: 0; top: 0; width: 100%; height: 100%; }
.marrow { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.marrow .ar { font-style: normal; font-size: 26px; line-height: 1; text-shadow: 0 0 4px #000; display: inline-block; }
.marrow .at { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }

@media (max-width: 600px) {
  #money { font-size: 26px; }
  #income { font-size: 13px; top: 42px; }
  #tasks { top: 66px; }
  #garden { font-size: 14px; }
  #prompt { font-size: 15px; }
  #carryBar { font-size: 14px; }
  #carryBar.dots .slot { width: 16px; height: 16px; }
}

/* заранее объявленные в index.html MP-узлы пусты в соло: без «пустых плашек» */
#team:empty, #goal:empty, #school:empty, #log:empty, #roomCode:empty, #netBanner:empty, #finaleBar:empty, #markArrows:empty { display: none; }