/**
 * Режим Telegram-мини-аппа (?mode=miniapp) — см. js/miniapp.js и
 * pair_bot/MINIAPP_DESIGN.md. Прячет обычный сайт, показывает частицу
 * на весь экран + панель статов поверх. Тема — через --miniapp-*
 * переменные, которые miniapp.js подставляет из Telegram.WebApp.themeParams;
 * без Telegram (просто открыли в браузере) — тёмный дефолт ниже.
 */

:root {
  --miniapp-bg: #0e0e12;
  --miniapp-text: #ffffff;
  --miniapp-hint: #9a9a9a;
  --miniapp-accent: #4ac8f0;
}

body.miniapp-mode {
  background: var(--miniapp-bg);
  overflow: hidden;
}

body.miniapp-mode .app-header,
body.miniapp-mode .app-footer,
body.miniapp-mode .details-column,
body.miniapp-mode .waitlist-container,
body.miniapp-mode .waitlist-container-mobile,
body.miniapp-mode #controls-container,
body.miniapp-mode #particles-panel,
body.miniapp-mode .particles-panel {
  display: none !important;
}

body.miniapp-mode .app-container,
body.miniapp-mode .profile-content,
body.miniapp-mode .visualization-column {
  display: block !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

body.miniapp-mode #particle-container {
  height: 100vh !important;
  width: 100vw !important;
  max-height: none !important;
}

/* Уменьшение частицы на мобильном мини-аппе теперь НЕ через CSS-transform
   (два предыдущих захода — на #particle-container и на canvas — либо тащили
   визуально всё поле целиком, либо резали края отрисованной частицы у самой
   границы canvas). Правильный способ — камера в Three.js дальше от объекта,
   см. cameraDistanceScale в js/api/QuantumVisualizationAPI.js и
   js/renderer/ParticleRenderer.js: частица меньше В КАДРЕ без побочных
   эффектов, поле/canvas остаются полноразмерными. */

/* particle_only — весь блок ниже: типографика КАК графика (editorial/
   spec-sheet эстетика — контраст масштаба между крошечным индексом/подписью
   и крупным mono-числом, тонкие волосяные линии вместо рамок/боксов,
   нумерация 01–04 как в спецификации коллекции), не иконки-эмодзи в
   квадратиках. Telegram не даёт менять системный заголовок (только цвет),
   см. MINIAPP_DESIGN.md §8 — название частицы в контенте страницы. */
.miniapp-particle-title {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--miniapp-text);
  font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  white-space: nowrap;
}
.miniapp-particle-title::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--miniapp-accent);
  box-shadow: 0 0 6px var(--miniapp-accent);
}

/* Две группы статов у краёв под заголовком — каждая ОДИН flex-контейнер
   (2 строки внутри), не 4 независимых блока: физически не могут наехать
   друг на друга. Ряд тиков — единственное, что внизу. */
.phud-edge {
  position: fixed;
  top: calc(68px + env(safe-area-inset-top, 0px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 40vw;
  pointer-events: none;
}
.phud-edge-left { left: calc(16px + env(safe-area-inset-left, 0px)); }
.phud-edge-right { right: calc(16px + env(safe-area-inset-right, 0px)); align-items: flex-end; text-align: right; }

.phud-stat-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--miniapp-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.phud-edge-right .phud-stat-row { align-items: flex-end; }
.phud-index {
  font-family: 'Exo 2', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--miniapp-accent);
  opacity: 0.85;
}
.phud-rule {
  width: 22px;
  height: 1px;
  background: color-mix(in srgb, var(--miniapp-text) 45%, transparent);
}
.phud-edge-right .phud-rule { align-self: flex-end; }
.phud-text { display: flex; flex-direction: column; }
.phud-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--miniapp-text) 65%, transparent);
  margin-top: 2px;
}
.phud-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

/* Категория частицы (лептон/кварк/бозон) — вертикальная надпись у самого
   низа левого края, как боковая бирка/корешок в fashion-развороте. Не
   пересекается с phud-edge-left (та выше, под заголовком). */
.phud-family-tag {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  left: calc(2px + env(safe-area-inset-left, 0px));
  z-index: 50;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Exo 2', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: color-mix(in srgb, var(--miniapp-text) 60%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Три тонких тик-индикатора внизу по центру — не коробочные прогресс-бары,
   а волосяная линия с ярким маркером-точкой на позиции значения, как
   шкала измерительного прибора. Единственное, что внизу по центру. */
.phud-ticks {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  gap: 20px;
  pointer-events: none;
}
.phud-tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 64px;
}
.phud-tick-label {
  font-family: 'Exo 2', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--miniapp-text) 65%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}
.phud-tick-track {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--miniapp-text) 30%, transparent);
}
.phud-tick-fill {
  position: relative;
  display: block;
  height: 1px;
  background: transparent;
  transition: width 0.4s ease;
}
.phud-tick-fill::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--miniapp-accent);
  box-shadow: 0 0 8px var(--miniapp-accent);
  transform: translateY(-50%);
}
.phud-tick-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--miniapp-accent);
}

/* particle_only: чертёж по долгому нажатию — сама 3D-геометрия (проволочные
   core/shell/орбиты) теперь настоящие объекты сцены Three.js, см.
   showBlueprint()/updateBlueprint() в js/renderer/ParticleRenderer.js, не
   DOM/CSS. Здесь — только подпись категории формы + текст формулы
   деформации из шейдера, отдельным блоком у левого края, выше
   phud-family-tag (та вертикальная, ещё ниже) — не пересекаются. Видимость
   переключает JS через opacity, пока палец удерживает частицу. */
.phud-blueprint-formulas {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 41;
  max-width: 62vw;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--miniapp-text) 85%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.phud-formula-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--miniapp-accent);
  margin-bottom: 4px;
}
.phud-formula-line { white-space: pre; opacity: 0.9; }

#miniapp-panel-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  background: linear-gradient(to top, var(--miniapp-bg) 55%, transparent);
  pointer-events: none;
}

.miniapp-panel {
  pointer-events: auto;
  background: color-mix(in srgb, var(--miniapp-bg) 85%, #000 15%);
  border: 1px solid color-mix(in srgb, var(--miniapp-hint) 30%, transparent);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--miniapp-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  backdrop-filter: blur(12px);
}

.miniapp-panel-header {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.miniapp-stat-bar {
  margin-bottom: 8px;
}
.miniapp-stat-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--miniapp-hint);
  margin-bottom: 3px;
}
.miniapp-stat-track {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--miniapp-hint) 25%, transparent);
  overflow: hidden;
}
.miniapp-stat-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--miniapp-accent);
  transition: width 0.4s ease;
}

.miniapp-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--miniapp-hint) 15%, transparent);
}
.miniapp-row-label { color: var(--miniapp-hint); }
.miniapp-row-value { font-weight: 500; }

.miniapp-warning {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #f0a04a 20%, transparent);
  color: #f0a04a;
  font-size: 11px;
  line-height: 1.4;
}

.miniapp-empty {
  text-align: center;
  color: var(--miniapp-hint);
  font-size: 13px;
  line-height: 1.6;
}