body {
  margin-top: 10vh;
  font-family: Arial, sans-serif;
  text-align: center;
  background: #0f0f27;
  color: white;
  background-image: url(media/bg/doodle7.webp);
  font-weight: bold;
}

.game {
  max-width: 700px;
  min-width: 500px;
  margin: auto;
}

.bild-container {
  width: 100%;
  height: 700px;
  border-radius: 10px;
  overflow: hidden;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

select, button {
  padding: 0.5rem 1rem;          /* feste, skalierbare Einheit */
  padding-top: 1vh;
  padding-bottom: 1vh;
  font-size: 16px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

#nameSelect {
  padding: 0.5rem 1rem;          /* feste, skalierbare Einheit */
  padding-top: 1vh;
  padding-bottom: 1vh;
  font-size: 16px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  background-color: #ffffff;
}


button {
  background: #5865f2;
  color: white;
  cursor: pointer;
  width: auto;
}

/* merged confirmation/next button */
#actionBtn {
    background-color: #FF7A18;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.05s;
    /* ensure the button doesn't shrink when text changes */
    min-width: 12ch; /* wide enough for the longer label */
}

#actionBtn:hover {
    background-color: #E5670F;
}

/* other button styles (general rules above) still apply */

/* flex container for controls under the image */
.controls {
    display: flex;
    justify-content: space-between;   /* Abstand zwischen den Items */
    align-items: center;             /* ↖ zentriert beide Elemente vertikal */
    gap: 0;                           /* Abstand entfällt, wird durch Breiten gesteuert */
}

.controls > * {          /* sowohl select als auch button */
    flex: 0 1 50%;                /* je 50 % der Container‑Breite */
    max-width: 50%;               /* verhindert Überlauf */
    margin: 0;                    /* kein zusätzlicher Raum */
    box-sizing: border-box; /* Padding zählt zur Breite */
}

#nameSelect,
#actionBtn {
    /* gleiche Höhe definieren, z.B. 3em */
    height: 3em;
}

/* optional: maximalbreite des .game-Containers festlegen */
.game {
    max-width: 700px;
    min-width: 500px;
    margin: auto;
}

img {
    width: 100%;
}

/* für etwas Abstand unter dem Bild: */
.controls { margin-top: 1rem; }

*, *::before, *::after { box-sizing: border-box; }

#result {
  font-size: 40px;
}

#uploadLink {
  position: fixed;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s;
}

#uploadLink:hover {
  background: rgba(255, 255, 255, 0.2);
}

#kontextBtn {
  position: fixed;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  text-decoration: none;
  padding: 8px 16px !important;
  border-radius: 8px;
  font-size: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s;
  width: auto !important;
  margin: 0 !important;
}

#kontextBtn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}