/* Пульт — альтернативное управление ударом. Показывается классом padctl на
   body; переключатель-пилюля виден всегда. Палитра — от табло (board.css). */

/* Переключатель режима: пилюля в левом нижнем углу, у своего пульта. Нарочно
   не .dial — у нижнего ряда позиции расписаны в board.css поштучно, и чужая
   кнопка в нём наступит на грабли, о которых там же и написано. */
/* Высота пилюли переключателя — по ней колонка пульта оставляет себе место
   сверху и снизу и не наезжает на пилюлю (#ctlbar, max-height). */
:root { --toggle-h: 26px; }

#ctl-toggle {
  position: fixed;
  box-sizing: border-box;
  min-height: var(--toggle-h);
  left: calc(14px + var(--safe-l));
  bottom: calc(14px + var(--safe-b));
  z-index: 21;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(14, 18, 16, 0.85);
  color: var(--chalk-mute, #9b978c);
  font: 500 12px/1 Rubik, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  /* Тише соседних крутилок в покое (у .dial 0.28) и проявляется под курсором:
     кнопка режима не должна перетягивать взгляд с сукна. */
  opacity: 0.4;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
}
#ctl-toggle:hover {
  color: var(--brass, #d4af37);
  border-color: rgba(212, 175, 55, 0.6);
  opacity: 1;
}
/* На телефоне это главная мишень переключения — приглушать её нельзя, и
   палец должен попадать в неё не целясь: 40 px ростом, как значки рядом. */
@media (pointer: coarse) {
  :root { --toggle-h: 40px; }
  #ctl-toggle {
    opacity: 0.85;
    padding: 0 22px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }
}
/* Пока целятся пальцем, этот угол занимает отмена удара (#aim-cancel в
   index.html) — пилюля уступает ей место. */
body.aimtouch #ctl-toggle { visibility: hidden; }

/* Колонка «прицел — сила — удар» у левого края: три равновеликих по ширине
   органа, тянется одна лишь шкала — кнопки остаются размером с прицел, иначе
   по ним не попасть пальцем.

   Спрятанный пульт не `display: none`, а уехавший за левый край: анимировать
   можно только то, что на месте. Клики он там не ловит (pointer-events), а
   от табуляции его прячет visibility с задержкой на время отъезда. */
#ctlbar {
  position: fixed;
  left: calc(14px + var(--safe-l));
  /* По середине безопасной зоны, а не экрана: снизу у телефона полоска
     «домой», и колонка по центру экрана упиралась в пилюлю под собой. */
  top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2);
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Размер органов (прицел, удар, ширина шкалы) и поле вокруг них — одной
     парой переменных: из неё же скругление панели. Оно концентрично
     кружкам: радиус угла — полкружка, поле и рамка, поэтому торцы панели —
     полукруги вокруг прицела и кнопки удара, на любом размере. Поле
     одинаковое со всех сторон — иначе концентричности не выйдет. */
  --organ: 96px;
  --pad: 12px;
  gap: 14px;
  padding: var(--pad);
  box-sizing: border-box;
  /* Колонка стоит посередине и не выше, чем оставляет место пилюле
     переключателя под собой (14 px от края, её высота и 8 px зазора) — и
     столько же сверху, чтобы остаться посередине. Раньше запас был числом,
     без высоты пилюли, и на телефоне, где она выросла до 40 px, колонка на
     неё наезжала. */
  max-height: calc(100vh - 2 * (22px + var(--toggle-h)));
  max-height: calc(100cqh - 2 * (22px + var(--toggle-h)) - var(--safe-t) - var(--safe-b));
  border-radius: calc(var(--organ) / 2 + var(--pad) + 1px);
  background: rgba(14, 18, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transform: translate(calc(-100% - 20px - var(--safe-l)), -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 0.24s ease,
    visibility 0s linear 0.34s;
}

body.padctl #ctlbar {
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.34s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 0.18s ease,
    visibility 0s;
}

/* Кому анимация мешает — тому просто появление. */
@media (prefers-reduced-motion: reduce) {
  #ctlbar, body.padctl #ctlbar { transition: opacity 0.12s ease, visibility 0s; }
}

