/* TREASURE GRID — Matrix Cyber Aesthetic */

:root {
  --bg: #000000;
  --primary: #00ff41;
  --secondary: #003300;
  --text: #00ff88;
  --text-dim: #00aa55;
  --glow: rgba(0, 255, 65, 0.6);
  --glow-strong: rgba(0, 255, 65, 0.9);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* Scanline animation */
.scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow), 0 0 20px var(--glow);
  animation: scan 4s linear infinite;
  z-index: 9999;
  pointer-events: none;
}

@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

/* Globe container */
#globe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Terminal HUD Panel */
.terminal-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 280px;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--primary);
  box-shadow: 0 0 15px var(--glow), inset 0 0 20px rgba(0, 255, 65, 0.05);
  font-family: 'Share Tech Mono', monospace;
  z-index: 100;
}

.terminal-header {
  padding: 10px 14px;
  background: var(--secondary);
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--primary);
}

.blink {
  animation: blink 1s step-end infinite;
  color: var(--primary);
}

@keyframes blink {
  50% { opacity: 0; }
}

.terminal-body {
  padding: 14px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--text);
}

.terminal-line {
  margin-bottom: 4px;
}

.terminal-line span {
  color: var(--primary);
  text-shadow: 0 0 5px var(--glow);
}

/* Create Signal Panel */
.create-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 260px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--primary);
  box-shadow: 0 0 15px var(--glow), inset 0 0 20px rgba(0, 255, 65, 0.03);
  z-index: 100;
}

.panel-header {
  padding: 10px 14px;
  background: var(--secondary);
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--primary);
}

#create-signal-form {
  padding: 14px;
}

#create-signal-form label {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 10px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

#create-signal-form input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 20, 0, 0.8);
  border: 1px solid var(--secondary);
  color: var(--primary);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
}

#create-signal-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--glow);
}

#create-signal-form button {
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  background: var(--secondary);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
}

#create-signal-form button:hover {
  background: rgba(0, 255, 65, 0.15);
  box-shadow: 0 0 15px var(--glow);
}

/* Capture notification */
.capture-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid var(--primary);
  box-shadow: 0 0 30px var(--glow), inset 0 0 20px rgba(0, 255, 65, 0.1);
  z-index: 500;
  animation: pulse-border 0.5s ease-in-out 3;
}

.capture-notification.hidden {
  display: none !important;
}

.capture-notification:not(.hidden) {
  display: block;
}

.capture-title {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color: var(--primary);
  text-shadow: 0 0 10px var(--glow);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.capture-clue {
  font-size: 12px;
  color: var(--text);
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 30px var(--glow), inset 0 0 20px rgba(0, 255, 65, 0.1); }
  50% { box-shadow: 0 0 50px var(--glow-strong), inset 0 0 30px rgba(0, 255, 65, 0.2); }
}

/* Clue tooltip */
.clue-tooltip {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 400px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--primary);
  box-shadow: 0 0 20px var(--glow);
  z-index: 200;
  overflow: hidden;
}

.clue-tooltip .clue-content {
  position: relative;
  z-index: 2;
}

