/* =========================================================
   BASE / RESET
========================================================= */

@font-face {
  font-family: 'apercu-regular';
  src: url('/assets/fonts/apercu_regular.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'apercu-bold';
  src: url('/assets/fonts/apercu_bold.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'apercu-light';
  src: url('/assets/fonts/apercu_bold.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: 'apercu-regular';
}

body {
  margin: 0;
  font-family: sans-serif;
  color: #000;
}

.wrap {
  text-align: center;
  margin-top: 40px;
}

.btn {
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn.btn-secondary {
  background: #000;
  color: #fff;
}

.btn.btn-gray {
  background: #555;
  color: #fff;
}

.game .btn-gray {
  cursor: not-allowed
}

.btn.btn-orange {
  background: #f59e0b;
  color: #111;
}

.btn.btn-green {
  background: #16a34a;
  color: #fff;
}

.btn.btn-purple {
  background-color: #8874af;
}

.btn.btn-green:disabled,
.btn.btn-orange:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.btn-gray {
  background: #ddd;
  color: #333;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
}

.hidden {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: 'apercu-bold';
}

/* =========================================================
   OVERLAYS / PANELS
========================================================= */
/* Overlay für QR-Code (und allgemein) */
.overlay {
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 1000;
  height: 100%;
  width: 100%;
}

.panel {
  padding: 20px;
  text-align: center;
  /* Panel minimal breiter auf Desktop */
  max-width: 520px;
}

/* optional: QR/Status-Overlay respektiert Notch */
.overlay .panel {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Ergebnis-Overlay */
#resultOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 2000;
  display: none;
  /* .hidden aktiviert/deaktiviert es */
  overflow-y: auto;
}

#resultOverlay:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#resultOverlay .panel {
  background-color: #E4F5F8 !important;
  /* hellblauer Hintergrund wie im Spiel */
  border-radius: 20px;
  max-width: 1140px;
  /* Containerbreite */
  width: 100%;
  text-align: center;
}

/* Optional: sanftes Einblenden */
#resultOverlay:not(.hidden) {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Farben */
.btn-purple {
  background-color: #7D61B8;
  border: 3px solid #7D61B8;
  color: white;
  border: none;
  border-radius: 25px;
}

.btn-light {
  background-color: #fff;
  border-radius: 25px;
  border: 1px solid #ccc;
}


/* =========================================================
   HUD
========================================================= */
.hud {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 20;
  line-height: 1;
}

.hud {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

.hud-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  /* gleiche Ziffernbreite */
}

/* Score: genug Platz fuer 4-stellige Werte */
#score {
  min-width: 4ch;
  text-align: right;
}

/* Timer: immer "MM:SS" => 5 Zeichen */
#time {
  min-width: 5ch;
  text-align: right;
}


/* =========================================================
   GAME CANVAS + WRAPPER
========================================================= */
.game-wrapper {
  height: 100%;
  min-height: 75vh;
  position: relative;
  overflow: hidden;
}

/* Ursprünglich: volle Höhe; wird in Box-Betrieb unten überschrieben */
.game {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Box-Betrieb innerhalb .game-wrapper */
.game {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* =========================================================
   LANES / BOARD
========================================================= */

/* Sichtbare Lanes (mit Hintergrundbild) */
/* Sichtbare Lanes (Spielfeld) */
.lanes {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  /* falls etwas rausläuft */
}

/* Hintergrund in zwei Teilen: oben & unten */
.lanes::before,
.lanes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
  /* immer hinter Noten & Mikro */
}

/* oberer Bereich (Sternen-Himmel + Säulen) */
.lanes::before {
  top: 0;
  height: 80%;
  /* Feintuning nach Geschmack */
  background-image: url("/assets/images/background_top.jpg");
  background-position: center bottom;
  background-size: cover;
}

/* unterer Bereich (Schnee + Bäume) */
.lanes::after {
  bottom: 0;
  height: 20%;
  /* Rest -> Bäume */
  background-image: url("/assets/images/background_bottom.jpg");
  background-position: center top;
  background-size: cover;
}

.lane {
  z-index: 9999;
}



/* =========================================================
   NOTES
========================================================= */
/* Noten (Basis) */
.note {
  position: absolute;
  top: -20px;
  width: 22%;
  height: 20px;
  /* wird per JS überschrieben, falls NOTE_HEIGHT gesetzt ist */
  background: #fff;
  /* Standard: weiß */
  border-radius: 6px;

  /* Für Sprite: diese Eigenschaften werden inline überschrieben */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9999;
}

.note {}

.note.hit {
  /*background: #3e3;*/
}

/* Grün bei Treffer */
.note.miss {
  /*background: #e33;*/
}

/* Rot bei Fehler */

/* (Zweites Blockset beibehalten – NICHT entfernt) */
.note {
  position: absolute;
  top: -20px;
  /* width/height kommen aus JS/ENV */
  border-radius: 6px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-sizing: border-box;
}

.note.miss {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Entfernt evtl. Overlays von früher */
.note.hit::after,
.note.miss::after {
  display: none !important;
}

.note.hit {
  /*box-shadow: 0 0 0 3px #3e3 inset, 0 0 10px #3e3;*/
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.note.miss {
  /*box-shadow: 0 0 0 3px #e33 inset, 0 0 10px #e33;*/
}


/* =========================================================
   CURSOR / MICROPHONE
========================================================= */
.cursor {
  position: absolute;
  left: 50%;
  height: 80px;
  width: 22%;
  background-image: image-set(url("/assets/images/microphone.png") 1x,
      url("/assets/images/microphone@2x.png") 2x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  bottom: 20%;
  /* sitzt auf der Trennlinie top/bottom */
  /* wenn es etwas höher / tiefer sein soll: bottom: calc(25% - 20px); */
  transition: left 0.05s linear;
  z-index: 3;
  /* ueber Notes/Hintergrund */
}

/* =========================================================
   GAME PAGE (hell)
========================================================= */
body.gamepage {
  background-color: #E4F5FA;
  color: #000;
  font-family: sans-serif;
}

.logo {
  width: 100% !important;
  height: auto;
}

/* =========================================================
   CONTENT-BACKGROUND (Desktop)
========================================================= */
.content {
  /* Background color + star image */
  background-color: #E4F5FA;
  background-image: url("/assets/images/background_game_desktop.jpg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
}

/* =========================================================
   MEDIA QUERIES & RESPONSIVE FIXES
========================================================= */

/* Mobile dunkel wie gehabt (ALT) – wird unten überschrieben */
@media (max-width: 767.98px) {
  body.gamepage {
    background: #000;
    color: #eee;
  }

  .container {
    display: none;
  }

  /* Desktop-Layout ausblenden */
}

/* --- WICHTIGE OVERRIDES (am Ende, damit es sicher greift) --- */

/* 1) Overlay muss ÜBER den Lanes liegen */
.overlay {
  z-index: 10000 !important;
}

/* 2) Desktop-Default: Desktop-Overlay sichtbar, Mobile-Overlay versteckt */
#overlay {
  display: flex;
}


/* 3) Mobile-Layout: nur Game sichtbar, Overlay mobile an, Desktop-Overlay aus */
@media (max-width: 767.98px) {

  /* gezielt Header/Footer/linke Spalte ausblenden */
  body.game header,
  body.game footer,
  body.game .content .col-8 {
    display: none !important;
  }

  /* Content-Container MUSS sichtbar bleiben (hebt das frühere .container {display:none} auf) */
  .content .container {
    display: block !important;
  }

  /* Game-Box fullscreen */
  .content {
    height: 100vh !important;
  }

  .game-wrapper {
    border: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Overlays toggeln */
  #overlay {
    display: none !important;
  }

  #overlay-mobile {
    display: flex !important;
  }

  /* Helles Layout beibehalten (überschreibt altes „dunkel“) */
  body.gamepage {
    background: #E4F5FA !important;
    color: #000 !important;
  }
}

/* =========================================================
   TYPO / SIZES FOR SMALL SCREENS
========================================================= */
@media (max-width: 576px) {
  .index h1 {
    font-size: 2rem;
  }
}



/* =========================================================
   FINAL FIX – Overlay .hidden Priorität
========================================================= */

/* Gemeinsame Hidden-Regel mit höchster Priorität */
.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}



/* Standard: Desktop aktiv */
#overlay-mobile {
  display: none;
}

#overlay {
  display: flex;
}

/* Mobile Ansicht */
@media (max-width: 767.98px) {

  .gamepage .header,
  .gamepage .footer,
  .gamepage .content .col-8 {
    display: none !important;
  }

  .gamepage .content {
    height: 100dvh !important;
  }

  .game-wrapper {
    border: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  #overlay {
    display: none !important;
  }

  #overlay-mobile {
    display: flex;
  }
}



