/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/app-frame.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Desktop phone-frame.
   In a desktop web browser the mini-app would otherwise sprawl across the
   whole window (the lobby / account / owner screens have no max-width). On
   wide viewports we clamp the app to a centred phone-width column so it reads
   like a phone on a dark backdrop. Mobile and the Telegram WebView (viewport
   narrower than the breakpoint) are left completely untouched — the media
   query simply doesn't apply, so width:100% behaviour there is preserved.

   No transform/filter on .app-frame on purpose: those would create a
   containing block and trap position:fixed modal backdrops inside the column.
   We keep fixed overlays full-viewport (their content is already flex-centred)
   and only constrain the normal document flow. */
@media (min-width: 600px) {
  .app-frame {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 24px 90px rgba(0, 0, 0, 0.6);
  }
}

/* Every confirm / buy-in / top-up / onboarding modal renders in a FIXED amber
   accent, independent of the active table theme or a club's "menu" colour. A
   club table sets --theme-accent to its brand colour (TableContainer), and
   several skins swap --accent to silver/cyan — both used to bleed into modal
   buttons, sliders and highlights, so the same dialog looked amber on an empty
   table but club-coloured on a community table. Modals must read as ONE
   consistent amber everywhere. Custom properties inherit, so pinning them on
   the dialog root recolours every descendant that reads var(--theme-accent) /
   var(--accent) / var(--accent-glow) — no per-modal edits needed. Scoped to
   aria-modal dialogs, so themed table chrome (chat/keyboard sheets, popovers)
   is untouched. */
[role="dialog"][aria-modal="true"] {
  --theme-accent: #ffd45a;
  --accent: #ffd45a;
  --accent-glow: rgba(255, 212, 90, 0.34);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/splash.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.splash-root {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 38%, #0E1428 0%, #02060F 60%, #000308 100%);
  opacity: 1;
  transition: opacity 600ms ease;
}
.splash-root.splash-leaving {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(-4%);
}

/* ── Brand lockup (equalizer bars + HUMPOKER wordmark, same art as lobby) ── */
.splash-lockup {
  display: block;
  width: min(74vw, 320px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(123, 77, 255, 0.35));
  /* Fully static: no entrance animation, no transform, opacity always 1.
     Reason: the logo's scale/translate entrance played AT THE SAME TIME as
     Telegram's own mini-app sheet slide-up on open, so the two motions
     compounded and read as the splash "дёргается" during the transition.
     A perfectly still logo can't jolt against the sheet animation. */
  opacity: 1;
}

/* ── Tagline writes in word by word ── */
.splash-tagline {
  display: flex;
  gap: 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 3px;
  color: #8B94A6;
}
.splash-tagline span {
  opacity: 0;
  transform: translateY(4px);
  filter: blur(3px);
  animation: splash-word-in 600ms ease forwards;
}
@keyframes splash-word-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-lockup { animation-duration: 1ms; opacity: 1; transform: none; }
  .splash-tagline span { animation-duration: 1ms; opacity: 1; }
}