.clue-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Seasonal effects - snow (arctic, cold) */
.clue-tooltip .flake {
  position: absolute;
  top: -10px;
  left: var(--x, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: snow-fall 4s linear var(--delay, 0s) infinite;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.clue-tooltip.arctic .flake { opacity: 0.95; }
.clue-tooltip.arctic { border-color: #87CEEB; box-shadow: 0 0 20px rgba(135, 206, 235, 0.3); }
.clue-tooltip.cold .flake { opacity: 0.7; }

@keyframes snow-fall {
  0% { transform: translateY(0) translateX(0); opacity: 0.9; }
  100% { transform: translateY(120%) translateX(15px); opacity: 0.3; }
}

/* Autumn leaves (temperate) */
.clue-tooltip .leaf {
  position: absolute;
  top: -12px;
  left: var(--x, 50%);
  width: 8px;
  height: 10px;
  background: linear-gradient(135deg, #8B4513 0%, #CD853F 50%, #D2691E 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(var(--rot, 0deg));
  animation: leaf-fall 5s ease-in-out var(--delay, 0s) infinite;
}

@keyframes leaf-fall {
  0% { transform: translateY(0) rotate(var(--rot, 0deg)) translateX(0); }
  25% { transform: translateY(30%) rotate(calc(var(--rot) + 45deg)) translateX(8px); }
  50% { transform: translateY(60%) rotate(calc(var(--rot) + 90deg)) translateX(-5px); }
  100% { transform: translateY(120%) rotate(calc(var(--rot) + 180deg)) translateX(10px); }
}

/* Cherry blossom / petals (subtropical) */
.clue-tooltip .petal {
  position: absolute;
  top: -10px;
  left: var(--x, 50%);
  width: 6px;
  height: 8px;
  background: radial-gradient(ellipse, #FFB7C5 0%, #E8A0BF 100%);
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  animation: petal-drift 6s ease-in-out var(--delay, 0s) infinite;
}

@keyframes petal-drift {
  0% { transform: translateY(0) rotate(45deg) translateX(0); opacity: 0.9; }
  100% { transform: translateY(120%) rotate(90deg) translateX(20px); opacity: 0.4; }
}

/* Rain (tropical) */
.clue-tooltip.tropical { border-color: #00ff88; box-shadow: 0 0 25px rgba(0, 255, 136, 0.25); }

.clue-tooltip .drop {
  position: absolute;
  top: -8px;
  left: var(--x, 50%);
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0, 255, 200, 0.6), rgba(0, 200, 255, 0.3));
  border-radius: 1px;
  animation: rain-fall 1.2s linear var(--delay, 0s) infinite;
}

@keyframes rain-fall {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(130%); opacity: 0.2; }
}

.clue-tooltip.hidden {
  display: none !important;
}

.clue-header {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.clue-body {
  font-size: 13px;
  color: var(--text);
}

.clue-section {
  margin-bottom: 12px;
}

.clue-section:last-child {
  margin-bottom: 0;
}

.clue-section strong {
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 1px;
}

.clue-click-hint {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: normal;
}

/* Completed signals panel */
.completed-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--primary);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.completed-panel.hidden {
  display: none !important;
}

.completed-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

.completed-list.hidden {
  display: none !important;
}

.completed-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(0, 20, 0, 0.6);
  border: 1px solid var(--primary);
  box-shadow: 0 0 10px var(--glow);
  color: var(--text);
  font-size: 12px;
}

.completed-item .completed-section {
  margin-bottom: 12px;
}

.completed-item .completed-section:last-child {
  margin-bottom: 0;
}

.completed-item .completed-section strong {
  display: block;
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 5px var(--glow);
}

.completed-item .completed-section .section-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.completed-item .completed-section.notes .section-content {
  color: var(--text-dim);
  font-size: 12px;
}

.completed-empty {
  padding: 24px;
  color: var(--text-dim);
  text-align: center;
  font-size: 13px;
}

.completed-empty.hidden {
  display: none !important;
}

/* Mobile navigation */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  border-top: 1px solid var(--primary);
  z-index: 120;
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  justify-content: center;
}

.mobile-tab {
  flex: 1;
  max-width: 120px;
  padding: 12px 8px;
  min-height: 48px;
  background: var(--secondary);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab.active {
  background: rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 10px var(--glow);
}

#completed-count {
  display: inline-block;
  margin-left: 4px;
  background: var(--primary);
  color: var(--bg);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
}

/* ============== MOBILE RESPONSIVE ============== */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex;
  }

  .terminal-panel,
  .create-panel {
    top: env(safe-area-inset-top);
    left: 10px;
    right: 10px;
  }

  /* On mobile, panels hidden until tab selects them */
  .terminal-panel.mobile-hidden,
  .create-panel.mobile-hidden {
    display: none !important;
  }

  /* Globe gets full height minus nav */
  #globe-container {
    bottom: 70px;
    bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .terminal-panel {
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 45vh;
    overflow-y: auto;
  }

  .create-panel {
    top: env(safe-area-inset-top);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 90px - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

.completed-panel .panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.return-globe-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  min-height: 44px;
  background: var(--secondary);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.return-globe-btn:hover {
  background: rgba(0, 255, 65, 0.15);
  box-shadow: 0 0 10px var(--glow);
}

.completed-panel {
  padding-bottom: env(safe-area-inset-bottom);
}

  /* Larger touch targets for create form */
  #create-signal-form input,
  #create-signal-form button {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 16px; /* prevents zoom on focus (iOS) */
  }

  /* Capture notification - fit mobile */
  .capture-notification {
    left: 12px;
    right: 12px;
    bottom: 90px;
    transform: none;
    padding: 16px 20px;
  }

  /* Clue tooltip - full width, larger tap target */
  .clue-tooltip {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 90px;
    transform: none;
    padding: 20px;
  }

  .clue-tooltip .clue-body {
    font-size: 15px;
    line-height: 1.5;
  }

  .clue-tooltip .clue-click-hint {
    display: block;
    margin-top: 8px;
  }

  /* Improve tap targets for signal details close */
  #globe-container {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .terminal-header,
  .panel-header {
    font-size: 10px;
  }

  .terminal-body {
    font-size: 10px;
  }

  .mobile-tab {
    font-size: 10px;
    padding: 10px 4px;
  }
}