/* Mobile-first: as regras base valem para celulares (até 600 px).
   Aqui ficam as adaptações para telas maiores e para telas muito estreitas. */

/* Celulares muito estreitos (320 px) */
@media (max-width: 359px) {
  :root { --gutter: 12px; --fs-h1: 24px; }
  .brand-name { font-size: 17px; }
  .room-options { grid-template-columns: 1fr; }
  .empty-room-card { grid-template-columns: 84px 1fr; }
  .lib-grid { grid-auto-columns: 80px; }
  .editor-top .icon-btn { width: 36px; }
  .session-actions .btn { min-height: 80px; }
}

/* Duas colunas de cards quando há espaço suficiente */
@media (min-width: 560px) {
  .subject-grid { grid-template-columns: repeat(2, 1fr); }
  .room-options { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tablet ---------- */
@media (min-width: 601px) {
  :root { --gutter: 24px; --fs-h1: 28px; }
  .sheet-backdrop { align-items: center; padding: var(--s6); }
  .sheet { max-width: 540px; border-radius: 20px; max-height: 86dvh; animation: pop-in var(--med) var(--ease); padding-bottom: 0; }
  .sheet.full { height: auto; max-height: 86dvh; border-radius: 20px; }
  .sheet.full .sheet-head { padding-top: var(--s3); }
  .sheet-handle { display: none; }
  .sheet.wide { max-width: 720px; }
  .continue-card { grid-template-columns: 120px 1fr auto; align-items: center; padding: var(--s4); }
  .continue-thumb { width: 120px; height: 80px; }
  .continue-card .btn { grid-column: auto; padding: 0 var(--s6); }
  .lib-grid { grid-auto-columns: 100px; }
  .session-card .q { font-size: 24px; }
  .interact-btn { bottom: calc(170px + var(--safe-b)); }
}

@media (min-width: 800px) {
  .subject-grid { grid-template-columns: repeat(3, 1fr); }
  .subject-page-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .subject-page-grid .section-head:first-child { margin-top: 0; }
}

/* Cards verticais (como no painel do computador) a partir do tablet largo */
@media (min-width: 800px) {
  .subject-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: var(--s4); align-items: start; row-gap: var(--s4); }
  .subject-card .subject-icon { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
  .subject-card .more { grid-column: 2; grid-row: 1; margin: -6px -6px 0 0; }
  .subject-card .subject-body { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Computador ---------- */
@media (min-width: 1025px) {
  :root { --fs-h1: 30px; --fs-h2: 21px; --gutter: 32px; }
  .shell { padding-left: var(--sidebar-w); }
  .shell-main { padding-bottom: var(--s8); }
  .bottom-nav { display: none; }
  .toast-stack { bottom: var(--s6); }
  .review-cta { bottom: var(--s5); }
  .page { padding-top: var(--s8); }
  .page-header.sticky { margin-top: calc(-1 * var(--s8)); padding-top: var(--s4); }

  .sidebar {
    display: flex; flex-direction: column; gap: var(--s1);
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
    overflow-y: auto;
    padding: var(--s5) var(--s3);
    background: var(--sidebar); color: var(--sidebar-text);
  }
  .sidebar .brand { flex: none; padding: var(--s1) var(--s2) var(--s6); }
  .sidebar .brand-name { color: #fff; font-size: 15px; line-height: 1.25; }
  .sidebar a.nav-item {
    display: flex; align-items: center; gap: var(--s3);
    min-height: 46px; padding: 0 var(--s3); border-radius: 12px;
    color: var(--sidebar-text); font-weight: 500; font-size: 15px;
    transition: background var(--fast), color var(--fast);
  }
  .sidebar a.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .sidebar a.nav-item[aria-current="page"] { background: var(--sidebar-active); color: #fff; font-weight: 600; }
  .sidebar .sidebar-foot { margin-top: auto; padding: var(--s3); font-size: 12px; display: flex; gap: var(--s2); align-items: flex-start; line-height: 1.4; }
  .sidebar .sidebar-foot svg.icon { width: 18px; height: 18px; flex: none; }
  .app-header .brand { display: none; }
  .app-header { justify-content: flex-end; margin-bottom: 0; }
  .dash-hero {
    display: grid; grid-template-columns: 1fr; gap: var(--s4); padding: var(--s6); margin-top: var(--s2);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  }
  .dash-hero .continue-card { box-shadow: none; background: var(--bg); }
  .dash-hero .welcome h1 { font-size: 26px; }
  .dash-hero .welcome p { font-size: 20px; }

  .subject-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
  .room-options { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

  /* Editor: biblioteca à esquerda, propriedades à direita */
  .editor-tabs { display: none; }
  .editor-top { padding: 0 var(--s4); gap: var(--s1); }
  .save-btn .lbl { display: inline; }
  .editor-main { flex-direction: row; }
  .editor-panel { position: static; display: flex; max-height: none; border-radius: 0; box-shadow: none; animation: none; left: auto; right: auto; }
  .editor-panel[data-panel="objetos"] { width: 300px; flex: none; border-top: 0; border-right: 1px solid var(--border); order: 0; }
  .editor-stage { order: 1; }
  .editor-side { order: 2; width: 340px; flex: none; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); min-height: 0; }
  .editor-side .editor-panel { display: none; flex: 1; min-height: 0; border-top: 0; }
  .editor[data-side="selecionar"] .editor-side .editor-panel[data-panel="selecionar"],
  .editor[data-side="propriedades"] .editor-side .editor-panel[data-panel="propriedades"],
  .editor[data-side="sala"] .editor-side .editor-panel[data-panel="sala"] { display: flex; }
  .editor-panel .collapse-btn { display: none; }
  .editor-side .panel-head { display: none; }
  .editor-side .panel-body { padding-top: var(--s2); }
  .side-tabs { display: block; padding: var(--s3) var(--s3) var(--s2); flex: none; }
  .editor-panel[data-panel="objetos"] .panel-body { overflow-y: auto; }
  .lib-grid {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    overflow: visible; margin: 0; padding: 0;
  }
  /* Categorias como etiquetas compactas (quebram linha) para a grade de objetos ter espaço */
  .lib-cats { flex-wrap: wrap; overflow: visible; gap: 6px; }
  .lib-cats .chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .lib-card { cursor: grab; }

  /* Painel lateral do conceito na exploração */
  .concept-panel { left: auto; top: 0; width: 400px; height: auto; border-radius: 0; animation: slide-left var(--med) var(--ease); }
  .concept-panel .sheet-handle { display: none; }
  .concept-panel .sheet-head { padding-top: calc(var(--s4) + var(--safe-t)); }
  .concept-panel-backdrop { background: transparent; }
  .explore-hint { display: block; }
  .lock-overlay { display: grid; }
  .explore.locked .lock-overlay, .explore.panel-open .lock-overlay, .explore.touch .lock-overlay { display: none; }
  .explore.touch .explore-hint { display: none; }
}
/* Computador com janela baixa: o painel da biblioteca rola por inteiro */
@media (min-width: 1025px) and (max-height: 700px) {
  .editor-panel[data-panel="objetos"] { overflow-y: auto; }
  .editor-panel[data-panel="objetos"] .panel-body { overflow: visible; flex: none; }
}
@keyframes slide-left { from { transform: translateX(100%); } to { transform: none; } }

@media (min-width: 1440px) {
  .editor-panel[data-panel="objetos"] { width: 330px; }
  .editor-side { width: 360px; }
  .concept-panel { width: 420px; }
}

/* Dispositivos sem toque: esconde controles de toque na exploração */
.explore:not(.touch) .joystick, .explore:not(.touch) .joystick-zone, .explore:not(.touch) .look-area { display: none; }