/* Plinko Mania — layout sofisticado v5 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap");

:root {
  --pm-radius: 22px;
  --pm-radius-sm: 14px;
  --pm-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  --pm-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --pm-font: "Outfit", system-ui, sans-serif;
  --pm-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --brand-primary: #c4a574;
  --brand-accent: #e8d5a3;
  --brand-background: #0a0c10;
  --page-bg: var(--brand-background);
  --pm-ink: #f3eee4;
  --pm-muted: color-mix(in srgb, #fff 56%, var(--brand-background));
  --pm-surface: color-mix(in srgb, #fff 6.5%, var(--brand-background));
  --pm-surface-2: color-mix(in srgb, #fff 10%, var(--brand-background));
  --pm-line: color-mix(in srgb, var(--brand-primary) 26%, transparent);
  --pm-max: 820px;
  --pm-gutter: clamp(16px, 4vw, 28px);
  --pm-header-h: 76px;
  --pm-nav-h: 78px;
}

/* ─── Base ─────────────────────────────────────────────── */
html,
body,
#__next,
main,
.home-page,
.missions-page {
  font-family: var(--pm-font) !important;
  background-color: var(--brand-background) !important;
  color: var(--pm-ink) !important;
}

html,
body {
  background-image:
    radial-gradient(110% 70% at 50% -22%, color-mix(in srgb, var(--brand-primary) 34%, transparent), transparent 56%),
    radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--brand-accent) 14%, transparent), transparent 46%),
    radial-gradient(55% 40% at 0% 100%, color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, #fff 2%, var(--brand-background)), var(--brand-background)) !important;
  background-attachment: fixed !important;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

/* ─── Page shell ───────────────────────────────────────── */
.home-page,
.missions-page {
  background: transparent !important;
  min-height: 100svh !important;
  padding-bottom: calc(var(--pm-nav-h) + 18px) !important;
}

.home-content,
.missions-content {
  width: min(100%, var(--pm-max)) !important;
  margin: 0 auto !important;
  padding: 22px var(--pm-gutter) 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

/* ─── Typography ───────────────────────────────────────── */
h1, h2, h3,
.home-page h1, .home-page h2,
.missions-heading h1, .missions-heading h2,
.winners-section h2,
.footer-brand p,
.legal-card h1,
.maintenance-card h1,
.auth-card h1,
.winner-heading-text h2 {
  font-family: var(--pm-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  color: var(--pm-ink) !important;
}

.winners-section .winner-heading-text span,
.missions-heading span,
.auth-kicker {
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--brand-accent) 88%, #fff) !important;
}

p, .home-footer p, .footer-brand p {
  color: var(--pm-muted) !important;
  line-height: 1.55 !important;
}

/* ─── Header ───────────────────────────────────────────── */
.home-header,
.header-account {
  height: var(--pm-header-h) !important;
  padding: 10px max(var(--pm-gutter), calc(50vw - (var(--pm-max) / 2))) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  background: color-mix(in srgb, var(--brand-background) 78%, transparent) !important;
  border-bottom: 1px solid var(--pm-line) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.header-brand img,
.header-brand picture,
.home-header img[alt*="Plinko"],
.home-header img[alt*="Mania"] {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.header-actions {
  gap: 10px !important;
  align-items: center !important;
}

.header-deposit,
.header-login,
.header-register,
.game-modal-primary,
.mobile-nav-highlight,
.auth-submit,
button.btn-primary {
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary)) !important;
  color: #140f0a !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 0.7rem 1.15rem !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 36%, transparent) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}

.header-login {
  background: transparent !important;
  color: var(--pm-ink) !important;
  border: 1px solid var(--pm-line) !important;
  box-shadow: none !important;
}

.header-deposit:hover,
.header-register:hover,
.game-modal-primary:hover,
.mobile-nav-highlight:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
}

.header-balance {
  border: 1px solid var(--pm-line) !important;
  background: var(--pm-surface) !important;
  border-radius: 999px !important;
  color: var(--pm-ink) !important;
  padding: 0.55rem 0.9rem !important;
  font-weight: 600 !important;
}

/* ─── Hero / banners ───────────────────────────────────── */
.promo-banner,
.page-banner {
  min-height: clamp(200px, 42vw, 280px) !important;
  border-radius: calc(var(--pm-radius) + 4px) !important;
  border: 1px solid var(--pm-line) !important;
  box-shadow: var(--pm-shadow) !important;
  overflow: hidden !important;
  position: relative !important;
}

.promo-banner::after,
.page-banner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-background) 78%, transparent) 0%, transparent 55%),
    linear-gradient(to top, color-mix(in srgb, var(--brand-background) 88%, transparent), transparent 55%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.promo-banner > *,
.page-banner > * {
  position: relative;
  z-index: 2;
}

.promo-dots {
  gap: 8px !important;
}

.promo-dots button,
.promo-dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--brand-accent) 70%, #fff) !important;
  opacity: 0.45;
}

