#app {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-bg);
}

#game-root {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--c-bg);
}
#game-root canvas {
  display: block;
  width: 100% !important;
  margin-left: 0 !important;
  background: var(--c-bg);
  touch-action: none;
}

.scene {
  position: absolute; inset: 0;
  z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  background: var(--c-bg);
}
.scene.active { opacity: 1; pointer-events: auto; }

.stagger > * {
  opacity: 0; transform: translateY(14px);
  animation: stagIn 0.5s var(--spring-snappy) forwards;
}
.stagger > *:nth-child(1) { animation-delay:   0ms; }
.stagger > *:nth-child(2) { animation-delay:  80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 320ms; }
.stagger > *:nth-child(6) { animation-delay: 400ms; }
.stagger > *:nth-child(7) { animation-delay: 480ms; }
.stagger > *:nth-child(8) { animation-delay: 560ms; }

.brand-logo { height: 42px; width: auto; display: block; user-select: none; -webkit-user-drag: none; }
.brand-logo.sm { height: 28px; }
.brand-logo.lg { height: 64px; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(26,26,46,0.08);
  padding: 24px;
  width: 100%; max-width: 360px;
}

.btn {
  font-family: 'Nunito', 'Noto Sans Georgian', sans-serif;
  font-weight: 800;
  font-size: var(--t-18);
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  letter-spacing: 0.01em;
  transition: transform 0.15s var(--spring-snappy),
              background-color 0.15s var(--ease-out),
              opacity 0.15s var(--ease-out);
}
.btn-primary { background: var(--c-pink); color: #fff; }
.btn-primary:active:not(:disabled) { background: var(--c-pink-deep); transform: scale(0.96); }
.btn-primary:disabled { background: var(--c-line); color: var(--c-ink-mute); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--c-pink); border: 1.5px solid var(--c-pink); }
.btn-ghost:active { transform: scale(0.96); background: rgba(230,0,126,0.06); }
.btn-row { display: flex; gap: 10px; width: 100%; }
.btn-row .btn { flex: 1; }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 3px; }

@media (min-width: 480px) {
  #app {
    width: 430px; height: 932px; max-height: 100vh;
    margin: 0 auto; left: 50%; transform: translateX(-50%);
    box-shadow: 0 30px 80px rgba(26,26,46,0.18);
    border-radius: 36px;
    overflow: hidden;
  }
}