/* Сенсорное управление (ui/touch-controls.js): всё ниже работает, только пока у <html> есть класс touch.
   Раскладка под альбомный телефон: слева стик (появляется под пальцем), справа удар и кольцо кнопок, навыки — дугой
   вокруг, быстрые предметы — внизу посередине, кнопки окон — сверху посередине. Отступы учитывают вырезы экрана. */

.touch-ui { display: none; }
/* геймпад (core/gamepad.js): рамка на том, что выбрано крестовиной */
html[data-input="pad"] :is(button, a, input, select, summary, [tabindex]):focus { outline: 2px solid #ffd98a; outline-offset: 2px; }
html.touch { --t-l: max(12px, env(safe-area-inset-left)); --t-r: max(12px, env(safe-area-inset-right)); --t-b: max(10px, env(safe-area-inset-bottom)); --t-t: max(10px, env(safe-area-inset-top)); }
html.touch, html.touch body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
/* Safari не слушает user-scalable=no: двойное касание по окнам иначе увеличивало бы страницу */
html.touch body { touch-action: manipulation; }
html.touch .touch-ui { display: block; position: absolute; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-ui.paused > * { display: none !important; }
.touch-layer { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }

/* стик: база под пальцем, ручка ходит внутри кольца; за кольцом — бег */
.touch-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.touch-stick.hidden { display: none; }
.touch-stick::before { content: ''; position: absolute; left: -62px; top: -62px; width: 124px; height: 124px; border-radius: 50%; border: 2px solid #e3c27a70; background: radial-gradient(#0c1d2033, #0c1d20a6); box-shadow: 0 4px 18px #0006; }
.touch-stick.sprint::before { border-color: #ffb63d; box-shadow: 0 0 0 4px #ffb63d33, 0 4px 18px #0006; }
.touch-knob { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f3dca0, #c79f52); box-shadow: 0 3px 10px #000a; }

/* кнопки боя */
.t-btn, .t-mini, .t-use { pointer-events: auto; touch-action: none; position: absolute; display: grid; place-items: center; padding: 0; color: #f2e6c4;
  border: 1px solid #e3c27a8a; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2a4743e6, #0e2224f0); box-shadow: 0 4px 14px #0008; }
.t-btn .game-icon, .t-mini .game-icon { width: 54%; height: 54%; }
.t-btn.on, .t-mini.on, .t-use.on { transform: scale(.92); background: radial-gradient(circle at 50% 30%, #4d6f5ff2, #183634f5); border-color: #ffd98a; }
.t-attack { right: calc(var(--t-r) + 6px); bottom: calc(var(--t-b) + 6px); width: 80px; height: 80px; border-width: 2px; border-color: #e3c27acc; }
.t-attack .game-icon { width: 46%; height: 46%; }
.t-dash { right: calc(var(--t-r) + 100px); bottom: calc(var(--t-b) + 4px); width: 56px; height: 56px; }
.t-jump { right: calc(var(--t-r) + 12px); bottom: calc(var(--t-b) + 98px); width: 56px; height: 56px; }
.t-block { right: calc(var(--t-r) + 82px); bottom: calc(var(--t-b) + 78px); width: 58px; height: 58px; }
.touch-ui.building .touch-pad { display: none; }

/* «действие»: подпись того, что рядом; поклёвка — пульсирует */
.t-use { left: 50%; bottom: calc(var(--t-b) + 62px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(46vw, 360px); min-height: 46px; padding: 6px 16px 6px 8px;
  border-radius: 24px; font: 600 14px/1.2 var(--font, sans-serif); text-align: left; }
.t-use.on { transform: translateX(-50%) scale(.95); }
.t-use.hidden { display: none; }
.t-use-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #e3c27a; color: #102023; }
.t-use-ico .game-icon { width: 22px; height: 22px; }
.t-use-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t-use.urgent { border-color: #ffb63d; animation: t-pulse .5s ease-in-out infinite alternate; }
@keyframes t-pulse { to { box-shadow: 0 0 0 6px #ffb63d55, 0 4px 14px #0008; } }

/* маленькие кнопки: захват цели, красться, стройка, во весь экран — справа под часами */
.touch-side { position: absolute; top: calc(var(--t-t) + 104px); right: var(--t-r); display: flex; gap: 6px; }
.t-mini { position: relative; width: 38px; height: 38px; }
.t-mini.hidden { display: none; }
.t-mini.active { background: radial-gradient(circle at 50% 30%, #c79f52, #6a4d22); color: #102023; border-color: #ffd98a; }

/* схема кнопок при первой игре пальцами (одно касание — и больше не показывается) */
.touch-coach { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 12px; pointer-events: auto; touch-action: none; background: #081a1dc8; }
.touch-coach.hidden { display: none; }
.tc-card { max-width: min(540px, 92vw); max-height: 100%; overflow: hidden; padding: 14px 18px; border: 1px solid #e3c27a99; border-left: 3px solid #e3c27a; border-radius: 8px;
  background: #102324f2; color: #d9dcc7; font: 13px/1.45 var(--font, sans-serif); box-shadow: 0 12px 40px #0008; }
.tc-card h3 { margin: 0 0 8px; font: 400 19px/1.2 var(--font-title, serif); color: #ffd98a; }
.tc-card p { margin: 0 0 6px; }
.tc-card b { color: #f2e6c4; font-weight: 600; }
.tc-card small { display: block; margin-top: 10px; color: #ffd98a; font-size: 13px; text-align: center; }
@media (max-height: 380px) { .tc-card { padding: 10px 14px; font-size: 12px; line-height: 1.35; } .tc-card h3 { font-size: 16px; margin-bottom: 5px; } .tc-card p { margin-bottom: 4px; } }

/* поверни экран: в книжной ориентации кнопки закрыли бы героя */
.touch-rotate { display: none; }
@media (orientation: portrait) {
  html.touch .touch-rotate { display: flex; position: fixed; inset: 0; z-index: 60; pointer-events: auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
    background: #081a1df2; color: #f2e6c4; text-align: center; font: 15px/1.4 var(--font, sans-serif); }
  html.touch .touch-rotate::before { content: '⟳'; font-size: 56px; color: #e3c27a; }
  html.touch .touch-rotate b { font-size: 19px; font-weight: 600; }
  html.touch .touch-rotate span { color: #c9cdb4; }
}

/* ── HUD под пальцы ───────────────────────────────────────────────────────── */
html.touch .cam-hint, html.touch #prompt, html.touch .fish-hint, html.touch .crosshair { display: none !important; }
/* панель навыков и предметов растаскивается: навыки — дугой вокруг удара, предметы — внизу посередине */
/* transform у панели сделал бы её точкой отсчёта для position: fixed — снимаем */
html.touch .hotbar { position: static; transform: none; padding: 0; border: 0; background: none; box-shadow: none; }
html.touch .hotbar::before, html.touch .hotbar::after, html.touch .hotbar-gap, html.touch .hotbar .key { display: none; }
html.touch .hotbar .slot { position: fixed; width: 50px; height: 50px; border-radius: 50%; pointer-events: auto; touch-action: manipulation; }
html.touch .hotbar .slot:nth-child(1) { right: calc(var(--t-r) + 176px); bottom: calc(var(--t-b) + 8px); }
html.touch .hotbar .slot:nth-child(2) { right: calc(var(--t-r) + 166px); bottom: calc(var(--t-b) + 76px); }
html.touch .hotbar .slot:nth-child(3) { right: calc(var(--t-r) + 128px); bottom: calc(var(--t-b) + 140px); }
html.touch .hotbar .slot:nth-child(4) { right: calc(var(--t-r) + 62px); bottom: calc(var(--t-b) + 166px); }
html.touch .hotbar .slot:nth-child(n+6) { width: 44px; height: 44px; border-radius: 10px; bottom: var(--t-b); }
html.touch .hotbar .slot:nth-child(6) { left: calc(50% - 97px); }
html.touch .hotbar .slot:nth-child(7) { left: calc(50% - 47px); }
html.touch .hotbar .slot:nth-child(8) { left: calc(50% + 3px); }
html.touch .hotbar .slot:nth-child(9) { left: calc(50% + 53px); }
html.touch .touch-ui.building ~ .hotbar .slot:nth-child(-n+4) { display: none; }

/* кнопки окон — сверху посередине, без подписей клавиш */
html.touch .hud-menu { left: 50%; right: auto; top: var(--t-t); bottom: auto; transform: translateX(-50%); gap: 5px; }
html.touch .hud-menu-btn { width: 38px; height: 38px; }
html.touch .hud-menu-btn kbd { display: none; }
html.touch .toasts { top: calc(var(--t-t) + 50px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(380px, 48vw); align-items: center; }
html.touch .save-status { top: calc(var(--t-t) + 50px); bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
/* миникарта и путешествие — правой колонкой под маленькими кнопками */
html.touch #radar { right: var(--t-r); top: calc(var(--t-t) + 152px); bottom: auto; width: 112px; height: 112px; }
html.touch #radar canvas { width: 108px; height: 108px; }
html.touch .quest-tracker { right: var(--t-r); top: calc(var(--t-t) + 274px); }

/* широкий экран (планшет): компас цели — под кнопками окон, уведомления — под компасом */
@media (min-width: 1001px) {
  html.touch .objective-compass { top: calc(var(--t-t) + 54px); }
  html.touch .toasts { top: calc(var(--t-t) + 112px); }
}
/* телефон боком: высоты мало — миникарту и путешествие прячем (цель видна на компасе, всё остальное — в дневнике) */
@media (max-height: 560px) {
  html.touch #radar, html.touch .quest-tracker { display: none !important; }
  /* совет — коротко, под компасом: на телефоне это единственное место, где видны подсказки первых шагов */
  html.touch .journey-hint:not(.hidden) { display: block !important; top: calc(var(--t-t) + 168px); left: var(--t-l); width: min(240px, 34vw); padding: 7px 9px; }
  html.touch .journey-hint small { display: none; }
  html.touch .journey-hint strong { font-size: 12px; }
  html.touch .journey-hint p { margin: 3px 0 0; font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  html.touch .hud-left { top: var(--t-t); left: var(--t-l); transform: scale(.86); transform-origin: top left; }
  html.touch .hud-right { top: var(--t-t); right: var(--t-r); transform: scale(.86); transform-origin: top right; }
  html.touch .touch-side { top: calc(var(--t-t) + 88px); }
  html.touch .objective-compass { top: calc(var(--t-t) + 92px); left: var(--t-l); max-width: 34vw; }
}
/* совсем низкий экран: кольцо кнопок плотнее */
@media (max-height: 380px) {
  html.touch .t-attack { width: 70px; height: 70px; }
  html.touch .t-dash, html.touch .t-jump, html.touch .t-block { width: 50px; height: 50px; }
  html.touch .t-dash { right: calc(var(--t-r) + 88px); }
  html.touch .t-jump { bottom: calc(var(--t-b) + 86px); }
  html.touch .t-block { right: calc(var(--t-r) + 72px); bottom: calc(var(--t-b) + 68px); }
  html.touch .hotbar .slot:nth-child(-n+4) { width: 44px; height: 44px; }
  html.touch .hotbar .slot:nth-child(1) { right: calc(var(--t-r) + 152px); }
  html.touch .hotbar .slot:nth-child(2) { right: calc(var(--t-r) + 144px); bottom: calc(var(--t-b) + 64px); }
  html.touch .hotbar .slot:nth-child(3) { right: calc(var(--t-r) + 110px); bottom: calc(var(--t-b) + 118px); }
  html.touch .hotbar .slot:nth-child(4) { right: calc(var(--t-r) + 54px); bottom: calc(var(--t-b) + 140px); }
}