/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px; /* Breite der Scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary); /* Hintergrundfarbe der Spur */
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-light); /* Farbe des Daumens */
  border-radius: 4px; /* Rundliche Ecken für den Daumen */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border); /* Farbe des Daumens beim Hover */
}

/* ===== GRUNDLEGENDE VARIABLEN ===== */
:root {
  /* Farbpalette */
  --color-bg-primary: #181c22;
  --color-bg-secondary: #23272e80;
  --color-bg-tertiary: #20232a;
  --color-bg-hover: #2a303a;
  --color-border: #2d323c;
  --color-border-light: #353b46;
  --color-text-primary: #e7eaf3;
  --color-text-secondary: #7ab7ff;
  --color-accent: #6a82fb;
  --color-accent-hover: #fc5c7d;

  /* Schatten */
  --shadow-sm: 0 1px 4px rgba(44, 62, 80, 0.07);
  --shadow-md: 0 2px 12px rgba(20, 20, 30, 0.11);
  --shadow-lg: 0 4px 24px rgba(20, 20, 30, 0.16);

  /* Abstände */
  --space-xs: 0.3rem;
  --space-sm: 0.7rem;
  --space-md: 1.2rem;
  --space-lg: 2rem;

  /* Rundungen */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* Übergänge */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;

  /* Zusätzliche Variablen aus zweiter Definition zusammengeführt */
  --primary-color: #2c3e50;
  --secondary-color: #34495e;
  --accent-color: #3498db;
  --background-color: #1a1a1a;
  --border-color: #2c3e50;
  --success-color: #2ecc71;
  --warning-color: #f1c40f;
  --danger-color: #e74c3c;
}

body[data-theme="amoled"] {
  --color-bg-primary: #000000;
  --color-bg-secondary: #05050580;
  --color-bg-tertiary: #0a0a0a;
  --color-bg-hover: #1a1a1a;
  --color-border: #121212;
  --color-border-light: #1c1c1c;
  --color-text-primary: #bbbbbb;
  --color-text-secondary: #5599ff;
  --color-accent: #4a6dfb;
  --color-accent-hover: #e45573;
  /* ... restliche Variablen je nach AMOLED anpassen */
}

body[data-theme="light"] {
  --color-bg-primary: #dbe6f2;
  --color-bg-secondary: #e5ecf480;
  --color-bg-tertiary: #f0f4fa;
  --color-bg-hover: #ccd9e9;

  --color-border: #c3cfdd;        
  --color-border-light: #d4dfe9;

  --color-text-primary: #1c2734;  
  --color-text-secondary: #3b5a78;

  --color-accent: #6a82fb;        
  --color-accent-hover: #fc5c7d;  
}

/* ===== GRUNDLEGENDE RESETS ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-bg-primary);
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text-primary);
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  all: unset;
  cursor: pointer;
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
}

/* ===== TYPOGRAFIE ===== */
h2, h3, h4 {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-xs);
  margin-bottom: 1.1em;
}

@media (max-width: 700px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
}

b, strong {
  color: var(--color-text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 1.02em;
}

p, span, label {
  color: var(--color-text-primary);
}

p.console {
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  font-size: 12px;
  color: white;
  margin-top: 0;
  text-align: left;
}

p.consoleOld {
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  font-size: 12px;
  color: grey;
  margin-bottom: 0;
}

p.hypnoDrone {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 150px;
  color: white;
  line-height: 115px;
  margin: 0;
}

p.clean, p.clean2, p.clean3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  margin: 0;
}

p.clean {
  margin-top: 1px;
}

p.clean3 {
  margin-bottom: 5px;
  margin-top: 2px;
}

/* ===== TRENNLINIEN ===== */
hr {
  display: block;
  margin: 1.2em 0;
  border: none;
  border-top: 1.5px solid var(--color-border);
  width: 85%;
}

hr.short {
  width: 225px;
  margin-left: 0;
}

.divider {
  border-top: 1px solid var(--color-border-light);
  margin: 1.2em 0;
  width: 100%;
}

