/* =====================================================
   MOBILE RESPONSIVE — RoboBlocks v3
   Breakpoints: 768px (tablet), 480px (phone)
   ===================================================== */

/* ── Touch improvements (all devices) ── */
* { -webkit-tap-highlight-color: transparent; }
button, .tbtn, .map-card, .robot-card, .block-item {
  touch-action: manipulation;
}

/* ── Scrollbar hide on mobile ── */
@media (max-width: 768px) {
  ::-webkit-scrollbar { display: none; }
  * { -ms-overflow-style: none; scrollbar-width: none; }
}

/* =====================================================
   TABLET (≤ 900px)
   ===================================================== */
@media (max-width: 900px) {
  #sim-wrap { width: 380px; min-width: 260px; }
  #palette { width: 180px; min-width: 160px; }
  .tbtn { padding: 7px 12px; font-size: 12px; }
}

/* =====================================================
   MOBILE (≤ 768px) — основной брейкпоинт
   ===================================================== */
@media (max-width: 768px) {

  /* ── TOPBAR — иконки без текста, горизонтальный скролл ── */
  #topbar {
    padding: 6px 10px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .logo { font-size: 14px; }
  .badge { display: none; }

  /* Скрыть второстепенные кнопки топбара */
  .tbtn.build,
  .tbtn.lego,
  .tbtn[onclick*="openGuide"],
  .tbtn[onclick*="saveCurrentProject"],
  .tbtn[onclick*="openProjectList"] {
    display: none;
  }

  /* Оставшиеся кнопки — компактнее */
  .tbtn {
    padding: 7px 10px;
    font-size: 11px;
    border-radius: 7px;
  }
  .tbtn.play, .tbtn.stop, .tbtn.reset {
    padding: 8px 12px;
  }

  /* ── MAIN LAYOUT — вертикальный стек с табами ── */
  #main {
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }

  /* palette и workspace — вкладки, переключаемые через JS */
  #palette {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 220px;
    min-height: 180px;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }

  /* Категории в palette — горизонтально */
  .cat-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    max-width: 180px;
    background: var(--panel2);
    border-radius: 10px;
    padding: 8px;
    border: 1px solid var(--border);
  }
  .cat-label {
    width: 100%;
    font-size: 9px;
    margin-bottom: 2px;
  }

  /* Workspace — средняя зона */
  #workspace {
    flex: 1;
    min-width: unset;
    min-height: 200px;
  }

  /* ── SIMULATOR — полная ширина снизу ── */
  #sim-wrap {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    height: 280px;
    min-height: 220px;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    flex-direction: column;
  }
  #resize-sim { display: none; }
  #resize-palette { display: none; }

  /* Sim container */
  #sim-container {
    flex: 1;
    min-height: 0;
  }
  #three-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* ── SENSOR DOCK — компактнее ── */
  #sensor-dock {
    padding: 5px 10px;
    gap: 6px;
    font-size: 10px;
  }
  #robot-info .ri-name { font-size: 10px; }
  #ri-spec { font-size: 9px; }

  /* ── MISSION PANEL — мобильный вид ── */
  #mission-panel {
    font-size: 11px;
    padding: 8px 10px !important;
  }

  /* ── МОДАЛКИ — полный экран на мобиле ── */
  #map-modal,
  #robot-modal,
  #builder-modal,
  #lego-modal,
  #guide-modal,
  .panel-modal {
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: auto 0 0 !important;
  }

  #map-overlay,
  #robot-overlay,
  #builder-overlay,
  #lego-overlay,
  #guide-overlay,
  #panel-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Map cards — 2 колонки */
  .map-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .map-card-thumb { height: 80px; }

  /* Robot cards — 2 колонки */
  .robot-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* ── LANDING PAGE ── */
  .lp-nav {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lp-nav-btn { padding: 7px 12px; font-size: 12px; }

  /* ── AUTH MODAL ── */
  #auth-modal {
    border-radius: 16px 16px 0 0 !important;
    margin: auto 0 0 !important;
    width: 100%;
    max-width: 100%;
  }
  #auth-overlay { align-items: flex-end; padding: 0; }

  /* ── CAM CONTROLS ── */
  #cam-ctrl {
    bottom: auto;
    top: 6px;
    left: 6px;
    gap: 4px;
  }
  .cam-btn { padding: 5px 8px; font-size: 10px; }

  /* ── DASHBOARD ── */
  #dash { font-size: 9px; padding: 6px; }

  /* ── WIN OVERLAY ── */
  #win-box {
    padding: 24px 20px !important;
    max-width: 320px !important;
    width: 90% !important;
  }
  .win-btns { flex-direction: column; gap: 8px; }
  .win-btn { width: 100%; padding: 12px; }

  /* ── PAYWALL ── */
  .pw-modal {
    padding: 28px 20px !important;
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── BUILDER ── */
  #builder-body { flex-direction: column; }
  #builder-preview { width: 100%; height: 200px; }

  /* ── LEGO ── */
  #lego-body { flex-direction: column; }
  #lego-stage { min-height: 200px; }

  /* ── COURSE MODAL ── */
  #course-modal {
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    min-height: 85vh !important;
  }
  #course-body { flex-direction: column; }
  #course-sidebar { width: 100%; max-height: 160px; border-right: none; border-bottom: 1px solid var(--border); }

  /* ── PANEL MODAL (профиль/учитель) ── */
  .panel-modal { height: 90vh; }
  .panel-body { overflow-y: auto; }
}

