* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


body {
  background: #111;
  color: #fff;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =================================
   HAUPTBEREICH
================================= */

main {
  width: 100%;
  max-width: 680px;

  height: 100dvh;

  margin: auto;

  padding:
    max(10px, env(safe-area-inset-top))
    14px
    max(10px, env(safe-area-inset-bottom))
    14px;

  overflow: hidden;
}


/* =================================
   ALLGEMEIN
================================= */

h1 {
  margin: 8px 0 10px;

  font-size: 1.7rem;
}


.hint {
  opacity: .75;
}


button {
  width: 100%;

  min-height: 48px;

  margin: 4px 0;

  border: 0;
  border-radius: 14px;

  font-size: 1rem;

  touch-action: manipulation;
}


button:disabled {
  opacity: .45;
}


.primary {
  background: #fff;
  color: #111;

  font-weight: 700;
}


.secondary {
  background: #2a2a2a;
  color: #fff;
}


.big {
  min-height: 56px;
}


/* =================================
   STARTSEITE
================================= */

#homePage {
  text-align: center;

  padding-top:
    min(12vh, 100px);
}


.hero {
  font-size: 4rem;

  margin-bottom: 8px;
}


/* =================================
   KAMERA-SEITE
================================= */

.cameraPage {

  /*
   * Die Kameraansicht wird als
   * kompletter Bildschirm behandelt.
   */

  height: calc(
    100dvh -
    env(safe-area-inset-top) -
    env(safe-area-inset-bottom)
  );

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


/* =================================
   KAMERA KOPFZEILE
================================= */

.cameraTop {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-height: 28px;

  padding: 2px 4px 6px;

  font-size: .9rem;
}


.challengeSmall {
  opacity: .7;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =================================
   KAMERA
================================= */

.camera {

  /*
   * Der wichtigste Teil:
   * Die Kamera nimmt den verfügbaren
   * Platz ein, ohne die Seite zu
   * vergrößern.
   */

  flex: 1 1 auto;

  min-height: 0;

  background: #000;

  border-radius: 16px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;
}


.camera video {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


/* =================================
   BUTTONS UNTER DER KAMERA
================================= */

.controls {

  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 6px;

  padding-top: 6px;
}


.controls button {
  margin: 0;

  min-height: 44px;
}


/* =================================
   AUSLÖSER
================================= */

.shutter {

  flex: 0 0 auto;

  width: 68px;
  height: 68px;

  min-height: 68px;

  padding: 0;

  margin:
    6px auto
    max(4px, env(safe-area-inset-bottom))
    auto;

  border-radius: 50%;

  background: #fff;

  color: #111;

  border: 6px solid #777;

  font-size: 1.4rem;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, .4);
}


/* =================================
   STATUS
================================= */

#status {

  flex: 0 0 auto;

  min-height: 0;

  height: 0;

  overflow: visible;

  text-align: center;

  font-size: .8rem;
}


.error {
  color: #ff8f8f;
}


/* =================================
   FOTO-VORSCHAU
================================= */

#reviewPage {
  height: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;
}


#reviewPage h1 {
  flex: 0 0 auto;
}


.review {

  flex: 1 1 auto;

  min-height: 0;

  background: #000;

  border-radius: 16px;

  overflow: hidden;

  margin: 6px 0;

  display: flex;

  align-items: center;

  justify-content: center;
}


#preview {

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


.reviewButtons {

  flex: 0 0 auto;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


.reviewButtons button {
  margin: 4px 0;
}


/* =================================
   UPLOAD STATUS
================================= */

#uploadStatus {

  flex: 0 0 auto;

  min-height: 22px;

  margin: 3px;

  font-size: .85rem;
}


/* =================================
   ERFOLG
================================= */

#donePage {
  text-align: center;

  padding-top:
    min(18vh, 140px);
}


.doneIcon {

  width: 84px;
  height: 84px;

  margin: 0 auto 18px;

  border-radius: 50%;

  background: #fff;

  color: #111;

  display: grid;

  place-items: center;

  font-size: 2.8rem;
}


/* =================================
   MOBILE FEINSCHLIFF
================================= */

@media (max-height: 700px) {

  .cameraTop {
    min-height: 24px;

    padding-bottom: 3px;

    font-size: .8rem;
  }


  .controls button {
    min-height: 40px;

    font-size: .9rem;
  }


  .shutter {
    width: 60px;
    height: 60px;

    min-height: 60px;

    margin-top: 4px;
  }

}


@media (max-height: 600px) {

  .cameraTop {
    display: none;
  }


  .controls {
    padding-top: 3px;
  }


  .controls button {
    min-height: 36px;
  }


  .shutter {
    width: 54px;
    height: 54px;

    min-height: 54px;

    border-width: 5px;

    margin-top: 3px;
  }

}


/* =================================
   HIDDEN
================================= */

[hidden] {
  display: none !important;
}