/* ═══════════════════════════════════════════════════════════════
   EL TELESCOPIO DIGITAL — bitácora abierta del capitán:
   pergamino, tinta índigo y latón antiguo.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --wood: #1a0e08;
  --parchment: #f0e2c4;
  --parchment-deep: #d4b88a;
  --parchment-panel: rgba(240, 226, 196, 0.9);
  --ink: #1c1008;
  --ink-soft: #3a2414;
  --ink-indigo: #1a2a5c;
  --ink-indigo-bright: #2a3d8f;
  --brass: #8a6d2f;
  --brass-bright: #c9a227;
  --brass-dark: #4a3a18;
  --signal-red: #8b2e1a;
  --olive-ok: #5a6b3a;
}

.bg-abyss      { background-color: var(--wood); }
.bg-parchment { background-color: var(--parchment); }
.text-phosphor,
.text-indigo  { color: var(--ink-indigo); }
.text-ink     { color: var(--ink); }
.text-brass-bright { color: var(--brass-dark); }
.text-parchment { color: var(--ink-soft); }

.font-display  { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-weight: 700; }
.font-fell     { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-weight: 400; }
.font-terminal { font-family: 'IBM Plex Mono', 'Courier New', monospace; }

body {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  background-color: var(--wood);
  color: var(--ink);
}

/* ── Cámara: tinte sepia / océano suave ── */
#camera-tint {
  background:
    radial-gradient(circle at center, rgba(40, 28, 14, 0.18) 0%, rgba(28, 20, 10, 0.35) 55%, rgba(18, 12, 6, 0.62) 100%),
    linear-gradient(rgba(70, 55, 30, 0.12), rgba(30, 45, 55, 0.18));
  mix-blend-mode: multiply;
}

/* ── Marco de bitácora / páginas alrededor del visor ── */
#vignette {
  background:
    linear-gradient(90deg, rgba(26, 14, 8, 0.88) 0%, transparent 14%, transparent 86%, rgba(26, 14, 8, 0.88) 100%),
    linear-gradient(180deg, rgba(26, 14, 8, 0.75) 0%, transparent 16%, transparent 84%, rgba(26, 14, 8, 0.82) 100%),
    radial-gradient(ellipse 78% 72% at center,
      transparent 0%,
      transparent 58%,
      rgba(40, 28, 14, 0.35) 78%,
      rgba(20, 12, 6, 0.78) 100%);
}