/* ─── Cards / hub / missions ───────────────────────────── */
.mini-banner,
.home-hub-card,
.mission-card,
.winner-card,
.profile-card,
.deposit-card,
.legal-card,
.login-card,
.prize-claim-card,
.room-card,
.maintenance-card,
.home-hub-rooms > *,
.mission-grid > * {
  border: 1px solid var(--pm-line) !important;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--pm-surface-2) 92%, var(--brand-primary)),
    color-mix(in srgb, var(--brand-background) 95%, #000)
  ) !important;
  border-radius: var(--pm-radius) !important;
  box-shadow: var(--pm-shadow-soft) !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease !important;
}

.mini-banner:hover,
.home-hub-card:hover,
.mission-card:hover,
.room-card:hover,
.winner-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 48%, transparent) !important;
  box-shadow: var(--pm-shadow) !important;
}

.home-hub,
.home-hub-grid,
.mini-banner-grid,
.mission-grid {
  gap: 14px !important;
}

.home-hub-action,
.mission-reward,
.winner-live,
.winners-section .winner-heading-text span,
.footer-developer {
  color: var(--brand-accent) !important;
}

.mission-progress,
.mission-orb {
  background: color-mix(in srgb, var(--brand-primary) 20%, var(--pm-surface)) !important;
  border-radius: 999px !important;
}

.mission-progress > *,
.winner-live i {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)) !important;
}

/* Section titles */
.winners-section,
.home-hub,
.how-to-play,
.missions-heading {
  margin-top: 8px !important;
}

.winners-section .winner-heading-copy,
.missions-heading {
  margin-bottom: 14px !important;
}

.winner-list {
  gap: 12px !important;
}

.winner-card {
  padding: 14px 16px !important;
}

/* ─── Mobile nav (dock) ────────────────────────────────── */
.mobile-nav {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--brand-background) 86%, #000) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5) !important;
  padding: 8px 10px !important;
}

.mobile-nav a,
.mobile-nav button {
  color: color-mix(in srgb, #fff 68%, var(--brand-accent)) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  border-radius: 14px !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}

.mobile-nav a:hover,
.mobile-nav [aria-current="page"],
.mobile-nav .active {
  color: var(--brand-accent) !important;
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}

.mobile-nav-highlight {
  border-radius: 18px !important;
  transform: translateY(-14px) scale(1.05);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-primary) 40%, transparent) !important;
}

/* ─── Footer ───────────────────────────────────────────── */
.home-footer {
  width: min(100%, var(--pm-max)) !important;
  margin: 12px auto 0 !important;
  padding: 28px var(--pm-gutter) 24px !important;
  border-top: 1px solid var(--pm-line) !important;
  background: transparent !important;
  display: grid !important;
  gap: 18px !important;
}

.home-footer nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
}

.home-footer a {
  color: color-mix(in srgb, #fff 72%, var(--brand-accent)) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  transition: color 0.2s ease;
}

.home-footer a:hover { color: var(--brand-accent) !important; }

.footer-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, #fff 6%, transparent) !important;
  font-size: 0.8rem !important;
  color: var(--pm-muted) !important;
}

/* ─── Modais ───────────────────────────────────────────── */
.game-modal-backdrop {
  background: color-mix(in srgb, var(--brand-background) 70%, #000) !important;
  backdrop-filter: blur(12px) !important;
}

.game-access-modal,
.game-result-modal {
  border: 1px solid var(--pm-line) !important;
  background: linear-gradient(180deg, var(--pm-surface-2), var(--brand-background)) !important;
  border-radius: 26px !important;
  box-shadow: var(--pm-shadow) !important;
  padding: 1.5rem !important;
}

.maintenance-checking {
  min-height: 60svh !important;
}

.maintenance-checking span {
  border-top-color: var(--brand-accent) !important;
  width: 34px !important;
  height: 34px !important;
}

/* ─── Motion ───────────────────────────────────────────── */
@keyframes pm-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-content > *,
.missions-content > * {
  animation: pm-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-content > *:nth-child(1) { animation-delay: 0.02s; }
.home-content > *:nth-child(2) { animation-delay: 0.08s; }
.home-content > *:nth-child(3) { animation-delay: 0.14s; }
.home-content > *:nth-child(4) { animation-delay: 0.2s; }
.home-content > *:nth-child(5) { animation-delay: 0.26s; }

::selection {
  background: color-mix(in srgb, var(--brand-primary) 55%, #000);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand-primary) 50%, transparent) transparent;
}

/* ─── Desktop polish ───────────────────────────────────── */
@media (min-width: 900px) {
  :root { --pm-max: 980px; }

  .home-content,
  .missions-content {
    gap: 26px !important;
    padding-top: 28px !important;
  }

  .promo-banner,
  .page-banner {
    min-height: 320px !important;
  }

  .home-hub-grid,
  .mini-banner-grid {
    gap: 18px !important;
  }

  .mobile-nav {
    display: none !important;
  }

  .home-page,
  .missions-page {
    padding-bottom: 40px !important;
  }
}

@media (max-width: 768px) {
  .promo-banner,
  .mini-banner,
  .home-hub-card,
  .mission-card,
  .page-banner {
    border-radius: 18px !important;
  }

  .header-register {
    padding: 0.65rem 0.9rem !important;
  }
}