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

html, body {
  font-family: "Atma", system-ui;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* overflow: hidden; */
}

body {
  background-image: url('/img/back.svg');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  /* fallback pro starší prohlížeče */
  min-height: 100vh;

  /* moderní mobilní prohlížeče */
  min-height: 100dvh;
}

.aspect-ratio-box {
  position: relative;
  width: 100vw;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100vw;

  /* fallback */
  max-height: 100vh;

  /* Android Chrome / moderní Chromium */
  max-height: 100dvh;

  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transition: width 0.3s, height 0.3s;
  overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
  .aspect-ratio-box {
    /* fallback */
    width: 177.78vh;
    height: 100vh;

    /* moderní prohlížeče */
    width: 177.78dvh;
    height: 100dvh;
  }
}

@media (max-aspect-ratio: 16/9) {
  .aspect-ratio-box {
    width: 100vw;
    height: 56.25vw;
  }
}
    .app-header {
      display: flex;
      width: 100%;
      height: 5%;
      align-items: stretch;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
    }
    .logo {
      display: flex;
      flex: 0 0 15%;
      width: 15%;
      height: 100%;
      font-size: 100%;
      align-items: center;
      min-width: 0;
    }
    .logo-obrazek {
      flex: 0 0 28%;
      width: 28%;
      height: 90%;
      margin-left: 2%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }
    .logo-text {
      flex: 0 0 43%;
      width: 43%;
      height: 80%;
      margin-top: 2%;
      display: flex;
      align-items: center;
      min-width: 0;
    }
    .logo-obrazek img,
    .logo-text img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .demo-upozorneni {
      flex: 0 0 30%;
      width: 30%;
      height: 75%;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    .titulek {
      flex: 0 0 30%;
      width: 30%;
      height: 100%;
      min-width: 0;
    }
    .titulek > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .titulek-levy {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
    }
    .pravidla {
      width: 24%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
.titulek > .titulek-stred {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 100%;
  text-align: center;
padding-right: 3.5%;
}
    .titulek-pravy {
      width: 35%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .spacer {
      flex: 0 0 8%;
      width: 8%;
      height: 100%;
    }
    .dif {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .dif1 {
      width: 25%;
    }
    .dif2 {
      width: 26%;
    }
    .dif3 {
      width: 25%;
    }
    .lista-prava {
      flex: 0 0 25%;
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }
    .zvuk-on,
    .nota-on,
    .zpet,
    .fulscreen-on {
      width: 17%;
      height: 100%;
      padding: 2%;
    }
    .zpet {
      flex: 0 0 17%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .zpet img,
    .zvuk-on img,
    .nota-on img,
    .fulscreen-on img {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
    .volume-slider-wrapper {
      width: 35%;
      padding: 2%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .trida {
      width: 31%;
      height: 120%;
      padding: 0.5%;
    }
    .header-action {
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .header-action:focus-visible {
      outline: 2px solid rgba(0, 122, 255, 0.65);
      outline-offset: -2px;
      border-radius: 8px;
    }

    .app-body {
      width: 100%;
      height: 95%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .app-main-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .homepage {
      width: 95%;
      height: 95%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .homepage-left {
      width: 43%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: right;
    }
    .homepage-left img {
      width: 90%;
      height: 90%;
    }
    .homepage-right {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: left;
      justify-content: center;
      flex-direction: column;
      padding-left: 5%;
    }
    .homepage-right > div {
      width: 90%;
      height: 13%;
      display: flex;
      align-items: center;
      justify-content: left;
      margin: 1%;
    }
    .homepage-right > div > .resize-text p {
      margin: 0;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: filter 0.3s ease;
    }
    #volumeSlider {
      width: 100%;
      height: 100%;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
    }
    #volumeSlider::-webkit-slider-runnable-track {
      width: 100%;
      height: 20%;
      background: #e0e0e0;
      border-radius: 10vh;
    }
    #volumeSlider::-moz-range-track {
      width: 100%;
      height: 20%;
      background: #e0e0e0;
      border-radius: 10vh;
    }
    #volumeSlider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 8%;
      aspect-ratio: 1/1;
      background: #007aff;
      border-radius: 50%;
      border: none;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
      transition: transform 0.2s;
    }
    @supports not (aspect-ratio: 1/1) {
      #volumeSlider::-webkit-slider-thumb { height: 8%; }
    }
    #volumeSlider::-webkit-slider-thumb:hover {
      transform: translateY(-50%) scale(1.1);
    }
    #volumeSlider::-moz-range-thumb {
      width: 8%;
      aspect-ratio: 1/1;
      background: #007aff;
      border-radius: 50%;
      border: none;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
      transition: transform 0.2s;
    }
    #volumeSlider::-moz-range-thumb:hover {
      transform: translateY(-50%) scale(1.1);
    }
    .resize-text { }
    .resize-text2 { }

/* Spinner */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top: 3px solid #2196f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

#record-activity {
  height: 100%;
  width: 25%;
  max-width: 25%;
  flex: 0 0 25%;
  object-fit: contain;
  display: block;

  padding-top: 0.8%;
  padding-bottom: 0.8%;

  cursor: pointer;
}

#record-activity[hidden] {
  display: none;
}

#record-activity[data-state="local"],
#record-activity[data-state="synced"] {
  cursor: default;
}

.aspect-ratio-box,
.aspect-ratio-box * {
  -webkit-tap-highlight-color: transparent;
}

#app-content img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}