/* ===== CONTAINER UND KARTEN ===== */
/* Grundlegende Container Stile */
.container, .card, .panel, .block, section,
#cover, #prestigeDiv, #consoleDiv, #giftShopDiv, #powerDiv, #creationDiv,
#factoryUpgradeDisplay,
#batterfaceDiv, #paperclipCountDiv, #cheatDiv, #saveDiv,
/* IDs basierend auf HTML-Snippets und ursprünglichen Containern */
#manufacturingDiv, #wireProductionDiv, #spaceDiv, #businessDiv, #compDiv, #projectsDiv,
#battleCanvasDiv, #honorDiv, #probeDesignDiv, #tournamentManagement,
/* IDs für Engine-Bereiche */
#investmentEngine, #strategyEngine, #creditDiv,
/* Spezifische Investment/Strategie Divs, die auch Container-Stile brauchen */
#stratDiv1, #stratDiv2 {
  background: var(--color-bg-secondary);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.1rem 1rem;
  margin: 1.3rem auto;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--color-border);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

/* Große Container mit speziellen Stilen */
.container, #cover, #prestigeDiv, #consoleDiv, #giftShopDiv, #powerDiv, #creationDiv,
#factoryUpgradeDisplay, #stratDiv1, #stratDiv2, #investmentEngine,
#batterfaceDiv {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  margin-bottom: 2.1rem;
  border-width: 1.5px;
}

/* Clearfix für Float-Elemente */
.container:after,
#leftColumn:after,
#middleColumn:after,
#rightColumn:after,
#topDIv:after,
#consoleDiv:after,
#investmentDiv1:after,
#investmentDiv2:after,
#stratDiv1:after,
#stratDiv2:after,
#autoTourneyStatusDiv:after,
#tourneyButton:after,
#autoTourneyControl:after,
.qEngine:after,
#vertPad:after,
#vertStrat:after,
#horizStrat:after,
#tournamentStuff:after,
#increaseProbeTrustDiv:after,
#increaseMaxTrustDiv:after {
  content: "";
  display: table;
  clear: both;
}

/* ===== HAUPTLAYOUT MIT GRID ===== */
#page {
  max-width: 1500px;
  margin: 0 auto; /* Zentriert die gesamte Seite */
  padding: 20px; /* Innenabstand */
  display: grid;
  grid-template-areas:
    "top top top"
    "paperclips paperclips paperclips"
    "left middle right";
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px; /* Abstand zwischen den Rasterelementen */
}

/* Anpassungen für Desktop-Ansicht (größer als 769px) */
@media screen and (min-width: 769px) {
  #leftColumn, #middleColumn, #rightColumn {
    margin: 0;
    padding: 20px;
    height: fit-content;
    background: transparent;
    box-shadow: none;
    border: none;
  }

  #page {
    grid-template-areas:
      "top top top"
      "paperclips paperclips paperclips"
      "left middle right";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  #leftColumn {
    margin-right: 10px;
  }

  #middleColumn {
    margin-left: 5px;
    margin-right: 5px;
  }

  #rightColumn {
    margin-left: 10px;
  }
}

/* Anpassungen für Mobile-Ansicht (unter oder gleich 768px) */
@media screen and (max-width: 768px) {
  #page {
    grid-template-areas:
      "top"
      "paperclips"
      "left"
      "middle"
      "right";
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }

  #topDiv {
    flex-direction: column;
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
  }

  #consoleDiv {
    margin: 0 auto 10px auto;
    max-width: 95%;
  }

  #leftColumn,
  #middleColumn,
  #rightColumn {
    margin: 10px auto;
    width: 100% !important;
    padding: 15px;
    max-width: 500px;
    background: transparent;
    box-shadow: none;
    border: none;
  }

  .button2 {
    width: 100%;
    margin: 5px 0;
  }

  .table1,
  .table2,
  .table3 {
    display: block;
    overflow-x: auto;
  }

  #investmentEngine .engineText,
  #strategyEngine .engineText {
    flex-direction: column;
    align-items: stretch;
  }

  #investmentEngine .engineText button,
  #strategyEngine .engineText button,
  #investmentEngine .engineText select,
  #strategyEngine .engineText select,
  #investmentEngine .engineText span,
  #strategyEngine .engineText span {
    margin: 5px 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* Mobile Anpassungen (kleiner oder gleich 700px) */
