/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: 'Segoe UI', system-ui, sans-serif; color: #e0e0e0; }
#game-container { position: relative; width: 100vw; height: 100vh; }
#game-canvas { display: block; width: 100%; height: 100%; }
.hidden { display: none !important; }

/* === LOADING === */
#loading {
  position: absolute; inset: 0; background: linear-gradient(135deg, #0a1628, #1a2a4a);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1000;
}
#loading h1 { font-size: 3rem; color: #4ecdc4; letter-spacing: 0.3em; margin-bottom: 2rem; }
.loading-bar { width: 300px; height: 4px; background: #1a3a5c; border-radius: 2px; overflow: hidden; }
.loading-fill { width: 0%; height: 100%; background: #4ecdc4; transition: width 0.3s; }
#loading p { margin-top: 1rem; color: #6a8caa; font-size: 0.9rem; }

/* === HUD === */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud-left { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
#hud-right { position: absolute; right: 20px; top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
#hud-bottom { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; }
#hud-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.instrument {
  background: rgba(10, 22, 40, 0.85); border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: 8px; padding: 8px 14px; min-width: 100px; backdrop-filter: blur(4px);
}
.inst-label { font-size: 0.65rem; color: #4ecdc4; letter-spacing: 0.15em; text-transform: uppercase; }
.inst-value { font-size: 1.6rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.inst-unit { font-size: 0.7rem; color: #6a8caa; }

/* Variometer bar */
.vario-bar-container {
  position: relative; width: 12px; height: 80px; background: rgba(255,255,255,0.1);
  border-radius: 6px; margin: 4px auto; overflow: hidden;
}
.vario-bar { position: absolute; left: 0; width: 100%; background: #4ecdc4; transition: all 0.15s; }
.vario-zero { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.4); }

/* Minimap */
#minimap { border-radius: 8px; border: 1px solid rgba(78,205,196,0.3); background: rgba(10,22,40,0.85); }

/* Warnings */
#stall-warning, #pull-up-warning {
  font-size: 2.5rem; font-weight: 900; color: #ff4757; animation: blink 0.5s infinite;
  text-shadow: 0 0 20px rgba(255,71,87,0.5);
}
@keyframes blink { 50% { opacity: 0.3; } }
#temp-warning { color: #ff6b35; font-size: 0.7rem; font-weight: 700; margin-top: 4px; animation: blink 0.8s infinite; }
#mission-info { color: #4ecdc4; font-size: 0.85rem; background: rgba(10,22,40,0.75); padding: 6px 16px; border-radius: 6px; }
#biome-info { color: #6a8caa; font-size: 0.7rem; margin-top: 4px; }

/* === LANDED MENU === */
#landed-menu {
  position: absolute; inset: 0; background: rgba(6, 12, 24, 0.92);
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px; overflow-y: auto; z-index: 100; backdrop-filter: blur(8px);
}
#menu-header { text-align: center; margin-bottom: 24px; }
#menu-header h1 { font-size: 2.2rem; color: #4ecdc4; letter-spacing: 0.25em; margin-bottom: 8px; }
#airport-info { display: flex; gap: 24px; font-size: 1rem; }
#airport-name { color: #c0d0e0; }
#player-money { color: #ffe66d; font-weight: 700; }

/* Tabs */
#menu-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; }
.tab-btn {
  background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.2);
  color: #6a8caa; padding: 10px 24px; border-radius: 6px; cursor: pointer;
  font-size: 0.9rem; transition: all 0.2s; font-family: inherit;
}
.tab-btn:hover { background: rgba(78,205,196,0.2); color: #4ecdc4; }
.tab-btn.active { background: rgba(78,205,196,0.25); color: #4ecdc4; border-color: #4ecdc4; }

/* Tab Content */
#tab-content { width: 100%; max-width: 700px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel h2 { color: #4ecdc4; font-size: 1.2rem; margin-bottom: 16px; text-align: center; }

/* Launch */
.launch-options { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.launch-btn {
  background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.3);
  border-radius: 10px; padding: 20px 32px; cursor: pointer; transition: all 0.2s;
  min-width: 200px; text-align: center;
}
.launch-btn:hover { background: rgba(78,205,196,0.25); transform: translateY(-2px); }
.launch-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.launch-desc { font-size: 0.8rem; color: #6a8caa; }
#cargo-summary { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 16px; margin-top: 12px; }
#cargo-summary h3 { font-size: 0.9rem; color: #4ecdc4; margin-bottom: 8px; }
#cargo-list { font-size: 0.85rem; color: #a0b0c0; }
#plane-weight { font-size: 0.8rem; color: #6a8caa; margin-top: 8px; }

/* Market */
#market-grid { display: grid; gap: 8px; }
.market-row {
  display: grid; grid-template-columns: 1fr 80px 80px 60px 60px;
  gap: 8px; align-items: center; padding: 10px 14px;
  background: rgba(255,255,255,0.03); border-radius: 6px; font-size: 0.85rem;
}
.market-row.header { color: #4ecdc4; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.market-commodity { color: #e0e0e0; }
.market-buy, .market-sell { color: #a0b0c0; }
.market-btn {
  background: rgba(78,205,196,0.15); border: 1px solid rgba(78,205,196,0.3);
  color: #4ecdc4; border-radius: 4px; padding: 4px 8px; cursor: pointer;
  font-size: 0.75rem; font-family: inherit; transition: all 0.15s;
}
.market-btn:hover { background: rgba(78,205,196,0.3); }
.market-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Missions */
#mission-list { display: flex; flex-direction: column; gap: 10px; }
.mission-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 14px; cursor: pointer; transition: all 0.2s;
}
.mission-card:hover { border-color: rgba(78,205,196,0.3); }
.mission-card.accepted { border-color: #4ecdc4; background: rgba(78,205,196,0.08); }
.mission-type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
.mission-type.standard { background: rgba(78,205,196,0.2); color: #4ecdc4; }
.mission-type.urgent { background: rgba(255,107,53,0.2); color: #ff6b35; }
.mission-type.cold-chain { background: rgba(100,149,237,0.2); color: #6495ed; }
.mission-dest { font-size: 1rem; font-weight: 600; color: #e0e0e0; margin-bottom: 4px; }
.mission-details { font-size: 0.8rem; color: #6a8caa; }
.mission-reward { font-size: 1rem; font-weight: 700; color: #ffe66d; margin-top: 6px; }
.mission-timer { font-size: 0.75rem; color: #ff6b35; }

/* Builder */
#builder-grid { display: flex; flex-direction: column; gap: 20px; }
.builder-section h3 { font-size: 0.85rem; color: #4ecdc4; margin-bottom: 8px; }
.part-options { display: flex; gap: 8px; flex-wrap: wrap; }
.part-btn {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 12px 16px; cursor: pointer; transition: all 0.2s;
  min-width: 140px; font-family: inherit;
}
.part-btn:hover { border-color: rgba(78,205,196,0.3); }
.part-btn.selected { border-color: #4ecdc4; background: rgba(78,205,196,0.1); }
.part-name { font-size: 0.9rem; color: #e0e0e0; font-weight: 600; }
.part-stats { font-size: 0.7rem; color: #6a8caa; margin-top: 4px; line-height: 1.4; }
.part-cost { font-size: 0.8rem; color: #ffe66d; margin-top: 4px; }
#builder-stats {
  margin-top: 16px; padding: 14px; background: rgba(78,205,196,0.05);
  border-radius: 8px; border: 1px solid rgba(78,205,196,0.15); font-size: 0.85rem;
}

/* Restart */
.danger-btn {
  background: rgba(255,71,87,0.15); border: 1px solid rgba(255,71,87,0.3);
  color: #ff4757; padding: 12px 32px; border-radius: 8px; cursor: pointer;
  font-size: 1rem; font-family: inherit; transition: all 0.2s;
}
.danger-btn:hover { background: rgba(255,71,87,0.3); }

/* === NOTIFICATION === */
#notification {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(10,22,40,0.92); border: 1px solid rgba(78,205,196,0.4);
  color: #e0e0e0; padding: 12px 28px; border-radius: 8px; font-size: 0.9rem;
  z-index: 200; backdrop-filter: blur(4px); transition: opacity 0.3s;
  pointer-events: none;
}
#notification.error { border-color: rgba(255,71,87,0.5); color: #ff4757; }
#notification.success { border-color: rgba(78,205,196,0.5); color: #4ecdc4; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(78,205,196,0.3); border-radius: 3px; }