/* Página do jogo: o Compose desenha num canvas que ocupa a janela; aqui fica só a capa enquanto ele carrega. */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0c1322;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Onde o jogo desenha. Fica separado da capa: o Compose apaga tudo que houver no elemento em que é montado. */
#game {
  position: fixed;
  inset: 0;
}

/* Capa: o céu e a arte da tela de carregamento do jogo, para a troca não aparecer. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: #0c1322;
  transition: opacity 0.35s ease;
}

#boot.done {
  opacity: 0;
  pointer-events: none;
}

/* O palco só aparece com a arte e o logo carregados (boot.js põe .shown): sem o céu liso piscando antes. */
.boot__stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: #2a7be4 url("composeResources/app.bancorupto.res/drawable/loading_art.webp") center bottom / 100% auto no-repeat;
}

.boot__stage.shown {
  opacity: 1;
}

/* A mesma sombra do pé da tela de carregamento do jogo. */
.boot__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.62));
}

/*
 * Janela larga: o jogo em pé no centro, sobre a mesa de feltro escurecida, com a borda fina e escura do palco. As
 * medidas (94% da janela, proporção 1:2, borda e canto em relação a 900 de altura) são as de ui/GameStage.kt.
 */
@media (min-aspect-ratio: 7/10) {
  #boot {
    --stage-height: min(94vh, calc(94vw / 0.5));
    --unit: calc(var(--stage-height) / 900);
    align-items: center;
    background:
      radial-gradient(circle, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.78)),
      #0c1322 url("composeResources/app.bancorupto.res/drawable/bg_table.webp") center / cover no-repeat;
  }

  .boot__stage {
    width: calc(var(--stage-height) * 0.5);
    height: var(--stage-height);
    border-radius: calc(var(--unit) * 18);
    box-shadow:
      0 0 0 calc(var(--unit) * 5) #111d1e,
      0 0 0 calc(var(--unit) * 5 + 1px) rgba(59, 91, 88, 0.55),
      0 calc(var(--unit) * 14) calc(var(--unit) * 60) rgba(0, 0, 0, 0.7);
  }
}

/* Logo no lugar e no tamanho do jogo: 18 de margem e 86% da largura (ui/loading/Splash.kt). */
.boot__logo {
  position: absolute;
  top: calc(var(--unit, 1px) * 18);
  left: 50%;
  width: 86%;
  transform: translateX(-50%);
}

.boot__wheel {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  z-index: 1;
  border: 4px solid rgba(255, 255, 255, 0.28);
  border-top-color: #f2b93b;
  border-radius: 50%;
  animation: boot-turn 0.9s linear infinite;
}

@keyframes boot-turn {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .boot__wheel { animation-duration: 2.4s; }
}

.unsupported {
  position: fixed;
  inset: auto 0 12% 0;
  z-index: 20;
  margin: 0 auto;
  padding: 0 24px;
  max-width: 420px;
  color: #fff;
  font: 600 16px/1.4 system-ui, sans-serif;
  text-align: center;
}

.unsupported a { color: #f2b93b; }