:root {
  --bg-top: #7ec8f0;
  --bg-bot: #b8e4f8;
  --blue: #1e88e5;
  --ink: #1a237e;
  --panel: rgba(255, 255, 255, 0.92);
  /* Cap safe areas — Telegram Mini App can report huge insets that inflate the dock */
  --safe-top: min(env(safe-area-inset-top, 0px), 48px);
  --safe-bot: min(env(safe-area-inset-bottom, 0px), 34px);
  --dock-h: 64px;
  /* Prefer dynamic viewport — never leave a short “letterbox” shell */
  --app-vh: 100dvh;
  --font: "Montserrat", "Segoe UI", sans-serif;
  --num: "Roboto", "Montserrat", sans-serif;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat_bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/roboto_medium_numbers.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  height: var(--app-vh, 100dvh);
  overflow: hidden;
  font-family: var(--font);
  background: #0d1b2a;
  color: #fff;
  user-select: none;
  touch-action: none;
}

#app-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  height: var(--app-vh, 100dvh);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.45);
}

@media (min-width: 900px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 30% 20%, #1b3a4b 0%, transparent 50%),
      #0d1b2a;
    /* Desktop preview: tall phone frame, not a short stamp */
    min-height: 100dvh;
    height: 100dvh;
  }
  #app-shell {
    width: min(430px, 100vw - 32px);
    height: min(920px, calc(100dvh - 24px));
    min-height: min(920px, calc(100dvh - 24px));
    border-radius: 24px;
    /* Ignore Telegram --app-vh leftover on desktop browser */
    max-height: calc(100dvh - 24px);
  }
}

/* Inside Telegram: fill the Mini App — never a short half-screen shell */
html.is-telegram,
html.is-telegram body,
html.is-telegram #app-shell {
  width: 100%;
  max-width: none;
  border-radius: 0 !important;
  min-height: 100%;
  height: var(--app-vh, 100%);
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bot));
  z-index: 10;
  background: linear-gradient(180deg, rgba(126,200,240,0.94), rgba(184,228,248,0.96));
}
.screen.active { display: flex; }
#hud.screen {
  background: transparent;
  pointer-events: none;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
}
#hud.screen.active { display: flex; }

/* Blue smoke from top — soft atmospheric wash behind HUD */
#hud .hud-top-wash {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(42vh, 280px);
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(30, 110, 200, 0.72) 0%, rgba(30, 110, 200, 0) 72%),
    radial-gradient(ellipse 42% 40% at 12% 0%, rgba(55, 150, 230, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 42% 40% at 88% 0%, rgba(55, 150, 230, 0.45) 0%, transparent 70%),
    linear-gradient(
      180deg,
      rgba(25, 95, 185, 0.78) 0%,
      rgba(45, 130, 210, 0.52) 18%,
      rgba(80, 160, 225, 0.28) 42%,
      rgba(120, 185, 235, 0.1) 68%,
      rgba(140, 200, 240, 0) 100%
    );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
#hud .hud-top-row,
#hud .hud-actions,
#hud .hud-cashout,
#hud-crowd {
  z-index: 6;
}

.brand {
  font-size: clamp(2rem, 10vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0d47a1;
  text-shadow: 0 3px 0 rgba(255,255,255,0.55);
  margin: 0 0 8px;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  line-height: 1.1;
}
.sub {
  margin: 0 0 28px;
  color: #1565c0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.btn {
  pointer-events: auto;
  border: 0;
  border-radius: 16px;
  padding: 14px 28px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  box-shadow: 0 6px 0 #0d47a1, 0 10px 20px rgba(13,71,161,0.35);
  cursor: pointer;
  min-width: 200px;
  transition: transform 0.12s ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #0d47a1; }
.btn.orange { background: linear-gradient(180deg, #ffb74d, #f57c00); box-shadow: 0 6px 0 #e65100; }
.btn.green { background: linear-gradient(180deg, #66bb6a, #2e7d32); box-shadow: 0 6px 0 #1b5e20; }
.btn.ghost {
  background: rgba(255,255,255,0.35);
  color: #0d47a1;
  box-shadow: none;
  margin-top: 10px;
}

.diff-row {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  pointer-events: auto;
}
.diff-btn {
  border: 2px solid rgba(13, 71, 161, 0.25);
  background: rgba(255, 255, 255, 0.55);
  color: #0d47a1;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  min-width: 72px;
}
.diff-btn.active {
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  color: #fff;
  border-color: #0d47a1;
  box-shadow: 0 3px 0 #0d47a1;
}

.panel {
  background: var(--panel);
  color: var(--ink);
  border-radius: 20px;
  padding: 22px 20px;
  width: min(100%, 340px);
  text-align: center;
  box-shadow: 0 12px 30px rgba(13,71,161,0.18);
}
.panel h2 { margin: 0 0 8px; font-size: 1.6rem; }
.panel p { margin: 0 0 16px; opacity: 0.8; }
.stat-row {
  display: flex;
  justify-content: space-around;
  margin: 12px 0 18px;
  font-family: var(--num);
  font-size: 1.25rem;
  font-weight: 700;
}

#load-wrap,
.load-meter {
  width: min(280px, 100%);
  display: grid;
  gap: 8px;
  margin-top: 0;
}
.load-meter-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #dbeafe;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}
#load-bar,
.load-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1e88e5 0%, #29b6f6 55%, #00acc1 100%);
  box-shadow: 0 0 12px rgba(30, 136, 229, 0.45);
  transition: width 0.22s ease-out;
}
.load-meter-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 55%);
  pointer-events: none;
}
.load-meter-pct {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1565c0;
  letter-spacing: 0.04em;
}
#load-text,
.load-status {
  margin: 10px 0 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
}
.load-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(320px, 88vw);
  padding: 22px 20px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 40px rgba(13, 71, 161, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#hud-top {
  display: none;
}
.hud-level-badge {
  display: none;
}

/* —— Top HUD: Quit | Progress+Meta | Coins —— */
.hud-top-row,
.hud-meta {
  --hud-gap: clamp(10px, 2.8vw, 16px);
  --hud-side: clamp(56px, 16vw, 96px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: var(--hud-side) minmax(0, 1fr) var(--hud-side);
  align-items: start;
  column-gap: var(--hud-gap);
  padding:
    calc(12px + var(--safe-top))
    max(12px, env(safe-area-inset-right, 0px))
    0
    max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
  box-sizing: border-box;
}

.hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 240px;
  justify-self: center;
}

/* Progress pill — reference style: continuous white rim, flat cyan fill */
.hud-meta-bar {
  --meta-blue: #5bc8ff;
  --meta-blue-hi: #7ad8ff;
  --meta-dark: #1a1e24;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0 3px 0 0;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--meta-dark);
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.28),
    0 0 16px rgba(255, 255, 255, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: visible;
}
.hud-meta-badge {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: -6px 0 -6px -3px;
  border-radius: 50%;
  background: var(--meta-blue);
  border: 3px solid #fff;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  line-height: 1;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 1px rgba(0, 60, 100, 0.3);
}
.hud-meta-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(100% - 6px);
  margin: 0 4px 0 2px;
  border-radius: 999px;
  overflow: hidden;
  background: #14181e;
}
.hud-meta-fill,
#hud-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  max-width: 100%;
  height: 100%;
  border-radius: 999px;
  /* smoke-like blue: lighter haze on top */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #9fe0ff 0%, var(--meta-blue) 38%, #3aaeef 100%);
  transition: width 0.14s linear;
  transform: none;
  transform-origin: left center;
  will-change: width;
  min-width: 0;
  overflow: hidden;
}
.hud-meta-thumb {
  display: none;
}
.hud-meta-fill.near-goal {
  filter: brightness(1.08);
}
.hud-meta-fill.goal-hit {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #8aefb0 0%, #4ecb7a 100%);
}
.hud-meta-flag {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 0;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #1c1c1c 25%, transparent 25%),
    linear-gradient(-45deg, #1c1c1c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1c1c1c 75%),
    linear-gradient(-45deg, transparent 75%, #1c1c1c 75%);
  background-size: 7px 7px;
  background-position: 0 0, 0 3.5px, 3.5px -3.5px, -3.5px 0;
}

.hud-meta-goal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(18, 22, 30, 0.78);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hud-meta-goal-label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}
.hud-meta-goal-val,
#hud-meta-val {
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.86rem;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hud-meta-goal.near-goal {
  border-color: #7ad4ff;
}
.hud-meta-goal.goal-hit {
  background: rgba(30, 120, 60, 0.82);
  border-color: #7ae89a;
}

.hud-side-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  justify-self: end;
  width: 100%;
}
.hud-coin-pill,
#hud-coins {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 92px;
  min-height: 30px;
  height: 30px;
  padding: 0 34px 0 10px;
  box-sizing: border-box;
  border-radius: 999px;
  background: rgba(28, 32, 40, 0.88);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  border: 2px solid #fff;
}
#hud-coins-val {
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
.hud-coin-orb {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  background:
    radial-gradient(circle at 30% 26%, #fff 0 2.5px, transparent 3px),
    radial-gradient(circle at 38% 32%, #ffe56a 0%, #ffd54f 38%, #ffc107 68%, #f57f17 100%);
  border: 2px solid #ffe082;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 -3px 5px rgba(183, 80, 0, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(160, 70, 0, 0.4);
}

.hud-brl-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 92px;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(180deg, #6be08a 0%, #3ecf6a 55%, #2bb85a 100%);
  border: 2px solid #fff;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  pointer-events: none;
}
.hud-brl-pill[hidden] {
  display: none !important;
}
#hud-brl-session {
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.82rem;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(20, 90, 40, 0.35);
  line-height: 1;
  white-space: nowrap;
}
.hud-brl-pill.pulse {
  animation: brlPillPulse 0.85s ease-in-out infinite;
}
@keyframes brlPillPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.04); filter: brightness(1.08); }
}

