/* ==========================================
   Snipe-Seite spezifisches CSS
   Für: /snipe/ Seite (Überbieten & Sichern)
   ========================================== */

/* Snipe-Container: füllt verfügbaren Platz via .flex-1;
   bei zu kleinem Viewport wächst er über #content hinaus → dort scrollt.
   (Kein overflow hier, sonst interne Scrollbar statt #content-Scroll) */

/* Content: Vertikal und horizontal zentriert */
#snipeContent {
  padding: clamp(0.5rem, 2vmin, 1.5rem);
  justify-content: center;
  align-items: center;
}

/* Eingabebereich: Grid Layout - Standard 2 Spalten */
.snipe-inputs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.3rem, 1vmin, 0.8rem);
  width: 100%;
  margin: 0 auto;
}

/* Ergebnisbereich: Grid Layout (2 Spalten Landscape, 1 Spalte Portrait) */
#snipeResults {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.3rem, 1vmin, 0.8rem);
  
  margin: clamp(0.4rem, 1.5vmin, 1rem) auto ;
  width: 100%;
}

/* Ergebnis-Rows - Schriftgröße von card-row erben */
#snipeNeedFPRow,
#snipeNeedRewardRow {
  justify-content: center;
  flex-wrap: wrap;
}

/* Ergebnis-Werte */
#snipeNeedFP,
#snipeDiffFP,
#snipeNeedRewardF {
  font-weight: bold;
  min-width: 5ch;
  text-align: center;
  border-radius: var(--radius-md);
  padding: .1rem .5rem;
}

/* Klammern */
#snipeNeedFPBracket,
#snipeNeedFPBracketClose {
  padding: 0;
  margin: 0 0.1rem;
}

/* Wertgruppe "50 (+50)" – bleibt immer zusammen, kein Zeilenumbruch */
#snipeNeedFPValue {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================
   Responsive Anpassungen
   ========================================== */

/* Portrait: 1 Spalte für Eingaben UND Ergebnisse */
@media (orientation: portrait) {
  .snipe-inputs-grid {
    grid-template-columns: 1fr;
  }
  
  #snipeResults {
    grid-template-columns: 1fr;
  }
}