/* Прицел-винт — ростом с кнопку удара (размер — --organ у #ctlbar). */
#ctlbar #tip { width: var(--organ); height: var(--organ); }

/* Кнопка удара — круглая, ростом с прицел: на мобильном жмётся пальцем. */
#ctl-fire {
  width: var(--organ);
  height: var(--organ);
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.8);
  font: 600 15px/1 Rubik, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a12;
  background: linear-gradient(160deg, #e8c964, var(--brass, #d4af37));
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
#ctl-fire:hover { background: linear-gradient(160deg, #f2d878, #dcbc45); }
#ctl-fire:disabled {
  opacity: 0.35;
  cursor: default;
  filter: saturate(0.4);
}

/* Шкала силы — тонкая дорожка посередине органа, сила растёт снизу вверх.
   Сам орган остаётся шириной с прицел и удар — это мишень под палец, а
   видимая дорожка тонкая: шкала, а не столб. Тянется по высоте одна она,
   забирая остаток колонки.

   Дорожка начинается и кончается в центре ручки на краях хода (отступ —
   полручки, --knob): на нижнем краю заливки нет, на верхнем — она во всю
   дорожку, и её граница всегда под серединой ручки. Сколько залить,
   считает railFill() в controlbar.ts. */
#ctl-power {
  --knob: 76px;
  --rail: 12px;
  position: relative;
  flex: 1 1 220px;
  min-height: 110px;
  max-height: 320px;
  width: var(--organ);
  cursor: pointer;
  touch-action: none;
}
#ctl-power::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--knob) / 2);
  bottom: calc(var(--knob) / 2);
  width: var(--rail);
  margin-left: calc(var(--rail) / -2);
  box-sizing: border-box;
  border-radius: calc(var(--rail) / 2);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