@media (max-width: 400px) {
  .hud-top-row,
  .hud-meta {
    --hud-side: 44px;
    --hud-gap: 8px;
  }
  .hud-center {
    max-width: 200px;
  }
  .hud-meta-bar {
    height: 28px;
  }
  .hud-meta-badge {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  .hud-meta-flag {
    width: 24px;
    height: 24px;
  }
  .hud-quit span {
    display: none;
  }
  .hud-quit {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }
  .hud-coin-pill,
  #hud-coins,
  .hud-brl-pill {
    max-width: 78px;
  }
  .hud-coin-orb {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
  }
}

/* ——— Menu home: modern Count Masters lobby ——— */
.menu-home {
  justify-content: flex-start;
  align-items: stretch;
  padding: calc(8px + var(--safe-top)) 14px 0;
  overflow: hidden; /* dock stays pinned; tabs scroll */
  background: transparent !important;
  isolation: isolate;
}
.menu-world {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, #4aa3e0 0%, #7ec8f0 42%, #b8e4f8 78%, #dff3fb 100%);
}
.menu-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 55% at 50% -8%, rgba(255,255,255,0.4), transparent 58%);
}
.menu-snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.menu-snow span {
  position: absolute;
  top: -8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  animation: snow-fall linear infinite;
  opacity: 0.75;
}
@keyframes snow-fall {
  0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
  12% { opacity: 0.8; }
  100% { transform: translate3d(12px, 110vh, 0); opacity: 0.15; }
}
.menu-crowd {
  position: absolute;
  bottom: 15%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  opacity: 0.88;
  filter: drop-shadow(0 5px 6px rgba(13, 71, 161, 0.15));
}
.menu-crowd-blue { left: 5%; animation: crowd-bob 2.6s ease-in-out infinite; }
.menu-crowd-red { right: 5%; animation: crowd-bob 2.6s ease-in-out infinite 0.4s; }
.menu-crowd i {
  display: block;
  width: 12px;
  height: 24px;
  border-radius: 999px 999px 5px 5px;
  position: relative;
  background: linear-gradient(180deg, #8fd4ff, #2196f3);
}
.menu-crowd-red i { background: linear-gradient(180deg, #ff8a80, #f44336); }
.menu-crowd i::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: inherit;
}
.menu-crowd i:nth-child(2) { height: 28px; }
.menu-crowd i:nth-child(3) { height: 22px; }
.menu-crowd i:nth-child(4) { height: 30px; }
.menu-crowd i:nth-child(5) { height: 25px; }
@keyframes crowd-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.menu-track {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 118%;
  height: 16%;
  transform: translateX(-50%) perspective(420px) rotateX(52deg);
  transform-origin: center bottom;
}
.menu-track-face {
  width: 100%;
  height: 100%;
  border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(90deg, #f4f7fb 0 26px, #e8eef5 26px 52px);
  box-shadow: 0 -6px 20px rgba(13, 71, 161, 0.1);
  border: 2px solid rgba(255,255,255,0.6);
  border-bottom: 0;
}

.game-header,
.menu-tabs {
  position: relative;
  z-index: 2;
}

/* Header */
.game-header {
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 4px;
  flex: 0 0 auto;
  pointer-events: auto;
}
.hdr-saldo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 12px 5px 5px;
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe082, #ffb300 55%, #fb8c00);
  box-shadow: 0 3px 0 #e65100, 0 8px 14px rgba(230,81,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  color: #fff;
  font-family: var(--font);
  cursor: default;
}
.hdr-saldo-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, #fffde7, #ffd54f 55%, #ff8f00);
  border: 2px solid #fff;
  color: #e65100;
  font-weight: 900;
  font-size: 0.9rem;
}
.hdr-saldo-val {
  font-family: var(--num);
  font-size: 0.95rem;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  white-space: nowrap;
}
.hdr-level {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 12px rgba(13,71,161,0.1);
  backdrop-filter: blur(8px);
}
.hdr-level-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #64b5f6, #1565c0);
  color: #fff;
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.78rem;
  box-shadow: 0 2px 0 #0d47a1;
}
.hdr-level-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(13,71,161,0.12);
  overflow: hidden;
}
.hdr-level-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fc3f7, #1976d2 70%, #ffd54f);
  box-shadow: 0 0 8px rgba(79,195,247,0.55);
  transition: width 0.4s ease;
}
.hdr-level-xp {
  font-size: 0.62rem;
  font-weight: 800;
  color: #0d47a1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hdr-account {
  position: relative;
  z-index: 40;
  margin-left: auto;
}
.hdr-account-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 3px 8px 3px 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 16px rgba(13, 71, 161, 0.14);
  color: #0d47a1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hdr-account-btn:active { transform: scale(0.97); }
.hdr-account-btn.is-open {
  background: #fff;
  box-shadow: 0 8px 20px rgba(13, 71, 161, 0.18), 0 0 0 3px rgba(30, 136, 229, 0.18);
}
.hdr-account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #42a5f5, #1565c0);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.hdr-account-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 0.9rem;
}
.hdr-account-chev {
  opacity: 0.55;
  transition: transform 0.2s ease;
}
.hdr-account-btn.is-open .hdr-account-chev {
  transform: rotate(180deg);
  opacity: 0.85;
}

