/* Parallel Universe Theme - Futuristic Sci-Fi Styling */

:root {
  --primary-color: #DEF141; /* Parallel green */
  --text-color: #e6f7ff;
  --background-color: #0a0c16;
  --panel-bg: rgba(20, 30, 55, 0.8);
  --button-bg: rgba(30, 40, 70, 0.9);
  --neon-glow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
  --panel-border: 1px solid rgba(222, 241, 65, 0.3);
  --panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

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

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(to bottom, #000718 0%, #051036 100%);
  min-height: 100vh;
}

/* Game container - for Phaser */
#game-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Parallax universe effect */
.parallax-universe {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Main layout */
#page {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 15px;
  padding: 15px;
  min-height: 100vh;
  max-width: 1280px;
  margin: 0 auto;
}

#topDiv {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: 8px;
  padding: 10px 20px;
  position: relative;
  overflow: hidden;
}

#logo {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  position: relative;
}

#logo:before {
  content: "";
  position: absolute;
  top: 17px;
  left: 0;
  width: 40px;
  height: 20px;
  background: var(--primary-color);
  clip-path: path('M0.197151 17.3276C0.0678073 17.6009 -0.00492729 17.8975 -0.0166776 18.1996C-0.028428 18.5017 0.0210487 18.803 0.128776 19.0855C0.236504 19.368 0.400256 19.6257 0.610184 19.8433C0.820111 20.0609 1.07187 20.2337 1.35033 20.3514C1.62879 20.4692 1.92818 20.5294 2.23051 20.5284C2.53283 20.5275 2.83184 20.4654 3.10954 20.3459C3.38724 20.2263 3.6379 20.0519 3.84644 19.833C4.05498 19.6141 4.21709 19.3553 4.32302 19.0722L11.0186 3.45666C11.1485 3.16939 11.2157 2.85776 11.2158 2.54251C11.2168 2.02118 11.0361 1.51579 10.7047 1.1133C10.3734 0.710805 9.91214 0.43638 9.40032 0.337239C8.8885 0.238097 8.35813 0.320439 7.90047 0.570096C7.4428 0.819754 7.08646 1.22112 6.89275 1.70512L0.197151 17.3276Z');
}

#leftColumn, #middleColumn, #rightColumn {
  background: var(--panel-bg);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: 8px;
  padding: 15px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Typography */
h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 15px;
}

b {
  color: var(--primary-color);
  font-weight: 500;
}

/* Buttons */
.button-neon, .projectButton, .button2 {
  background: linear-gradient(to bottom, rgba(40, 50, 80, 0.9), rgba(20, 30, 55, 0.9));
  color: var(--primary-color);
  border: 1px solid rgba(222, 241, 65, 0.4);
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
}

.button-neon:before, .projectButton:before, .button2:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--primary-color), transparent);
  transition: all 0.5s ease;
}

.button-neon:hover:before, .projectButton:hover:before, .button2:hover:before {
  left: 100%;
}

.button-neon:hover, .button-neon:focus,
.projectButton:hover, .projectButton:focus,
.button2:hover, .button2:focus {
  background: linear-gradient(to bottom, rgba(50, 60, 100, 0.9), rgba(30, 40, 70, 0.9));
  box-shadow: 0 0 10px rgba(222, 241, 65, 0.5), 0 0 20px rgba(222, 241, 65, 0.2);
  text-shadow: 0 0 5px var(--primary-color);
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.button-neon:active, .projectButton:active, .button2:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(222, 241, 65, 0.7) inset;
}

/* Project button description */
.projectButton .description {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.9;
  color: #ddd;
}

/* Small buttons and button groups styling */
#investmentDiv1 .button2, 
#farmMultiButtons .button2, 
#batteryMultiButtons .button2,
#wireDroneMultiButtons .button2,
#harvesterMultiButtons .button2 {
  display: inline-block;
  width: auto;
  text-align: center;
  padding: 5px 10px;
  margin-right: 5px;
  font-size: 12px;
  border-radius: 3px;
  background: rgba(30, 40, 60, 0.9);
  border-color: rgba(222, 241, 65, 0.3);
}

/* Button with icon style */
.button2[id^="btnRaise"], .button2[id^="btnLower"] {
  width: auto;
  padding: 4px 8px;
  font-size: 13px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
  background: rgba(35, 45, 65, 0.9);
}

/* Futuristic Button Design for Special Actions */
.button2[id^="btnToggle"], 
.button2[id^="btnReboot"], 
#btnFeedSwarm, 
#btnTeachSwarm,
#btnEntertainSwarm,
#btnCladSwarm,
#btnSynchSwarm,
#btnQcompute {
  background: linear-gradient(135deg, rgba(40, 50, 80, 0.9), rgba(20, 30, 55, 0.9));
  border-left: 3px solid var(--primary-color);
  position: relative;
}

.button2[id^="btnToggle"]:after, 
.button2[id^="btnReboot"]:after, 
#btnFeedSwarm:after, 
#btnTeachSwarm:after,
#btnEntertainSwarm:after,
#btnCladSwarm:after,
#btnSynchSwarm:after,
#btnQcompute:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: rgba(222, 241, 65, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* HR styling */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary-color), transparent);
  margin: 10px 0;
}