@media (max-width: 700px) {
  .main-container {
    flex-direction: column;
    align-items: center;
  }

  .container, #mobile-content, .card, .panel, .block, #leftColumn, #middleColumn, #rightColumn {
    padding: var(--space-sm) var(--space-xs);
    margin: var(--space-sm) auto;
    max-width: 98vw;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    float: none;
  }

  #leftColumn, #middleColumn, #rightColumn {
    width: 100%;
    margin: 0 auto;
    float: none;
    clear: both;
    background: transparent;
    box-shadow: none;
    border: none;
  }

  /* Anpassung für Elemente innerhalb der Spalten */
  #investmentDiv1, #investmentDiv2, #stratDiv1, #stratDiv2,
  #autoTourneyStatusDiv, #tourneyButton, #autoTourneyControl,
  #increaseProbeTrustDiv, #increaseMaxTrustDiv, #vertPad, #vertStrat, #horizStrat {
    width: 100% !important;
    float: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--space-sm);
    display: block !important;
    box-sizing: border-box;
    /* Ensure no inline-block or float issues */
    clear: both !important;
  }

  /* Anpassung der Button-Größen für mobile Geräte */
  button, .button, .button2, #btnAddProc, #btnAddMem, #processorDisplay button, #memoryDisplay button {
    min-width: 50% !important;
    width: 50% !important;
    min-height: 40px;
    padding: 0.5em 0.8em !important;
    margin: 5px auto;
    display: block;
  }

  .projectButton {
    width: 90% !important;
    max-width: 90% !important;
    min-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  #processorDisplay button, #memoryDisplay button {
    width: 50% !important;
    margin: 5px auto;
  }

  table.table1, table.table2, table.table3 {
    font-size: 0.9rem;
  }

  #victoryDiv {
    width: 100%;
  }

  #btnAddProc, #btnAddMem {
    width: 100%;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
  }

  #swarmSlider {
    width: 150px;
  }

  #sliderLabelThink {
    left: 160px;
  }

  /* Anpassung für Tabellen innerhalb von Containern */
  .container table, .card table, .panel table, .block table, section table,
  table.table1, table.table2, table.table3,
  #middleColumn table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    border-radius: var(--radius-sm); /* Einheitliche Rundung an allen Ecken */
    overflow: hidden; /* Inhalt innerhalb der Rundung halten */
  }
}

/* Stellt sicher, dass Section-Elemente in den Spalten ihre Container-Stile behalten */
#leftColumn section, #middleColumn section, #rightColumn section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  padding: 1.1rem 1rem; /* Anpassung des Paddings kann je nach Bedarf erfolgen */
  margin: 1.3rem auto; /* Anpassung des Margins kann je nach Bedarf erfolgen */
  /* Weitere Stile nach Bedarf hinzufügen */
}

/* ===== SPEZIFISCHE LAYOUTS FÜR GRID-BEREICHE ===== */
#consoleDiv {
  grid-area: top;
  background-color: #000;
  padding: 15px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-family: 'Courier New', monospace;
  color: #00ff00;
  text-align: left;
  overflow: hidden;
  width: 100%;
  max-width: none;
  float: none;
  clear: both;
}

#consoleDiv .pulsate {
  animation: blink 0.5s ease-in-out infinite;
}

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

#paperclipCountDiv {
  grid-area: paperclips;
  text-align: center;
  margin-bottom: 20px;
}

#leftColumn {
  grid-area: left;
}

#middleColumn {
  grid-area: middle;
}

#rightColumn {
  grid-area: right;
}

/* ===== BUTTONS ===== */
button, .button, .button2, .projectButton, select {
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  padding: 0.5em 1.25em;
  border-radius: var(--radius-sm);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  margin: 0.25em auto;
  letter-spacing: 0.01em;
  transition: all var(--transition-fast);
  min-width: 64px;
  min-height: 28px;
  display: inline-block;
}

select {
  padding: 0.5em; /* Etwas Padding für Dropdowns */
}

button:hover,
.button:hover,
.button2:hover,
.projectButton:hover, select:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

