/* IT Terminal theme */
:root {
  --term-bg: #0a0e14;
  --term-green: #39ff14;
  --term-green-dim: #22c55e;
  --term-text: #e6edf3;
  --term-muted: #8b949e;
  --term-border: #21262d;
  --term-accent: #58a6ff;
}

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

html, body {
  background: var(--term-bg);
  color: var(--term-text);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

.app {
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  max-width: 420px;
  margin: 0 auto;
}

/* Terminal header bar */
.term-header {
  margin-bottom: 12px;
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #161b22;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--term-border);
  border-bottom: none;
}

.term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #484f58;
}

.term-dot:nth-child(1) { background: #ff5f57; }
.term-dot:nth-child(2) { background: #febc2e; }
.term-dot:nth-child(3) { background: #28c840; }

.term-title {
  margin-left: 8px;
  font-size: 12px;
  color: var(--term-muted);
}

.term-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 12px;
  background: #161b22;
  border: 1px solid var(--term-border);
  border-top: none;
  font-size: 12px;
}

.term-stats .stat {
  color: var(--term-muted);
}

.term-stats .stat b {
  color: var(--term-green);
  margin-left: 4px;
}

.stat-knowledge { display: flex; align-items: center; gap: 6px; }
.stat-bugs { display: flex; align-items: center; gap: 4px; color: #ef4444; }
.ico-bugs { display: inline-flex; width: 14px; height: 14px; color: #ef4444; }
.ico-bugs svg { width: 100%; height: 100%; }
.stat-level { color: var(--term-accent); font-size: 10px; margin-right: 4px; }
.ico-knowledge { display: inline-flex; width: 16px; height: 16px; color: var(--term-accent); }
.ico-knowledge svg { width: 100%; height: 100%; }
.btn-mute { background: none; border: none; color: var(--term-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
.boosts-row { display: flex; gap: 8px; padding: 6px 12px; background: #161b22; border: 1px solid var(--term-border); border-top: none; flex-wrap: wrap; }
.btn-boost { padding: 6px 10px; font-size: 11px; font-family: inherit; background: var(--term-green-dim); color: var(--term-bg); border: none; border-radius: 4px; cursor: pointer; }
.btn-boost.disabled { background: #21262d; color: var(--term-muted); cursor: default; }

.progress-block {
  padding: 8px 12px;
  background: #161b22;
  border: 1px solid var(--term-border);
  border-top: none;
}

.progress-text {
  font-size: 11px;
  color: var(--term-muted);
  margin-bottom: 4px;
}

.progress-bar {
  height: 6px;
  background: var(--term-border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--term-green);
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* Event overlay */
.event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
  border-radius: 0 0 8px 8px;
}
.event-banner {
  text-align: center;
  padding: 20px;
  color: var(--term-green);
}
.event-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.event-desc { font-size: 12px; color: var(--term-muted); }
.event-progress { font-size: 18px; margin-top: 8px; color: var(--term-green); }

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-content {
  background: #161b22;
  border: 1px solid var(--term-border);
  border-radius: 8px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
}
.modal-content h3 { margin-bottom: 12px; color: var(--term-green); font-size: 16px; }
.modal-content p { color: var(--term-muted); font-size: 13px; margin-bottom: 16px; }
.modal-content .term-btn { width: 100%; }

/* Missions */
.mission-cell { flex-wrap: wrap; }
.mission-progress { font-size: 11px; color: var(--term-green-dim); margin-top: 4px; }
.mission-timer { padding: 6px 12px; background: #161b22; border: 1px solid var(--term-border); border-top: none; font-size: 12px; color: var(--term-green-dim); }
.mission-cell-body { cursor: pointer; }
.modal-reward { color: var(--term-green); margin-bottom: 16px; }
.modal-buttons { display: flex; gap: 8px; }
.modal-buttons .term-btn { flex: 1; }
.term-btn-secondary { background: #21262d; color: var(--term-muted); }

/* Main terminal - tap area */
.terminal-wrap {
  position: relative;
  margin-bottom: 16px;
}

.terminal {
  position: relative;
  min-height: 180px;
  padding: 16px;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  border-radius: 0 0 8px 8px;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.terminal:active {
  background: #0d1117;
}

.terminal-lines {
  font-size: 11px;
  line-height: 1.7;
  color: var(--term-green);
  word-break: break-all;
}

.term-cmd, .term-output {
  opacity: 0;
  animation: lineIn 0.2s ease-out forwards;
}

.term-cmd {
  margin-bottom: 1px;
}

.term-output {
  color: var(--term-muted);
  font-size: 10px;
  margin-bottom: 6px;
  padding-left: 12px;
}

.term-output-red {
  color: #ef4444;
}

.term-output-yellow {
  color: #eab308;
}

@keyframes lineIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.prompt-inline {
  color: var(--term-green-dim);
  margin-right: 6px;
}

.terminal-prompt {
  margin-top: 8px;
  color: var(--term-green);
  font-size: 12px;
}

.prompt-user { color: var(--term-accent); }
.prompt-path { color: var(--term-green-dim); margin-right: 4px; }
.prompt-char { margin-right: 6px; }

.cursor-blink {
  animation: blink 1s step-end infinite;
}

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

/* Finger burst */
.burst-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.burst-item {
  position: absolute;
  color: var(--term-green);
  opacity: 0.9;
  animation: burstOut 0.5s ease-out forwards;
}

.burst-item svg {
  width: 24px;
  height: 24px;
}

@keyframes burstOut {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.3);
    opacity: 0;
  }
}

/* Tabs */
.term-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.term-tabs .tab {
  flex: 1;
  padding: 10px 12px;
  background: #161b22;
  color: var(--term-muted);
  border: 1px solid var(--term-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.term-tabs .tab.active {
  background: var(--term-bg);
  color: var(--term-green);
  border-color: var(--term-green-dim);
}

/* Panels */
.term-panel {
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.list { display: flex; flex-direction: column; gap: 6px; }

.term-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #161b22;
  border: 1px solid var(--term-border);
  border-radius: 6px;
  font-size: 13px;
}

.term-cell.done { border-left: 3px solid var(--term-green); }

.term-cell.reach { border-color: var(--term-green-dim); box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.2); }

.cell-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cell-icon-svg svg {
  width: 20px;
  height: 20px;
  color: var(--term-muted);
}

.term-cell.done .cell-icon-svg svg { color: var(--term-green); }

.cell-body { flex: 1; min-width: 0; }

.cell-title { color: var(--term-text); font-weight: 500; }

.cell-sub {
  font-size: 11px;
  color: var(--term-muted);
  margin-top: 2px;
}

.term-btn {
  padding: 8px 14px;
  min-height: 36px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  background: var(--term-green);
  color: var(--term-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.term-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.upgrade-cell.can-buy .term-btn {
  background: var(--term-green);
  color: var(--term-bg);
}

.upgrade-cell:not(.can-buy):not(.owned) .term-btn {
  background: #21262d;
  color: var(--term-muted);
}

.badge-svg {
  display: flex;
  align-items: center;
}

.badge-svg svg {
  width: 18px;
  height: 18px;
  color: var(--term-green);
}