/* MCPEHUB — стили вкладки «3D модель» на странице плана постройки */

/* Переключатель вкладок 2D/3D */
.plan-tabs { display: flex; gap: 8px; margin: 20px 0 0; }
.plan-tab {
  flex: 1 1 0; padding: 12px 8px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  background: #fff; color: rgba(0,0,0,0.56); font: inherit; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.plan-tab.active { background: #00bd6e; border-color: #00bd6e; color: #fff; }
.plan-tab-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px;
  background: #ff9c08; color: #fff; font-size: 11px; font-weight: 600; vertical-align: 2px;
}
.plan-tab.active .plan-tab-badge { background: rgba(255,255,255,0.25); }

/* Контейнер 3D */
.plan3d-body { padding-top: 16px; }
.p3d-stage {
  position: relative; width: 100%; height: 62vh; min-height: 300px; max-height: 640px;
  border-radius: 8px; overflow: hidden; touch-action: none;
  background: radial-gradient(120% 100% at 50% 0%, #f6f8fb 0%, #e3e9f0 60%, #cfd8e3 100%);
}
.p3d-stage.p3d-dark {
  background: radial-gradient(120% 100% at 50% 0%, #3a4150 0%, #23272f 60%, #14161b 100%);
}
.p3d-stage.p3d-dark ~ .p3d-controls .p3d-level,
.p3d-stage.p3d-dark ~ .p3d-progress .p3d-progress-label { color: rgba(0,0,0,0.5); }
.p3d-stage canvas { display: block; width: 100%; height: 100%; }

/* Кнопки поверх сцены */
.p3d-hud { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.p3d-btn {
  min-width: 40px; height: 40px; padding: 0 10px; border: none; border-radius: 8px;
  background: rgba(255,255,255,0.92); color: rgba(0,0,0,0.72);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18); font-size: 20px; line-height: 40px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.p3d-btn:active { background: #e2e6ea; }

/* Загрузка */
.p3d-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: rgba(238,241,245,0.9); z-index: 4;
}
.p3d-loading[hidden] { display: none; }
.p3d-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid rgba(0,189,110,0.25); border-top-color: #00bd6e;
  animation: p3dspin 0.9s linear infinite;
}
@keyframes p3dspin { to { transform: rotate(360deg); } }
.p3d-loading-text { color: rgba(0,0,0,0.56); font-size: 14px; }

/* Плашки сообщений */
.p3d-notice {
  position: absolute; left: 10px; right: 58px; top: 10px; z-index: 3;
  padding: 10px 12px; border-radius: 8px; background: rgba(33,33,33,0.82);
  color: #fff; font-size: 13px; line-height: 1.4;
}
.p3d-notice[hidden] { display: none; }
.p3d-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: rgba(0,0,0,0.6); font-size: 15px; line-height: 1.5; z-index: 4;
}
.p3d-msg[hidden] { display: none; }

/* Карточка блока */
.p3d-card {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
.p3d-card[hidden] { display: none; }
.p3d-card-icon { flex: 0 0 32px; }
.p3d-card-body { flex: 1 1 auto; min-width: 0; }
.p3d-card-name { font-weight: 600; color: rgba(0,0,0,0.8); font-size: 14px; }
.p3d-card-meta { color: rgba(0,0,0,0.48); font-size: 12px; margin-top: 2px; }
.p3d-card-close {
  flex: 0 0 32px; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: #f1f3f5; color: rgba(0,0,0,0.55); font-size: 18px; line-height: 32px; cursor: pointer;
}

/* Слайдер слоёв */
.p3d-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.p3d-step { flex: 0 0 44px; height: 44px; font-size: 22px; background: #f1f3f5; box-shadow: none; }
.p3d-range { flex: 1 1 auto; height: 44px; margin: 0; accent-color: #00bd6e; }
.p3d-level { flex: 0 0 auto; min-width: 86px; text-align: right; color: rgba(0,0,0,0.56); font-size: 14px; white-space: nowrap; }
.p3d-level b { color: #00bd6e; font-size: 16px; }

.p3d-hint { margin-top: 10px; color: rgba(0,0,0,0.4); font-size: 13px; line-height: 1.5; }

/* Кнопка режима слоя (луковица) активна */
.p3d-btn.active { background: #00bd6e; color: #fff; }

/* Материалы текущего слоя */
.p3d-mats {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
.p3d-mats-title { flex: 0 0 auto; color: rgba(0,0,0,0.45); font-size: 13px; font-weight: 600; }
.p3d-mats-empty { color: rgba(0,0,0,0.35); font-size: 13px; }
.p3d-mat {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 5px 8px;
  border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; background: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.p3d-mat b { font-size: 12px; color: rgba(0,0,0,0.6); font-weight: 600; }
.p3d-mat .mcb { transform: scale(0.75); transform-origin: left center; margin-right: -8px; }
.p3d-mat.active { border-color: #00bd6e; background: #dafaf0; }

/* Прогресс стройки */
.p3d-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.p3d-done-btn {
  flex: 1 1 auto; max-width: 320px; padding: 12px 16px; border: none; border-radius: 8px;
  background: #00bd6e; color: #fff; font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.p3d-done-btn:active { background: #00a35f; }
.p3d-done-btn.undone { background: #f1f3f5; color: rgba(0,0,0,0.55); }
.p3d-progress-label { flex: 0 0 auto; color: rgba(0,0,0,0.5); font-size: 14px; }
.p3d-progress-label b { color: #00bd6e; font-size: 16px; }

/* Чип активного фильтра «показаны только такие блоки» */
.p3d-filter {
  position: absolute; left: 10px; bottom: 10px; z-index: 4; max-width: calc(100% - 20px);
  padding: 8px 12px; border-radius: 18px; background: rgba(33,33,33,0.85);
  color: #fff; font-size: 13px;
}
.p3d-filter[hidden] { display: none; }
.p3d-filter-x {
  display: inline-block; margin-left: 8px; width: 20px; height: 20px; line-height: 19px;
  text-align: center; border-radius: 50%; background: rgba(255,255,255,0.25);
  cursor: pointer; font-size: 14px;
}

/* Кнопка «показать все такие» в карточке блока */
.p3d-card-filterbtn {
  margin-top: 6px; padding: 6px 10px; border: 1px solid #00bd6e; border-radius: 6px;
  background: #fff; color: #00bd6e; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Меню настроек ⚙ */
.p3d-cfg {
  position: absolute; top: 10px; right: 58px; z-index: 6; padding: 10px 14px;
  background: #fff; border-radius: 10px; box-shadow: 0 2px 14px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 8px;
}
.p3d-cfg[hidden] { display: none; }
.p3d-cfg label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(0,0,0,0.7); cursor: pointer; white-space: nowrap; }
.p3d-cfg input { accent-color: #00bd6e; width: 16px; height: 16px; }

/* Режим витрины (страница постройки): только просмотр, без строительного UI */
.p3d-show-mode .p3d-controls,
.p3d-show-mode .p3d-progress,
.p3d-show-mode .p3d-mats,
.p3d-show-mode .p3d-hint,
.p3d-show-mode [data-act="onion"] { display: none; }
.p3d-show-mode .p3d-stage { height: 55vh; min-height: 280px; max-height: 520px; }
.p3d-openplan-wrap { margin-top: 10px; text-align: center; }
.p3d-openplan {
  display: inline-block; padding: 10px 18px; border-radius: 8px;
  background: #e9f4ff; color: #378df1; font-weight: 600; font-size: 14px; text-decoration: none;
}

/* ===== Блок В: 2D план на текстурах ===== */
.mct-air { width: 32px; height: 32px; }
.p2d-mats { margin: 12px 0 4px; }
.p2d-ghost { opacity: 0.3; }
.p2d-ghost-btn { border-style: dashed; }
.p2d-filtered .cell > .mct:not(.hl),
.p2d-filtered .cell > .mcb:not(.hl) { opacity: 0.18; }

/* Сообщение вместо 2D-сетки у больших построек */
.plan2d-off { padding: 32px 8px; color: rgba(0,0,0,0.5); font-size: 14px; line-height: 1.6; text-align: center; }

/* Псевдо-полноэкранный режим (работает и на iPhone) */
.p3d-fullscreen {
  position: fixed; inset: 0; z-index: 9999; background: #fff; padding: 10px;
  display: flex; flex-direction: column;
}
.p3d-fullscreen .p3d-stage { flex: 1 1 auto; max-height: none; height: auto; }
.p3d-fullscreen .p3d-hint { display: none; }
.p3d-noscroll { overflow: hidden; }

@media (min-width: 768px) {
  .plan-tabs { max-width: 420px; }
  .p3d-stage { height: 540px; }
}