/* ============================================
   CHEMVENTUR v111 - ENVIRONMENT CSS
   😈 SUPER ENVIRONMENT STYLES! 😈
   ============================================ */

/* ===== ENVIRONMENT WINDOW ===== */
#env-window {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  max-height: 80vh;
  background: linear-gradient(135deg, #001100 0%, #002200 50%, #001100 100%);
  border: 4px solid var(--neon-green);
  border-radius: 15px;
  box-shadow: 0 0 60px var(--neon-green), inset 0 0 30px rgba(0, 255, 65, 0.1);
  padding: 20px;
  display: none;
  z-index: 500;
  overflow-y: auto;
}

#env-window.visible {
  display: block;
  animation: envSlideIn 0.3s ease-out;
}

@keyframes envSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#env-window h2 {
  text-align: center;
  color: var(--neon-green);
  margin-bottom: 20px;
  text-shadow: 0 0 20px var(--neon-green);
}

/* Close button for env window */
#env-window .close-env {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  font-size: 24px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

#env-window .close-env:hover {
  background: var(--neon-green);
  color: #000;
}

/* ===== ENV GRID ===== */
.env-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .env-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== ENV CELL ===== */
.env-cell {
  background: linear-gradient(135deg, #002200, #001500);
  border: 2px solid var(--neon-green);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.env-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px currentColor;
}

.env-cell .env-icon {
  font-size: 36px;
  margin-bottom: 5px;
}

.env-cell .env-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--neon-green);
}

.env-cell .env-value {
  font-size: 10px;
  color: #888;
  margin-top: 3px;
}

/* Cell border colors */
.env-cell.temp { border-color: #ff6600; }
.env-cell.press { border-color: #00ccff; }
.env-cell.grav { border-color: #ffff00; }
.env-cell.rad { border-color: #ff00ff; }
.env-cell.elec { border-color: #00ffff; }
.env-cell.mag { border-color: #ff0088; }
.env-cell.em { border-color: #88ff00; }
.env-cell.dm { border-color: #8800ff; }
.env-cell.cosm { border-color: #ff00aa; }
.env-cell.quantum { border-color: #00ffaa; }
.env-cell.rel { border-color: #ffff88; }
.env-cell.particle { border-color: #88ff00; }
.env-cell.astro { border-color: #ff8800; }
.env-cell.chem { border-color: #00ccff; }
.env-cell.bio { border-color: #ff00ff; }
.env-cell.geo { border-color: #ffff00; }

/* ===== CALC POPUP ===== */
.calc-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #001100, #002200);
  border: 3px solid var(--neon-green);
  border-radius: 12px;
  padding: 20px;
  z-index: 600;
  min-width: 350px;
  max-width: 450px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 0 40px var(--neon-green);
}

.calc-popup.visible {
  display: block;
  animation: calcPopIn 0.2s ease-out;
}

@keyframes calcPopIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.calc-popup h3 {
  text-align: center;
  color: var(--neon-green);
  margin-bottom: 15px;
  font-size: 18px;
}

/* Close calc button */
.calc-popup .close-calc {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--neon-green);
  font-size: 22px;
  cursor: pointer;
  transition: 0.2s;
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.calc-popup .close-calc:hover {
  color: #ff3333;
  transform: rotate(90deg);
}

/* ===== CALC ROWS ===== */
.calc-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  gap: 8px;
}

.calc-row label {
  flex: 0 0 120px;
  font-size: 11px;
  color: #aaa;
}

.calc-row input[type="number"],
.calc-row input[type="text"],
.calc-row select {
  flex: 1;
  background: #001100;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  padding: 5px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 11px;
}

.calc-row input[type="range"] {
  flex: 1;
}

.calc-row input[readonly] {
  background: #002200;
  border-color: #006600;
}

/* ===== CALC CHART ===== */
.calc-chart-container {
  text-align: center;
  margin: 15px 0;
}

.calc-chart {
  border: 2px solid var(--neon-green);
  border-radius: 50%;
  background: #000;
}

/* ===== CALC INFO ===== */
.calc-info {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0, 255, 65, 0.1);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* ===== APPLY BUTTON ===== */
.apply-env-btn {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  background: linear-gradient(135deg, #003300, #006600);
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.apply-env-btn:hover {
  background: var(--neon-green);
  color: #000;
  box-shadow: 0 0 20px var(--neon-green);
}

/* Slider sync with number */
.slider-sync {
  display: flex;
  gap: 5px;
}

.slider-sync input[type="range"] {
  flex: 2;
}

.slider-sync input[type="number"] {
  flex: 1;
  width: 60px;
}

/* Risk levels */
.risk-display {
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  margin-top: 5px;
}

.risk-safe { color: #00ff41; }
.risk-caution { color: #ffff00; }
.risk-danger { color: #ff3333; }
.risk-extreme { color: #ff00ff; }