/* Tooltip styling */
.toolTip, .toolTip2, .toolTip3 {
  position: relative;
}

.toolTipText, .toolTipText2, .toolTipText3 {
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  color: var(--primary-color);
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  white-space: nowrap;
}

.toolTip:hover .toolTipText,
.toolTip2:hover .toolTipText2,
.toolTip3:hover .toolTipText3 {
  visibility: visible;
  opacity: 1;
}

/* Modal Tooltip Styling */
.infoIcon {
  cursor: pointer;
  color: var(--primary-color);
  margin-left: 5px;
  /*font-size: 14px;*/
  font-weight: bold;
    font-size: large;
}

.modalTooltip {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(20, 30, 55, 0.95);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: 8px;
  padding: 15px;
  width: 300px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modalTooltip-content {
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.modalTooltip-title {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--primary-color);
  padding-bottom: 5px;
}

.modalTooltip-close {
  color: var(--primary-color);
  float: right;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.modalTooltip-close:hover {
  text-shadow: var(--neon-glow);
}

/* Glowing effects */
.glow-effect {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(222, 241, 65, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(222, 241, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(222, 241, 65, 0); }
}

/* Primary action button (Mine Asteroid) */
#btnMakePaperclip {
  background: linear-gradient(to bottom, rgba(60, 70, 100, 0.95), rgba(30, 40, 70, 0.95));
  border: 1px solid var(--primary-color);
  text-shadow: 0 0 5px var(--primary-color);
  box-shadow: 0 0 15px rgba(222, 241, 65, 0.3);
  font-size: 16px;
  text-align: center;
  letter-spacing: 1px;
  padding: 12px 20px;
  position: relative;
  overflow: visible; /* Changed from hidden to allow text to display fully */
  z-index: 1;
  width: 100%;
  min-width: 200px;
  max-width: 100%;
  min-height: 50px; /* Ensure enough height for the text */
  line-height: 1.5; /* Improve text spacing */
  display: flex;
  align-items: center;
  justify-content: center;
}

#btnMakePaperclip:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: linear-gradient(45deg, 
    transparent, transparent, transparent, 
    var(--primary-color), var(--primary-color), transparent,
    transparent, transparent);
  animation: neon-border 3s linear infinite;
}

@keyframes neon-border {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#btnMakePaperclip:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(60, 70, 100, 0.95), rgba(30, 40, 70, 0.95));
  z-index: -1;
  height: 100%;
}

#btnMakePaperclip:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(222, 241, 65, 0.5);
}

#btnMakePaperclip:active {
  transform: translateY(1px);
}

/* Media Queries for Mobile (Portrait) */
@media (max-width: 767px) {
  #page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 10px;
  }
  
  #leftColumn, #middleColumn, #rightColumn {
    max-height: none;
    width: 100%;
  }
  
  #topDiv {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  /* Ensure buttons are properly sized on mobile */
  .button2, .button-neon, .projectButton {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    text-align: center;
  }
  
  /* Fix for small buttons in button groups */
  #investmentDiv1 .button2, 
  #farmMultiButtons .button2, 
  #batteryMultiButtons .button2,
  #wireDroneMultiButtons .button2,
  #harvesterMultiButtons .button2 {
    width: auto;
    min-width: 50px;
  }
  
  /* Ensure Mine Asteroid button is large and prominent but keeps fancy effects */
  #btnMakePaperclip {
    font-size: 18px;
    padding: 15px;
    margin: 10px 0;
    background: linear-gradient(to bottom, rgba(60, 70, 100, 0.95), rgba(30, 40, 70, 0.95));
    border: 1px solid var(--primary-color);
    text-shadow: 0 0 5px var(--primary-color);
    box-shadow: 0 0 15px rgba(222, 241, 65, 0.3);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
  }
}

/* Select dropdown styling */
select {
  background: rgba(20, 30, 55, 0.9);
  color: var(--primary-color);
  border: 1px solid rgba(222, 241, 65, 0.4);
  border-radius: 4px;
  padding: 6px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%),
                    linear-gradient(135deg, var(--primary-color) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(1em + -3px),
                       calc(100% - 10px) calc(1em + -3px);
  background-size: 5px 5px,
                   5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}

select:hover, select:focus {
  box-shadow: 0 0 8px rgba(222, 241, 65, 0.4);
  border-color: var(--primary-color);
}

/* Console styling */
#consoleDiv {
  font-family: 'Courier New', monospace;
  background: rgba(10, 15, 30, 0.9);
  border: 1px solid rgba(222, 241, 65, 0.3);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 15px;
}

.console, .consoleOld {
  margin: 0;
  line-height: 1.5;
}

.console {
  color: var(--primary-color);
}

.consoleOld {
  color: rgba(222, 241, 65, 0.6);
  font-size: 0.9em;
}

#cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background-color: var(--primary-color);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(222, 241, 65, 0.8);
}

/* Canvas styling */
canvas {
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(222, 241, 65, 0.3);
  border-radius: 4px;
}