#ctl-power .fill {
  position: absolute;
  left: 50%;
  bottom: calc(var(--knob) / 2);
  width: var(--rail);
  margin-left: calc(var(--rail) / -2);
  height: 0;
  border-radius: calc(var(--rail) / 2);
  background: linear-gradient(0deg, #4f8f57, #b9a13a 58%, #c96b45);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* Ручка — стеклянная линза поверх дорожки: сквозь неё видно заливку, чуть
   размытую и насыщенную (backdrop-filter), по кромке блик сверху и тень
   снизу — так стекло читается объёмным, а не плоским кругом. Латунный отлив
   каймы — от остального пульта. Ход ручки короче дорожки на её размер, а
   позицию считает knobAt() — там же, где сила читается обратно из нажатия. */
#ctl-power .knob {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--knob);
  height: var(--knob);
  margin-left: calc(var(--knob) / -2);
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.12) 36%,
    rgba(255, 255, 255, 0.04) 62%,
    rgba(255, 255, 255, 0.14) 100%
  );
  -webkit-backdrop-filter: blur(5px) saturate(1.8);
  backdrop-filter: blur(5px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -3px 8px rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(212, 175, 55, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* Насечка на ручке — видно, что её тянут; поперёк хода, то есть лёжа. */
#ctl-power .knob::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 2px;
  margin: -1px 0 0 -18%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}

/* Низкий экран: три органа остаются равными между собой, но мельчают все
   разом — иначе шкале остаётся ход короче собственной ручки, и силу не
   выставить. Колонка меряется по высоте, потому и порог по высоте. */
/* Размер виджета винта — через #ctlbar, а не через body.padctl: класс
   снимается в момент, когда пульт только начинает уезжать, и на все 0.34 с
   отъезда виджет вырастал обратно до 96 px — пульт мелькал «большим». */
@container screen (max-height: 620px) or (max-width: 460px) {
  #ctlbar { gap: 10px; --organ: 76px; --pad: 10px; left: calc(10px + var(--safe-l)); }
  #ctl-power { min-height: 90px; --knob: 56px; }
  #ctl-fire { font-size: 13px; }
}

/* Десктоп: мышь попадает и в мелкое, а колонка шириной 122 px отъедала у
   стола лишнее — здесь она в полтора раза уже (82 px). Правило стоит после
   «низкого экрана», чтобы тот не раздувал её обратно, и до телефонных —
   там колонка ещё уже. Шрифт и точка винта мельчают вслед за органами. */
@media (pointer: fine) {
  #ctlbar { gap: 10px; --organ: 64px; --pad: 8px; }
  #ctl-power { min-height: 90px; --knob: 50px; --rail: 8px; }
  #tip .dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  #ctl-fire { font-size: 12px; letter-spacing: 0.05em; }
}

/* Телефон стоймя. Пульт на нём — главный способ бить, но колонка из
   органов по 76 px съедала пятую часть ширины экрана. Палец попадает и в
   60: это всё ещё крупнее системных кнопок. */
@media (pointer: coarse) {
  @container screen (max-width: 460px) {
    #ctlbar { gap: 8px; --organ: 60px; --pad: 8px; }
    #ctl-power { min-height: 80px; --knob: 44px; --rail: 10px; }
    #tip .dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
    #ctl-fire { font-size: 12px; letter-spacing: 0.05em; }
  }
}

/* Телефон боком. Табло здесь уходит вправо вслед за столом (board.css), так
   что колонке ничто не мешает сверху — остаётся место под логотип и снизу
   под пилюлю переключателя. Колонка узкая — стол дороже: органы по 50 px,
   это нижний край того, во что уверенно попадает палец. */
@container screen (max-height: 500px) {
  #ctlbar { gap: 6px; --organ: 50px; --pad: 6px; }
  #ctl-power { min-height: 60px; --knob: 38px; --rail: 9px; }
  #tip .dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
  #ctl-fire { font-size: 11px; letter-spacing: 0.04em; }
}
/* Совсем низко (боком с панелью браузера) — шкале нужен ход, и органы
   отдают ей ещё немного. */
@container screen (max-height: 360px) {
  #ctlbar { --organ: 46px; }
  #ctl-power { --knob: 34px; }
}

/* В пульте прицельный жест не действует — подсказку про Esc не показываем. */
body.padctl #hint { display: none !important; }

/* В лобби пульту делать нечего. Прячем его тем же отъездом, а не display:
   колонка должна сохранять размеры, иначе ручке шкалы нечего мерить и она
   встаёт по константе, а не по нынешнему размеру. Правило идёт последним:
   вес у него тот же, что у padctl, и решает порядок. */
body.lobby #ctl-toggle { display: none; }
body.lobby #ctlbar {
  transform: translate(calc(-100% - 20px - var(--safe-l)), -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- выбор бьющего шара (свободная пирамида) -------------------------------- */

/* Пилюля внизу по центру, над лентой поворота стола: слева живёт пульт со
   своей колонкой, и рядом с его переключателем кнопка мешала бы ему. На ней
   — миниатюра выбранного шара: каким бьёшь, видно не глядя на стол. */
#pick-toggle {
  position: fixed;
  left: 50%;
  bottom: calc(44px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toggle-h);
  padding: 4px 16px 4px 5px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: rgba(14, 18, 16, 0.88);
  color: var(--chalk, #e8e4d8);
  font: 500 12px/1 Rubik, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#pick-toggle[hidden] { display: none; }
#pick-toggle .chip { --chip: 20px; }
#pick-toggle:hover { border-color: rgba(212, 175, 55, 0.75); }
/* Режим выбора: кнопка горит латунью — «теперь нажми на шар». */
#pick-toggle.on {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--brass, #d4af37);
  color: var(--brass, #d4af37);
}
body.picking canvas { cursor: pointer; }
@media (pointer: coarse) {
  #pick-toggle { padding: 4px 20px 4px 6px; font-size: 13px; }
  #pick-toggle .chip { --chip: 28px; }
}
body.aimtouch #pick-toggle { visibility: hidden; }
/* Узкий экран: внизу тесно — справа ряд значков, слева пульт, в портрете
   ещё и «поверни телефон». Под табло сверху пусто — туда, под строку хода. */
@container screen (max-width: 600px) {
  #pick-toggle {
    top: calc(var(--safe-t) + 84px);
    bottom: auto;
  }
}