/* SeppoGames — pelisivujen koko ruudun tila (jaettu).
 *
 * Ladataan jokaisella pelisivulla <head>issä ja body-elementissä on luokka
 * "sg-peli". Etusivu ei käytä tätä tiedostoa.
 *
 * Tehtävät:
 *  - piilottaa yläpalkin (#palkki / header) pelinäkymästä
 *  - nollaa bodyn marginaalit ja mitoittaa pelialueen 100dvh:hen
 *  - pitää ☰-napin ja pelin omat palkin napit oikeassa yläkulmassa
 *    (turva-alueet huomioiden), myös palkin ollessa piilossa
 */

html {
  height: 100%;
  background: #201812;
}

body.sg-peli {
  box-sizing: border-box;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  overflow-x: hidden;
}

/* Yläpalkki pois pelin tieltä. ☰-nappi siirretään bodyyn, joten se ei katoa. */
body.sg-peli #palkki,
body.sg-peli > header {
  display: none !important;
}

/* Kulmanapit: jaettu ☰ ja pelin omat napit (esim. Seppo League 2). */
#sg-kulma {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
}

#sg-kulma .napit {
  display: flex;
  align-items: center;
  gap: 6px;
}

#sg-valikko-nappi,
#sg-kulma button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #7A5230;
  color: #F5C542;
  border: 2px solid #EEDCB4;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent;
}

/* Kosketusalue säilyy 44 px:nä myös kapeilla näytöillä. */
#sg-kulma button:active,
#sg-valikko-nappi:active {
  transform: translateY(1px);
}

#sg-kulma button:focus-visible,
#sg-valikko-nappi:focus-visible {
  outline: 3px solid #F5C542;
  outline-offset: 2px;
}

/* Ensikäynnin vihje: ☰ pulssahtaa kerran (localStorage-lippu JS:ssä). */
@keyframes sg-pulssi {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, .85); }
  50% { box-shadow: 0 0 0 12px rgba(245, 197, 66, 0); }
}

#sg-valikko-nappi.sg-vihje {
  animation: sg-pulssi 1.1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  #sg-valikko-nappi.sg-vihje {
    animation: none;
    box-shadow: 0 0 0 3px #F5C542;
  }
  #sg-kulma button:active,
  #sg-valikko-nappi:active {
    transform: none;
  }
}

/* Maton kaltainen oma HUD: jätä ☰-napille tilaa, jotta pisteet ja ennätys näkyvät. */
body.sg-peli #tiedot {
  min-height: 48px;
  padding-right: calc(env(safe-area-inset-right, 0px) + 60px);
  align-items: center;
  box-sizing: border-box;
}