button:disabled, .button:disabled,
.button2:disabled, .projectButton:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--color-border-light);
}

.projectButton {
  border-radius: 0;
  display: block;
  height: 60px;
  width: 85%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  outline: none;
  margin: 0 auto 6px auto;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

@media (max-width: 700px) {
  .projectButton {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.projectButton:active {
  background: var(--color-accent);
}

#btnMakeProbe {
  margin-bottom: 2px;
}

#btnAddProc, #btnAddMem {
  width: 120px;
}

#btnAddProc {
  margin-bottom: 1px;
}

#btnEntertainSwarm, #btnSynchSwarm {
  margin: 4px 0;
}

/* ===== TABELLEN ===== */
table.table1, table.table2, table.table3 {
  table-layout: fixed;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.97rem;
  margin: 1em auto; /* Vertikalen Abstand etwas erhöhen und zentrieren */
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-secondary); /* Standard Hintergrund für Tabellen */
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm); /* Einheitliche Rundung an allen Ecken für alle Tabellen */
  overflow: hidden; /* Inhalt innerhalb der Rundung halten */
  color: var(--color-text-primary); /* Standard Textfarbe für Tabellen */
  display: table; /* Ändern von block zu table für bessere Zentrierung */
  text-align: center; /* Zentriere den Text in den Zellen */
}

table.table1 th, table.table1 td,
table.table2 th, table.table2 td,
table.table3 th, table.table3 td {
  padding: 0.9em 1.2em; /* Innenabstand erhöhen */
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.95rem; /* Schriftgröße leicht anpassen */
  text-align: center; /* Zentriere den Text in den Zellen */
}

/* Entferne die untere Border der letzten Zeile */
table.table1 tr:last-child td,
table.table2 tr:last-child td,
table.table3 tr:last-child td {
  border-bottom: none;
}

/* Hintergrund für gerade Zeilen */
table.table1 tr:nth-child(even),
table.table2 tr:nth-child(even),
table.table3 tr:nth-child(even) {
  background: var(--color-bg-tertiary); /* Hintergrund für gerade Zeilen */
}

/* Kopfzeile der Tabelle */
table.table1 th, table.table2 th, table.table3 th {
  background: var(--color-bg-primary); /* Dunklerer Hintergrund für Kopfzeile */
  color: var(--color-text-primary);
  font-weight: 600; /* Schriftgewicht erhöhen */
  text-align: center; /* Zentriere den Text in den Kopfzellen */
}

/* Hover-Effekt für Tabellenzeilen */
table.table1 tr:hover, table.table2 tr:hover, table.table3 tr:hover {
  background-color: var(--color-bg-hover); /* Hintergrund bei Hover */
  transition: background-color var(--transition-fast); /* Sanfter Übergang */
}

/* Spezifische Anpassung für Tabellen innerhalb von Containern */
/* Diese Regel ist breit gefasst und könnte ggf. Spezifitätsprobleme verursachen */
/* Sie wurde beibehalten, um das Layout nicht zu brechen */
.container table, .card table, .panel table, .block table, section table,
table.table1, table.table2, table.table3,
#middleColumn table {
  width: 100% !important;
  margin: 1em auto !important; /* Zentriere die Tabellen */
  box-sizing: border-box;
  border-radius: var(--radius-sm); /* Einheitliche Rundung an allen Ecken */
  overflow: hidden; /* Inhalt innerhalb der Rundung halten */
}

/* ===== SPEZIFISCHE ELEMENTE UND SEKTIONEN ===== */
/* Overlay für cover */
#cover {
  position: fixed;
  background-color: white;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#hypnoDroneEventDiv {
  float: left;
  background: black;
  width: 100%;
  text-align: center;
}

#topDIv {
  float: left;
  width: 100%;
  text-align: center;
}

/* Spalten Container */
#leftColumn,
#middleColumn,
#rightColumn {
  min-height: 120px;
  margin-top: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  float: none;
  clear: both;
  /* Hintergrund, Schatten, Rahmen für Spalten sind transparent/keine */
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Flex Container für Spalten (nicht das Grid Layout) */
/* .column-container scheint im aktuellen HTML nicht direkt die Spalten zu umschließen, */
/* sondern liegt separat im Code. Behalten es bei, falls es verwendet wird. */
.column-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1060px;
  width: 100%;
}