.hdr-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(292px, calc(100vw - 24px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
.hdr-account-menu[hidden] { display: none !important; }
.hdr-account-menu.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hdr-account-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 40px rgba(13, 71, 161, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  color: #0f172a;
}
.hdr-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid #eef2f7;
}
.hdr-account-head-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hdr-account-head-text strong {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hdr-account-head-text small {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdr-account-section {
  display: grid;
  gap: 2px;
  padding: 8px;
}
.hdr-account-footer {
  padding: 4px 8px 8px;
  border-top: 1px solid #eef2f7;
}
.hdr-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}
.hdr-account-item:active,
.hdr-account-item:hover {
  background: #f1f5f9;
}
.hdr-account-item--danger:hover,
.hdr-account-item--danger:active {
  background: #fef2f2;
}
.hdr-account-ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #334155;
  background: #f1f5f9;
}
.hdr-account-ico--blue { color: #1565c0; background: #e3f2fd; }
.hdr-account-ico--green { color: #2e7d32; background: #e8f5e9; }
.hdr-account-ico--teal { color: #00838f; background: #e0f7fa; }
.hdr-account-ico--amber { color: #ef6c00; background: #fff3e0; }
.hdr-account-ico--red { color: #c62828; background: #ffebee; }
.hdr-account-item-txt {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 1px;
}
.hdr-account-item-txt strong {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hdr-account-item-txt small {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}
.hdr-account-item--danger .hdr-account-item-txt strong { color: #c62828; }
.hdr-account-switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.hdr-account-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition: transform 0.18s ease;
}
.hdr-account-switch.is-on {
  background: #1e88e5;
}
.hdr-account-switch.is-on i {
  transform: translateX(16px);
}

body.is-guest .hdr-account-section--logged,
body.is-guest .hdr-account-footer {
  display: none !important;
}
body.is-logged .hdr-account-section--guest {
  display: none !important;
}
body.is-guest .hdr-account { display: none !important; }
body.is-logged .hdr-help { display: none !important; }
body.is-guest .hdr-saldo { display: none !important; }
body.is-guest .hdr-level { display: none !important; }

.hdr-help {
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #64b5f6, #1565c0);
  box-shadow: 0 3px 0 #0d47a1, inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.hdr-help:active { transform: translateY(2px); }
.hdr-help[hidden] { display: none !important; }
.hdr-account[hidden] { display: none !important; }

.hdr-bell-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5252;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(255,82,82,0.25);
  animation: notifPulse 1.6s ease-in-out infinite;
}
.hdr-bell-dot[hidden] { display: none !important; }
@keyframes notifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.hdr-notif {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  z-index: 50;
  transform-origin: top right;
  pointer-events: none;
}
.hdr-notif[hidden] { display: none !important; }
.hdr-notif.is-open { pointer-events: auto; }
.hdr-notif-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(21, 101, 192, 0.1);
  box-shadow:
    0 18px 40px rgba(13, 71, 161, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
  filter: blur(4px);
  transition:
    opacity 0.28s cubic-bezier(0.2, 0.9, 0.25, 1),
    transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1),
    filter 0.28s ease;
}
.hdr-notif.is-open .hdr-notif-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.hdr-notif.is-closing .hdr-notif-card {
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  filter: blur(2px);
  transition-duration: 0.2s;
}
.hdr-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.hdr-notif-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hdr-notif-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.98rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.hdr-notif-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-family: var(--num);
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1e88e5);
  box-shadow: 0 2px 0 #1565c0;
}
.hdr-notif-clear {
  border: 0;
  background: transparent;
  color: #1e88e5;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.hdr-notif-clear:active { background: rgba(30, 136, 229, 0.1); }
.hdr-notif-list {
  max-height: min(52vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hdr-notif-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: notifItemIn 0.34s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hdr-notif-item:nth-child(1) { animation-delay: 0.04s; }
.hdr-notif-item:nth-child(2) { animation-delay: 0.08s; }
.hdr-notif-item:nth-child(3) { animation-delay: 0.12s; }
.hdr-notif-item:nth-child(4) { animation-delay: 0.16s; }
.hdr-notif-item:nth-child(5) { animation-delay: 0.2s; }
.hdr-notif-item:active { transform: scale(0.98); }
.hdr-notif-item.is-unread {
  background: linear-gradient(180deg, #eef7ff, #e3f2fd);
  border-color: rgba(30, 136, 229, 0.16);
}
.hdr-notif-item.is-unread::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}
@keyframes notifItemIn {
  to { opacity: 1; transform: translateY(0); }
}
.hdr-notif-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.hdr-notif-ico.tip { background: linear-gradient(180deg, #64b5f6, #1e88e5); }
.hdr-notif-ico.win { background: linear-gradient(180deg, #81c784, #43a047); }
.hdr-notif-ico.coin { background: linear-gradient(180deg, #ffd54f, #fb8c00); }
.hdr-notif-ico.alert { background: linear-gradient(180deg, #ff8a65, #e53935); }
.hdr-notif-body { min-width: 0; }
.hdr-notif-item-title {
  margin: 0 0 2px;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.hdr-notif-item-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
}
.hdr-notif-item-time {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
}
.hdr-notif-empty {
  margin: 0;
  padding: 28px 16px 32px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}
.hdr-notif-empty[hidden] { display: none !important; }

/* Tabs */
.menu-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 calc(var(--dock-h) + 28px + var(--safe-bot));
}
.menu-tab {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  animation: tab-in 0.28s ease both;
}
.menu-tab.active {
  display: flex;
}
.menu-tab[hidden] { display: none !important; }
@keyframes tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.menu-hero {
  display: flex;
  justify-content: center;
  margin: 8px 0 6px;
}

/* Promo banner carousel — imagem completa, só cantos arredondados */
.promo-slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 6px 0 4px;
  pointer-events: auto;
  touch-action: pan-y;
}
.promo-viewport {
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 20px rgba(13, 71, 161, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  background: #5eb6ef;
  line-height: 0;
}
.promo-track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.promo-slide {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  position: relative;
  line-height: 0;
}
.promo-slide img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  object-fit: unset;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.promo-dots {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  margin-top: 8px;
  pointer-events: auto;
}
.promo-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(13, 71, 161, 0.25);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.promo-dot.is-active {
  width: 18px;
  background: #0d47a1;
}

.brand-logo {
  display: block;
  width: min(52vw, 210px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(13,71,161,0.25));
}
.brand-logo-hero {
  width: min(62vw, 220px);
  max-height: min(14vh, 96px);
  animation: logo-pop 0.7s cubic-bezier(0.22, 1.3, 0.36, 1) both;
}
.brand-logo-lg {
  width: min(72vw, 240px);
  max-height: 110px;
  margin-bottom: 0;
}
@keyframes logo-pop {
  from { opacity: 0; transform: scale(0.86) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.menu-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 6px;
  margin-bottom: 4px;
  width: 100%;
}

.bet-play-stack {
  position: relative;
  width: min(340px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bet-panel {
  position: relative;
  z-index: 5;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  pointer-events: auto;
}
.bet-panel-body {
  padding: 14px 14px 12px;
  text-align: center;
}
.bet-label { display: none; }
.bet-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 12px;
}
.bet-chip {
  border: 0;
  border-radius: 14px;
  padding: 12px 4px;
  background: linear-gradient(180deg, #fff, #e8f4fc);
  color: #0d47a1;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #90caf9;
  transition: transform 0.1s ease;
}
.bet-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 #90caf9; }
.bet-chip.active {
  background: linear-gradient(180deg, #4fc3f7, #1565c0);
  color: #fff;
  box-shadow: 0 3px 0 #0d47a1, inset 0 1px 0 rgba(255,255,255,0.3);
}

.play-cta-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
  animation: demo-cta-pulse 1.8s ease-in-out infinite;
}
.play-cta-btn img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.play-cta-btn:active {
  animation: none;
  transform: scale(0.97);
  filter: drop-shadow(0 3px 8px rgba(13, 71, 161, 0.2));
}

/* Legacy hang button (unused) */
.play-hang { display: none !important; }

.play-pitch {
  position: relative;
  z-index: 2;
  width: min(320px, 92%);
  margin: 14px auto 12px;
  text-align: center;
  pointer-events: none;
  animation: pitch-in 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: 0.12s;
}
.play-pitch-head { display: none; }
.play-pitch-sub {
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(0.8rem, 3.1vw, 0.9rem);
  line-height: 1.3;
  color: #1565c0;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.play-pitch-gem { display: none; }
@keyframes pitch-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gem-twinkle {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* ——— Membros Diamante feed (social posts) ——— */
.member-feed {
  --fb-font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  width: 100%;
  max-width: 420px;
  margin: 8px auto 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  font-family: var(--fb-font);
}
.fb-post {
  width: 100%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  animation: pitch-in 0.4s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: 0.18s;
}
.fb-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 6px;
}
.fb-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #e8eef5;
}
.fb-post-meta {
  min-width: 0;
  flex: 1;
}
.fb-post-name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fb-font);
  font-weight: 600;
  font-size: 0.94rem;
  color: #050505;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.fb-post-badge {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.48rem;
  color: #fff;
  background: linear-gradient(180deg, #4fc3f7, #1565c0);
  flex: 0 0 auto;
}
.fb-post-time {
  margin: 2px 0 0;
  font-family: var(--fb-font);
  font-size: 0.76rem;
  font-weight: 400;
  color: #65676b;
  line-height: 1.2;
}
.fb-post-text {
  margin: 0;
  padding: 4px 14px 12px;
  font-family: var(--fb-font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: #050505;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fb-post-media {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f0f2f5;
  line-height: 0;
}
.fb-post-media img {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: center top;
}
.fb-post-stats {
  list-style: none;
  margin: 0;
  padding: 10px 6px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid #f0f2f5;
  background: #fafbfc;
}
.fb-post-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 2px 4px;
  position: relative;
}
.fb-post-stats li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: #e4e6eb;
}
.fb-stat-val {
  font-family: var(--fb-font);
  font-size: 0.8rem;
  font-weight: 600;
  color: #050505;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.fb-stat-lbl {
  font-family: var(--fb-font);
  font-size: 0.62rem;
  font-weight: 400;
  color: #65676b;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: none;
}
@media (max-width: 380px) {
  .member-feed { gap: 10px; }
  .fb-post { border-radius: 14px; }
  .fb-post-text { font-size: 0.9rem; }
  .fb-post-name { font-size: 0.9rem; }
  .fb-stat-val { font-size: 0.74rem; }
  .fb-stat-lbl { font-size: 0.58rem; }
}

/* ——— Home FAQ (black accordion · blue accents) ——— */
.home-faq {
  width: 100%;
  max-width: 420px;
  margin: 6px auto 28px;
  padding: 16px 12px 14px;
  border-radius: 22px;
  background: #061018;
  border: 1px solid rgba(66, 165, 245, 0.22);
  box-shadow:
    0 14px 36px rgba(7, 32, 58, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.home-faq-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 14px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid rgba(66, 165, 245, 0.12);
}
.home-faq-kicker {
  margin: 0;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64b5f6;
  line-height: 1.2;
}
.home-faq-title {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(0.95rem, 3.4vw, 1.08rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #e3f2fd;
  line-height: 1.25;
}
.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-faq-item {
  margin: 0;
  border-radius: 14px;
  background: #12263a;
  border: 1px solid rgba(100, 181, 246, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.home-faq-item[open] {
  background: #16324c;
  border-color: rgba(66, 165, 245, 0.55);
  box-shadow:
    0 0 0 1px rgba(30, 136, 229, 0.18),
    0 8px 20px rgba(13, 71, 161, 0.28);
}
.home-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5faff;
  line-height: 1.3;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary span {
  min-width: 0;
  flex: 1;
}
.home-faq-chev {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  position: relative;
  border-radius: 50%;
  background: rgba(30, 136, 229, 0.18);
  border: 1px solid rgba(100, 181, 246, 0.35);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1), background 0.2s ease, border-color 0.2s ease;
}
.home-faq-chev::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid #bbdefb;
  border-bottom: 1.8px solid #bbdefb;
  transform: translate(-1px, -1px) rotate(-45deg);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1), border-color 0.2s ease;
}
.home-faq-item[open] .home-faq-chev {
  background: rgba(30, 136, 229, 0.35);
  border-color: rgba(144, 202, 249, 0.55);
  transform: rotate(90deg);
}
.home-faq-item[open] .home-faq-chev::before {
  border-color: #e3f2fd;
}
.home-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.home-faq-item[open] .home-faq-body {
  grid-template-rows: 1fr;
}
.home-faq-body > p {
  margin: 0;
  padding: 0 14px 14px;
  overflow: hidden;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.55;
  color: #b0bec5;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease 0.04s, transform 0.28s ease 0.04s;
}
.home-faq-item[open] .home-faq-body > p {
  opacity: 1;
  transform: translateY(0);
  color: #cfd8dc;
}
@media (max-width: 380px) {
  .home-faq { padding: 14px 10px 12px; border-radius: 18px; }
  .home-faq-title { font-size: 0.94rem; }
  .home-faq-item summary { font-size: 0.86rem; padding: 13px 12px; }
  .home-faq-body > p { font-size: 0.8rem; padding: 0 12px 13px; }
}

/* ——— Home footer (trust / legal) ——— */
.home-foot {
  width: 100%;
  max-width: 420px;
  margin: 4px auto 32px;
  padding: 22px 16px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0a1624 0%, #071018 100%);
  border: 1px solid rgba(66, 165, 245, 0.2);
  box-shadow: 0 14px 36px rgba(7, 32, 58, 0.3);
  text-align: center;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.home-foot-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.home-foot-logo {
  width: min(148px, 46vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.home-foot-tag {
  margin: 0;
  max-width: 28em;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: #90a4ae;
}
.home-foot-seals {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.home-foot-seal {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(18, 38, 58, 0.92);
  border: 1px solid rgba(100, 181, 246, 0.22);
}
.home-foot-seal-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #e3f2fd;
  background: linear-gradient(160deg, #1e88e5, #0d47a1);
  box-shadow: 0 3px 8px rgba(13, 71, 161, 0.35);
}
.home-foot-seal-ico.pix {
  background: linear-gradient(160deg, #32d583, #0f9f6e);
}
.home-foot-seal strong {
  display: block;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  color: #f5faff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.home-foot-seal small {
  display: block;
  margin-top: 2px;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  color: #90a4ae;
  line-height: 1.25;
}
.home-foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(66, 165, 245, 0.12);
}
.home-foot-links a {
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 700;
  color: #90caf9;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.home-foot-links a:active {
  color: #e3f2fd;
}
.home-foot-legal {
  margin: 0 0 8px;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.5;
  color: #78909c;
}
.home-foot-copy {
  margin: 0;
  font-family: var(--font);
  font-size: 0.66rem;
  font-weight: 700;
  color: #546e7a;
  letter-spacing: 0.02em;
}
@media (max-width: 380px) {
  .home-foot { padding: 18px 12px 16px; border-radius: 18px; }
  .home-foot-seal { padding: 9px 8px; }
  .home-foot-seal strong { font-size: 0.68rem; }
  .home-foot-links { gap: 6px 10px; }
  .home-foot-links a { font-size: 0.72rem; }
}

/* legacy orb hidden if residual markup */
.play-orb { display: none !important; }

/* Sheet tabs */
.tab-sheet {
  width: min(380px, 100%);
  margin: 8px auto 0;
  padding: 18px 16px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.95);
  box-shadow: 0 12px 28px rgba(13,71,161,0.14);
  backdrop-filter: blur(12px);
  color: #0d47a1;
  pointer-events: auto;
}
.tab-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
}
.tab-title-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #e3f2fd, #bbdefb);
  color: #1565c0;
}
.tab-lead {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: #1565c0;
  opacity: 0.85;
}
.fin-balance {
  display: none;
}
.fin-wrap {
  width: min(380px, 100%);
  margin: 4px auto 0;
  padding: 0 2px 8px;
  color: #0d47a1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fin-hero {
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, #0d47a1 0%, #1565c0 52%, #1e88e5 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(13, 71, 161, 0.28);
}
.fin-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.88;
}
.fin-hero-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  letter-spacing: 0.08em;
}
.fin-hero strong {
  display: block;
  font-family: var(--num);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fin-hero-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.88;
}
.fin-hero-note b { font-family: var(--num); font-weight: 800; }
.fin-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
.fin-action {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  font-family: var(--font);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.fin-action:active { transform: translateY(2px); }
.fin-action-in {
  background: linear-gradient(180deg, #66bb6a, #2e7d32);
  box-shadow: 0 4px 0 #1b5e20;
}
.fin-action-in:active { box-shadow: 0 1px 0 #1b5e20; }
.fin-action-out {
  background: linear-gradient(180deg, #4fc3f7, #1565c0);
  box-shadow: 0 4px 0 #0d47a1;
}
.fin-action-out:active { box-shadow: 0 1px 0 #0d47a1; }
.fin-action-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.fin-action-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fin-action-txt strong {
  font-size: 0.88rem;
  font-weight: 800;
}
.fin-action-txt small {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.88;
}
.fin-btn { display: none; }
.fin-min-note { display: none; }
.fin-wd-block { display: none; }
.fin-wd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.fin-wd-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: rgba(21, 101, 192, 0.1);
  color: #1565c0;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.fin-wd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-wd-list:empty { display: none; }
.fin-wd-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #eef7fc);
  border: 1px solid rgba(13, 71, 161, 0.08);
  box-shadow: 0 3px 0 rgba(144, 202, 249, 0.55);
}
.fin-wd-item strong {
  font-family: var(--num);
  font-size: 1rem;
  color: #0d1b2a;
}
.fin-wd-item .fin-wd-meta {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(13, 27, 42, 0.55);
}
.fin-wd-st {
  align-self: start;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.fin-wd-st.is-pending { background: rgba(255, 167, 38, 0.18); color: #e65100; }
.fin-wd-st.is-processing { background: rgba(33, 150, 243, 0.16); color: #1565c0; }
.fin-wd-st.is-paid { background: rgba(76, 175, 80, 0.16); color: #2e7d32; }
.fin-wd-st.is-rejected,
.fin-wd-st.is-cancelled { background: rgba(229, 57, 53, 0.14); color: #c62828; }
.fin-wd-empty {
  margin: 0;
  padding: 18px 14px;
  border-radius: 16px;
  background: rgba(227, 242, 253, 0.65);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fin-wd-empty[hidden] { display: none !important; }
.fin-empty-ico {
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.12);
}
.fin-wd-empty strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0d1b2a;
}
.fin-wd-empty p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1565c0;
  line-height: 1.35;
}
.fin-tip {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: #0d47a1;
}
.tab-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(227,242,253,0.65);
  font-size: 0.85rem;
  color: #1565c0;
  text-align: center;
}
.prize-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.prize-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(227,242,253,0.7);
}
.prize-card.locked { opacity: 0.62; }
.prize-card strong { display: block; font-size: 0.9rem; }
.prize-card small { color: #1565c0; font-size: 0.72rem; }
.prize-rank {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffd54f, #ff8f00);
  color: #fff;
  font-weight: 900;
  font-size: 0.7rem;
  box-shadow: 0 2px 0 #e65100;
}
.prize-reward {
  font-weight: 800;
  font-size: 0.82rem;
  color: #ef6c00;
}

/* ——— Perfil (settings / game app) ——— */
.pf-wrap {
  width: min(380px, 100%);
  margin: 4px auto 0;
  padding: 0 2px 8px;
  color: #0d47a1;
  pointer-events: auto;
}
.pf-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 2px 14px;
}
.pf-top-ico {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #1565c0;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 18px rgba(13, 71, 161, 0.12);
}
.pf-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d1b2a;
}
.pf-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1565c0;
  opacity: 0.9;
}
.pf-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-stack[hidden] { display: none !important; }
.pf-panel {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(13, 71, 161, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px;
  overflow: hidden;
}
.pf-panel-soft {
  background: rgba(227, 242, 253, 0.72);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
.pf-label {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d47a1;
}
.pf-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(13, 71, 161, 0.08);
}
.pf-seg-btn {
  border: 0;
  border-radius: 11px;
  padding: 10px 8px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  color: #1565c0;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pf-seg-btn.is-on {
  color: #fff;
  background: linear-gradient(180deg, #4fc3f7, #1565c0);
  box-shadow: 0 3px 0 #0d47a1, inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pf-form {
  display: grid;
  gap: 10px;
}
.pf-form[hidden] { display: none !important; }
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
}
.pf-field input,
.pf-form.hdr-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid rgba(13, 71, 161, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0d1b2a;
  background: #fff;
  box-shadow: 0 3px 0 rgba(144, 202, 249, 0.45);
}
.pf-field input:focus,
.pf-form.hdr-form input:focus {
  outline: 0;
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18);
}
.pf-cta {
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  margin-top: 2px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pf-cta-main {
  background: linear-gradient(180deg, #66bb6a, #2e7d32);
  box-shadow: 0 4px 0 #1b5e20;
}
.pf-cta-accent {
  background: linear-gradient(180deg, #ffb74d, #ef6c00);
  box-shadow: 0 4px 0 #e65100;
}
.pf-cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.pf-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pf-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0d47a1;
}
.pf-bullet-ico {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.16);
}
.pf-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, #0d47a1 0%, #1565c0 55%, #1e88e5 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(13, 71, 161, 0.28);
}
.pf-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--font);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #0d47a1;
  background: linear-gradient(160deg, #fff, #e3f2fd);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.pf-hero-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pf-hero-text strong {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-hero-text small {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-chip {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.pf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pf-stat {
  padding: 12px 8px;
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 18px rgba(13, 71, 161, 0.1);
}
.pf-stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1565c0;
  opacity: 0.85;
}
.pf-stat strong {
  font-family: var(--num);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0d1b2a;
}
.pf-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 0 6px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #eef7fc);
  box-shadow: 0 3px 0 #90caf9;
  color: #0d47a1;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pf-row:last-child { margin-bottom: 0; }
.pf-row:active:not(.pf-row-static) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #90caf9;
}
.pf-row-static {
  cursor: default;
  box-shadow: 0 2px 0 rgba(144, 202, 249, 0.55);
}
.pf-row-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.1);
}
.pf-ico-green { color: #2e7d32; background: rgba(76, 175, 80, 0.16); }
.pf-ico-blue { color: #1565c0; background: rgba(33, 150, 243, 0.14); }
.pf-ico-red { color: #c62828; background: rgba(229, 57, 53, 0.12); }
.pf-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pf-row-main strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0d1b2a;
}
.pf-row-main small {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}
.pf-row-chev {
  font-size: 1.25rem;
  font-weight: 700;
  color: #90caf9;
  line-height: 1;
}
.pf-row-danger {
  background: linear-gradient(180deg, #fff5f5, #ffebee);
  box-shadow: 0 3px 0 #ef9a9a;
  color: #c62828;
}
.pf-row-danger:active {
  box-shadow: 0 1px 0 #ef9a9a;
}
.pf-row-danger .pf-row-main strong { color: #b71c1c; }
.pf-switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #90caf9;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.pf-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(13, 27, 42, 0.2);
  transition: transform 0.15s ease;
}
.pf-switch.is-off { background: #cbd5e1; }
.pf-switch.is-off i { transform: translateX(0); }
.pf-switch:not(.is-off) i { transform: translateX(18px); }
.pf-switch:not(.is-off) { background: #43a047; }

.profile-card {
  display: none;
}
.profile-avatar { display: none; }
.hdr-form { display: grid; gap: 8px; }
.hdr-form input {
  width: 100%;
  border: 1.5px solid rgba(13,71,161,0.16);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: #0d47a1;
  background: #fff;
}
.hdr-form input:focus {
  outline: 2px solid rgba(30,136,229,0.35);
  border-color: #1e88e5;
}
.hdr-btn { min-width: 0; width: 100%; padding: 11px 14px; font-size: 0.92rem; }
.hdr-register { display: none !important; }
.hdr-auth[hidden] { display: none !important; }

/* ——— PIX withdraw social toasts (home only) ——— */
.withdraw-toasts {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--dock-h) + 18px + var(--safe-bot));
  top: auto;
  z-index: 45;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.withdraw-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(340px, 100%);
  padding: 8px 11px 8px 8px;
  border-radius: 999px;
  background: rgba(12, 14, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.withdraw-toast.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.withdraw-toast.is-out {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
}
.withdraw-toast-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #334155;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}
.withdraw-toast-text {
  margin: 0;
  min-width: 0;
  flex: 1;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f8fafc;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.withdraw-toast-pix {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #052e16;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  padding: 3px 6px;
  border-radius: 999px;
  line-height: 1;
}
.withdraw-toast-coin {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, #fff8e1, transparent 42%),
    linear-gradient(160deg, #ffe082 0%, #ffb300 48%, #f57c00 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 224, 130, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.35);
}
.withdraw-toast-coin i {
  font-style: normal;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 900;
  color: #7a3e00;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Bottom dock — pinned to menu shell (not inside scroll) */
.app-dock {
  position: absolute;
  left: 12px;
  right: 12px;
  /* Safe area only here — never also in padding (Telegram was double-counting → huge frosted bar) */
  bottom: calc(8px + var(--safe-bot));
  z-index: 40;
  flex: 0 0 auto;
  height: var(--dock-h);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 6px 4px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.16);
  pointer-events: auto;
}
/* Soft glass only outside Telegram WebView (blur is buggy there) */
html:not(.is-telegram) .app-dock {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.is-telegram .app-dock {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-telegram .withdraw-toast {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dock-item {
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 4px 2px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #64b5f6;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  min-height: 0;
}
.dock-item.active {
  color: #0d47a1;
  background: linear-gradient(180deg, rgba(227,242,253,0.95), rgba(187,222,251,0.75));
  transform: none;
}
.dock-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.dock-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.menu-wallet,
.menu-tagline,
.auth-box-compact,
.diff-row { display: none !important; }

.bet-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(227, 242, 253, 0.75);
  border: 1px solid rgba(144, 202, 249, 0.45);
}
.bet-preview-row {
  display: grid;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.bet-preview-row span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #78909c;
}
.bet-preview-row strong {
  font-family: var(--num);
  font-size: 0.82rem;
  font-weight: 900;
  color: #0d47a1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-box-compact {
  display: none;
}

.hud-brl-chip {
  display: none !important;
}
.hud-brl-chip[hidden] { display: none !important; }

.hud-cashout {
  position: absolute;
  left: 50%;
  top: calc(108px + var(--safe-top));
  bottom: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 120px);
  z-index: 35;
  pointer-events: auto;
  animation: cashoutIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hud-cashout[hidden] { display: none !important; }
.hud-cashout-btn {
  width: auto;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font);
  color: #6b4a08;
  background: linear-gradient(180deg, #ffe98a 0%, #f6c84a 48%, #e8a820 100%);
  border: 2px solid #fff8d6;
  box-shadow:
    0 3px 0 #c48a14,
    0 6px 14px rgba(180, 120, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hud-cashout-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #c48a14,
    0 3px 8px rgba(180, 120, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.hud-cashout-ico {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #fff6c8, #f0d060);
  box-shadow:
    0 1px 2px rgba(120, 80, 10, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.hud-cashout-ico svg {
  display: block;
  filter: drop-shadow(0 1px 0.5px rgba(120, 80, 10, 0.25));
}
.hud-cashout-msg {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: #7a560c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.hud-cashout-val {
  flex-shrink: 0;
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.84rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff8e0;
  background: linear-gradient(180deg, #d4a018, #b8820e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(100, 70, 10, 0.2);
  text-shadow: 0 1px 1px rgba(80, 50, 0, 0.25);
}
@keyframes cashoutIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* HUD quit — left cell of top grid */
.hud-quit {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 36;
  pointer-events: auto;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  cursor: pointer;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(10, 24, 48, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, background 0.12s ease;
}
.hud-quit:active {
  transform: scale(0.96);
  background: rgba(198, 40, 40, 0.75);
}
.hud-quit svg { display: block; flex-shrink: 0; }

/* Quit / desistência popup */
.quit-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px calc(20px + var(--safe-bot));
  pointer-events: auto;
}
.quit-overlay[hidden] { display: none !important; }
.quit-overlay.open { animation: loseScrimIn 0.22s ease both; }
.quit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 32, 0.58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.quit-sheet {
  position: relative;
  width: min(340px, 100%);
  padding: 22px 20px 16px;
  border-radius: 22px;
  text-align: center;
  color: #0d1b2a;
  background: linear-gradient(165deg, #ffffff 0%, #fff8f5 55%, #fff 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 48px rgba(13, 27, 42, 0.3);
  animation: loseSheetIn 0.4s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.quit-eyebrow {
  margin: 0 0 10px;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c62828;
  background: rgba(229, 57, 53, 0.1);
}
#quit-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d1b2a;
}
.quit-sub {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(13, 27, 42, 0.68);
}
.quit-confirm {
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #ef5350 0%, #c62828 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 0 #8e1b1b,
    0 14px 24px rgba(198, 40, 40, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.quit-confirm:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 3px 0 #8e1b1b,
    0 8px 14px rgba(198, 40, 40, 0.25);
}
.quit-cancel {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(13, 27, 42, 0.55);
}
.quit-cancel:active { color: #0d47a1; }

/* Start gate — confirma antes de sair */
.start-gate {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 20px calc(28px + var(--safe-bot));
  pointer-events: auto;
}
.start-gate[hidden] { display: none !important; }
.start-gate.open { animation: loseScrimIn 0.28s ease both; }
.start-gate-blur {
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 48, 0.34);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
}

.start-howto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, 92vw);
  margin-bottom: 6px;
  pointer-events: none;
}
.start-howto-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 18px 12px 14px;
  border-radius: 22px;
  background: rgba(13, 27, 42, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.start-howto-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.start-howto-arrow-l {
  animation: howtoArrowL 2.4s ease-in-out infinite;
}
.start-howto-arrow-r {
  animation: howtoArrowR 2.4s ease-in-out infinite;
}
.start-howto-swipe {
  position: relative;
  width: min(168px, 42vw);
  height: 72px;
  display: grid;
  place-items: center;
}
.start-howto-rail {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  overflow: hidden;
}
.start-howto-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126, 220, 255, 0.85) 50%,
    transparent 100%
  );
  width: 42%;
  animation: howtoRailShine 2.4s ease-in-out infinite;
}
.start-howto-ghost {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 12px rgba(126, 220, 255, 0.45);
}
.start-howto-ghost-l {
  left: 10px;
  animation: howtoGhostL 2.4s ease-in-out infinite;
}
.start-howto-ghost-r {
  right: 10px;
  animation: howtoGhostR 2.4s ease-in-out infinite;
}
.start-howto-finger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
  animation: howtoFingerSwipe 2.4s ease-in-out infinite;
}
.start-howto-finger svg {
  display: block;
}
.start-howto-title {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.start-howto-sub {
  margin: 0;
  max-width: 260px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.start-gate-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: #fff;
  font-family: var(--font);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.start-gate-pulse {
  position: absolute;
  top: 0;
  left: 50%;
  width: 92px;
  height: 92px;
  margin-left: -46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  animation: startPulse 1.8s ease-out infinite;
  pointer-events: none;
}
.start-gate-core {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #0d1b2a;
  background: linear-gradient(160deg, #ffffff 0%, #e8f6ff 45%, #b8e4ff 100%);
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 28px rgba(13, 27, 42, 0.28),
    0 0 0 10px rgba(255, 255, 255, 0.12);
  animation: startBob 1.8s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.start-gate-btn:active .start-gate-core {
  transform: scale(0.94);
  animation: none;
}
.start-gate-ico {
  display: block;
  margin-left: 4px;
}
.start-gate-label {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.start-gate-hint {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
@keyframes startPulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes startBob {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes howtoFingerSwipe {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-34px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(34px); }
}
@keyframes howtoArrowL {
  0%, 50%, 100% { opacity: 0.35; transform: translateX(0) scale(0.96); }
  25% { opacity: 1; transform: translateX(-4px) scale(1.08); }
}
@keyframes howtoArrowR {
  0%, 50%, 100% { opacity: 0.35; transform: translateX(0) scale(0.96); }
  75% { opacity: 1; transform: translateX(4px) scale(1.08); }
}
@keyframes howtoGhostL {
  0%, 50%, 100% { opacity: 0.15; transform: scale(0.85); }
  25% { opacity: 0.9; transform: scale(1.15); }
}
@keyframes howtoGhostR {
  0%, 50%, 100% { opacity: 0.15; transform: scale(0.85); }
  75% { opacity: 0.9; transform: scale(1.15); }
}
@keyframes howtoRailShine {
  0%, 100% { transform: translateX(-10%); opacity: 0.35; }
  25% { transform: translateX(-55%); opacity: 0.9; }
  50% { transform: translateX(20%); opacity: 0.35; }
  75% { transform: translateX(70%); opacity: 0.9; }
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(300px, 88vw);
  margin: 0 auto;
  pointer-events: auto;
}
.endless-meta {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 4px 0 8px;
}
.hud-meta-fill.near-goal {
  filter: brightness(1.08);
}
.hud-meta-fill.goal-hit {
  background: linear-gradient(180deg, #8aefb0 0%, #4ecb7a 55%, #2fa85a 100%);
}
.menu-secondary {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  pointer-events: auto;
}
.btn-icon {
  width: 56px;
  height: 56px;
  border: 0;
  cursor: pointer;
  background: url("../assets/ui/btn_shop.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 0 rgba(13,71,161,0.35));
}
.btn-icon.map {
  background-image: url("../assets/ui/btn_global_map.png");
}
.panel-apk {
  background: url("../assets/ui/Window_bg.png") center / cover no-repeat,
    var(--panel);
  border: 3px solid rgba(255,255,255,0.65);
}
.panel-apk.lose {
  background: url("../assets/ui/GradientBackground.png") center / cover no-repeat,
    rgba(255, 235, 238, 0.95);
}

/* —— Lose popup (corrida encerrada) —— */
#screen-lose {
  justify-content: center;
  align-items: center;
  padding: 20px 16px calc(20px + var(--safe-bot));
  z-index: 30;
  pointer-events: auto;
  background: transparent;
}
#screen-lose.active {
  animation: loseScrimIn 0.28s ease both;
}
.lose-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 112, 67, 0.22), transparent 55%),
    rgba(8, 18, 32, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lose-sheet {
  position: relative;
  width: min(360px, 100%);
  padding: 22px 20px 18px;
  border-radius: 22px;
  text-align: center;
  color: #0d1b2a;
  background:
    linear-gradient(165deg, #ffffff 0%, #fff8f5 48%, #fff 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 48px rgba(13, 27, 42, 0.28),
    0 8px 18px rgba(229, 57, 53, 0.12);
  animation: loseSheetIn 0.48s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.lose-eyebrow {
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c62828;
  background: rgba(229, 57, 53, 0.1);
}
.lose-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  animation: loseIconBob 2.4s ease-in-out infinite;
}
.lose-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 16px rgba(229, 57, 53, 0.28));
}
#lose-title {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d1b2a;
  line-height: 1.15;
}
#lose-sub {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(13, 27, 42, 0.68);
  font-weight: 600;
}
.lose-stats {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.lose-stat {
  flex: 1;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(13, 71, 161, 0.06);
  border: 1px solid rgba(13, 71, 161, 0.08);
}
.lose-stat-wide { flex: 1.35; }
.lose-stat[hidden],
#lose-coins-wrap[hidden] { display: none !important; }
.lose-stat-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(13, 27, 42, 0.45);
  margin-bottom: 2px;
}
.lose-stat strong {
  font-family: var(--num);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d47a1;
  word-break: break-word;
}
.lose-tip {
  position: relative;
  text-align: left;
  margin: 0 0 16px;
  padding: 12px 12px 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 136, 229, 0.1), rgba(255, 171, 64, 0.12));
  border: 1px solid rgba(30, 136, 229, 0.16);
  animation: loseTipIn 0.55s ease 0.18s both;
}
.lose-tip-badge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0d47a1;
  background: rgba(255, 255, 255, 0.75);
}
#lose-tip-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  font-weight: 600;
  color: #1a237e;
}
.lose-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 15px 18px;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(180deg, #ff9a3c 0%, #ff6d00 55%, #f4511e 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 0 #c43e00,
    0 16px 28px rgba(244, 81, 30, 0.35);
  transform: translateY(0);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.lose-cta:hover {
  filter: brightness(1.04);
}
.lose-cta:active {
  transform: translateY(6px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 4px 0 #c43e00,
    0 8px 16px rgba(244, 81, 30, 0.28);
}
.lose-cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: loseShine 2.8s ease-in-out 0.6s infinite;
  pointer-events: none;
}
.lose-cta-label {
  position: relative;
  z-index: 1;
}
.lose-menu {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(13, 27, 42, 0.55);
  transition: color 0.15s ease;
}
.lose-menu:hover { color: #0d47a1; }
.lose-menu:active { color: #1565c0; }

@keyframes loseScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes loseSheetIn {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loseTipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loseIconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes loseShine {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

@media (max-width: 380px) {
  .lose-sheet { padding: 18px 14px 14px; }
  #lose-title { font-size: 1.28rem; }
  .lose-cta { padding: 13px 14px; font-size: 0.98rem; }
}

.panel-payout {
  /* legacy alias — win screen uses .receipt */
  display: none;
}

/* —— Big Win popup (tigrinho-style, Count Masters theme) —— */
#screen-win {
  justify-content: center;
  align-items: center;
  padding: 16px;
  overflow: hidden;
  background: transparent;
}
#screen-win.screen.active {
  display: flex;
}
.bw-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, rgba(255, 200, 60, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(13, 71, 161, 0.55) 0%, transparent 50%),
    linear-gradient(180deg, rgba(8, 28, 58, 0.82) 0%, rgba(13, 45, 90, 0.78) 45%, rgba(20, 70, 130, 0.72) 100%);
}
.bw-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(120vw, 640px);
  height: min(120vw, 640px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background:
    conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 80, 0.18) 8deg, transparent 16deg, rgba(100, 190, 255, 0.12) 24deg, transparent 32deg);
  border-radius: 50%;
  animation: bwSpinRays 8s linear infinite;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 28%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, #000 28%, transparent 70%);
}
.bw-coin-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.bw-coin {
  position: absolute;
  top: -12%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff9c4 0 18%, transparent 22%),
    radial-gradient(circle at 50% 50%, #ffe56a 0%, #ffc107 55%, #f57f17 100%);
  border: 2px solid #ffe082;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 -2px 3px rgba(180, 80, 0, 0.3);
  animation: bwCoinFall linear forwards;
  font-size: 0;
}
.bw-coin::after {
  content: "$";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(140, 60, 0, 0.45);
}

.bw-card.bw-card-replay {
  animation: bwPopIn 0.65s cubic-bezier(0.18, 1.15, 0.35, 1) both;
}
.bw-rays {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 180%;
  height: 180%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: conic-gradient(from 20deg, transparent, rgba(255, 220, 100, 0.22), transparent 12%, rgba(120, 200, 255, 0.12), transparent 24%);
  animation: bwSpinRays 12s linear infinite;
  opacity: 0.7;
}
.bw-glow {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 80, 0.55) 0%, rgba(255, 180, 40, 0.15) 45%, transparent 70%);
  pointer-events: none;
  animation: bwPulseGlow 1.4s ease-in-out infinite;
}

.bw-head {
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
}
.bw-logo {
  display: block;
  margin: 0 auto 2px;
  width: auto;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.bw-brand {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 236, 170, 0.9);
}

.bw-tier {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 10px 0 4px;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(0.95rem, 4.2vw, 1.2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a2200;
  background: linear-gradient(180deg, #ffe56a 0%, #ffc107 48%, #f57f17 100%);
  border: 2px solid #fff6d0;
  box-shadow:
    0 4px 0 #c48a14,
    0 8px 20px rgba(255, 180, 40, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: bwTierPop 0.7s cubic-bezier(0.2, 1.4, 0.35, 1) 0.15s both, bwTierPulse 1.1s ease-in-out 0.9s infinite;
}
.bw-tier[data-tier="nice"] {
  background: linear-gradient(180deg, #b3e5fc 0%, #42a5f5 50%, #1565c0 100%);
  color: #fff;
  border-color: #e3f2fd;
  box-shadow: 0 4px 0 #0d47a1, 0 8px 20px rgba(66, 165, 245, 0.45);
}
.bw-tier[data-tier="good"] {
  background: linear-gradient(180deg, #ffe56a 0%, #ffc107 48%, #f57f17 100%);
}
.bw-tier[data-tier="super"] {
  background: linear-gradient(180deg, #ffecb3 0%, #ffb300 40%, #ff6f00 100%);
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
}
.bw-tier[data-tier="mega"] {
  background: linear-gradient(180deg, #fff59d 0%, #ffd600 35%, #ff6d00 70%, #ff1744 100%);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  animation: bwTierPop 0.7s cubic-bezier(0.2, 1.4, 0.35, 1) 0.15s both, bwMegaShake 0.55s ease-in-out 0.85s infinite;
}

.bw-title {
  position: relative;
  z-index: 2;
  margin: 8px 0 2px;
  font-size: clamp(1.55rem, 6.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 40, 90, 0.35), 0 0 24px rgba(255, 220, 100, 0.45);
}
.bw-sub {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: rgba(200, 230, 255, 0.92);
}

.bw-amount-wrap {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  padding: 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 236, 150, 0.22), rgba(255, 180, 40, 0.08));
  border: 2px solid rgba(255, 220, 120, 0.55);
  overflow: hidden;
}
.bw-amount-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: bwShine 2.2s ease-in-out 0.6s infinite;
  pointer-events: none;
}
.bw-amount {
  position: relative;
  margin: 0;
  font-family: var(--num);
  font-size: clamp(2.3rem, 10vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffe566;
  text-shadow:
    0 2px 0 #c48a14,
    0 0 28px rgba(255, 200, 40, 0.75),
    0 0 2px rgba(0, 0, 0, 0.35);
}

.bw-mult-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 20, 50, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.bw-mult-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 230, 255, 0.8);
}
#win-mult {
  font-family: var(--num);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff59d;
}

.bw-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.bw-stat {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0, 25, 60, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}
.bw-stat span {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 210, 240, 0.75);
  margin-bottom: 2px;
}
.bw-stat strong {
  font-family: var(--num);
  font-size: 0.98rem;
  font-weight: 800;
  color: #fff;
}
.bw-stat-profit strong {
  color: #a5f2b0;
}

.bw-meta,
.bw-ref {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--num);
  font-size: 0.68rem;
  color: rgba(180, 210, 240, 0.65);
}
.bw-ref { margin: 2px 0 14px; letter-spacing: 0.06em; }

.bw-actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.bw-btn-primary {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffe56a 0%, #ffc107 45%, #f9a825 100%);
  color: #3a2200;
  box-shadow: 0 5px 0 #c48a14, 0 10px 22px rgba(255, 180, 40, 0.35);
  border: 2px solid #fff6d0;
  font-weight: 800;
}
.bw-btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #c48a14;
}
.bw-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  animation: bwShine 2.4s ease-in-out infinite;
  pointer-events: none;
}
.bw-btn-ghost {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.bw-btn-ghost:active {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes bwPopIn {
  0% { opacity: 0; transform: scale(0.55) translateY(30px); }
  60% { opacity: 1; transform: scale(1.06) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bwSpinRays {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes bwPulseGlow {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes bwTierPop {
  0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  70% { transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bwTierPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.12); }
}
@keyframes bwMegaShake {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-2px) scale(1.04) rotate(-1deg); }
  75% { transform: translateX(2px) scale(1.04) rotate(1deg); }
}
@keyframes bwShine {
  0% { transform: translateX(-130%); }
  40%, 100% { transform: translateX(130%); }
}
@keyframes bwCoinFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 20px), 110vh, 0) rotate(720deg); opacity: 0.15; }
}

.stars {
  height: 36px;
  margin-bottom: 8px;
  background: url("../assets/ui/Star.png") center / auto 32px repeat-x;
}
.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 16px;
  max-height: 42vh;
  overflow: auto;
}
.shop-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  color: #0d47a1;
  font-weight: 700;
}
.shop-card .swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid rgba(13,71,161,0.25);
}
.shop-card button {
  min-width: 88px;
  padding: 8px 10px;
  font-size: 0.85rem;
}
.map-nodes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}
.map-node {
  border: 0;
  border-radius: 16px;
  padding: 14px 10px;
  min-height: 88px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background: url("../assets/ui/Build_04.png") center / cover no-repeat, #1565c0;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.map-node:nth-child(2) { background-image: url("../assets/ui/Build_06.png"); }
.map-node:nth-child(3) { background-image: url("../assets/ui/Build_08.png"); }
.map-node:nth-child(4) { background-image: url("../assets/ui/Build_10.png"); }
.map-node:nth-child(5) { background-image: url("../assets/ui/Build_12.png"), linear-gradient(#5e35b1,#311b92); grid-column: 1 / -1; }
.map-node.locked {
  filter: grayscale(0.85) brightness(0.7);
  cursor: not-allowed;
  opacity: 0.75;
}
.map-node small { display: block; font-weight: 600; opacity: 0.9; margin-top: 4px; }

#hud-crowd {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  opacity: 0;
}

#gate-floats {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: visible;
}

.gate-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.85);
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.2vw, 1.55rem);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: #fff;
  -webkit-text-stroke: 2.5px rgba(13, 71, 161, 0.55);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 0 rgba(13, 71, 161, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  will-change: transform, opacity;
  animation: gateFloatPop 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}

.gate-float.gain {
  color: #7ee8ff;
  -webkit-text-stroke: 2.5px rgba(13, 100, 160, 0.65);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 rgba(13, 90, 140, 0.4),
    0 0 12px rgba(57, 207, 242, 0.45);
}

.gate-float.loss {
  color: #ff6b5c;
  -webkit-text-stroke: 2.5px rgba(120, 20, 20, 0.55);
  text-shadow:
    0 1px 0 rgba(255, 220, 210, 0.35),
    0 2px 0 rgba(140, 30, 25, 0.4),
    0 0 12px rgba(229, 57, 53, 0.4);
}

@keyframes gateFloatPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8%) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -28%) scale(1.08);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110%) scale(0.94);
  }
}

.hud-actions {
  position: absolute;
  right: 10px;
  bottom: calc(10px + var(--safe-bot));
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  opacity: 0.55;
}
.hud-actions:hover, .hud-actions:focus-within { opacity: 1; }
.hud-actions .btn {
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.68rem;
  box-shadow: 0 2px 0 #0d47a1;
  border-radius: 12px;
}

#debug-panel {
  display: none;
  position: absolute;
  left: 8px;
  bottom: calc(8px + var(--safe-bot));
  background: rgba(0,0,0,0.55);
  color: #b2ff59;
  font: 11px/1.35 ui-monospace, monospace;
  padding: 8px;
  border-radius: 8px;
  white-space: pre;
  pointer-events: none;
  z-index: 20;
}
#debug-panel.active { display: block; }

.auth-box {
  width: min(100%, 340px);
  margin-top: 16px;
  background: rgba(255,255,255,0.55);
  border-radius: 16px;
  padding: 14px;
  color: #0d47a1;
}
.auth-box input {
  width: 100%;
  margin: 4px 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  font: inherit;
}
.auth-box button {
  width: 100%;
  margin-top: 4px;
}
#auth-status { font-size: 0.85rem; margin-bottom: 8px; opacity: 0.9; }
.menu-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-family: var(--num);
  font-weight: 700;
  color: #0d47a1;
}

.landing {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, #7ec8f0, #b8e4f8);
  color: #0d47a1;
}
.landing a.btn { text-decoration: none; display: inline-block; margin: 8px; }
.forms { width: min(360px, 100%); text-align: left; }
.forms label { display: block; margin-top: 10px; font-size: 0.85rem; }
.forms input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 0;
  margin-top: 4px;
}

/* ——— Deposit modal (PIX · clean game card) ——— */
.dep-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(8, 24, 48, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.dep-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.dep-overlay[hidden] { display: none !important; }
.dep-sheet {
  position: relative;
  width: min(100%, 360px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-radius: 22px;
  color: #0f172a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 48px rgba(8, 24, 48, 0.35);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.dep-overlay.open .dep-sheet { transform: translateY(0) scale(1); }
.dep-banner {
  width: 100%;
  overflow: hidden;
  background: #e0f2fe;
  line-height: 0;
}
.dep-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}
.dep-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.dep-body {
  padding: 12px 14px 14px;
}
.dep-head {
  text-align: center;
  margin: 0 0 12px;
}
.dep-head h2 {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.dep-trust {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
}
.dep-label {
  margin: 0 0 8px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}
.dep-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.dep-chip {
  position: relative;
  border: 1.5px solid #dbeafe;
  border-radius: 12px;
  padding: 11px 4px 10px;
  background: #f0f9ff;
  color: #1e40af;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dep-chip-val { display: block; }
.dep-chip-tag {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #1e88e5;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.dep-chip:active { transform: translateY(1px); }
.dep-chip.active {
  background: linear-gradient(180deg, #42a5f5, #1e88e5 55%, #1565c0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 0 #0d47a1, 0 8px 14px rgba(21, 101, 192, 0.22);
}
.dep-chip.active .dep-chip-tag {
  background: #fff;
  color: #1565c0;
}
.dep-field {
  display: block;
  margin-bottom: 8px;
}
.dep-field > span {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}
.dep-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border-radius: 11px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 12px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dep-input-wrap:focus-within {
  background: #fff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}
.dep-input-wrap > span {
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.86rem;
}
.dep-input-wrap input {
  border: 0;
  background: transparent;
  color: #0f172a;
  font-family: var(--num);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 0;
  width: 100%;
  outline: none;
  box-shadow: none;
}
.dep-bonus-line {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
  min-height: 1.2em;
}
.dep-bonus-line strong { color: #0f172a; font-weight: 700; }
.dep-bonus-line.is-on {
  color: #1565c0;
  font-weight: 600;
}
.dep-bonus-line.is-on strong { color: #0d47a1; }
.dep-bonus-line span { opacity: 0.85; }
.dep-msg {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.dep-msg.info {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.dep-msg[hidden] { display: none !important; }
.dep-cta {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1e88e5 55%, #1565c0);
  box-shadow: 0 3px 0 #0d47a1, 0 8px 14px rgba(21, 101, 192, 0.24);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.dep-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d47a1; }
.dep-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.dep-cta-spin {
  display: none;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: depSpin 0.65s linear infinite;
}
.dep-cta.is-loading .dep-cta-label { visibility: hidden; }
.dep-cta.is-loading .dep-cta-spin {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
}
@keyframes depSpin {
  to { transform: rotate(360deg); }
}
.dep-timer {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0 auto 12px;
  padding: 10px 16px 12px;
  width: fit-content;
  min-width: 148px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}
.dep-timer-lbl {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.dep-timer-val {
  font-family: var(--num);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.dep-timer-sub {
  font-size: 0.66rem;
  font-weight: 500;
  color: #64748b;
}
.dep-timer.is-urgent {
  background: #fff7ed;
  border-color: #fdba74;
}
.dep-timer.is-urgent .dep-timer-val { color: #ea580c; }
.dep-timer.is-urgent .dep-timer-lbl,
.dep-timer.is-urgent .dep-timer-sub { color: #c2410c; }
.dep-timer.is-expired {
  background: #fef2f2;
  border-color: #fecaca;
}
.dep-timer.is-expired .dep-timer-val { color: #dc2626; }
.dep-timer.is-expired .dep-timer-lbl,
.dep-timer.is-expired .dep-timer-sub { color: #b91c1c; }
.dep-amount-pill {
  text-align: center;
  font-family: var(--num);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #0f172a;
}
.dep-pix-bonus {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1565c0;
}
.dep-pix-bonus[hidden] { display: none !important; }
.dep-qr-wrap {
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.dep-qr {
  width: 160px;
  height: 160px;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(13, 71, 161, 0.12);
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}
.dep-qr.is-loading { opacity: 0.35; }
.dep-waiting {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #1565c0;
}
.dep-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e88e5;
  box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.55);
  animation: dep-pulse 1.4s infinite;
}
@keyframes dep-pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
}
.dep-copy-row {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}
.dep-copy-row input {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 0.66rem;
  padding: 10px;
}
.dep-copy-btn {
  border: 0;
  border-radius: 10px;
  padding: 0 14px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.78rem;
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  color: #fff;
  box-shadow: 0 2px 0 #0d47a1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}
.dep-copy-btn.is-copied {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  box-shadow: 0 2px 0 #15803d;
}
.dep-copy-toast {
  margin: 0 0 8px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 7px 10px;
}
.dep-copy-toast[hidden] { display: none !important; }
.dep-ghost {
  width: 100%;
  border: 0;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px;
  cursor: pointer;
}
.dep-success {
  text-align: center;
  padding: 12px 4px 4px;
}
.dep-success-ring {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  box-shadow: 0 0 0 6px rgba(30, 136, 229, 0.14);
  animation: dep-pop 0.45s cubic-bezier(.2,1.2,.3,1);
}
@keyframes dep-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.dep-success h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.dep-success p {
  margin: 0 0 14px;
  font-family: var(--num);
  font-size: 1.35rem;
  font-weight: 800;
  color: #1565c0;
}
.dep-success .dep-success-note {
  margin: -8px 0 12px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}
.dep-success-note[hidden] { display: none !important; }
.fin-btn.fin-in:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}
.fin-btn.fin-out:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

/* ——— Withdraw modal (saque PIX) ——— */
.wd-overlay {
  position: absolute;
  inset: 0;
  z-index: 82;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  background: rgba(8, 24, 48, 0.58);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.wd-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.wd-overlay[hidden] { display: none !important; }
.wd-sheet {
  position: relative;
  width: min(100%, 360px);
  max-height: min(92vh, 640px);
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-radius: 22px;
  color: #0f172a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 48px rgba(8, 24, 48, 0.35);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
  padding: 18px 16px 16px;
}
.wd-overlay.open .wd-sheet { transform: translateY(0) scale(1); }
.wd-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.wd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 8px 14px 2px;
  padding-right: 28px;
}
.wd-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, #42a5f5, #1565c0);
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.35);
  flex-shrink: 0;
}
.wd-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d1b2a;
}
.wd-trust {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}
.wd-bal-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d47a1, #1565c0);
  color: #fff;
  margin-bottom: 14px;
}
.wd-bal-pill span { font-size: 0.75rem; font-weight: 700; opacity: 0.85; }
.wd-bal-pill strong { font-family: var(--num); font-size: 1.2rem; }
.wd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
}
.wd-field em { font-style: normal; font-weight: 600; opacity: 0.65; }
.wd-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(21, 101, 192, 0.18);
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.04);
}
.wd-input-wrap span {
  font-family: var(--num);
  font-weight: 800;
  color: #1565c0;
}
.wd-input-wrap input,
.wd-field > input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-family: var(--num);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d1b2a;
  outline: none;
}
.wd-field > input {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(21, 101, 192, 0.18);
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.04);
  box-sizing: border-box;
}
.wd-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -4px 0 12px;
}
.wd-chip {
  border: 0;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  color: #1565c0;
  background: rgba(21, 101, 192, 0.1);
}
.wd-chip-all {
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1565c0);
}
.wd-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wd-type {
  border: 1.5px solid rgba(21, 101, 192, 0.16);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.wd-type.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, #42a5f5, #1565c0);
  box-shadow: 0 4px 10px rgba(21, 101, 192, 0.28);
}
.wd-msg {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(229, 57, 53, 0.1);
  color: #c62828;
}
.wd-msg[hidden] { display: none !important; }
.wd-cta {
  width: 100%;
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 16px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, #5cbf60 0%, #2e7d32 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 0 #1b5e20,
    0 14px 22px rgba(46, 125, 50, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wd-cta:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 3px 0 #1b5e20,
    0 8px 14px rgba(46, 125, 50, 0.22);
}
.wd-cta-soft {
  background: linear-gradient(180deg, #64b5f6, #1565c0);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 0 #0d47a1,
    0 14px 22px rgba(21, 101, 192, 0.28);
}
.wd-cta-soft:active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 3px 0 #0d47a1,
    0 8px 14px rgba(21, 101, 192, 0.22);
}
.wd-fine {
  margin: 10px 2px 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
  text-align: center;
}
.wd-hero {
  text-align: center;
  padding: 18px 8px 8px;
}
.wd-hero-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.wd-hero-warn .wd-hero-ico {
  color: #e65100;
  background: rgba(255, 167, 38, 0.18);
}
.wd-hero-ok .wd-hero-ico {
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.18);
}
.wd-hero h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0d1b2a;
}
.wd-lead {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: #64748b;
}
.wd-warn-card,
.wd-done-card {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(21, 101, 192, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd-warn-card > div,
.wd-done-card > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.wd-warn-card span,
.wd-done-card span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}
.wd-warn-card strong,
.wd-done-card strong {
  font-family: var(--num);
  font-size: 0.95rem;
  color: #0d1b2a;
  text-align: right;
}
.wd-proc {
  text-align: center;
  padding: 28px 10px 18px;
}
.wd-proc-ring {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}
.wd-proc-ring svg { display: block; transform: rotate(-90deg); }
.wd-proc-track {
  fill: none;
  stroke: rgba(21, 101, 192, 0.12);
  stroke-width: 6;
}
.wd-proc-bar {
  fill: none;
  stroke: #1565c0;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
  transition: stroke-dashoffset 0.1s linear;
}
.wd-proc-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--num);
  font-weight: 800;
  font-size: 0.95rem;
  color: #1565c0;
}
.wd-proc h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #0d1b2a;
}
.wd-proc-steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.wd-proc-steps li {
  position: relative;
  padding: 10px 12px 10px 36px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}
.wd-proc-steps li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #cbd5e1;
}
.wd-proc-steps li.is-on {
  color: #1565c0;
  background: rgba(21, 101, 192, 0.1);
}
.wd-proc-steps li.is-on::before {
  background: #1565c0;
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.18);
}
.wd-proc-steps li.is-done {
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.1);
}
.wd-proc-steps li.is-done::before { background: #43a047; }

@media (min-width: 420px) {
  .dep-sheet { width: min(100%, 360px); }
}

@media (hover: none) and (pointer: coarse) {
  #btn-debug { display: none !important; }
}

/* ——— Guest / logged gate ——— */
body.is-guest .game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
body.is-guest #bet-panel { display: none !important; }
body.is-guest #btn-endless { display: none !important; }
body.is-guest .hdr-saldo { display: none !important; }
body.is-guest .hdr-level { display: none !important; }
body.is-guest #hdr-auth-actions {
  display: inline-flex !important;
  margin-right: auto;
}
body.is-guest #btn-hdr-help {
  display: grid !important;
  margin-left: 0;
}
body.is-guest #hdr-account { display: none !important; }
body.is-guest #demo-panel { display: block !important; }
body.is-guest #btn-demo-endless { display: block !important; }

body.is-logged .game-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}
body.is-logged #hdr-auth-actions { display: none !important; }
body.is-logged #btn-hdr-help { display: none !important; }
body.is-logged #hdr-account { display: block !important; }
body.is-logged #demo-panel { display: none !important; }

.hdr-auth-actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.hdr-auth-btn {
  margin: 0;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.hdr-auth-btn:active { transform: translateY(1px) scale(0.98); }
.hdr-auth-btn.ghost {
  color: #0d47a1;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.12);
}
.hdr-auth-btn.solid {
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1e88e5 55%, #1565c0);
  box-shadow: 0 3px 0 #0d47a1, 0 8px 14px rgba(21, 101, 192, 0.28);
}

.demo-panel {
  display: none;
  position: relative;
  z-index: 5;
  width: 100%;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  color: #0f172a;
}
.demo-panel-body {
  padding: 16px 14px 14px;
  text-align: center;
}
.demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eef6ff;
  border: 1.5px solid #90caf9;
  line-height: 0;
}
.demo-badge-logo {
  width: 88px;
  height: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(13, 71, 161, 0.18));
}
.demo-hero {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 4.6vw, 1.28rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.demo-sub {
  margin: 0 0 12px;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
}
.demo-cta-hint {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e88e5;
}
.demo-cta-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
  animation: demo-cta-pulse 1.8s ease-in-out infinite;
}
.demo-cta-btn img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.demo-cta-btn:active {
  animation: none;
  transform: scale(0.97);
  filter: drop-shadow(0 3px 8px rgba(13, 71, 161, 0.2));
}
@keyframes demo-cta-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 6px 12px rgba(13, 71, 161, 0.2));
  }
  50% {
    transform: scale(1.035);
    filter: drop-shadow(0 10px 16px rgba(13, 71, 161, 0.3)) brightness(1.03);
  }
}