/* ── Grano de pergamino ── */
#noise-overlay {
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ── Paneles: parches de pergamino con remaches de latón ── */
.ui-panel {
  background:
    radial-gradient(circle 4px at 7px 7px, #e8c76a 0%, #4a3a18 55%, transparent 60%),
    radial-gradient(circle 4px at calc(100% - 7px) 7px, #e8c76a 0%, #4a3a18 55%, transparent 60%),
    radial-gradient(circle 4px at 7px calc(100% - 7px), #e8c76a 0%, #4a3a18 55%, transparent 60%),
    radial-gradient(circle 4px at calc(100% - 7px) calc(100% - 7px), #e8c76a 0%, #4a3a18 55%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 20% 10%, rgba(180, 120, 60, 0.12), transparent 45%),
    radial-gradient(ellipse 80% 60% at 85% 90%, rgba(90, 60, 30, 0.14), transparent 40%),
    linear-gradient(165deg, rgba(245, 232, 200, 0.94) 0%, rgba(228, 200, 150, 0.92) 55%, rgba(210, 175, 120, 0.9) 100%);
  border: 1.5px solid rgba(28, 16, 8, 0.55);
  outline: 1px solid rgba(138, 109, 47, 0.55);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px rgba(240, 226, 196, 0.35),
    inset 0 0 0 4px rgba(26, 42, 92, 0.12),
    inset 0 0 40px rgba(90, 55, 25, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.55);
  position: relative;
  backdrop-filter: blur(3px);
  color: var(--ink-indigo);
}

.panel-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

/* ── Botones: sello de tinta índigo ── */
.brass-btn {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background:
    repeating-linear-gradient(135deg, rgba(255, 245, 220, 0.06) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #3a4f9a 0%, var(--ink-indigo-bright) 42%, var(--ink-indigo) 78%, #0d1b4a 100%);
  border: 1px solid #0a142e;
  outline: 1px solid rgba(26, 14, 8, 0.45);
  border-radius: 2px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(200, 210, 240, 0.22), 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.brass-btn:hover  { filter: brightness(1.12); }
.brass-btn:active { transform: translateY(1px); }
.brass-btn.btn-off { filter: grayscale(0.4) brightness(0.72); }

.brass-btn-big {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background: linear-gradient(180deg, #3a4f9a 0%, var(--ink-indigo-bright) 45%, var(--ink-indigo) 100%);
  border: 2px solid #0a142e;
  border-radius: 4px;
  padding: 0.55rem 2.2rem;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 2px 0 rgba(200, 210, 240, 0.22),
    0 0 0 1px rgba(26, 42, 92, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.brass-btn-big:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 2px 0 rgba(200, 210, 240, 0.28),
    0 0 0 1px rgba(26, 42, 92, 0.45),
    0 6px 18px rgba(0, 0, 0, 0.55);
}

/* ── Botón de calibración ── */
.calibrate-btn {
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background: linear-gradient(180deg, #3a4f9a 0%, var(--ink-indigo-bright) 45%, var(--ink-indigo) 100%);
  border: 2px solid #0a142e;
  border-radius: 4px;
  padding: 0.4rem 1.3rem;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 2px 0 rgba(200, 210, 240, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.5s ease, filter 0.2s ease;
  animation: calibrate-pulse 2.4s ease-in-out infinite;
}
body.sailing .calibrate-btn {
  opacity: 1;
  pointer-events: auto;
}
.calibrate-btn:hover  { filter: brightness(1.1); }
.calibrate-btn:active { transform: translateX(-50%) translateY(1px); }

.calibrate-btn .cal-icon { font-size: 1.3rem; line-height: 1; }

.calibrate-btn.sensors-ok {
  color: #1a1e10;
  background: linear-gradient(180deg, #b8c47a 0%, var(--olive-ok) 55%, #3d4a28 100%);
  border-color: #3d4a28;
  box-shadow:
    inset 0 2px 0 rgba(230, 240, 200, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.5);
  animation: none;
}

.calibrate-btn.sensors-denied {
  color: #2a1008;
  background: linear-gradient(180deg, #c4785a 0%, var(--signal-red) 60%, #4a180e 100%);
  border-color: #4a180e;
  animation: none;
}

.calibrate-btn.hidden-fade {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-14px);
  pointer-events: none;
}

@keyframes calibrate-pulse {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(200,210,240,0.22), 0 4px 10px rgba(0,0,0,0.5); }
  50%      { box-shadow: inset 0 2px 0 rgba(200,210,240,0.28), 0 4px 16px rgba(42,61,143,0.4); }
}

/* ── Overlay de inicio: mesa náutica + bitácora ── */
#start-overlay {
  background: transparent;
  transition: opacity 0.7s ease;
}
#start-overlay.fading { opacity: 0; pointer-events: none; }

.start-desk {
  position: absolute;
  inset: 0;
  background: url('../assets/nautical-desk.png') center 42% / cover no-repeat;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.05);
  pointer-events: none;
}
.start-desk::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255, 200, 120, 0.18), transparent 32%),
    radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(8, 4, 2, 0.58) 100%),
    linear-gradient(180deg, rgba(10, 6, 3, 0.42) 0%, transparent 28%, transparent 68%, rgba(8, 4, 2, 0.55) 100%);
}

.start-frame {
  position: relative;
  z-index: 1;
  border: 2px solid rgba(42, 24, 10, 0.7);
  outline: 1px solid rgba(138, 109, 47, 0.45);
  border-radius: 2px;
  background:
    radial-gradient(circle 5px at 12px 12px, #e8c76a 0%, #4a3a18 55%, transparent 62%),
    radial-gradient(circle 5px at calc(100% - 12px) 12px, #e8c76a 0%, #4a3a18 55%, transparent 62%),
    radial-gradient(circle 5px at 12px calc(100% - 12px), #e8c76a 0%, #4a3a18 55%, transparent 62%),
    radial-gradient(circle 5px at calc(100% - 12px) calc(100% - 12px), #e8c76a 0%, #4a3a18 55%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 15% 20%, rgba(160, 100, 50, 0.1), transparent 50%),
    radial-gradient(ellipse 70% 50% at 90% 85%, rgba(80, 50, 25, 0.12), transparent 45%),
    linear-gradient(165deg, rgba(245, 230, 190, 0.94) 0%, rgba(220, 185, 120, 0.9) 50%, rgba(195, 155, 95, 0.88) 100%);
  box-shadow:
    0 0 0 1px rgba(201, 164, 106, 0.4),
    0 0 0 10px rgba(26, 14, 8, 0.45),
    0 22px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 50px rgba(90, 50, 20, 0.12);
  overflow: hidden;
  animation: frame-enter 0.85s ease-out both;
}
.start-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(26, 42, 92, 0.18);
  pointer-events: none;
}
.start-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    radial-gradient(circle at 18% 72%, rgba(120, 70, 30, 0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 22%, rgba(100, 60, 25, 0.14) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 88%, rgba(90, 55, 20, 0.12) 0 2px, transparent 3px);
}

.start-compass {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.4rem;
  opacity: 0.72;
  color: var(--ink-indigo);
}
.start-compass svg {
  width: 100%;
  height: 100%;
  display: block;
}

.title-glow {
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 245, 220, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  animation: title-breathe 4.5s ease-in-out infinite;
}
@keyframes title-breathe {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-1px); opacity: 0.92; }
}
@keyframes frame-enter {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.start-eyebrow {
  color: var(--ink-indigo);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}
.start-note {
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

/* ── Despacho interceptado (carta de pergamino) ── */
#terminal-overlay { background: rgba(18, 10, 5, 0.72); }
#terminal-overlay.open { display: flex; }

.terminal-frame {
  background:
    radial-gradient(ellipse 80% 60% at 20% 15%, rgba(160, 100, 50, 0.1), transparent 50%),
    linear-gradient(165deg, #f2e4c4 0%, #e4c89a 55%, #d2b07a 100%);
  border: 2px solid rgba(42, 24, 10, 0.7);
  outline: 1px solid rgba(138, 109, 47, 0.5);
  border-radius: 2px;
  box-shadow:
    0 0 0 8px rgba(26, 14, 8, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.65),
    inset 0 0 40px rgba(90, 50, 20, 0.1);
  animation: terminal-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  color: var(--ink-indigo);
}
.terminal-frame::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(26, 42, 92, 0.16);
  pointer-events: none;
}
.terminal-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    radial-gradient(circle at 22% 70%, rgba(120, 70, 30, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, rgba(100, 60, 25, 0.15) 0 1.5px, transparent 2.5px);
}

.terminal-header {
  color: var(--ink);
  border-bottom: 1px solid rgba(26, 42, 92, 0.22);
  background: rgba(138, 109, 47, 0.12);
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.terminal-header .font-terminal,
.terminal-header button {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: var(--ink-soft);
}
#terminal-body {
  color: var(--ink-indigo);
  text-shadow: none;
  position: relative;
  z-index: 1;
}

@keyframes terminal-pop {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Aparición de hojas al zarpar ── */
.ui-panel, #panel-controls {
  opacity: 0;
  transform: translateY(14px) rotate(-0.4deg);
}
body.sailing .ui-panel, body.sailing #panel-controls {
  animation: panel-reveal 0.7s ease-out forwards;
}
body.sailing .stagger-1 { animation-delay: 0.15s; }
body.sailing .stagger-2 { animation-delay: 0.35s; }
body.sailing .stagger-3 { animation-delay: 0.55s; }
body.sailing .stagger-4 { animation-delay: 0.75s; }
@keyframes panel-reveal {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ── Carta orbital ── */
#panel-map {
  bottom: 6.5rem;
  width: 268px;
  max-width: 72vw;
}
.map-head { cursor: pointer; }
.map-head .panel-title { margin-bottom: 0; }

.map-toggle {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(138, 109, 47, 0.18);
  border: 1px solid rgba(74, 58, 24, 0.55);
  border-radius: 2px;
  padding: 0 0.4rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease;
}
.map-toggle:hover  { filter: brightness(1.08); }
.map-toggle:active { transform: translateY(1px); }

.map-body {
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  margin-top: 0.4rem;
}
#panel-map.collapsed .map-body {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

#map-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(42, 24, 10, 0.45);
  border-radius: 2px;
  box-shadow: inset 0 0 10px rgba(60, 40, 15, 0.25);
  image-rendering: auto;
  background: var(--parchment);
}
.map-readout {
  margin-top: 0.3rem;
  color: var(--ink-indigo);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: none;
  transition: color 0.2s ease;
}
.map-readout.visible-now {
  color: var(--brass-dark);
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
  animation: readout-pulse 1.4s ease-in-out infinite;
}
@keyframes readout-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* ── Utilidades ── */
.touch-none { touch-action: none; }
#sky-canvas { cursor: grab; }
#sky-canvas.dragging { cursor: grabbing; }

/* ── Móvil: paneles compactos para no tapar el visor ── */
@media (max-width: 700px) {
  .ui-panel {
    padding: 0.3rem 0.45rem !important;
    box-shadow:
      inset 0 0 0 2px rgba(240, 226, 196, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.5);
  }

  .panel-title {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    margin-bottom: 0.12rem;
  }

  #panel-status,
  #panel-sats {
    top: 0.4rem !important;
    max-width: 42vw !important;
  }
  #panel-status { left: 0.4rem !important; }
  #panel-sats { right: 0.4rem !important; }

  #panel-status .font-terminal,
  #panel-sats .font-terminal,
  #panel-bearing .font-terminal,
  #sat-list {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }

  #panel-bearing {
    bottom: 0.4rem !important;
    left: 0.4rem !important;
    padding: 0.25rem 0.4rem !important;
  }
  #panel-bearing .font-terminal {
    font-size: 0.72rem !important;
  }

  #panel-controls {
    bottom: 0.4rem !important;
    right: 0.4rem !important;
    max-width: 56vw;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem !important;
    padding: 0.25rem !important;
  }

  .brass-btn {
    font-size: 0.58rem;
    padding: 0.2rem 0.35rem;
    letter-spacing: 0.02em;
  }

  #panel-star {
    bottom: 3.4rem !important;
    width: min(88vw, 16rem) !important;
    max-width: 88vw !important;
    padding: 0.35rem 0.55rem !important;
  }
  #panel-star .font-terminal.text-xs,
  #panel-star .font-terminal:first-of-type {
    font-size: 0.55rem !important;
    margin-bottom: 0.1rem !important;
  }
  #star-name {
    font-size: 0.95rem !important;
  }
  #star-constellation {
    font-size: 0.65rem !important;
  }
  #star-data {
    font-size: 0.58rem !important;
  }
  #star-lore {
    display: none;
  }

  #panel-map {
    left: 0.4rem !important;
    bottom: 3.2rem;
    width: 148px;
    max-width: 38vw;
  }
  #panel-map .map-readout {
    font-size: 0.58rem;
    margin-top: 0.15rem;
  }
  #panel-map .map-body {
    max-height: 90px;
    margin-top: 0.2rem;
  }

  .calibrate-btn {
    font-size: 0.72rem;
    padding: 0.28rem 0.7rem;
    top: max(0.4rem, env(safe-area-inset-top));
  }

  .terminal-frame {
    max-width: 94vw;
  }
  #terminal-body {
    height: 42vh !important;
    font-size: 0.75rem !important;
  }
  .terminal-header {
    font-size: 0.7rem;
    padding: 0.35rem 0.55rem !important;
  }
}