/* =====================================================
   PHONE (≤ 480px)
   ===================================================== */
@media (max-width: 480px) {

  /* Топбар — только самое важное */
  #topbar .tbtn.mapbtn span:not(.emoji),
  #topbar .tbtn.robotbtn span:not(.emoji) {
    display: none;
  }
  #mapPickerLabel, #robotPickerLabel { display: none !important; }

  .tbtn { padding: 6px 8px; font-size: 11px; }
  .tbtn.play { padding: 8px 14px; }

  /* Palette — чуть ниже */
  #palette { height: 190px; }

  /* Sim — чуть выше */
  #sim-wrap { height: 240px; }

  /* Модалки — без отступов */
  #map-modal-body, #robot-modal-body { padding: 12px; }
  .map-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .map-card-thumb { height: 70px; }
  .map-card-name { font-size: 10px; }

  /* Камера — меньше */
  .cam-btn { padding: 4px 7px; font-size: 9px; }
  #cam-ctrl > div { display: none; } /* скрыть подсказку "1 клетка = 100мм" */

  /* Win overlay */
  .win-title { font-size: 18px !important; }
  .win-emoji { font-size: 44px !important; }
}

/* =====================================================
   MOBILE TAB BAR — переключатель панелей
   Показывается только на мобиле
   ===================================================== */
#mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  #mobile-tabbar {
    display: flex;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
  }
  .mob-tab {
    flex: 1;
    padding: 8px 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    touch-action: manipulation;
  }
  .mob-tab.active {
    color: var(--ard-teal, #00979D);
    border-bottom-color: var(--ard-teal, #00979D);
  }

  /* Скрывать/показывать панели через JS-классы */
  #main.tab-blocks #palette   { display: flex; }
  #main.tab-blocks #workspace { display: none; }
  #main.tab-blocks #sim-wrap  { display: none; }

  #main.tab-code #palette   { display: none; }
  #main.tab-code #workspace { display: flex; }
  #main.tab-code #sim-wrap  { display: none; }

  #main.tab-sim #palette   { display: none; }
  #main.tab-sim #workspace { display: none; }
  #main.tab-sim #sim-wrap  { display: flex; height: calc(100vh - 120px); }

  /* Default — показать всё (десктоп режим) */
  #main:not(.tab-blocks):not(.tab-code):not(.tab-sim) #palette,
  #main:not(.tab-blocks):not(.tab-code):not(.tab-sim) #workspace,
  #main:not(.tab-blocks):not(.tab-code):not(.tab-sim) #sim-wrap {
    display: flex;
  }
}