.demo-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 8px 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-top: 1px solid #eef2f7;
}
.demo-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 2px;
  text-align: center;
}
.demo-trust-ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #1565c0;
  background: #e3f2fd;
  border: 1px solid #bbdefb;
  flex-shrink: 0;
}
.demo-trust-ico--green {
  color: #2e7d32;
  background: #e8f5e9;
  border-color: #c8e6c9;
}
.demo-trust-ico--teal {
  color: #00838f;
  background: #e0f7fa;
  border-color: #b2ebf2;
}
.demo-trust-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.demo-trust-txt strong {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  line-height: 1.15;
}
.demo-trust-txt small {
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
}

/* Guest: keep CTA in first viewport */
body.is-guest .bet-play-stack {
  margin-bottom: 0;
}
body.is-guest .demo-panel {
  margin-bottom: 4px;
}
body.is-guest .play-pitch {
  margin-top: 22px;
  margin-bottom: 10px;
}
body.is-guest .play-pitch-sub {
  font-size: 0.72rem;
}
body.is-logged .play-pitch {
  margin-top: 22px;
  margin-bottom: 10px;
}

/* Dock lock hint for guests */
body.is-guest .dock-item[data-dock="financeiro"],
body.is-guest .dock-item[data-dock="premios"] {
  opacity: 0.55;
}

