/* Fireflies in the browser: one portrait game column, full height, on the game's night sky. */
html, body {
  margin: 0;
  height: 100%;
  background: #121733 linear-gradient(#222A56, #121733) fixed;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff8dc;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#game {
  position: relative;
  flex: 0 1 480px;
  min-width: 0;
  height: 100%;
  height: 100dvh;
  touch-action: none; /* the board takes every touch: no scrolling, no pinch-zoom */
}

/* Loading */
#splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: inherit;
  z-index: 2;
}
#splash img { border-radius: 22px; box-shadow: 0 0 40px rgba(255, 181, 71, .35); }
/* Gone at once: the game's own launch screen builds the same icon from falling blocks. */
body.ready #splash { display: none; }
.no-wasm #splash { display: none; }

.dots { display: flex; gap: 8px; }
.dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFB547;
  animation: pulse 1s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Browsers without WasmGC */
#unsupported {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
#unsupported img { border-radius: 18px; }
#unsupported p { display: none; max-width: 340px; margin: 0; }
[data-ui="uz"] #unsupported p[data-lang="uz"],
[data-ui="ru"] #unsupported p[data-lang="ru"],
[data-ui="en"] #unsupported p[data-lang="en"] { display: block; }
.no-wasm #unsupported { display: flex; }
#unsupported .store {
  padding: 12px 22px;
  border-radius: 14px;
  background: #FFB547;
  color: #121733;
  text-decoration: none;
  font-weight: 600;
}
#unsupported .back { color: #c9c3e6; font-size: 14px; }

.noscript { position: fixed; inset: auto 0 40px; text-align: center; }