/* ================================
   CONTROLLER PAGE – eigener Scope
================================ */

body.controller {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Hintergrund exakt wie index */
body.controller.index {
  background-color: #E4F5FA;
}

/* HEADER */
.ctrl-header {
  height: 10dvh;
  background: white;
  display: flex;
  align-items: center;
}

.ctrl-header-inner {
  width: 100%;
  padding-left: 20px;
}

.ctrl-header .logo {
  max-width: 200px;
  height: auto;
}

/* FOOTER */
.ctrl-footer {
  height: 10dvh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ctrl-footer a {
  text-decoration: none;
  color: #000;
}

.ctrl-footer-inner {
  font-size: 0.85rem;
  opacity: .8;
  padding: 0 20px;
}

/* MAIN CONTENT – vertikal zentriert */
.ctrl-main {
  flex: 1;
  /* füllt Platz zwischen header/footer */
  display: flex;
  align-items: center;
  /* vertikal */
  justify-content: center;
  /* horizontal */
  text-align: center;
}

.ctrl-main-inner {
  max-width: 450px;
  padding: 20px;
}

.ctrl-main {
  background-color: #E4F5FA;
  background-image: url("../assets/images/background_1.jpg");
  background-size: contain;
  background-position: contain;
  background-repeat: no-repeat;
  color: black;
}

#enableBtn {
  font-size: 1.2em !important;
  animation: enablePulse 2.5s ease-in-out infinite;
  transform-origin: center;
}

/* Keyframes: ganz subtiler Scale-Puls */
@keyframes enablePulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  /* leicht größer */
  100% {
    transform: scale(1);
  }
}