* { box-sizing: border-box; }
body { margin:0; background:#0a0a0a; overflow:hidden; font-family: 'Courier New', monospace; color:#CC5500; }
canvas { display:block; cursor: crosshair; }

#ui { position:fixed; top:10px; left:10px; pointer-events:none; text-shadow:0 0 4px #000; font-size:12px; background: rgba(10,10,10,0.9); padding: 10px; border-left: 4px solid #8B4513; min-width: 220px; z-index: 100; }
.res { color:#B8860B; margin: 2px 0; }
.mod { color:#B8860B; margin: 2px 0; }
.crew { color:#A0522D; font-weight: bold; margin: 2px 0; }
.warning { color: #CC5500; animation: blink 0.8s infinite; font-weight: bold; }
.pirate { color: #A0522D; animation: blink 0.5s infinite; font-weight: bold; }
.xp-bar { background: #1a1a1a; height: 6px; margin: 4px 0; border: 1px solid #8B4513; }
.xp-fill { background: linear-gradient(90deg, #8B4513, #B8860B); height: 100%; transition: width 0.3s; }
@keyframes blink { 50% { opacity: 0.4; } }

#help { position:fixed; bottom:10px; left:10px; font-size:10px; opacity:0.8; background:rgba(10,10,10,0.9); padding:6px; border: 1px solid #2a2a2a; border-left: 3px solid #8B4513; z-index: 100; color:#888; }

#modal { position:fixed; inset:0; background: rgba(0, 0, 0, 0.7); display:none; align-items:center; justify-content:center; z-index:200; }
#modal .box { background:#0a0a0a; border:2px solid #8B4513; padding:20px; min-width:500px; max-width:95vw; max-height:95vh; overflow:auto; box-shadow: 0 0 30px rgba(139, 69, 19, 0.3); border-radius: 8px;}
#modal h2 { color:#FF8C00; margin-top:0; text-transform: uppercase; letter-spacing: 2px; border-bottom: 2px dashed #2a2a2a; padding-bottom: 8px; }
#modal button { background:#1a1a1a; color:#FF8C00; border:1px solid #8B4513; padding:8px 16px; margin:4px; cursor:pointer; font-family:inherit; font-weight:bold; text-transform: uppercase; transition: 0.2s; }
#modal button:hover { background:#8B4513; color:#0a0a0a; box-shadow: 0 0 10px #8B4513; }
#modal button:disabled { opacity:0.3; cursor:not-allowed; border-color:#333; color:#555; }
#modal input[type="text"], #modal input[type="number"] { background:#1a1a1a; border:2px solid #8B4513; color:#FF8C00; padding:12px; font-family:inherit; font-size:16px; width:100%; margin:10px 0; }

.recipe { background:#111; padding:10px; margin:6px 0; border-left: 3px solid #8B4513; display:flex; justify-content:space-between; align-items:center; }

#msg { position:fixed; top:20%; left:50%; transform:translate(-50%,-50%); color:#FF8C00; font-size:22px; font-weight:bold; text-shadow:0 0 15px #000; pointer-events:none; opacity:0; transition:opacity 0.3s; text-align:center; z-index: 200; }

#quest-log { position:fixed; top:10px; right:10px; background:rgba(10,10,10,0.9); border-right: 4px solid #A0522D; padding:10px; font-size:11px; max-width: 260px; z-index: 100; color:#c0c0c0; }

#minimap { position:fixed; bottom:10px; right:10px; border: 2px solid #8B4513; background: rgba(10,10,10,0.8); display: block; }

.ship-builder { display: flex; gap: 20px; flex-wrap: wrap; }
.ship-grid-container { flex: 1; min-width: 400px; }
.modules-panel { width: 300px; }

.ship-grid { display:grid; gap:3px; margin:10px auto; background:#1a1a1a; padding:15px; border:2px solid #2a2a2a; max-width: fit-content; }

.grid-cell { width:70px; height:70px; background:#0a0a0a; border:2px solid #2a2a2a; cursor:pointer; position: relative; transition: all 0.2s; display: flex; align-items: center; justify-content: center; }
.grid-cell:hover { border-color: #FF8C00; background:#1a1a1a; }
.grid-cell.occupied { border-color: #CC5500; background:#1a1510; }
.grid-cell canvas { image-rendering: pixelated; }

.module-item { padding: 10px; margin: 6px 0; background: #1a1a1a; border: 2px solid #8B4513; cursor: grab; display: flex; align-items: center; gap: 10px; transition: all 0.2s; }
.module-item:hover { background: #222; border-color: #FF8C00; }
.module-item:active { cursor: grabbing; }
.module-item.dragging { opacity: 0.5; }
.module-item canvas { image-rendering: pixelated; }

.energy-bar { background: #1a1a1a; height: 24px; border: 2px solid #8B4513; margin: 10px 0; position: relative; }
.energy-fill { background: linear-gradient(90deg, #8B4513, #CC5500); height: 100%; transition: width 0.3s; }
.energy-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: bold; color: #c0c0c0; text-shadow: 1px 1px 2px #000; }

.settings-btn { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: #1a1a1a; border: 2px solid #8B4513; color: #FF8C00; padding: 8px 16px; cursor: pointer; font-family: inherit; font-weight: bold; z-index: 100; }
.settings-btn:hover { background: #8B4513; color: #0a0a0a; }

.craft-section { margin-top: 20px; padding-top: 20px; border-top: 2px dashed #2a2a2a; }

.tooltip { position: fixed; background: rgba(10, 10, 10, 0.95); border: 2px solid #8B4513; padding: 10px; font-size: 11px; pointer-events: none; z-index: 300; max-width: 250px; display: none; color:#c0c0c0; }
.tooltip-title { color: #FF8C00; font-weight: bold; margin-bottom: 5px; }
.tooltip-desc { color: #888; margin-bottom: 5px; }
.tooltip-stats { color: #B8860B; }

#sector-map { position:fixed; inset:0; background:rgba(10,10,10,0.95); display:none; align-items:center; justify-content:center; z-index:250; }
#sector-map .map-container { background:#0a0a0a; border:2px solid #8B4513; padding:20px; width:90vw; height:90vh; position:relative; }
#sector-map canvas { border:1px solid #2a2a2a; cursor: crosshair; }
.sector-info { position:absolute; top:20px; right:20px; background:rgba(10,10,10,0.9); padding:15px; border:1px solid #8B4513; min-width:250px; color:#c0c0c0; }

.grid-cell.locked {
  background: #050505;
  border-color: #222;
  cursor: not-allowed;
  opacity: 0.4;
}
.grid-cell.locked:hover {
  background: #050505;
  border-color: #222;
}

/* Локальный сканер */
#local-scanner {
  position: fixed;
  bottom: 60px;
  left: 10px;
  background: rgba(0, 0, 0, 0);
  border-radius: 3px;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  pointer-events: none;
  z-index: 100;
  min-width: 180px;
  max-height: 600px;
}
#local-scanner .scanner-title {
  color: #FF8C00;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 13px;
  border-bottom: 1px dashed #8B4513;
  padding-bottom: 4px;
}
#local-scanner .scanner-players {
  color: #B8860B;
  margin-top: 5px;
  line-height: 1.4;
}
#local-scanner .scanner-count {
  color: #888;
  font-size: 11px;
}



/* Модалка информации о схеме корабля */
#modal[data-mode="ship-info"] .box {
  min-width: 700px !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-y: auto;
}

#modal[data-mode="ship-info"] img {
  max-width: 100%;
  height: auto;
}


















/* Тулбар */
#combat-toolbar {
  position: fixed; bottom: 60px; left: 210px;
  background: rgba(10, 10, 10, 0.9); border: 1px solid #8B4513;
  border-radius: 4px; padding: 10px; color: #c0c0c0; font-family: 'Courier New', monospace;
  font-size: 12px; pointer-events: none; z-index: 100; min-width: 150px;
}
.toolbar-section { margin-bottom: 8px; }
.toolbar-label { color: #FF8C00; font-size: 11px; margin-bottom: 3px; }
.toolbar-bar { background: rgba(26, 26, 26, 0.8); border: 1px solid #2a2a2a; border-radius: 2px; height: 20px; position: relative; overflow: hidden; }
.toolbar-fill { height: 100%; transition: width 0.3s; }
.hp-fill { background: linear-gradient(90deg, #A0522D, #CC5500); }
.shield-fill { background: linear-gradient(90deg, #8B4513, #FF8C00); }
.toolbar-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; color: #c0c0c0; text-shadow: 1px 1px 2px #000; }
.toolbar-icon { display: flex; align-items: center; gap: 8px; background: rgba(26, 26, 26, 0.8); border: 1px solid #2a2a2a; border-radius: 2px; padding: 5px 10px; }
.icon-rocket, .icon-mine { font-size: 18px; }
.icon-count { color: #FF8C00; font-weight: bold; font-size: 14px; }
.xp-fill {
  background: linear-gradient(90deg, #B8860B, #CC5500);
}
.energy-fill {
  background: linear-gradient(90deg, #8B4513, #CC5500);
}
.cargo-fill {
  background: linear-gradient(90deg, #8B4513, #B8860B);
}

/* Модальное окно - полупрозрачный фон */
#modal {
  background: rgba(0, 0, 0, 0.7);
}

/* Окно модалки */
#modal .box, #modalBox {
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid #8B4513;
}

/* Все кнопки - закругленные */
button {
  border-radius: 6px;
  transition: all 0.2s ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Базовые цвета кнопок */
button {
  background: rgba(139, 69, 19, 0.2);
  color: #FF8C00;
  border: 1px solid #8B4513;
  font-weight: 500;
  padding: 8px 16px;
}

button:hover:not(:disabled) {
  background: rgba(139, 69, 19, 0.4);
  border-color: #FF8C00;
}

/* Специфичные кнопки */
button[style*="background:#4f8"],
button[style*="background:#4cf"],
button[style*="background:#fa4"],
button[style*="background:#f33c40"],
button[style*="background:#a8f"] {
  border-radius: 6px;
  border: none;
  font-weight: 600;
}

/* Заголовки колонок */
h3 {
  color: #FF8C00;
  font-size: 14px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Блоки ресурсов */
div[style*="background:#1a1a1a"] {
  background: rgba(26, 26, 26, 0.8) !important;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
}

/* Инвентарь квадраты */
div[style*="width:18px"] {
  border-radius: 3px;
}

/* Верхняя панель чипов */
div[style*="background:#1a1a1a"][style*="border:1px solid #fa4"] {
  background: rgba(26, 26, 26, 0.9) !important;
  border-radius: 6px;
}

/* Кнопка вылета */
.exit-button {
  background: rgba(160, 82, 45, 0.2);
  color: #A0522D;
  border: 1px solid rgba(160, 82, 45, 0.5);
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.exit-button:hover {
  background: rgba(160, 82, 45, 0.4);
  border-color: #A0522D;
  transform: translateY(-1px);
}




/* Фиксированный минимальный размер модалок */
#modal .box {
  min-width: 800px !important;
  min-height: 500px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
}

#modal[data-mode="station-crafting"] .box {
  min-width: 1200px !important;
  min-height: 900px !important;
}

#modal[data-mode="station"] .box {
  min-width: 1200px !important;
  min-height: 900px !important;
}

/* Минимальный размер для конструктора */
#modal[data-mode="craft"] .box {
  min-width: 1200px !important;
  min-height: 900px !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
}

/* Сетка конструктора */
.ship-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Сетка корабля */
.ship-grid {
  display: grid;
  gap: 3px;
  padding: 15px;
  background: rgba(26, 26, 26, 0.8);
  border: 2px solid #333;
  border-radius: 8px;
}

/* Ячейки сетки */
.grid-cell {
  width: 70px;
  height: 70px;
  background: #0a0a0a;
  border: 2px solid #333;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-cell:hover {
  border-color: #FF8C00;
  background: #1a1a1a;
}

.grid-cell.occupied {
  border-color: #B8860B;
  background: #1a1510;
}

/* Модули в конструкторе */
.module-item.builder-module {
  padding: 10px;
  margin: 6px 0;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid #8B4513;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.module-item.builder-module:hover {
  background: rgba(42, 42, 42, 0.9);
  border-color: #FF8C00;
  transform: translateX(3px);
}

/* Поиск модулей */
#module-search {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid #8B4513;
  color: #FF8C00;
  font-family: monospace;
  border-radius: 4px;
}

/* Скролл для списка модулей */
#modules-list {
  max-height: 550px;
  overflow-y: auto;
  padding-right: 5px;
}

#modules-list::-webkit-scrollbar {
  width: 6px;
}

#modules-list::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.5);
  border-radius: 3px;
}

#modules-list::-webkit-scrollbar-thumb {
  background: #8B4513;
  border-radius: 3px;
}

#modules-list::-webkit-scrollbar-thumb:hover {
  background: #FF8C00;
}