/* Investment und Strategie Bereiche */
/* Diese Divs liegen oft direkt in den Spalten und benötigen Container-Stile */
#investmentDiv1,
#stratDiv1 {
  float: none;
  display: inline-block;
  vertical-align: top;
  line-height: normal;
  box-sizing: border-box;
  text-align: center;
  width: auto;
  margin: 0 5px 0 0;
}

#investmentDiv2,
#stratDiv2 {
  float: none;
  display: inline-box;
  vertical-align: top;
  text-align: center;
  margin-top: 0;
  margin-left: 5px;
  box-sizing: border-box;
  width: auto;
}

/* Use flexbox for better control over button/display layout within these divs */
#investmentEngine .engineText,
#strategyEngine .engineText {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#investmentEngine .engineText button,
#strategyEngine .engineText button,
#investmentEngine .engineText select,
#strategyEngine .engineText select,
#investmentEngine .engineText span,
#strategyEngine .engineText span {
  margin: 5px;
}

.swarmEngine {
  margin-bottom: 5px;
}

.qEngine {
  margin-bottom: 10px;
  border: 1px solid var(--color-border-light);
  padding: 5px;
}

.qChip {
  width: 22px;
  height: 22px;
  margin: 2px 2px 7px 2px;
  background-color: black;
  float: left;
}

/* Engine Text Klassen */
.engineText, .engineText2 {
  margin: 0;
  line-height: 150%;
}

.engineText1 {
  margin: 0 0 0 5px;
}

.engineText3 {
  margin: 10px 0 0 5px;
  line-height: 150%;
}

.engineText4 {
  margin: 10px 0 0 5px;
}

.engineText5 {
  margin: 0 0 3px 0;
}

.engineText6, .engineText7 {
  margin: 0;
  vertical-align: bottom;
}

.engineText8 {
  margin: 3px 0 0 0;
}

.engineText9 {
  display: inline-block;
  margin-top: 1px;
}

.engineText10 {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: auto;
}

#processorDisplay button, #memoryDisplay button {
  width: 120px;
  margin: 0 5px 0 0;
  text-align: center;
  flex-shrink: 0;
}

#processorDisplay, #memoryDisplay {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-bottom: 5px;
  padding: 0;
  border: 0px solid transparent;
}

/* ===== TOOLTIPS ===== */
.toolTip, .toolTip2, .toolTip3 {
  position: relative;
  display: inline-block;
}

.toolTip .toolTipText,
.toolTip2 .toolTipText2,
.toolTip3 .toolTipText3 {
  visibility: hidden;
  min-width: 160px;
  background: var(--color-bg-secondary);
  color: #fff;
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  position: absolute;
  z-index: 10;
  opacity: 0;
  box-shadow: var(--shadow-md);
  font-size: 0.96em;
  transition: opacity var(--transition-normal);
  /* Positioniert den Tooltip über dem Element */
  bottom: 120%; /* Positioniert den Tooltip leicht über dem Element */
  left: 50%;
  transform: translateX(-50%); /* Zentriert den Tooltip */
}

/* Macht Tooltips sichtbar beim Hover */
.toolTip:hover .toolTipText,
.toolTip2:hover .toolTipText2,
.toolTip3:hover .toolTipText3 {
  visibility: visible;
  opacity: 1;
}

/* Pfeil für den Tooltip (zeigt nach unten zum Element) */
.toolTip .toolTipText::after,
.toolTip2 .toolTipText2::after,
.toolTip3 .toolTipText3::after {
  content: "";
  position: absolute;
  top: 100%; /* Positioniert den Pfeil am unteren Rand des Tooltips */
  left: 50%;
  margin-left: -5px; /* Zentriert den Pfeil */
  border-width: 5px; /* Größe des Pfeils */
  border-style: solid;
  border-color: var(--color-bg-secondary) transparent transparent transparent; /* Farbe des Pfeils (passend zum Hintergrund) */
}

