/* ═══════════════════════════════════════════════════════════════════
   SALA 1 · A Câmara do Modelo
   v0.2 — fixes de layout (stage maior, tabelas menores, sem sobreposição)
   ═══════════════════════════════════════════════════════════════════ */

#screen-sala-1 {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: row;
  z-index: var(--z-content);
}
#screen-sala-1.active {
  display: flex;
  animation: screen-enter 0.7s var(--ease-entrance);
}

/* ─────────────── Área principal (modelo de dados) ─────────────── */
.model-canvas {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px var(--space-6) 220px; /* mais bottom pra ARIA mini + inventário não cobrirem */
  overflow: auto;
}

.model-stage {
  position: relative;
  width: min(880px, 100%);
  height: 580px;
}

/* SVG de relacionamentos */
.model-stage svg.relations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.relation-line {
  fill: none;
  stroke: var(--cyan-40);
  stroke-width: 2;
  pointer-events: stroke;
  transition: all var(--dur-base) var(--ease-standard);
  cursor: pointer;
}
.relation-line:hover {
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(0,255,255,0.6));
}
.relation-line.active {
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(0,255,255,0.7));
}
.relation-line.fixed {
  stroke: var(--cyan);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(0,255,255,0.6));
}
.relation-line.exposed {
  /* só aparece DEPOIS que jogador descobre o problema (pós "ver impacto") */
  stroke: var(--magenta);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(255,20,147,0.7));
  animation: relation-pulse 2s infinite;
}

@keyframes relation-pulse {
  0%, 100% { stroke-opacity: 0.6; }
  50%      { stroke-opacity: 1; }
}

/* Labels da relação */
.relation-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--gray-light);
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
}
.relation-label.fixed { fill: var(--cyan); }
.relation-label.exposed { fill: var(--magenta); }

/* Hotspot click area */
.relation-hotspot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 30;
  cursor: pointer;
  pointer-events: stroke;
}

/* ─────────────── Tabelas (cards) ─────────────── */
.table-card {
  position: absolute;
  width: 158px;
  background: rgba(10, 8, 32, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--cyan-25);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-mono);
  z-index: var(--z-content);
  transition: all var(--dur-base) var(--ease-standard);
  cursor: pointer;
}
.table-card:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan-sm);
  transform: translateY(-2px);
}
.table-card.fact {
  background: rgba(0,255,255,0.06);
  border-color: var(--cyan-40);
}
.table-card.dim {
  background: rgba(150,0,255,0.06);
  border-color: var(--purple-30);
}
.table-card.bridge {
  background: rgba(255,184,0,0.05);
  border-color: rgba(255,184,0,0.30);
}
.table-card.bridge .table-name::before {
  content: '⤬';
  color: var(--warning);
  font-size: 0.75em;
}
.table-card.active-investigation {
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan-md);
}

.table-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.table-card.fact .table-name::before {
  content: '◆';
  color: var(--cyan);
  font-size: 0.7em;
}
.table-card.dim .table-name::before {
  content: '◇';
  color: var(--purple-bright);
  font-size: 0.7em;
}

.table-fields {
  list-style: none;
  font-size: 10px;
  color: var(--gray-light);
  line-height: 1.55;
}
.table-fields li::before {
  content: '·';
  margin-right: 4px;
  color: var(--cyan);
}

.table-meta {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--cyan-15);
  font-size: 9px;
  color: var(--gray-dark);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* Posicionamento manual no stage (580px de altura, 880px de largura)
   Layout: canto inferior esquerdo LIVRE pra ARIA mini não sobrepor */
.table-card[data-pos="dim_funcionarios"]         { top: 0;     left: 0; }
.table-card[data-pos="bridge_venda_campanha"]    { top: 0;     left: 50%; transform: translateX(-50%); }
.table-card[data-pos="dim_campanha"]             { top: 0;     right: 0; }
.table-card[data-pos="fato_vendas"]              { top: 50%;   left: 50%; transform: translate(-50%, -50%); }
.table-card[data-pos="dim_produto"]              { bottom: 0;  left: 50%; transform: translateX(-50%); }
.table-card[data-pos="dim_cd"]                   { bottom: 0;  right: 0; }

/* Fix hover (mantém transform original) */
.table-card[data-pos="fato_vendas"]:hover              { transform: translate(-50%, -52%); }
.table-card[data-pos="bridge_venda_campanha"]:hover    { transform: translateX(-50%) translateY(-2px); }
.table-card[data-pos="dim_produto"]:hover              { transform: translateX(-50%) translateY(-2px); }

