/* ==========================================================================
   CENÁRIOS DE EXPLORAÇÃO DE CAMPO HISTÓRICO — CRONONAUTAS DO NOVO MUNDO
   ========================================================================== */

#screen-field-explorer {
  padding-top: 68px; /* Espaço para o HUD */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #090e1a;
}

.field-view-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Barra Superior do Cenário */
.field-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.field-location-tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.location-icon {
  font-size: 1.8rem;
  background: #1e293b;
  border: 1.5px solid var(--gold-bright);
  border-radius: var(--radius-full);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field-title {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: #fff;
}

.field-subtitle {
  font-size: 0.8rem;
  color: var(--gold-bright);
}

.field-progress-tracker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tracker-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
}

.evidence-dots {
  display: flex;
  gap: 0.4rem;
}

.evidence-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.evidence-dot.collected {
  background: var(--gold-bright);
  border-color: #fff;
  box-shadow: 0 0 8px var(--gold-bright);
}

.field-actions {
  display: flex;
  gap: 0.5rem;
}

.mini-game-trigger:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: grayscale(.65);
  box-shadow: none;
}

.field-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(5px);
}

.field-info-panel {
  position: relative;
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem;
  color: #e2e8f0;
  background: linear-gradient(145deg, #172033, #0f172a);
  border: 2px solid rgba(245, 158, 11, .55);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
}

.field-info-panel h3 { margin:.35rem 0 .5rem; color:#fff; font:800 1.65rem var(--font-title); }
.field-info-panel > p { color:#cbd5e1; line-height:1.55; }
.field-overlay-close { position:absolute; right:1rem; top:1rem; color:#fbbf24; border-color:#fbbf24; }
.field-panel-kicker { color:#fbbf24; font-size:.76rem; font-weight:900; letter-spacing:.08em; }

.mill-map {
  margin:1.4rem 0;
  padding:1.25rem;
  display:grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap:.75rem;
  background:linear-gradient(rgba(20,83,45,.65),rgba(101,67,33,.72));
  border:1px solid rgba(254,240,138,.35);
  border-radius:14px;
}
.mill-place { min-height:105px; padding:.8rem; display:flex; flex-direction:column; justify-content:center; text-align:center; background:#f5e7c6; color:#451a03; border:2px solid #b45309; border-radius:12px; box-shadow:0 5px 12px rgba(0,0,0,.3); }
.mill-place b { font-family:var(--font-title); font-size:.83rem; }
.mill-place span { margin-top:.35rem; font-size:.72rem; line-height:1.35; }
.mill-flow { align-self:center; color:#fef08a; font-weight:900; text-align:center; }
.casa-grande { grid-column:1 / 3; }
.capela { grid-column:3 / 4; }
.senzala { grid-column:4 / 6; border-color:#dc2626; }
.quilombo { grid-column:6 / 8; border-color:#16a34a; }
.field-panel-note { padding:1rem; color:#fef3c7; background:rgba(180,83,9,.2); border-left:4px solid #f59e0b; border-radius:8px; line-height:1.5; }

.mill-illustrated-map { position:relative; width:min(900px,100%); margin:1.1rem auto .75rem; overflow:hidden; border:3px solid #a16207; border-radius:16px; background:#5b3b23; box-shadow:0 16px 35px rgba(0,0,0,.45); }
.mill-illustrated-map img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.mill-map-point { position:absolute; display:flex; align-items:center; gap:.35rem; padding:.35rem .55rem .35rem .35rem; color:#fff7d6; font-weight:800; background:rgba(15,23,42,.9); border:2px solid #fbbf24; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.65); cursor:pointer; transform:translate(-50%,-50%); }
.mill-map-point b { display:grid; place-items:center; width:1.65rem; height:1.65rem; color:#451a03; background:#fbbf24; border-radius:50%; }
.mill-map-point span { font-size:.72rem; white-space:nowrap; }
.mill-map-point:hover,.mill-map-point:focus { outline:3px solid rgba(56,189,248,.75); outline-offset:2px; }
.mill-map-point.visited { color:#052e16; background:#bbf7d0; border-color:#22c55e; }
.mill-map-point.visited b { color:#fff; background:#15803d; }
.point-canavial { left:18%; top:29%; }
.point-producao { left:48%; top:58%; }
.point-poder { left:72%; top:28%; }
.point-trabalho { left:74%; top:72%; }
.mill-map-discovery { width:min(900px,100%); min-height:2.8rem; margin:0 auto .7rem; padding:.65rem .8rem; color:#dbeafe; text-align:center; background:#14213a; border-radius:10px; }

@media (max-width:620px) {
  .mill-map-point span { display:none; }
  .mill-map-point { padding:.3rem; }
}

.captaincies-office-scene { position:absolute; inset:0; overflow:hidden; background:linear-gradient(90deg,rgba(15,23,42,.15),transparent 45%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 90px); }
.office-window { position:absolute; left:8%; top:8%; width:22%; height:58%; display:grid; place-items:center; color:#fde68a; font-size:4rem; background:linear-gradient(#174c6b,#68a6ac); border:14px solid #5c351f; border-radius:120px 120px 8px 8px; box-shadow:inset 0 0 0 4px #d6b879,0 14px 30px rgba(0,0,0,.45); }
.royal-banner { position:absolute; right:9%; top:0; width:18%; height:54%; display:grid; place-items:center; color:#fbbf24; font-size:5rem; background:linear-gradient(90deg,#701a1a,#991b1b,#701a1a); border:4px solid #d6b879; border-top:0; clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%); }
.document-stack { position:absolute; left:34%; top:30%; width:34%; height:36%; transform:rotate(-4deg); }
.document-stack span { position:absolute; inset:0; display:grid; place-items:center; color:#78350f; font:800 1.1rem var(--font-title); letter-spacing:.12em; background:#ead7a2; border:7px solid #9a6b34; box-shadow:0 12px 25px rgba(0,0,0,.45); }
.document-stack span:last-child { transform:translate(48px,35px) rotate(9deg); }
.desk-compass { position:absolute; left:70%; top:62%; color:#fbbf24; font-size:5rem; text-shadow:0 6px 12px #000; }
.inkwell { position:absolute; left:30%; top:70%; font-size:3.5rem; filter:drop-shadow(0 7px 5px rgba(0,0,0,.6)); }
.captaincies-map-panel { width:min(1050px,96vw); }
.map-study-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin:1rem 0; }
.map-study-steps button { padding:.7rem; color:#e2e8f0; font-weight:800; background:#1e293b; border:1.5px solid #475569; border-radius:9px; cursor:pointer; transition:.2s ease; }
.map-study-steps button:hover { border-color:#fbbf24; }
.map-study-steps button.visited { color:#052e16; background:#86efac; border-color:#22c55e; }
.captaincies-map-zoom { position:relative; display:block; width:min(620px,100%); height:min(52vh,540px); margin:1rem auto; padding:.5rem; overflow:auto; background:#e8d5a5; border:3px solid #b45309; border-radius:12px; scroll-behavior:smooth; }
.captaincies-map-zoom img { display:block; width:100%; height:auto; }
.map-focus-highlight { position:sticky; left:4%; top:22%; width:92%; height:32%; margin-top:-34%; pointer-events:none; border:5px solid #facc15; border-radius:14px; background:rgba(250,204,21,.1); box-shadow:0 0 0 9999px rgba(15,23,42,.35),0 0 24px #facc15; animation:mapFocusPulse 1.1s ease-in-out infinite alternate; }
.map-study-confirm { display:block; width:min(620px,100%); margin:.75rem auto 1rem; }
.map-study-confirm:disabled { opacity:.5; cursor:not-allowed; }
.map-attribution { margin-top:.8rem; color:#94a3b8 !important; font-size:.72rem; line-height:1.4 !important; }

.field-hotspot.material-locked { opacity:.68; filter:grayscale(.7); }
.field-hotspot.material-locked .hotspot-beacon { border-color:#64748b; box-shadow:0 4px 15px rgba(0,0,0,.65); }
.field-hotspot.material-locked .hotspot-ring { animation:none; border-color:#94a3b8; }
.field-hotspot.next-step-pulse .hotspot-beacon { animation:nextStepPulse .9s ease-in-out infinite alternate; }
.map-required-pulse { animation:mapButtonPulse 1s ease-in-out infinite alternate; border-color:#facc15 !important; }
.map-guidance-shake { animation:mapGuidanceShake .55s ease both !important; }

@keyframes mapFocusPulse { from { opacity:.65; } to { opacity:1; } }
@keyframes nextStepPulse { from { transform:scale(1); box-shadow:0 0 10px #22d3ee; } to { transform:scale(1.12); box-shadow:0 0 30px #facc15; } }
@keyframes mapButtonPulse { from { box-shadow:0 0 5px rgba(250,204,21,.45); } to { box-shadow:0 0 24px rgba(250,204,21,1); transform:translateY(-2px); } }
@keyframes mapGuidanceShake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }

.final-route-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem; }
.final-route-card { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; min-height:230px; padding:1.2rem; color:#e2e8f0; text-align:left; background:rgba(30,41,59,.85); border:1.5px solid rgba(56,189,248,.35); border-radius:14px; cursor:pointer; transition:.2s ease; }
.final-route-card:hover,.final-route-card:focus { transform:translateY(-4px); border-color:#fbbf24; box-shadow:0 10px 25px rgba(245,158,11,.18); outline:none; }
.route-icon { font-size:2rem; }
.final-route-card strong { color:#fff; font:700 1rem var(--font-title); }
.final-route-card p { color:#cbd5e1; font-size:.84rem; line-height:1.45; flex:1; }
.final-route-card small { color:#67e8f9; font-weight:800; }

@media (max-width:760px) {
  .mill-map { grid-template-columns:1fr 1fr; }
  .mill-flow { display:none; }
  .mill-place { grid-column:auto; }
  .final-route-grid { grid-template-columns:1fr; }
  .field-info-panel { padding:1.35rem; }
  .map-study-steps { grid-template-columns:1fr; }
  .captaincies-office-scene .document-stack { left:20%; width:52%; }
}

/* Palco / Cenário Artístico da Época */
.field-scene-stage {
  position: relative;
  width: 100%;
  height: calc(100vh - 190px);
  min-height: 520px;
  background: #0f172a;
  border: 2px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.scene-artwork-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Camadas Cenográficas com CSS Art / SVGs de Paisagens de Época */
.scene-sky-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  transition: background 0.5s ease;
}

.scene-bg-layer {
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 55%;
  pointer-events: none;
}

.scene-mid-layer {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
}

.scene-ground-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  pointer-events: none;
}

/* Camada dos Hotspots Interativos (Objetos e Personagens) */
.scene-interactives-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.field-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transition: transform var(--transition-fast);
}

.field-hotspot:hover {
  transform: translate(-50%, -55%) scale(1.08);
  z-index: 25;
}

.hotspot-beacon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.85);
  border: 2.5px solid var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), var(--shadow-gold);
}

.hotspot-beacon.character-beacon {
  border-color: var(--cyan-temporal);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), var(--shadow-portal);
}

.hotspot-ring {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: var(--radius-full);
  border: 2px dashed var(--gold-bright);
  animation: rotateRing 12s linear infinite;
  opacity: 0.6;
}

.hotspot-badge-type {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: var(--gold-bright);
  color: #0f172a;
}

.hotspot-badge-type.dialogue {
  background: var(--cyan-temporal);
}

.hotspot-tag {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--gold-bright);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.field-hotspot.inspected .hotspot-beacon {
  border-color: var(--emerald-success);
}

.field-hotspot.inspected .hotspot-tag::after {
  content: " ✓";
  color: var(--emerald-success);
}

@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Guia do Crononauta / Dica de Campo */
.field-guide-bubble {
  position: absolute;
  top: 1rem;
  left: 1rem;
  max-width: 380px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--cyan-temporal);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  box-shadow: var(--shadow-md);
  z-index: 15;
  pointer-events: none;
}

.field-challenge-options { display:grid; gap:.65rem; margin-top:.8rem; }
.field-challenge-option { width:100%; text-align:left; color:#e2e8f0; background:rgba(15,23,42,.88); border:1px solid rgba(148,163,184,.35); border-radius:8px; padding:.8rem .9rem; cursor:pointer; font:inherit; line-height:1.4; transition:.18s ease; }
.field-challenge-option:hover:not(:disabled) { border-color:#f59e0b; transform:translateY(-1px); }
.field-challenge-option.correct { border-color:#10b981; background:rgba(16,185,129,.18); }
.field-challenge-option.wrong { border-color:#ef4444; background:rgba(239,68,68,.18); }
.field-challenge-feedback { margin-top:.8rem; padding:.85rem; border-radius:8px; color:#e2e8f0; line-height:1.45; }
.field-challenge-feedback.correct { border:1px solid #10b981; background:rgba(6,78,59,.45); }
.field-challenge-feedback.wrong { border:1px solid #ef4444; background:rgba(127,29,29,.42); }
.field-challenge-feedback p { margin:.45rem 0; }
.field-challenge-feedback .rpg-btn { width:100%; margin-top:.6rem; }

.guide-avatar {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(56, 189, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-content strong {
  display: block;
  font-size: 0.75rem;
  color: var(--cyan-temporal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-content p {
  font-size: 0.85rem;
  color: #e2e8f0;
  line-height: 1.35;
}