/* Passt die Pfeilfarbe für den Rahmen an */
.toolTip .toolTipText::before,
.toolTip2 .toolTipText2::before,
.toolTip3 .toolTipText3::before {
    content: '';
    position: absolute;
    top: 100%; /* Positioniert den Pfeil am unteren Rand des Tooltips */
    left: 50%;
    margin-left: -6px; /* Zentriert den Pfeil, etwas breiter als der innere Pfeil */
    border-width: 6px;
    border-style: solid;
    border-color: var(--color-border-light) transparent transparent transparent; /* Farbe des Pfeilrahmens */
    z-index: 9; /* Stellt sicher, dass der Rahmen unter dem inneren Pfeil liegt */
}

/* Spezifische Tooltip Anpassungen */
.toolTip2 {
  margin-left: 2px;
  height: 20px;
  margin-top: 5px;
}

.toolTip3 {
  margin-bottom: 5px;
}

/* ===== BUTTON GRUPPEN UND SPEZIFISCHE ELEMENTE ===== */
#harvesterMultiButtons, #wireDroneMultiButtons, #farmMultiButtons, #batteryMultiButtons {
  margin-bottom: 2px;
}

#autoTourneyStatusDiv {
  float: left;
  width: 30px;
  box-sizing: border-box;
}

#tourneyButton {
  float: left;
  width: 120px;
  box-sizing: border-box;
}

#autoTourneyControl {
  float: left;
  width: 78px;
  box-sizing: border-box;
}

#tournamentStuff:after {
  content: "";
  display: table;
  clear: both;
}

#victoryDiv {
  margin: 10px auto 0 auto;
  width: 289px;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}

#increaseProbeTrustDiv {
  float: left;
  margin-left: 5px;
  border: 0;
  box-sizing: border-box;
}

#increaseMaxTrustDiv {
  float: left;
  width: 150px;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

#increaseProbeTrustDiv:after,
#increaseMaxTrustDiv:after {
  content: "";
  display: table;
  clear: both;
}

#combatButtonDiv {
  margin-top: 0;
}

#battleCanvasDiv {
  position: relative;
}

#battleInterfaceDiv {
  position: absolute;
  left: 15px;
  top: 8px;
}

canvas {
  display: block;
  margin: 0 auto 10px auto;
  width: 310px;
  max-width: 100%;
  height: 150px;
  background-color: #808080;
  box-sizing: border-box;
  text-align: center;
}

#investmentEngineUpgrade, #tournamentManagement {
  margin: 5px 5px 10px 5px;
}

#feedButtonDiv {
  margin-top: 5px;
}

/* Shop Element */
.shop {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: yellow;
  z-index: 1;
  padding: 3px 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: right;
}

/* Vertikale und horizontale Strategie Labels */
#vertPad {
  width: 35%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  box-sizing: border-box;
}

#vertStrat {
  float: right;
  text-align: center;
  width: 65%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  box-sizing: border-box;
}

#horizStrat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 56px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  box-sizing: border-box;
}

#qCompDisplay {
  margin-left: 3px;
}

/* Tournament Strategic Modeling Bereich */
#tournamentLabel {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    text-align: center;
    width: 100%; /* Stelle sicher, dass es die volle Breite einnimmt */
    cursor: pointer; /* Zeige an, dass der Text interaktiv ist */
}

/* Anpassung für den Inhalt von #tournamentStuff */
#tournamentStuff {
    display: flex; /* Flexbox für den Inhalt (Tabellen) */
    justify-content: center; /* Horizontal zentrieren */
    align-items: flex-start; /* Oben ausrichten */
    width: 100%; /* Volle Breite nutzen */
    flex-wrap: wrap; /* Erlaube Umbruch auf kleineren Bildschirmen */
    margin-bottom: var(--space-sm);
    min-height: 180px; /* Mindesthöhe festlegen, um Platz für den Grid/Ergebnisse zu reservieren - etwas erhöht*/
    position: relative; /* Behalte relative Positionierung als Kontext für eventuelle zukünftige absolute Elemente, aber die Tabellen selbst werden nicht absolut positioniert */
}