/* ─────────────── Painel lateral de investigação ─────────────── */
.investigation-panel {
  width: 380px;
  background: rgba(10,8,32,0.85);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--cyan-15);
  padding: 100px var(--space-5) var(--space-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.investigation-panel::-webkit-scrollbar { width: 6px; }
.investigation-panel::-webkit-scrollbar-thumb {
  background: var(--cyan-25);
  border-radius: 3px;
}

.investigation-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray-light);
  font-size: var(--size-small);
  font-style: italic;
  padding: var(--space-6) var(--space-4);
  line-height: 1.7;
}
.investigation-empty::before {
  content: '◇';
  display: block;
  font-size: 2rem;
  color: var(--cyan-40);
  margin-bottom: var(--space-3);
}

.investigation-content { display: none; }
.investigation-content.show {
  display: block;
  animation: fade-in 0.4s var(--ease-entrance);
}

.investigation-content h3 {
  font-family: var(--font-display);
  font-size: var(--size-large);
  letter-spacing: var(--tracking-bebas);
  color: var(--cream);
  margin-bottom: var(--space-3);
  text-shadow: var(--glow-cyan-sm);
  word-break: break-word;
}

.investigation-content .relation-summary {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  margin-bottom: var(--space-5);
}
.investigation-content .relation-summary dt {
  color: var(--gray-light);
  letter-spacing: 0.05em;
  font-size: var(--size-mini);
}
.investigation-content .relation-summary dd {
  color: var(--cream);
  word-break: break-word;
}
.investigation-content .relation-summary dd.alert {
  color: var(--magenta);
  font-weight: 700;
  text-shadow: var(--glow-magenta-sm);
}

/* Botão "Ver impacto no dado" — aparece só na relação suspeita */
.investigate-action {
  margin-top: var(--space-4);
  width: 100%;
}

/* Seção fix (aparece DEPOIS do "Ver impacto") */
.fix-section {
  margin-top: var(--space-5);
  background: var(--magenta-08);
  border: 1px solid var(--magenta-30);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: none;
}
.fix-section.show {
  display: block;
  animation: fade-in 0.4s var(--ease-entrance);
}
.fix-section h4 {
  font-family: var(--font-display);
  font-size: var(--size-base);
  color: var(--magenta);
  letter-spacing: var(--tracking-bebas);
  margin-bottom: var(--space-3);
  text-shadow: var(--glow-magenta-sm);
}
.fix-section p {
  font-size: var(--size-small);
  color: var(--cream-soft);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.fix-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fix-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--cyan-25);
  border-radius: var(--radius-md);
  background: var(--cyan-04);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  font-family: var(--font-mono);
  font-size: var(--size-mini);
  color: var(--cream-soft);
  text-align: left;
  width: 100%;
  line-height: 1.5;
}
.fix-option:hover {
  border-color: var(--cyan);
  background: var(--cyan-08);
  color: var(--cream);
}
.fix-option .opt-icon {
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan-40);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.fix-option.selected .opt-icon {
  background: var(--cyan);
  box-shadow: var(--glow-cyan-sm);
}
.fix-option.correct {
  border-color: var(--success);
  background: rgba(0,255,163,0.08);
}
.fix-option.incorrect {
  border-color: var(--magenta);
  background: var(--magenta-15);
  opacity: 0.5;
}
.fix-option strong { color: var(--cream); }

.investigation-back {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--size-mini);
  color: var(--gray-light);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: var(--space-2);
}
.investigation-back:hover { color: var(--cyan); }
.investigation-back::before { content: '← '; }

/* Botão "ver impacto" / dataset estranho */
.btn-investigate {
  width: 100%;
  padding: var(--space-3);
  background: var(--cyan-08);
  border: 1px solid var(--cyan-40);
  border-radius: var(--radius-md);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--size-mini);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.btn-investigate:hover {
  background: var(--cyan-15);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan-sm);
}
.btn-investigate::before { content: '◆ '; }

/* Próxima câmara — botão fixo bottom-center */
#btn-next-sala {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  z-index: var(--z-overlay);
}
#btn-next-sala.show {
  display: inline-flex;
  animation: zoom-in 0.55s var(--ease-entrance), pulse-magenta-anim 2.5s infinite 0.6s;
}

/* ─────────────── Responsivo ─────────────── */
@media (max-width: 1180px) {
  .investigation-panel { width: 340px; }
  .table-card { width: 140px; }
}

@media (max-width: 980px) {
  .investigation-panel { width: 300px; padding-left: var(--space-3); padding-right: var(--space-3); }
  .table-card { width: 130px; padding: 8px; }
  .aria-mini { width: 280px; }
}

@media (max-width: 880px) {
  #screen-sala-1 { flex-direction: column; }
  .investigation-panel {
    width: 100%;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--cyan-15);
    padding-top: var(--space-4);
  }
  .model-canvas { padding-bottom: var(--space-4); }
  .aria-mini { display: none; } /* em mobile, foco no painel */
}