/* ——— Guest help sheet ——— */
.help-overlay {
  position: absolute;
  inset: 0;
  z-index: 92;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(8, 24, 48, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.help-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.help-overlay[hidden] { display: none !important; }
.help-sheet {
  position: relative;
  width: 100%;
  max-height: min(92%, 680px);
  overflow: auto;
  padding: 18px 16px calc(18px + var(--safe-bot));
  border-radius: 28px 28px 0 0;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 -18px 50px rgba(13, 71, 161, 0.22);
  transform: translateY(28px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.help-overlay.open .help-sheet { transform: translateY(0); }
.help-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.help-head {
  padding-right: 40px;
  margin-bottom: 12px;
}
.help-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e88e5;
}
.help-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.help-lead {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
}
.help-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.help-trust span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.68rem;
  font-weight: 700;
}
.help-trust strong { font-weight: 900; }
.help-sections {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.help-card {
  padding: 11px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.help-card h3 {
  margin: 0 0 4px;
  font-size: 0.84rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.help-card p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: #475569;
}
.help-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
}
.help-cta {
  border: 0;
  border-radius: 14px;
  padding: 13px 12px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
}
.help-cta.solid {
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1e88e5 55%, #1565c0);
  box-shadow: 0 3px 0 #0d47a1;
}
.help-cta.ghost {
  color: #1565c0;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.help-cta:active { transform: translateY(1px); }

/* ——— Auth modal (game app sheet) ——— */
.auth-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  background: rgba(8, 24, 48, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.auth-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.auth-overlay[hidden] { display: none !important; }
.auth-sheet {
  position: relative;
  width: min(100%, 340px);
  max-height: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border-radius: 18px;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 18px 40px rgba(13, 71, 161, 0.28);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-overlay.open .auth-sheet { transform: translateY(0) scale(1); }
.auth-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.auth-hero {
  position: relative;
  width: 100%;
  height: 96px;
  overflow: hidden;
  background: #0ea5e9;
  border-radius: 18px 18px 0 0;
  flex-shrink: 0;
}
.auth-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.auth-body {
  padding: 10px 12px 12px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  margin: 0 0 10px;
  border-radius: 10px;
  background: #f1f5f9;
}
.auth-tab {
  border: 0;
  border-radius: 8px;
  padding: 7px 8px;
  background: transparent;
  color: #64748b;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.auth-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, #42a5f5, #1e88e5);
  box-shadow: 0 2px 6px rgba(21, 101, 192, 0.28);
}
.auth-pane[hidden] { display: none !important; }
.auth-title {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.auth-lead {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  color: #64748b;
}
.auth-form {
  display: grid;
  gap: 7px;
}
.auth-field {
  display: grid;
  gap: 3px;
}
.auth-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #64748b;
  text-transform: none;
}
.auth-control {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.auth-control.auth-pass {
  grid-template-columns: 32px 1fr 32px;
}
.auth-control:focus-within {
  background: #fff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.auth-field.is-invalid .auth-control {
  border-color: #f87171;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.auth-ico {
  display: grid;
  place-items: center;
  color: #94a3b8;
  pointer-events: none;
}
.auth-ico svg { width: 16px; height: 16px; }
.auth-control:focus-within .auth-ico { color: #0ea5e9; }
.auth-control input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  padding: 8px 6px 8px 0;
  color: #0f172a;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}
.auth-control input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}
.auth-eye {
  display: grid;
  place-items: center;
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
}
.auth-eye svg { width: 16px; height: 16px; }
.auth-eye:hover,
.auth-eye.is-on { color: #0ea5e9; }
.auth-eye .eye-off { display: none; }
.auth-eye.is-on .eye-on { display: none; }
.auth-eye.is-on .eye-off { display: block; }

.auth-feedback {
  margin: 0;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}
.auth-feedback.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.auth-feedback.is-ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.auth-feedback[hidden] { display: none !important; }

.auth-submit {
  position: relative;
  margin-top: 2px;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #42a5f5, #1e88e5 55%, #1565c0);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 0 #0d47a1, 0 8px 14px rgba(21, 101, 192, 0.28);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.auth-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d47a1; }
.auth-submit:disabled {
  opacity: 0.72;
  cursor: wait;
  filter: saturate(0.85);
}
.auth-submit-spin {
  display: none;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
}
.auth-submit.is-loading .auth-submit-label { visibility: hidden; }
.auth-submit.is-loading .auth-submit-spin {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
}
@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-perks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 10px 0 0;
  padding: 0;
}
.auth-perks li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 3px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  text-align: center;
  color: #475569;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.15;
}
.auth-perk-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #e0f2fe;
  color: #0284c7;
}
.auth-perk-ico svg { width: 12px; height: 12px; }

@media (max-height: 680px) {
  .auth-hero { height: 78px; }
  .auth-perks { display: none; }
}
@media (max-height: 580px) {
  .auth-hero { height: 64px; }
  .auth-lead { display: none; }
  .auth-body { padding: 8px 10px 10px; }
}

@media (min-width: 420px) {
  .auth-sheet {
    width: min(100%, 360px);
  }
  .auth-hero { height: 110px; }
}

/* ——— Demo conversion popup (free run only) ——— */
.demo-win-overlay {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: rgba(8, 22, 42, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.demo-win-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.demo-win-overlay[hidden] { display: none !important; }

.demo-win-sheet {
  position: relative;
  width: min(100%, 380px);
  max-height: min(88dvh, 620px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(66, 165, 245, 0.22), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);
  box-shadow: 0 16px 48px rgba(8, 30, 60, 0.28);
  color: #0d47a1;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}
.demo-win-overlay.open .demo-win-sheet { transform: translateY(0) scale(1); }

.demo-win-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(13, 71, 161, 0.07);
  color: #1565c0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.demo-win-close:active { transform: scale(0.94); }

.demo-win-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  flex-shrink: 0;
}
.demo-win-logo {
  display: block;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(13, 71, 161, 0.12));
}
.demo-win-badge {
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(30, 136, 229, 0.1);
  color: #1565c0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-win-could {
  margin: 0 0 6px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: #546e7a;
  flex-shrink: 0;
}

.demo-win-amount {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 2px;
  justify-items: center;
  margin: 0 auto 10px;
  padding: 10px 14px 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(145deg, #1e88e5 0%, #1565c0 55%, #0d47a1 100%);
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.26);
  color: #fff;
  text-align: center;
  flex-shrink: 0;
}
.demo-win-amount-glow {
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 235, 59, 0.35), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.demo-win-amount.is-counting .demo-win-amount-glow,
.demo-win-amount.is-done .demo-win-amount-glow {
  opacity: 1;
  animation: demoWinGlow 1.6s ease-in-out infinite alternate;
}
.demo-win-amount-label {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}
.demo-win-amount strong {
  position: relative;
  z-index: 1;
  font-family: var(--num);
  font-size: clamp(1.55rem, 6.5vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  font-variant-numeric: tabular-nums;
}
.demo-win-amount.is-counting strong {
  animation: demoWinPulse 0.45s ease-in-out infinite alternate;
}
.demo-win-amount.is-done strong {
  animation: demoWinPop 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
.demo-win-amount-hint {
  position: relative;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff59d;
  opacity: 0;
  min-height: 0.9em;
  transition: opacity 0.2s ease;
}
.demo-win-amount.is-counting .demo-win-amount-hint { opacity: 0.95; }
.demo-win-amount.is-done .demo-win-amount-hint {
  opacity: 0.9;
  color: #c8e6c9;
}

@keyframes demoWinGlow {
  from { transform: translateY(6%) scale(0.96); opacity: 0.45; }
  to { transform: translateY(-4%) scale(1.05); opacity: 0.85; }
}
@keyframes demoWinPulse {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}
@keyframes demoWinPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.demo-win-copy {
  text-align: center;
  margin: 0 0 8px;
  flex-shrink: 0;
}
.demo-win-congrats {
  margin: 0 0 3px;
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0d47a1;
  line-height: 1.2;
}
.demo-win-sub {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #607d8b;
  font-weight: 500;
}

.demo-win-perks {
  list-style: none;
  margin: 0 0 10px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(144, 202, 249, 0.45);
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.demo-win-perks li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(6px);
}
.demo-win-overlay.open .demo-win-perks li {
  animation: demoWinPerkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.demo-win-overlay.open .demo-win-perks li:nth-child(1) { animation-delay: 0.28s; }
.demo-win-overlay.open .demo-win-perks li:nth-child(2) { animation-delay: 0.38s; }
.demo-win-overlay.open .demo-win-perks li:nth-child(3) { animation-delay: 0.48s; }
.demo-win-perks li:nth-child(odd) {
  background: rgba(227, 242, 253, 0.55);
}
.demo-win-perks div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.demo-win-perks strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0d47a1;
  line-height: 1.2;
}
.demo-win-perks span:not(.demo-win-ico) {
  font-size: 0.7rem;
  line-height: 1.25;
  color: #607d8b;
}
.demo-win-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 10px rgba(13, 71, 161, 0.14);
  position: relative;
}
.demo-win-ico svg {
  display: block;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  transform-origin: center;
}
.demo-win-overlay.open .demo-win-ico.trophy svg {
  animation: demoWinIcoBounce 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.3s both;
}
.demo-win-overlay.open .demo-win-ico.gift svg {
  animation: demoWinIcoWiggle 0.75s ease-out 0.4s both;
}
.demo-win-overlay.open .demo-win-ico.chart svg {
  animation: demoWinIcoRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.demo-win-ico.trophy {
  background: linear-gradient(160deg, #29b6f6 0%, #1e88e5 55%, #1565c0 100%);
}
.demo-win-ico.gift {
  background: linear-gradient(160deg, #81c784 0%, #43a047 55%, #2e7d32 100%);
}
.demo-win-ico.chart {
  background: linear-gradient(160deg, #4fc3f7 0%, #0288d1 55%, #01579b 100%);
}

@keyframes demoWinPerkIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes demoWinIcoBounce {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  60% { transform: scale(1.18) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes demoWinIcoWiggle {
  0% { transform: rotate(-12deg) scale(0.6); opacity: 0; }
  40% { transform: rotate(10deg) scale(1.1); opacity: 1; }
  70% { transform: rotate(-6deg) scale(1); }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes demoWinIcoRise {
  0% { transform: translateY(8px) scale(0.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.demo-win-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #66bb6a, #43a047 55%, #2e7d32);
  color: #fff;
  font-family: var(--font);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 0 #1b5e20, 0 10px 16px rgba(46, 125, 50, 0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.demo-win-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #1b5e20;
}
.demo-win-replay {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 0;
  background: transparent;
  padding: 10px 8px;
  color: #1565c0;
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.demo-win-replay:active { color: #0d47a1; }

/* Short phones: drop perk subtitles + tighten further */
@media (max-height: 700px) {
  .demo-win-sheet { padding: 12px 12px 10px; max-height: min(92dvh, 100%); }
  .demo-win-logo { width: 84px; }
  .demo-win-perks span:not(.demo-win-ico) { display: none; }
  .demo-win-sub { display: none; }
  .demo-win-amount { padding: 8px 12px 10px; margin-bottom: 8px; }
  .demo-win-perks li { padding: 6px 8px; }
  .demo-win-cta { padding: 11px 14px; }
}

@media (max-height: 580px) {
  .demo-win-top { margin-bottom: 4px; }
  .demo-win-badge { display: none; }
  .demo-win-perks li:nth-child(3) { display: none; }
  .demo-win-could { font-size: 0.8rem; margin-bottom: 4px; }
  .demo-win-congrats { font-size: 0.9rem; }
}

@media (min-width: 480px) {
  .demo-win-sheet {
    width: min(100%, 400px);
    border-radius: 24px;
  }
}