/* Positionierung und Sichtbarkeit von #tournamentTable (Payoff Grid) */
#tournamentTable {
  display: none; /* Standardmäßig versteckt */
  flex-direction: row; /* Standardmäßig nebeneinander */
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
  margin: 0 auto; /* Zentrieren im normalen Fluss */
  width: auto; /* Breite basierend auf Inhalt */
  max-width: 100%;
  background-color: var(--color-bg-secondary); /* Hintergrund für Payoff Grid Container */
  border-radius: var(--radius-sm); /* Rundung auch für den Container */
  overflow: hidden; /* Inhalt innerhalb der Rundung halten */
  /* Entferne absolute Positionierung */
  position: static;
  transform: none;
}

/* Zeige #tournamentTable an, wenn #tournamentLabel gehovert wird */
#tournamentLabel:hover + #tournamentStuff #tournamentTable {
    display: flex; /* Zeige als Flexbox an */
}

/* Positionierung und Sichtbarkeit von table.table3 (Ergebnisliste) - Standardmäßig sichtbar */
#tournamentResultsTable table.table3 {
    margin: 0 auto; /* Zentrieren im normalen Fluss */
    width: auto; /* Breite basierend auf Inhalt */
    max-width: 100%;
    background-color: transparent; /* Hintergrund transparent machen */
    border-radius: var(--radius-sm); /* Rundung */
    overflow: hidden; /* Inhalt innerhalb der Rundung halten */
    /* Entferne absolute Positionierung */
    position: static;
    transform: none;
    display: table; /* Standardmäßig als Tabelle anzeigen */
}

/* Verstecke table.table3, wenn #tournamentTable sichtbar ist (d.h. wenn #tournamentLabel gehovert wird) */
#tournamentLabel:hover + #tournamentStuff #tournamentResultsTable table.table3 {
    display: none; /* Verstecke Ergebnisliste */
}

#vertPad, #vertStrat, #horizStrat {
    /* Anpassungen für die Labels */
    width: auto; /* Breite automatisch anpassen */
    margin: var(--space-xs); /* Abstand hinzufügen */
    text-align: center;
}

/* Spezifische Anpassung für Tabellenzellen im Payoff Grid für Darkmode */
#strategyEngine table.table2 {
  border-radius: var(--radius-sm); /* Einheitliche Rundung an allen Ecken */
  margin: 0 auto; /* Zentrieren */
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  /* visibility wird jetzt über display gesteuert */
}

#strategyEngine table.table2 td {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.97rem;
}

/* Stelle sicher, dass der Hintergrund für gerade Zeilen im Payoff Grid korrekt angewendet wird */
#strategyEngine table.table2 tr:nth-child(even) td {
  background-color: var(--color-bg-tertiary) !important; /* Wende Hintergrundfarbe explizit an */
}

/* Stelle sicher, dass der Text innerhalb der Payoff-Zellen die richtige Farbe hat */
#strategyEngine table.table2 td span {
    color: var(--color-text-primary);
}

/* Überarbeitung des Strategic Modeling Bereichs */
#strategyEngine {
  display: flex; /* Flexbox für das Hauptlayout */
  flex-direction: column; /* Elemente untereinander anordnen */
  align-items: center; /* Horizontal zentrieren */
  padding: var(--space-md);
  margin: 1.3rem auto;
  width: 100%;
  max-width: 600px;
  background: var(--color-bg-secondary); /* Standard Hintergrund beibehalten */
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
}

/* Spezifische Stile für #investmentEngine und #strategyEngine nach den Änderungen */
#investmentEngine, #strategyEngine {
  /* background: rgba(231, 234, 243, 0.002); */
  /* backdrop-filter: blur(5px); */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  /* Rahmen und andere Container-Stile werden von der Haupt-Container-Regel geerbt */
}

#strategyEngine .engineText b {
    margin-bottom: var(--space-sm);
    display: block;
}

#strategyEngine .engineText select, #strategyEngine .engineText button {
    margin: 0 var(--space-xs);
    vertical-align: middle;
}

#tournamentManagement {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#tourneyButton button, #autoTourneyControl button {
    margin: var(--space-xs) 0;
}

#autoTourneyStatusDiv {
    margin-top: var(--space-xs);
}

#tournamentManagement .engineText8 {
    margin-top: var(--space-sm);
}