/* Gulbju Karaliene — stils.
   Spēle strādā gan datorā (16:9), gan telefonā (9:16).
   Fons ir ezera gradients — debesis augšā, niedres un ūdens apakšā.
   Nekādu ārēju fontu, nekādu CDN. */

/* Reset — tikai tas, kas tiešām vajadzīgs. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #4a6fa5;
  /* Drošs fons, ja canvas vēl nav ielādējies — trīs joslu ezera gradients
     ar zaļu akcentu apakšā (niedres + ezera virsma). */
  background: linear-gradient(
    180deg,
    #4a6fa5 0%,
    #6d8fc0 22%,
    #e8a87c 52%,
    #f4d35e 74%,
    #cbd96b 84%,
    #3d8b8b 100%
  );
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: #ffffff;
  /* Aizliedzam dubulto pieskārienu tuvināšanu uz telefona. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Saknes konteiners — tur, kur dzīvo kanva. */
#sakne,
#spele {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

/* Kanva aizņem visu ekrānu — mērogošanu un malas pilda spēle pati. */
#kanva {
  display: block;
  width: 100%;
  height: 100%;
  /* Fona gradients redzams arī, ja zīmēšanas cikls aizķeras.
     Tās pašas trīs joslas kā zīmēšanā — debesis, saulriets, niedres. */
  background: linear-gradient(
    180deg,
    #4a6fa5 0%,
    #6d8fc0 22%,
    #e8a87c 52%,
    #f4d35e 74%,
    #cbd96b 84%,
    #3d8b8b 100%
  );
  /* Neļaujam pārlūkam izstiept pikseļus — spēle pati rēķina mērogu. */
  image-rendering: auto;
  /* Nekādu fokusu kontūru, nekas nav klikšķināms. */
  outline: none;
  cursor: pointer;
}

/* Uz telefona — neļaujam tekstu atzīmēt, bet peles kursoru vajag uz datora. */
@media (hover: none) and (pointer: coarse) {
  #kanva {
    cursor: default;
  }
}

/* Galvu un kājenes neesamība ir apzināta — visa saskarne ir uz kanvas.
   Šie noteikumi ir tikai drošībai, ja HTML kaut ko ieliek ārpus kanvas. */

/* Paslēptie elementi — nekad nav redzami, bet paliek DOM, lai SDK tos atrastu. */
.paslepts,
[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Paziņojums par orientāciju — parādās tikai telefonā, kad ekrāns ir šaurs
   un zems (piem., 16:9 horizontāli). Spēle pati izvēlas pareizo mērogu,
   bet šis ir brīdinājums, ja lietotājs turpina spēlēt horizontāli. */
#orientacija {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: rgba(61, 139, 139, 0.96);
  color: #ffffff;
  text-align: center;
  z-index: 1000;
}

/* Ieslēdzam brīdinājumu tikai ļoti zemā, platā ekrānā uz skāriena ierīces. */
@media (max-width: 900px) and (orientation: landscape) and (hover: none) {
  #orientacija {
    display: flex;
  }
}

#orientacija .ikonas {
  font-size: 64px;
  line-height: 1;
}

#orientacija .virsraksts {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

#orientacija .apakss {
  font-size: 16px;
  opacity: 0.85;
  max-width: 320px;
}

/* Fokusa stils pieejamībai — tikai tiem, kas lieto klaviatūru. */
#kanva:focus-visible {
  outline: 3px solid rgba(255, 215, 0, 0.7);
  outline-offset: -6px;
}

/* Ļoti šaurs ekrāns — samazinām rezerves tekstu izmērus, ja kaut kas
   tomēr parādās. */
@media (max-width: 360px) {
  #orientacija .virsraksts {
    font-size: 20px;
  }
  #orientacija .apakss {
    font-size: 14px;
  }
}

/* Tumšais režīms nemaina neko — spēle pati zīmē savas krāsas. */
@media (prefers-color-scheme: dark) {
  html,
  body {
    background: linear-gradient(
      180deg,
      #4a6fa5 0%,
      #6d8fc0 22%,
      #e8a87c 52%,
      #f4d35e 74%,
      #cbd96b 84%,
      #3d8b8b 100%
    );
  }
}

/* Augsta kontrasta režīms — nekas nemainās, jo viss ir uz kanvas. */
@media (prefers-contrast: more) {
  #kanva {
    outline: 2px solid #ffd700;
  }
}

/* Animāciju samazināšana — mūsu spēle neizmanto CSS animācijas,
   bet, ja kaut kas parādīsies, tas tiks izslēgts. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}