/* ============================================================
   Snowboarder-Minispiel "powder rush" (nur auf der Startseite)
   ------------------------------------------------------------
   Aufbau:
   - .score    = aeusserer Rahmen (Breite 100%, feste Hoehe, schneidet
                 alles Ueberstehende ab). Hier liegen Titel, Punktestand
                 und die Buttons -> diese werden NICHT mitskaliert und
                 bleiben darum immer scharf.
   - #game     = das eigentliche Spielfeld mit fester "Design-Groesse"
                 1000x500. Es wird per JavaScript so vergroessert/zentriert,
                 dass es den Rahmen immer ganz ausfuellt (wie bei
                 background-size: cover). So bleibt die Physik (feste
                 Pixelwerte) auf jedem Bildschirm gleich.
   ============================================================ */

.score {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  /* dezenter Schnee-Hintergrund, falls am Rand mal etwas durchscheint */
  background: #e9edf0;
}

/* Spielfeld in fester Design-Groesse; Positionierung macht JavaScript */
#game {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 500px;
  transform-origin: 0 0; /* damit unsere translate/scale-Werte aufgehen */

  background-image: url("../images/background.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Spielfigur (Snowboarder); Hoehe (bottom) wird per JS gesetzt */
#snowboarder {
  position: absolute;
  height: 180px;
  width: 150px;
  bottom: 100px;
  left: 425px; /* Mittelpunkt der Figur liegt bei x=500 = Design-Mitte */
  background-image: url("../images/snowboarder.webp");
  background-size: cover;
}

/* Hindernis (Ast); Position wird per JS gesetzt */
#stick {
  position: absolute;
  width: 100px;
  height: 100px;
  background-image: url("../images/stick.webp");
  background-size: cover;
  display: none; /* vor dem Start unsichtbar */
}

/* ------------------------------------------------------------
   Titel oben rechts auf der Szene
   ------------------------------------------------------------ */
.game__title {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 20;
  width: max-content; /* genau so breit wie der Text, sonst bricht der Titel um */
  text-align: right;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.game__title-kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  opacity: 0.85;
  margin-bottom: 2px;
}

.game__title-name {
  display: block;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 700;
}

/* ------------------------------------------------------------
   Punktestand oben mittig
   ------------------------------------------------------------ */
#score {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   Buttons im Stil der restlichen Seite (Pillen-Form, lowercase).
   Auf dem hellen Schnee wirken dunkle Buttons am besten.
   ------------------------------------------------------------ */
.game__btn {
  display: inline-block;
  font-size: 16px;
  text-align: center;
  padding: 11px 28px;
  border-radius: 999px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.game__btn:hover {
  background: #1c1c1c;
}

/* Start-Button mittig ueber dem Spielfeld */
.game__start {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* nur der Button selbst soll klickbar sein */
}

.game__start .game__btn {
  pointer-events: auto;
}

/* Jump-Button + Hinweis, unten mittig. Vor dem Start ausgeblendet. */
.game__jump {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: none; /* per JS auf "flex" gesetzt, sobald das Spiel laeuft */
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.game__hint {
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ------------------------------------------------------------
   Mobile: hochkant, mehr Hoehe, etwas kleinere Schrift
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .score {
    height: 78vh;
    min-height: 480px;
  }

  #score {
    font-size: 36px;
  }

  .game__title-name {
    font-size: 20px;
  }
}