:root {
  --folkeen-vw: 100vw;
  --folkeen-vh: 1vh;
  --folkeen-px-height: 100vh;
  --folkeen-px-width: 100vw;
  --folkeen-canvas-width: 100vw;
  --folkeen-canvas-height: 100vh;
  --folkeen-bg: #000000;

  --folkeen-safe-top: env(safe-area-inset-top, 0px);
  --folkeen-safe-right: env(safe-area-inset-right, 0px);
  --folkeen-safe-bottom: env(safe-area-inset-bottom, 0px);
  --folkeen-safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100dvh;
  min-width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--folkeen-bg);
  color: #ffffff;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  -webkit-user-select: none;
  user-select: none;
}

@supports not (height: 100dvh) {
  html, body {
    height: var(--folkeen-px-height, 100vh);
    min-height: var(--folkeen-px-height, 100vh);
  }
}

body.folkeen-webgl-body, body {
  position: fixed;
  inset: 0;
  touch-action: none;
}

#unity-container,
#gameContainer,
.webgl-content {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--folkeen-bg) !important;
}

@supports not (height: 100dvh) {
  #unity-container,
  #gameContainer,
  .webgl-content {
    width: var(--folkeen-vw, 100vw) !important;
    height: var(--folkeen-px-height, 100vh) !important;
    max-width: var(--folkeen-vw, 100vw) !important;
    max-height: var(--folkeen-px-height, 100vh) !important;
  }
}

/*
  Canvas pinta tudo, INCLUINDO area sob status bar / nav bar.
  Em standalone (Samsung Internet Android), isso faz a tela parecer fullscreen
  porque o canvas preto se mistura com a status bar preta (theme_color = #000).
  Quando combinado com viewport-fit=cover + black-translucent, a barra
  do sistema fica transparente sobre o canvas.
*/
#unity-canvas,
#canvas,
canvas.emscripten {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: var(--folkeen-canvas-width, 100dvw) !important;
  height: var(--folkeen-canvas-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: var(--folkeen-bg) !important;
  outline: none !important;
  touch-action: none;
}

#unity-loading-bar { z-index: 1000; }

#unity-warning {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--folkeen-safe-top, 0px);
  z-index: 1000;
  pointer-events: none;
}

:fullscreen,
:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background: var(--folkeen-bg) !important;
}

:fullscreen #unity-container,
:fullscreen #gameContainer,
:fullscreen .webgl-content,
:-webkit-full-screen #unity-container,
:-webkit-full-screen #gameContainer,
:-webkit-full-screen .webgl-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: var(--folkeen-bg) !important;
}

@media (display-mode: fullscreen),
       (display-mode: standalone),
       (display-mode: minimal-ui) {
  html, body,
  #unity-container,
  #gameContainer,
  .webgl-content {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: 100dvw !important;
    max-height: 100dvh !important;
  }
}

/*
  Em STANDALONE no Android, o Samsung Internet/Chrome desenha sua status bar
  por cima. Como theme_color do manifest agora e' #000 (preto), a status bar
  fica preta. Combinada com canvas preto, da' efeito visual de fullscreen.
*/
@media (display-mode: standalone) {
  html, body { background: #000 !important; }
}

#folkeen-touch-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(24px + var(--folkeen-safe-top))
    calc(24px + var(--folkeen-safe-right))
    calc(24px + var(--folkeen-safe-bottom))
    calc(24px + var(--folkeen-safe-left));
  background:
    radial-gradient(circle at center, rgba(0, 120, 140, 0.32), rgba(0, 0, 0, 0.96)),
    #000;
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  cursor: pointer;
  touch-action: none;
}

#folkeen-touch-gate.is-hidden { display: none; }
#folkeen-touch-gate-content { pointer-events: none; transform: translateY(-2vh); }
#folkeen-touch-gate-title { font-size: 26px; line-height: 1.2; font-weight: 800; margin-bottom: 12px; }
#folkeen-touch-gate-text { font-size: 16px; line-height: 1.35; opacity: 0.86; }

#pwa-install-btn {
  pointer-events: auto;
  touch-action: manipulation;
  top: calc(12px + var(--folkeen-safe-top)) !important;
  right: calc(12px + var(--folkeen-safe-right)) !important;
}