:root {
  --bg0: #071428;
  --bg1: #0d2a55;
  --bg2: #163d73;
  --ink: #f7fbff;
  --muted: #a9c0e0;
  --pink: #ff4d9a;
  --coral: #ff6b4a;
  --amber: #ffb703;
  --gold: #ffd166;
  --lime: #7dffa3;
  --cyan: #3de7ff;
  --violet: #8b6cff;
  --card: rgba(255,255,255,.1);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 70px;
  --cc-header-h: 52px;
  --cc-avatar-size: 62px;
  --cc-heart-size: 44px;
  --cc-gold-size: 38px;
  --cc-pill-h: 26px;
  --cc-pill-min-w: 46px;
  --cc-overlap-heart: 16px;
  --cc-overlap-gold: 14px;
  --cc-settings-size: 36px;
  --cc-hud-offset: calc((var(--cc-header-h) + 12px) * 0.2);
  --font-display: "Fredoka", sans-serif;
  --font-ui: "Nunito", sans-serif;
  --font-cc: "Sniglet", "Fredoka", cursive;
  --font-candy: "Lobster Two", "Sniglet", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  /* --app-h é preenchido em runtime com a altura visível do Telegram Mini App,
     que pode ser menor que 100dvh e cortava o rodapé das telas. */
  margin: 0; padding: 0; height: 100%; height: 100dvh; height: var(--app-h, 100dvh); overflow: hidden;
  font-family: var(--font-ui);
  background: radial-gradient(1200px 800px at 20% -10%, #1a4f9c 0%, transparent 55%),
              radial-gradient(900px 700px at 100% 10%, #5b2d8f 0%, transparent 50%),
              linear-gradient(165deg, var(--bg0), var(--bg1) 45%, #10284d);
  color: var(--ink);
  user-select: none;
}
body { padding-top: var(--safe-top); }

#app {
  position: relative;
  height: 100%;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.screen.active { display: flex; opacity: 1; transform: none; }
.screen-intro, .screen-gate, .screen-game, #screen-maintenance, #screen-nolives, .screen-help {
  padding-bottom: var(--safe-bottom);
}

/* ===== Intro (tela de início) ===== */
.screen-intro {
  z-index: 50;
  padding: 0;
  overflow: hidden;
  background: #5fc4f2;
}
.intro-bg {
  position: absolute;
  /* Sangra sobre as áreas seguras para nunca aparecer borda da cor de fundo. */
  inset: calc(-1 * var(--safe-top, 0px)) 0 calc(-1 * var(--safe-bottom, 0px));
  overflow: hidden;
}
.intro-bg img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover garante tela cheia em qualquer proporção, sem faixas vazias. */
  object-fit: cover;
  object-position: center bottom;
  transform: translateZ(0);
}
.screen-intro.is-ready .intro-bg img { animation: introBgIn .7s ease-out both; }
.intro-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 12%, rgba(255,255,255,.3), transparent 62%);
}
.intro-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Logo no topo, botão na parte de baixo — o espaço entre eles cresce com a tela. */
  justify-content: flex-start;
  gap: 0;
  padding: 0 26px calc(var(--safe-bottom) + clamp(28px, 8vh, 56px));
}
.intro-hang {
  width: min(80%, 330px);
  max-height: 46%;
  opacity: 0;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.intro-hang-swing { transform-origin: 50% 0; will-change: transform; }
.screen-intro.is-ready .intro-hang { animation: introDrop .9s cubic-bezier(.18,.9,.28,1.15) both; }
.screen-intro.is-ready .intro-hang-swing { animation: introSwing 3.8s ease-in-out .9s infinite; }
.intro-hang img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
}
.intro-cta {
  position: relative;
  /* Empurra o botão para a região inferior sem deixá-lo sair da tela. */
  margin-top: auto;
  flex: 0 0 auto;
  width: min(68%, 248px);
  border: 0;
  padding: 0 0 6px;
  background: none;
  cursor: pointer;
  /* Visível por padrão: a animação de entrada é um bônus, nunca um requisito. */
  opacity: 1;
  will-change: transform, opacity;
}
.screen-intro.is-ready .intro-cta {
  opacity: 1;
  animation:
    introCtaIn .55s cubic-bezier(.2,1.25,.35,1) .7s both,
    introCtaBob 3s ease-in-out 1.4s infinite;
}
.intro-cta-face {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 13px 18px 15px;
  border: 2px solid #a5115e;
  border-radius: 999px;
  background: linear-gradient(180deg, #f470b1 0%, #ec4f9c 34%, #e0348b 68%, #d0217a 100%);
  box-shadow:
    0 5px 0 #b5136a,
    0 9px 12px rgba(45,8,45,.32),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -9px 12px rgba(150,10,80,.4);
  transition: transform .09s ease, box-shadow .09s ease;
}
.intro-cta-gloss {
  position: absolute;
  top: 4px;
  left: 11%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  filter: blur(.5px);
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, transparent);
  pointer-events: none;
}
.intro-cta-shine {
  position: absolute;
  top: -20%;
  left: 0;
  width: 34%;
  height: 140%;
  transform: translate3d(-180%, 0, 0) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  pointer-events: none;
}
.screen-intro.is-ready .intro-cta-shine { animation: introShine 4.2s ease-in-out 2.2s infinite; }
.intro-cta-label {
  position: relative;
  font-family: var(--font-candy);
  font-style: italic;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: .3px;
  color: #fff8ee;
  text-shadow: 0 2px 0 rgba(150,12,80,.5), 0 3px 5px rgba(110,0,58,.3);
}
.intro-cta-spinner {
  position: absolute;
  inset: 0;
  display: none;
  margin: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff8ee;
  animation: introSpin .7s linear infinite;
}
.intro-cta:active .intro-cta-face {
  transform: translateY(5px);
  box-shadow:
    0 0 0 #b5136a,
    0 3px 6px rgba(45,8,45,.28),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -9px 12px rgba(150,10,80,.4);
}
.intro-cta.is-loading { pointer-events: none; }
.intro-cta.is-loading .intro-cta-label { opacity: 0; }
.intro-cta.is-loading .intro-cta-spinner { display: block; }

@keyframes introBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes introDrop { from { opacity: 0; transform: translate3d(0, -110%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes introSwing { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes introCtaIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes introCtaBob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
@keyframes introShine { 0%, 62% { transform: translate3d(-180%, 0, 0) skewX(-20deg); } 100% { transform: translate3d(400%, 0, 0) skewX(-20deg); } }
@keyframes introSpin { to { transform: rotate(360deg); } }

.logo-mark { display: inline-flex; gap: 10px; justify-content: center; }
.logo-mark.small { transform: scale(.8); }
.gem {
  width: 28px; height: 28px; border-radius: 8px; display: block;
  box-shadow: 0 8px 16px rgba(0,0,0,.25), inset 0 0 12px rgba(255,255,255,.45);
  animation: gemDance 2.2s ease-in-out infinite;
}
.gem-a { background: linear-gradient(135deg, #ff4d9a, #ff8fb8); }
.gem-b { background: linear-gradient(135deg, #3de7ff, #7dffa3); animation-delay: .2s; }
.gem-c { background: linear-gradient(135deg, #ffd166, #ff6b4a); animation-delay: .4s; }

@keyframes gemDance { 0%,100%{transform:translateY(0) rotate(12deg)} 50%{transform:translateY(-8px) rotate(-8deg)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* ===== Candy Crush header (referência) ===== */
.cc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: var(--safe-top);
  pointer-events: none;
}
.cc-header[hidden] { display: none !important; }

.cc-header-bar {
  pointer-events: auto;
  position: relative;
  height: calc(var(--cc-header-h) + 12px);
  padding: 4px 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    repeating-linear-gradient(
      -48deg,
      #ffb8d9 0 7px,
      #ffc8e3 7px 14px
    );
  border-bottom: 3px solid #e895b8;
  box-shadow: 0 4px 0 rgba(200, 100, 140, .35);
  border-radius: 0 0 16px 16px;
}

.cc-header-side {
  display: flex;
  align-items: center;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - (var(--cc-avatar-size) * 0.42));
}
.cc-header-left {
  justify-content: flex-start;
  padding-left: 2px;
  transform: translateY(var(--cc-hud-offset));
}
.cc-header-right {
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding-right: 2px;
  flex-wrap: nowrap;
  transform: translateY(var(--cc-hud-offset));
}

/* Chip: ícone encosta na barrinha (mesmo padrão coração e ouro) */
.cc-hud-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.cc-hud-chip-icon {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-hud-chip-lives .cc-hud-chip-icon {
  width: var(--cc-heart-size);
  height: var(--cc-heart-size);
  margin-right: calc(var(--cc-overlap-heart) * -1);
}

.cc-hud-chip-gold .cc-hud-chip-icon {
  width: var(--cc-gold-size);
  height: var(--cc-gold-size);
  margin-right: calc(var(--cc-overlap-gold) * -1);
}

.cc-hud-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.2));
  pointer-events: none;
}

.cc-hud-on-icon {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 0 #c4185f, 0 2px 3px rgba(0,0,0,.25);
  pointer-events: none;
  line-height: 1;
}

.cc-hud-chip-pill {
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cc-pill-h);
  min-width: var(--cc-pill-min-w);
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6e8 0%, #ffe8c0 50%, #f5d49a 100%);
  border: 2px solid #b8783a;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(180,120,50,.15),
    0 2px 0 rgba(120,70,20,.2);
  font-family: var(--font-cc);
  font-size: 13px;
  font-weight: 800;
  color: #6b3410;
  white-space: nowrap;
  line-height: 1;
}

.cc-hud-chip-lives .cc-hud-chip-pill {
  padding-left: calc(var(--cc-overlap-heart) + 2px);
  font-size: 13px;
}

.cc-hud-chip-gold .cc-hud-chip-pill {
  padding-left: calc(var(--cc-overlap-gold) + 4px);
  font-size: 14px;
  min-width: 50px;
}

/* Avatar central — sobrepõe a barra */
.cc-avatar-slot {
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: 6;
  transform: translateX(-50%);
  pointer-events: none;
}
.cc-avatar-frame {
  width: var(--cc-avatar-size);
  height: var(--cc-avatar-size);
  border-radius: 18px;
  padding: 4px;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(180deg, #8edcff 0%, #52bdf5 50%, #2890d4 100%);
  border: 3px solid #c8eeff;
  box-shadow:
    0 0 0 2px #2280be,
    inset 0 4px 10px rgba(255,255,255,.5),
    0 5px 10px rgba(0,0,0,.22);
  overflow: hidden;
}
.cc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #e8f4ff;
}
.cc-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffd166, #ff8e72);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.cc-btn-settings {
  width: var(--cc-settings-size);
  height: var(--cc-settings-size);
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  flex: 0 0 var(--cc-settings-size);
  background: radial-gradient(circle at 32% 28%, #ff9ad4 0%, #ff5fb8 42%, #e83d98 100%);
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.45),
    inset 0 -3px 5px rgba(160, 20, 90, .28),
    0 3px 0 #c42d7e,
    0 5px 8px rgba(0,0,0,.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease;
  align-self: center;
}
.cc-btn-settings:active {
  transform: translateY(calc(var(--cc-hud-offset) + 2px));
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.12),
    0 1px 0 #c42d7e;
}
.cc-gear-icon {
  width: 46%;
  height: 46%;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18));
  pointer-events: none;
}

.screen-with-header {
  padding-top: calc(var(--cc-header-h) + var(--safe-top) + (var(--cc-avatar-size) * 0.38)) !important;
}

@media (max-width: 380px) {
  :root {
    --cc-heart-size: 40px;
    --cc-gold-size: 36px;
    --cc-pill-h: 24px;
    --cc-pill-min-w: 42px;
    --cc-overlap-heart: 14px;
    --cc-overlap-gold: 12px;
    --cc-avatar-size: 58px;
    --cc-settings-size: 34px;
  }
  .cc-hud-on-icon { font-size: 16px; }
}

@media (max-width: 340px) {
  :root {
    --cc-heart-size: 38px;
    --cc-gold-size: 34px;
    --cc-pill-h: 22px;
    --cc-pill-min-w: 40px;
    --cc-overlap-heart: 12px;
    --cc-overlap-gold: 11px;
    --cc-avatar-size: 54px;
    --cc-settings-size: 32px;
    --cc-header-h: 48px;
  }
  .cc-header-bar { padding: 3px 4px 16px; }
  .cc-hud-chip-pill { font-size: 12px; padding: 0 8px; }
  .cc-hud-chip-gold .cc-hud-chip-pill { font-size: 13px; min-width: 44px; }
  .cc-header-side { max-width: calc(50% - (var(--cc-avatar-size) * 0.38)); }
}
/* Top / nav */
.section-header, .game-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px;
}
.player-chip { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 44px; height: 44px; border-radius: 16px;
  background: linear-gradient(135deg, #ff4d9a, #ffd166);
  display: grid; place-items: center; font-weight: 900;
  box-shadow: var(--shadow); overflow: hidden; background-size: cover; background-position: center;
}
.avatar.xl { width: 84px; height: 84px; font-size: 32px; margin: 0 auto 10px; border-radius: 28px; }
.player-meta { display: flex; flex-direction: column; line-height: 1.15; }
.player-meta span { color: var(--muted); font-size: 13px; font-weight: 700; }
.resources { display: flex; align-items: center; gap: 8px; }
.pill {
  min-width: 64px; padding: 8px 12px; border-radius: 999px; font-weight: 900;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12);
  text-align: center; font-size: 14px;
}
.pill-coin::before { content: "💎 "; }
.pill-life::before { content: "❤️ "; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 14px; border: 0;
  background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer;
}

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: #ff58ad;
  border-top: 2px solid #ffadd4;
  box-shadow: 0 -3px 0 #d93d87;
  z-index: 30;
  overflow: visible;
}
.nav-item {
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8a2458;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0 2px;
  cursor: pointer;
  overflow: visible;
}
.nav-item + .nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(255, 255, 255, .28);
  border-radius: 2px;
  pointer-events: none;
}
.nav-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.2, 1.4, .4, 1), width .22s ease, height .22s ease;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.18));
  background: transparent;
}
.nav-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}
.nav-item small {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  margin-top: 2px;
  color: #8a2458;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .18s ease, max-height .18s ease, margin .18s ease;
}
.nav-item.active {
  background:
    repeating-linear-gradient(
      -48deg,
      #ffd0eb 0 8px,
      #ffc0e3 8px 16px
    );
  color: #8a2458;
  transform: none;
  justify-content: flex-end;
  padding-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.nav-item.active .nav-ico {
  transform: translateY(-14px);
  width: 50px;
  height: 50px;
}
.nav-item.active small {
  opacity: 1;
  max-height: 16px;
  margin-top: 0;
  color: #8a2458;
}

@media (max-width: 360px) {
  .nav-ico { width: 36px; height: 36px; }
  .nav-item.active .nav-ico { width: 44px; height: 44px; transform: translateY(-12px); }
  .nav-item.active { padding-bottom: 5px; }
  .nav-item small { font-size: 10px; }
}

.tourney-card { margin-top: 24px; }

/* Tournaments */
.tourney-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 18px;
  -webkit-overflow-scrolling: touch;
}
.tourney-hero { margin-bottom: 14px; }
.tourney-card-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid #ffd166;
  box-shadow: 0 10px 0 rgba(90, 40, 140, .45), 0 16px 32px rgba(0, 0, 0, .28);
  background: linear-gradient(160deg, #a86bff, #7b2cbf 55%, #5a189a);
}
.tourney-card-stripes {
  position: absolute;
  inset: 0;
  opacity: .2;
  background: repeating-linear-gradient(-48deg, transparent 0 10px, rgba(0, 0, 0, .12) 10px 20px);
  pointer-events: none;
}
.tourney-card-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}
.tourney-card-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
  flex-shrink: 0;
}
.tourney-card-info { min-width: 0; }
.tourney-card-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.tourney-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 0 rgba(60, 20, 100, .35);
  margin: 2px 0;
}
.tourney-card-sub {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #ffe08a;
}

.competitive-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  padding: 17px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% 6%, rgba(112, 236, 255, .2), transparent 27%),
    radial-gradient(circle at 8% 92%, rgba(255, 70, 183, .2), transparent 34%),
    linear-gradient(145deg, #171247, #3b1978 52%, #671d91);
  border: 2px solid rgba(255, 218, 99, .48);
  box-shadow: 0 8px 0 rgba(26, 10, 65, .58), 0 18px 34px rgba(0, 0, 0, .32);
}
.competitive-card::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, .1) 50%, transparent 58%);
  animation: tourneyShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
.competitive-card > * { position: relative; }
.competitive-card.is-active {
  border-color: #ffda63;
  box-shadow: 0 8px 0 #2a105c, 0 18px 38px rgba(33, 10, 76, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.competitive-cta-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.competitive-cta-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  font-size: 28px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
}
.competitive-cta-copy { min-width: 0; }
.competitive-kicker {
  display: block;
  color: #ffd166;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.competitive-cta-copy strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
}
.competitive-cta-copy p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}
.competitive-perks {
  display: grid;
  gap: 6px;
  margin: 13px 0;
  padding: 11px 12px;
  list-style: none;
  border-radius: 15px;
  background: rgba(12, 4, 32, .3);
  border: 1px solid rgba(255, 255, 255, .08);
}
.competitive-perks li {
  color: #e6d9ff;
  font-size: 11px;
  font-weight: 800;
}

.competitive-profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.competitive-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 26px;
  background: linear-gradient(145deg, #ff9f43, #f76b1c);
  border: 2px solid rgba(255, 236, 179, .75);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.competitive-identity { min-width: 0; }
.competitive-identity strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.competitive-identity small {
  display: block;
  margin-top: 1px;
  color: #c9b6e8;
  font-size: 10px;
  font-weight: 800;
}
.competitive-wallet {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin: 15px 0 12px;
  padding: 13px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(5, 13, 45, .85), rgba(25, 17, 75, .78));
  border: 1px solid rgba(115, 233, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .22);
}
.competitive-wallet::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -32px;
  top: -45px;
  border-radius: 50%;
  background: rgba(83, 219, 255, .12);
  filter: blur(2px);
}
.competitive-wallet-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #2b1556;
  font-size: 23px;
  font-weight: 900;
  background: linear-gradient(145deg, #fff2a4, #ffc21c);
  box-shadow: 0 4px 0 #a85c08;
}
.competitive-wallet-copy { min-width: 0; }
.competitive-wallet-copy > span {
  display: block;
  color: #98eaff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.competitive-wallet-copy > strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
}
.competitive-wallet-copy strong small {
  color: #ffd95b;
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: .08em;
}
.competitive-wallet-state {
  position: relative;
  z-index: 1;
  padding: 5px 7px;
  border-radius: 999px;
  color: #8df3bf;
  background: rgba(31, 204, 126, .13);
  border: 1px solid rgba(71, 235, 159, .22);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.competitive-wallet.is-locked .competitive-wallet-state {
  color: #ffe08a;
  background: rgba(255, 183, 3, .12);
  border-color: rgba(255, 209, 102, .25);
}
.competitive-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0;
  padding: 0;
}
.competitive-detail-list > div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(8, 5, 39, .38);
  border: 1px solid rgba(255, 255, 255, .07);
}
.competitive-detail-list > div:last-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.competitive-detail-list dt {
  color: #b9a6da;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.competitive-detail-list dd {
  margin: 4px 0 0;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
}
.competitive-detail-list dd.ok { color: #8fe5bb; }
.competitive-detail-list dd.pending { color: #ffe08a; }
.competitive-actions { display: grid; gap: 8px; }

.competitive-btn-register,
.competitive-btn-edit,
.competitive-submit {
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: #321640;
  background: linear-gradient(180deg, #ffe792, #ffb703);
  box-shadow: 0 4px 0 #bd6d05;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}
.competitive-btn-register:active,
.competitive-btn-edit:active,
.competitive-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #bd6d05; }
.competitive-btn-delete {
  width: 100%;
  padding: 11px 10px;
  border: 1px solid rgba(255, 122, 158, .5);
  border-radius: 14px;
  cursor: pointer;
  color: #ffc2d6;
  background: rgba(196, 32, 84, .22);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
}
.competitive-btn-delete:active { transform: translateY(1px); }
.competitive-btn-delete:disabled { opacity: .65; cursor: wait; }

.competitive-seal {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  background: linear-gradient(180deg, #fff0aa, #ffbd24);
  border: 2px solid #fff7e0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.competitive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 9px;
}
.competitive-tags span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff4ca;
  background: rgba(255, 209, 102, .16);
  font-size: 10px;
  font-weight: 800;
}

.tourney-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(30, 12, 62, .42);
  border: 1px solid rgba(255, 209, 102, .14);
}
.tourney-tab {
  border: 0;
  border-radius: 12px;
  padding: 11px 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #c6b0e6;
  background: transparent;
  box-shadow: none;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.tourney-tab.active {
  color: #3a1c05;
  background: linear-gradient(180deg, #ffe08a, #ffb703);
  box-shadow: 0 6px 16px rgba(122, 58, 168, .32), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.tourney-tab:active { transform: translateY(2px); }

.tourney-panel { animation: walletFade .25s ease; }
.tourney-list { display: flex; flex-direction: column; gap: 12px; }
.tourney-list .game-app-card-featured {
  width: 100%;
  margin: 0;
}

.tourney-placeholder {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 28px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  border: 2px dashed rgba(255, 209, 102, .35);
  box-shadow: var(--shadow);
}
.tourney-ph-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%);
  animation: tourneyShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tourneyShine {
  0%, 100% { transform: translateX(-20%); }
  50% { transform: translateX(20%); }
}
.tourney-ph-icon { font-size: 44px; margin-bottom: 8px; }
.tourney-placeholder strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 6px;
}
.tourney-placeholder p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

/* Ranking card — sky blue theme */
.rank-card {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 20px 14px 16px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(15, 70, 140, .22), rgba(10, 50, 110, .18)),
    url("../images/rank-sky-bg.webp") center / cover no-repeat;
  border: 3px solid #dff4ff;
  box-shadow: 0 10px 0 rgba(30, 100, 160, .28), 0 16px 32px rgba(20, 70, 120, .22);
}
.rank-card > *:not(.rank-card-shine) {
  position: relative;
  z-index: 1;
}
.rank-card-shine {
  position: absolute;
  z-index: 0;
  inset: -50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
  animation: tourneyShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.rank-card-head {
  position: relative;
  text-align: center;
  margin-bottom: 8px;
}
.rank-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
  color: #e8f7ff;
  text-shadow: 0 1px 0 rgba(20, 80, 130, .35);
}
.rank-title {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 0 rgba(20, 80, 130, .35);
}
.rank-sub {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(232, 247, 255, .95);
}

.rank-podium {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 6px;
  margin: 18px 0 16px;
  padding: 12px 8px 10px;
  border-radius: 20px;
  background: rgba(18, 70, 120, .22);
  border: 1px solid rgba(255, 255, 255, .28);
}
.rank-podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.rank-podium-1 { order: 2; transform: translateY(-10px); }
.rank-podium-2 { order: 1; }
.rank-podium-3 { order: 3; }

.rank-crown {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
  animation: rankCrownBob 2.4s ease-in-out infinite;
}
.rank-medal {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
@keyframes rankCrownBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.rank-avatar-wrap {
  position: relative;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(160deg, #fff, rgba(255, 255, 255, .4));
  box-shadow: 0 8px 18px rgba(20, 70, 120, .35);
}
.rank-avatar-wrap.gold {
  padding: 4px;
  background: linear-gradient(160deg, #fff6c8, #ffd166 45%, #f5b800);
  box-shadow: 0 0 0 3px rgba(255, 230, 140, .55), 0 10px 22px rgba(255, 200, 60, .4);
}
.rank-avatar-wrap.silver {
  background: linear-gradient(160deg, #fff, #d7e6f2 50%, #9eb6c9);
}
.rank-avatar-wrap.bronze {
  background: linear-gradient(160deg, #ffe8d0, #e0a06a 50%, #b8733a);
}
.rank-avatar {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a4f7a;
}
.rank-podium-1 .rank-avatar {
  width: 72px;
  height: 72px;
}

.rank-place {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #e8f7ff;
  text-shadow: 0 1px 0 rgba(15, 60, 100, .45);
}
.rank-podium-1 .rank-place {
  font-size: 15px;
  color: #fff4b8;
}
.rank-name {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(10, 50, 90, .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-podium-1 .rank-name { font-size: 13px; }
.rank-score {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #dff4ff;
}
.rank-podium-1 .rank-score { font-size: 14px; color: #fff4b8; }

.rank-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f5fbff, #d9effc);
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 0 rgba(30, 100, 160, .2);
  animation: rankRowIn .45s ease both;
}
.rank-row:nth-child(1) { animation-delay: .04s; }
.rank-row:nth-child(2) { animation-delay: .08s; }
.rank-row:nth-child(3) { animation-delay: .12s; }
.rank-row:nth-child(4) { animation-delay: .16s; }
.rank-row:nth-child(5) { animation-delay: .2s; }
.rank-row:nth-child(6) { animation-delay: .24s; }
.rank-row:nth-child(7) { animation-delay: .28s; }
@keyframes rankRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.rank-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #7ec8f5, #2f8fd4);
  box-shadow: 0 3px 0 rgba(20, 90, 140, .3);
}
.rank-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(20, 80, 130, .25);
  background: #c8e8f8;
  flex-shrink: 0;
}
.rank-row-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rank-row-info strong {
  font-size: 14px;
  font-weight: 800;
  color: #0f4a72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row-info span {
  font-size: 12px;
  font-weight: 800;
  color: #1f7ab8;
}

/* Game catalog cards */
.game-catalog {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 12px;
}
.game-catalog-head {
  text-align: center;
  padding: 0 4px;
}
.game-catalog-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 800;
  color: #1a6fb5;
}
.game-catalog-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 28px);
  color: #0d3d66;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.game-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.game-app-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(230, 246, 255, .9));
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 0 rgba(30, 100, 160, .16), 0 14px 24px rgba(20, 70, 120, .14);
}
.game-app-card-featured {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: #ffd166;
  background:
    radial-gradient(circle at 90% 100%, rgba(255, 183, 3, .2), transparent 42%),
    linear-gradient(160deg, #fffdf6, #fff0d2);
  box-shadow: 0 8px 0 rgba(122, 35, 137, .24), 0 16px 28px rgba(71, 22, 100, .22);
}
.game-feature-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: #47145f;
}
.game-feature-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: transform .35s ease;
}
.game-app-card-featured:active .game-feature-banner {
  transform: scale(1.015);
}
.game-feature-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(49, 12, 71, .55));
  pointer-events: none;
}
.game-feature-badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #351006;
  background: linear-gradient(180deg, #fff1a6, #ffb703);
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: 0 3px 0 rgba(78, 20, 90, .35);
}
.game-app-card-featured .game-app-body {
  padding: 14px 14px 16px;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.game-app-card-featured .game-app-meta {
  width: 100%;
}
.game-feature-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  width: 100%;
}
.game-app-card-featured .game-app-name {
  min-width: 0;
  font-size: 21px;
  color: #5e176f;
}
.game-app-card-featured .game-app-stars {
  flex-shrink: 0;
  margin: 0;
  font-size: 13px;
}
.game-app-card-featured .game-app-desc {
  display: block;
  margin-top: 7px;
  color: #724172;
  font-size: 13px;
  line-height: 1.4;
  overflow: visible;
  text-align: center;
}
.game-feature-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  width: 100%;
}
.game-feature-tags span {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  color: #6b276e;
  background: rgba(220, 179, 232, .32);
  border: 1px solid rgba(123, 44, 142, .18);
}
.game-feature-tags span:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.game-app-card-featured .game-app-btn,
.game-feature-btn {
  align-self: center;
  width: 100%;
  max-width: 100%;
  margin-top: 2px;
  padding: 14px 20px;
  font-size: 16px;
  letter-spacing: .06em;
  text-align: center;
  color: #2a1408;
  background: linear-gradient(180deg, #ffe08a, #ffc53d 45%, #ffb703);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    0 6px 0 rgba(122, 35, 137, .28);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.game-app-card-featured .game-app-btn:active,
.game-feature-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    0 3px 0 rgba(122, 35, 137, .28);
}

.game-app-card-tourney {
  border-color: #7c5cff;
  background:
    radial-gradient(circle at 88% 100%, rgba(124, 92, 255, .22), transparent 45%),
    linear-gradient(160deg, #f6f2ff, #e9e2ff);
  box-shadow: 0 8px 0 rgba(52, 28, 122, .26), 0 16px 28px rgba(38, 18, 92, .22);
}
.game-feature-badge-tourney {
  color: #fff8e1;
  background: linear-gradient(180deg, #8b6bff, #5b2fd6);
  border-color: rgba(255, 231, 150, .85);
  box-shadow: 0 3px 0 rgba(35, 12, 92, .4);
}
.game-feature-badge-bonus {
  color: #fff;
  background: linear-gradient(180deg, #ff6b6b, #e63946);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 3px 0 rgba(120, 20, 30, .4);
  letter-spacing: .04em;
}
.game-app-card-tourney .game-app-name { color: #3b1f8f; }
.game-app-card-tourney .game-app-desc { color: #4a3a86; }
.game-feature-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(91, 47, 214, .12), rgba(91, 47, 214, .05));
  border: 1px solid rgba(91, 47, 214, .22);
}
.game-feature-prize-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b4bc9;
}
.game-feature-prize-value {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.05;
  color: #3b1f8f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.game-feature-prize-note {
  font-size: 10px;
  font-weight: 700;
  color: #5f4aa8;
}
.game-app-card-tourney .game-feature-tags span {
  color: #3f2a8c;
  background: rgba(124, 92, 255, .14);
  border-color: rgba(91, 47, 214, .2);
}
.game-feature-btn-tourney {
  color: #fffdf2;
  background: linear-gradient(180deg, #9ef449, #46bf00 55%, #2f9600);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .38),
    0 6px 0 #1f6b00;
  text-shadow: 0 1px 0 rgba(20, 80, 0, .5);
}
.game-feature-btn-tourney:active {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    0 3px 0 #1f6b00;
}
.game-more-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon copy"
    "btn btn";
  align-items: center;
  gap: 12px 14px;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 209, 102, .28), transparent 42%),
    linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(230, 246, 255, .92));
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 8px 0 rgba(30, 100, 160, .16), 0 14px 24px rgba(20, 70, 120, .14);
  text-align: left;
}
.game-more-icon {
  grid-area: icon;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 28px;
  background: linear-gradient(160deg, #fff7d1, #ffe08a);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 0 rgba(30, 100, 160, .12);
}
.game-more-copy { grid-area: copy; min-width: 0; }
.game-more-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
  color: #0d3d66;
}
.game-more-desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #3d6f96;
}
.game-more-btn {
  grid-area: btn;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2a1408;
  background: linear-gradient(180deg, #ffe08a, #ffc53d 45%, #ffb703);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    0 5px 0 rgba(30, 100, 160, .22);
}
.game-more-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    0 2px 0 rgba(30, 100, 160, .22);
}
.game-more-btn:disabled {
  cursor: wait;
  opacity: .92;
}
.game-more-btn.is-loading .game-more-btn-label {
  opacity: .55;
}
.game-more-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(42, 20, 8, .18);
  border-top-color: #2a1408;
  animation: game-more-spin .7s linear infinite;
}
.game-more-btn.is-loading .game-more-btn-spinner {
  display: block;
}
@keyframes game-more-spin {
  to { transform: rotate(360deg); }
}
.game-app-cover {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: cover;
  background: #d8effc;
  box-shadow: 0 6px 14px rgba(20, 80, 130, .22);
}
.game-app-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.game-app-meta { min-width: 0; }
.game-app-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.15;
  color: #0d3d66;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-app-stars {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #f5b800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.game-app-desc {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #3a6f94;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-app-btn {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2a1408;
  background: linear-gradient(180deg, #ffe08a, #ffb703);
  box-shadow: 0 4px 0 rgba(30, 100, 160, .22);
  transition: transform .12s ease;
}
.game-app-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(30, 100, 160, .22);
}

.tourney-empty {
  text-align: center;
  padding: 36px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .15);
}
.tourney-empty span { font-size: 40px; display: block; margin-bottom: 8px; }
.tourney-empty p { margin: 0; color: var(--muted); font-weight: 800; }
.tourney-history-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(148, 186, 232, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(25, 59, 104, .96), rgba(17, 40, 78, .98));
  box-shadow: 0 12px 25px rgba(4, 18, 45, .25);
}
.tourney-history-media { position: relative; min-height: 150px; overflow: hidden; }
.tourney-history-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 45%, rgba(17, 40, 78, .92));
}
.tourney-history-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); }
.tourney-history-media > span {
  position: absolute;
  z-index: 1;
  left: 8px;
  top: 9px;
  padding: 5px 7px;
  border-radius: 8px;
  color: #d8e8ff;
  background: rgba(11, 27, 58, .84);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}
.tourney-history-body { position: relative; z-index: 1; padding: 13px 13px 12px 3px; }
.tourney-history-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.tourney-history-top span {
  color: #9ccaff;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.tourney-history-top time { color: #7696bf; font-size: 7px; font-weight: 800; }
.tourney-history-body h3 { margin: 6px 0 9px; color: #fff; font-size: 15px; line-height: 1.1; }
.tourney-history-result { display: grid; gap: 4px; color: #9eb6d5; font-size: 8px; font-weight: 700; }
.tourney-history-result strong { color: #ffe07a; }
.tourney-history-prize {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.tourney-history-prize span { color: #7696bf; font-size: 7px; font-weight: 800; }
.tourney-history-prize strong { color: #76efb5; font-size: 13px; }
@media (max-width: 360px) {
  .tourney-history-card { grid-template-columns: 92px minmax(0, 1fr); }
  .tourney-history-top { align-items: flex-start; flex-direction: column; }
}

.nav-item.nav-center .nav-ico {
  width: 46px;
  height: 46px;
}
.nav-item.nav-center.active .nav-ico {
  width: 54px;
  height: 54px;
}

/* Wallet */
.wallet-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 18px;
  -webkit-overflow-scrolling: touch;
}
.wallet-hero { margin-bottom: 14px; }
.wallet-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid #ffd166;
  box-shadow: 0 10px 0 rgba(138, 36, 88, .45), 0 16px 32px rgba(0, 0, 0, .28);
  background: linear-gradient(160deg, #ff5cad, #e8328a 55%, #c41d72);
}
.wallet-card-stripes {
  position: absolute;
  inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(-48deg, transparent 0 10px, rgba(0, 0, 0, .12) 10px 20px);
  pointer-events: none;
}
.wallet-card-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}
.wallet-card-icon {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
  flex-shrink: 0;
}
.wallet-card-info { min-width: 0; }
.wallet-card-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.wallet-balance {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 40px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 0 rgba(138, 36, 88, .35);
  margin: 2px 0;
}
.wallet-card-sub {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #ffe08a;
}

.wallet-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.wallet-tab {
  border: 0;
  border-radius: 16px;
  padding: 12px 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #5a1438;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
  transition: transform .12s ease, background .12s ease;
}
.wallet-tab.active {
  color: #2a1408;
  background: linear-gradient(180deg, #ffe08a, #ffb703);
  box-shadow: 0 5px 0 rgba(138, 36, 88, .35);
}
.wallet-tab:active { transform: translateY(2px); }

.wallet-panel { animation: walletFade .25s ease; }
@keyframes walletFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.wallet-form {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .12);
  box-shadow: var(--shadow);
}
.wallet-field { display: block; margin-bottom: 14px; }
.wallet-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wallet-field input {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 14px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 800;
  color: #1a2a44;
  background: #fff7e6;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08);
}
.wallet-field input:focus {
  outline: 3px solid rgba(255, 209, 102, .55);
}
.wallet-input-wrap {
  position: relative;
}
.wallet-input-wrap input { padding-left: 46px; }
.wallet-input-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}
.wallet-submit {
  width: 100%;
  margin-top: 4px;
  font-size: 17px;
}
.wallet-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.wallet-tx-list { display: flex; flex-direction: column; gap: 10px; }
.wallet-tx {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}
.wallet-tx.credit { border-color: rgba(125, 255, 163, .25); }
.wallet-tx.debit { border-color: rgba(255, 77, 154, .25); }
.wallet-tx-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(0, 0, 0, .18);
}
.wallet-tx-body { min-width: 0; }
.wallet-tx-body strong {
  display: block;
  font-size: 14px;
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-tx-body small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-tx-amt {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.wallet-tx.credit .wallet-tx-amt { color: var(--lime); }
.wallet-tx.debit .wallet-tx-amt { color: #ff8eb8; }

.wallet-empty {
  text-align: center;
  padding: 36px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .15);
}
.wallet-empty span { font-size: 40px; display: block; margin-bottom: 8px; }
.wallet-empty p { margin: 0; color: var(--muted); font-weight: 800; }

/* Modern wallet */
.screen-wallet {
  background:
    radial-gradient(circle at 110% 18%, rgba(92, 74, 255, .22), transparent 35%),
    radial-gradient(circle at -10% 65%, rgba(31, 199, 255, .13), transparent 38%);
}
.wallet-scroll {
  padding: 12px 16px 24px;
}
.wallet-hero { margin-bottom: 16px; }
.wallet-card {
  isolation: isolate;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13), transparent 44%),
    linear-gradient(145deg, #5639d8, #2e42a6 52%, #126b9b);
  box-shadow: 0 18px 40px rgba(3, 14, 40, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.wallet-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1px, transparent 1.5px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent, #000);
}
.wallet-card-glow {
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  right: -48px;
  top: -74px;
  border-radius: 50%;
  background: rgba(94, 240, 255, .26);
  filter: blur(4px);
}
.wallet-card-body {
  padding: 20px 18px 14px;
  gap: 14px;
}
.wallet-card-icon-wrap {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.wallet-card-icon {
  width: 58px;
  height: 58px;
}
.wallet-card-info { flex: 1; }
.wallet-card-label {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  letter-spacing: .14em;
}
.wallet-balance-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.wallet-balance {
  margin: 3px 0 1px;
  font-size: clamp(30px, 8vw, 38px);
  color: #fff;
  text-shadow: 0 2px 8px rgba(12, 17, 68, .25);
}
.wallet-gold-unit {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  color: #ffe685;
}
.wallet-brl-balance {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #bdf7ff;
}
.wallet-rate {
  position: relative;
  padding: 9px 18px 11px;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, .82);
  background: rgba(5, 18, 66, .2);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.wallet-rate::before {
  content: "↻";
  margin-right: 6px;
  color: #75efff;
}
.wallet-tabs {
  padding: 4px;
  gap: 4px;
  border-radius: 16px;
  background: rgba(3, 14, 42, .32);
  border: 1px solid rgba(255, 255, 255, .08);
}
.wallet-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  color: #9eb5d6;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 900;
}
.wallet-tab .wallet-ico { width: 16px; height: 16px; }
.wallet-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #6d54f7, #3f7fd8);
  box-shadow: 0 5px 14px rgba(32, 44, 132, .32), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.wallet-form {
  padding: 17px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(19, 45, 88, .88), rgba(10, 30, 65, .88));
  border: 1px solid rgba(147, 186, 235, .16);
  box-shadow: 0 16px 34px rgba(1, 10, 31, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.wallet-form-head,
.wallet-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.wallet-form-head h3,
.wallet-history-head h3 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  color: #fff;
}
.wallet-form-kicker {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #72dff0;
}
.wallet-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 900;
  color: #a9ffd1;
  background: rgba(37, 207, 125, .12);
  border: 1px solid rgba(75, 232, 153, .2);
}
.wallet-secure-badge .wallet-ico { width: 12px; height: 12px; }

/* Ícones em traço da carteira: herdam a cor do elemento e escalam com o texto. */
.wallet-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wallet-field { margin-bottom: 14px; }
.wallet-field > span {
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .1em;
  color: #9fb6d5;
}
.wallet-field input {
  min-height: 51px;
  padding: 13px 14px;
  border: 1px solid rgba(143, 178, 222, .17);
  border-radius: 14px;
  color: #eff7ff;
  background: rgba(4, 20, 49, .6);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16);
}
.wallet-field input::placeholder { color: #637b9c; }
.wallet-field input:focus {
  outline: none;
  border-color: #6b82ff;
  box-shadow: 0 0 0 3px rgba(107, 130, 255, .14);
}
.wallet-input-wrap input { padding-left: 48px; padding-right: 63px; }
.wallet-input-ico {
  left: 12px;
  width: 27px;
  height: 27px;
}
.wallet-max-btn {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  padding: 7px 8px;
  font-size: 9px;
  font-weight: 900;
  color: #cfd8ff;
  background: rgba(107, 84, 247, .24);
  cursor: pointer;
}
.wallet-conversion {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: end;
  margin: -3px 0 16px;
  padding: 11px 12px;
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(87, 67, 217, .14), rgba(27, 170, 190, .1));
  border: 1px solid rgba(118, 218, 236, .12);
}
.wallet-conversion > span {
  font-size: 10px;
  font-weight: 800;
  color: #97b0d2;
}
.wallet-conversion strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 21px;
  color: #8dffcf;
}
.wallet-conversion small {
  font-size: 9px;
  font-weight: 700;
  color: #637f9f;
}
.wallet-pix-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wallet-pix-type {
  min-width: 0;
  border: 1px solid rgba(142, 175, 218, .13);
  border-radius: 12px;
  padding: 9px 5px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 900;
  color: #8299bb;
  background: rgba(4, 20, 49, .45);
  cursor: pointer;
}
.wallet-pix-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.wallet-pix-type .wallet-ico {
  width: 19px;
  height: 19px;
  color: #7d93b6;
}
.wallet-pix-type.active {
  color: #eaf1ff;
  border-color: rgba(120, 105, 255, .65);
  background: linear-gradient(145deg, rgba(107, 84, 247, .35), rgba(63, 127, 216, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.wallet-pix-type.active .wallet-ico { color: #9cecff; }
.wallet-pix-input input { padding-left: 45px; padding-right: 14px; }
.wallet-input-symbol {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  color: #8ea2ff;
}
.wallet-input-symbol .wallet-ico { width: 18px; height: 18px; }
.wallet-field-help {
  display: block;
  margin: 6px 2px 0;
  font-size: 9.5px;
  font-weight: 700;
  color: #687f9e;
}
.wallet-submit {
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(135deg, #6d54f7, #357ed5);
  box-shadow: 0 7px 17px rgba(40, 49, 159, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  cursor: pointer;
}
.wallet-submit .wallet-ico { width: 19px; height: 19px; }
.wallet-submit:disabled { opacity: .55; cursor: wait; }
.wallet-form-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  font-size: 9px;
  font-weight: 800;
  color: #6f87a7;
}
.wallet-history-hint {
  max-width: 100px;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 800;
  text-align: right;
  color: #6f87a7;
}
.wallet-tx-list { gap: 8px; }
.wallet-tx {
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr) auto 10px;
  gap: 9px;
  padding: 11px;
  border-radius: 16px;
  text-align: left;
  font-family: var(--font-ui);
  color: #fff;
  background: linear-gradient(145deg, rgba(20, 49, 92, .92), rgba(11, 33, 69, .92));
  border: 1px solid rgba(143, 181, 226, .13);
  box-shadow: 0 8px 20px rgba(1, 10, 31, .18);
  cursor: pointer;
}
.wallet-tx.credit,
.wallet-tx.debit { border-color: rgba(143, 181, 226, .13); }
.wallet-tx-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 20px;
  font-weight: 900;
  color: #a8f5ff;
  background: linear-gradient(145deg, rgba(83, 67, 218, .28), rgba(41, 153, 192, .2));
}
.wallet-tx-body strong {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 900;
  color: #edf5ff;
}
.wallet-tx-body small {
  margin-top: 1px;
  font-size: 9.5px;
  color: #7890b0;
}
.wallet-tx-status {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  color: #b6ffd9;
  background: rgba(48, 202, 128, .12);
}
.wallet-tx-status.status-analysis,
.wallet-receipt-status.status-analysis {
  color: #ffe08a;
  background: rgba(255, 183, 3, .13);
}
.wallet-tx-status.status-paid,
.wallet-receipt-status.status-paid,
.wallet-tx-status.status-completed {
  color: #b6ffd9;
  background: rgba(48, 202, 128, .12);
}
.wallet-tx-status.status-rejected,
.wallet-receipt-status.status-rejected {
  color: #ff9ebc;
  background: rgba(255, 77, 128, .13);
}
.wallet-tx-value { text-align: right; white-space: nowrap; }
.wallet-tx-value > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  color: #ffadca;
}
.wallet-tx.credit .wallet-tx-value > strong { color: #8dffcf; }
.wallet-tx-value strong small {
  font-family: var(--font-ui);
  font-size: 8px;
  color: #7087a6;
}
.wallet-tx-value > span {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  color: #9eb1ca;
}
.wallet-tx-arrow {
  color: #617899;
  font-size: 18px;
}
.wallet-empty {
  background: rgba(12, 35, 73, .64);
  border-color: rgba(143, 181, 226, .13);
}
.wallet-empty small {
  display: block;
  margin-top: 5px;
  color: #667f9f;
  font-weight: 700;
}

/* Buttons */
.btn {
  border: 0; cursor: pointer; font-family: var(--font-display);
  font-weight: 700; letter-spacing: .04em; border-radius: 18px;
  padding: 14px 22px; color: #14213d; background: #fff;
  box-shadow: 0 8px 0 rgba(0,0,0,.2); transition: transform .15s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.btn-primary, .btn-play {
  color: #2a1408;
  background: linear-gradient(180deg, #ffe08a, #ffb703);
}
.btn-play { font-size: clamp(22px, 6vw, 28px); padding: clamp(14px, 4vw, 18px) clamp(32px, 10vw, 42px); }
.btn-play.pulse { animation: pulse 1.6s ease-in-out infinite; }
.btn-small { padding: 10px 14px; font-size: 13px; }
.btn-ghost { background: transparent; color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.25); margin-top: 8px; }

/* Home background */
.screen-home {
  overflow: hidden;
  overflow-x: hidden;
  background: #6ec4f0;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.home-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .38);
  z-index: 1;
}
.home-bg img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: brightness(1.08) saturate(.92);
  opacity: .92;
}
.home-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 10px 20px;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Hanging promo tucked under the candy header */
.home-hang {
  position: relative;
  z-index: 0;
  display: block;
  width: min(210px, 55vw);
  margin: calc(-1 * (var(--cc-avatar-size) * 0.55 + 36px)) auto -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  animation: homeHangSway 4.8s ease-in-out infinite;
  transform-origin: top center;
  transform: translateY(-8%);
}
.home-hang img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.home-hang:active {
  transform: translateY(-8%) scale(0.98);
  animation: none;
}
@keyframes homeHangSway {
  0%, 100% { transform: translateY(-8%) rotate(-1.2deg); }
  50% { transform: translateY(calc(-8% + 3px)) rotate(1.2deg); }
}

/* Welcome mini card */
.welcome-card {
  flex-shrink: 0;
  align-self: center;
  width: fit-content;
  max-width: 90%;
  margin: -6px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(220, 242, 255, .88));
  border: 1.5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 3px 0 rgba(30, 100, 160, .16), 0 6px 12px rgba(20, 70, 120, .12);
}
.welcome-card-text {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: #1a5f8a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72vw;
}
.welcome-card-text strong {
  color: #0d3d66;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
}

/* Home promo carousel */
.home-carousel-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid #ffd166;
  background:
    radial-gradient(circle at 90% 100%, rgba(255, 183, 3, .18), transparent 42%),
    linear-gradient(160deg, #fffdf6, #fff0d2);
  box-shadow: 0 8px 0 rgba(122, 35, 137, .22), 0 16px 28px rgba(71, 22, 100, .2);
}
.home-carousel {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #47145f;
  user-select: none;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}
.home-carousel-track {
  display: flex;
  width: 100%;
  max-width: 100%;
  transition: transform .45s cubic-bezier(.22, .9, .28, 1);
  will-change: transform;
}
.home-carousel.is-dragging .home-carousel-track {
  transition: none;
}
.home-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  background: #47145f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  background: #47145f;
  border: 0;
  border-radius: 0;
}
.home-carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  pointer-events: none;
  background: transparent;
}
.home-carousel-dot {
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  pointer-events: auto;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.home-carousel-dot.active {
  width: 18px;
  background: #fff;
}
.hero-play {
  text-align: center; padding: 28px 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,77,154,.35), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(61,231,255,.28), transparent 35%),
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--gold); font-weight: 800; margin: 0; }

/* Trust / segurança (rodapé da home) */
.trust {
  padding: 6px 2px 4px;
}
.trust-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.trust-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13, 61, 102, .28), transparent);
}
.trust-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0d3d66;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.trust-seals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.trust-seal {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(13, 61, 102, .12);
  box-shadow: 0 2px 6px rgba(20, 70, 120, .1);
}
.trust-seal-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 15px;
  background: linear-gradient(160deg, #eef8ff, #dcecff);
  border: 1px solid rgba(13, 61, 102, .1);
}
.trust-seal-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.trust-seal-text strong {
  font-size: 11px;
  font-weight: 800;
  color: #0d3d66;
}
.trust-seal-text small {
  font-size: 9.5px;
  font-weight: 700;
  color: #52779b;
}
.trust-note {
  margin: 12px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  color: #2f5d85;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.trust-legal {
  margin: 6px 0 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  color: #4a7ba3;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.hero-play h2 { font-family: var(--font-display); font-size: clamp(28px, 8vw, 40px); margin: 8px 0; }
.hero-play .sub { color: var(--muted); margin: 0 0 22px; font-weight: 700; font-size: clamp(13px, 3.5vw, 15px); }
.daily-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,209,102,.2), rgba(255,77,154,.18));
  border: 1px solid rgba(255,209,102,.35);
}
.daily-banner strong { display: block; }
.daily-banner span { color: var(--muted); font-size: 13px; font-weight: 700; }

.section-header { flex-direction: column; align-items: flex-start; gap: 2px; }
.section-header h2 { margin: 0; font-family: var(--font-display); font-size: 28px; }
.section-header p { margin: 0; color: var(--muted); font-weight: 700; }

/* Map */
.map-scroll {
  flex: 1; overflow-y: auto; padding: 12px 18px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  -webkit-overflow-scrolling: touch;
}
.map-node {
  width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center;
}
.map-path {
  width: 4px; height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08));
  border-radius: 4px;
}
.map-btn {
  width: 74px; height: 74px; border-radius: 50%; border: 4px solid rgba(255,255,255,.35);
  font-family: var(--font-display); font-size: 24px; font-weight: 700; cursor: pointer;
  color: #fff; position: relative;
  box-shadow: 0 10px 0 rgba(0,0,0,.25), inset 0 0 18px rgba(255,255,255,.25);
}
.map-btn.locked { background: #4a5570; opacity: .55; cursor: not-allowed; }
.map-btn.current { background: linear-gradient(160deg, #ff4d9a, #ff6b4a); animation: pulse 1.4s infinite; }
.map-btn.unlocked { background: linear-gradient(160deg, #3de7ff, #4587ff); }
.map-btn.completed { background: linear-gradient(160deg, #7dffa3, #2bb673); }
.map-meta { text-align: center; margin-top: 6px; margin-bottom: 2px; }
.map-meta strong { display: block; font-size: 13px; }
.map-meta span { color: var(--gold); letter-spacing: 2px; font-size: 12px; }

/* Shop — combos de ouro */
.screen-shop {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 209, 102, .35), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(255, 105, 180, .28), transparent 40%),
    linear-gradient(165deg, #ffe6f4 0%, #ffd6ec 40%, #f5c4e4 100%);
}
.shop-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 18px;
  -webkit-overflow-scrolling: touch;
}
.shop-banner {
  margin-bottom: 12px;
  border-radius: 20px;
  overflow: hidden;
  border: 3px solid #ffd166;
  box-shadow: 0 8px 0 rgba(180, 60, 120, .22), 0 14px 24px rgba(140, 40, 100, .16);
}
.shop-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  pointer-events: none;
}

.shop-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 230, 140, .5), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fff2d4 100%);
  border: 2px solid #ffd166;
  box-shadow: 0 6px 0 rgba(180, 60, 120, .2), 0 10px 18px rgba(140, 40, 100, .14);
}
.shop-balance-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shop-balance-ico {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 3px rgba(120, 60, 0, .25));
}
.shop-balance-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shop-balance-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c47800;
}
.shop-balance-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  color: #9a4d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.shop-balance-btn {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, #ff7ab8 0%, #ff4d9a 55%, #e8328a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 rgba(160, 30, 90, .35);
  text-shadow: 0 1px 0 rgba(140, 20, 80, .35);
  transition: transform .12s ease;
}
.shop-balance-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(160, 30, 90, .35);
}

.shop-gold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.shop-gold-card {
  position: relative;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 230, 140, .55), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fff4d8 55%, #ffe3a8 100%);
  border-radius: 24px;
  padding: 14px 10px 12px;
  text-align: center;
  box-shadow:
    0 8px 0 rgba(180, 60, 120, .22),
    0 14px 24px rgba(140, 40, 100, .16);
  border: 3px solid #ffd166;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.shop-gold-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  pointer-events: none;
}
.shop-gold-card .qty {
  position: relative;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #9a4d00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  line-height: 1;
  margin-top: 2px;
}
.shop-gold-label {
  position: relative;
  margin-top: -6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c47800;
}
.shop-gold-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 86px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 200, 60, .35), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 240, 200, .25));
}
.shop-buy {
  position: relative;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 10px 10px 12px;
  border-radius: 999px;
  color: #2a1408;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc53d 45%, #ffb703 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 rgba(180, 100, 0, .2),
    0 5px 0 rgba(160, 60, 100, .28);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.shop-buy:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .35),
    0 2px 0 rgba(160, 60, 100, .28);
}

.gold-pile {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 72px;
  margin: 2px 0 0;
  filter: drop-shadow(0 4px 3px rgba(120, 60, 0, .25));
}
.gold-pile img {
  position: absolute;
  width: 54px;
  height: 40px;
  object-fit: contain;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
/* Neat centered stacks */
.gold-pile.pile-1 { height: 52px; }
.gold-pile.pile-1 img {
  width: 68px;
  height: 50px;
  bottom: 0;
}
.gold-pile.pile-2 { height: 58px; }
.gold-pile.pile-2 img:nth-child(1) { bottom: 0; left: 38%; width: 50px; height: 38px; }
.gold-pile.pile-2 img:nth-child(2) { bottom: 0; left: 62%; width: 50px; height: 38px; }
.gold-pile.pile-3 { height: 68px; }
.gold-pile.pile-3 img:nth-child(1) { bottom: 0; left: 34%; width: 48px; height: 36px; }
.gold-pile.pile-3 img:nth-child(2) { bottom: 0; left: 66%; width: 48px; height: 36px; }
.gold-pile.pile-3 img:nth-child(3) { bottom: 22px; left: 50%; width: 52px; height: 38px; }
.gold-pile.pile-4 { width: 96px; height: 74px; }
.gold-pile.pile-4 img:nth-child(1) { bottom: 0; left: 30%; width: 46px; height: 34px; }
.gold-pile.pile-4 img:nth-child(2) { bottom: 0; left: 50%; width: 46px; height: 34px; }
.gold-pile.pile-4 img:nth-child(3) { bottom: 0; left: 70%; width: 46px; height: 34px; }
.gold-pile.pile-4 img:nth-child(4) { bottom: 24px; left: 50%; width: 52px; height: 38px; }
.gold-pile.pile-5 { width: 100px; height: 78px; }
.gold-pile.pile-5 img:nth-child(1) { bottom: 0; left: 28%; width: 44px; height: 33px; }
.gold-pile.pile-5 img:nth-child(2) { bottom: 0; left: 50%; width: 44px; height: 33px; }
.gold-pile.pile-5 img:nth-child(3) { bottom: 0; left: 72%; width: 44px; height: 33px; }
.gold-pile.pile-5 img:nth-child(4) { bottom: 22px; left: 40%; width: 46px; height: 34px; }
.gold-pile.pile-5 img:nth-child(5) { bottom: 22px; left: 60%; width: 46px; height: 34px; }
.gold-pile.pile-6 { width: 100px; height: 86px; }
.gold-pile.pile-6 img:nth-child(1) { bottom: 0; left: 28%; width: 42px; height: 32px; }
.gold-pile.pile-6 img:nth-child(2) { bottom: 0; left: 50%; width: 42px; height: 32px; }
.gold-pile.pile-6 img:nth-child(3) { bottom: 0; left: 72%; width: 42px; height: 32px; }
.gold-pile.pile-6 img:nth-child(4) { bottom: 20px; left: 40%; width: 44px; height: 33px; }
.gold-pile.pile-6 img:nth-child(5) { bottom: 20px; left: 60%; width: 44px; height: 33px; }
.gold-pile.pile-6 img:nth-child(6) { bottom: 40px; left: 50%; width: 48px; height: 36px; }

/* ===== Profile ===== */
.pf-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.pf-hero {
  position: relative;
  overflow: hidden;
  padding: 46px 16px 18px;
  border-radius: 28px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 120, 180, .12), rgba(180, 70, 160, .22)),
    url("../images/profile/pf-hero-bg.webp") center / cover no-repeat;
  border: 3px solid #fff;
  box-shadow: 0 10px 0 rgba(160, 40, 120, .35), 0 16px 32px rgba(120, 20, 90, .28);
}
.pf-hero > *:not(.pf-hero-shine) { position: relative; z-index: 1; }
.pf-hero-shine {
  position: absolute;
  z-index: 0;
  inset: -50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%);
  animation: tourneyShine 4.2s ease-in-out infinite;
  pointer-events: none;
}
.pf-avatar-slot {
  position: relative;
  width: 108px;
  margin: 0 auto 26px;
}
.pf-avatar-ring {
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff6c8, #ffd166 46%, #f2b000);
  box-shadow:
    0 0 0 3px rgba(255, 236, 160, .5),
    0 10px 22px rgba(255, 190, 60, .35),
    inset 0 2px 0 rgba(255, 255, 255, .7);
}
.pf-avatar-slot .avatar.xl {
  width: 98px;
  height: 98px;
  margin: 0;
  border-radius: 50%;
  font-size: 40px;
  border: 3px solid #fffdf5;
  box-shadow: inset 0 -6px 14px rgba(120, 20, 70, .3);
}
.pf-avatar-slot .competitive-seal {
  right: -2px;
  top: 2px;
  bottom: auto;
  width: 32px;
  height: 32px;
  font-size: 16px;
}
.pf-level-tag {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 14px 6px;
  border-radius: 999px;
  white-space: nowrap;
  color: #46220a;
  background: linear-gradient(180deg, #fff3b0, #ffc02e 60%, #f7a600);
  border: 2px solid #fffaf0;
  box-shadow: 0 4px 0 rgba(176, 106, 8, .8), 0 8px 14px rgba(80, 40, 0, .28);
}
.pf-level-tag small { font-size: 9.5px; font-weight: 900; letter-spacing: .1em; }
.pf-level-tag b { font-family: var(--font-display); font-size: 17px; line-height: 1; }
.pf-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 0 rgba(140, 20, 90, .55), 0 4px 10px rgba(90, 10, 60, .4);
}
.pf-user {
  display: inline-block;
  margin: 7px 0 0;
  padding: 4px 12px 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(120, 20, 90, .42);
  border: 1px solid rgba(255, 255, 255, .35);
}
.pf-progress {
  margin-top: 16px;
  padding: 11px 13px 12px;
  border-radius: 18px;
  background: rgba(120, 20, 90, .38);
  border: 1px solid rgba(255, 255, 255, .35);
}
.pf-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.pf-progress-head b { font-family: var(--font-display); font-size: 13px; color: #ffe08a; }
.pf-progress-track {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(70, 10, 50, .45);
  border: 2px solid rgba(255, 255, 255, .4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
.pf-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffe89a, #ffc02e 55%, #f79b00);
  box-shadow: inset 0 -3px 0 rgba(190, 110, 0, .45), 0 0 10px rgba(255, 200, 80, .5);
  transition: width .5s ease;
}
.pf-section-title {
  margin: 18px 4px 10px;
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(6, 24, 56, .45);
}
.pf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.pf-help-row {
  width: 100%;
  min-height: 72px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: 0 6px 0 rgba(8, 26, 60, .45), 0 12px 20px rgba(4, 14, 40, .28);
  color: #fff;
  text-align: left;
  font-family: var(--font-ui);
  cursor: pointer;
}
.pf-help-row:active { transform: translateY(1px); }
.pf-help-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #7da9ff, #3c63d4);
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 3px 0 rgba(5, 18, 45, .28), inset 0 2px 0 rgba(255,255,255,.3);
  color: #fff;
}
.pf-help-icon svg { width: 22px; height: 22px; }
.pf-help-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-help-copy strong {
  font-size: 14px;
  font-weight: 900;
}
.pf-help-copy small {
  color: #c5d7ef;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.pf-help-chevron {
  font-size: 22px;
  color: rgba(255,255,255,.7);
  line-height: 1;
}
.settings-icon-support {
  background: linear-gradient(145deg, #7da9ff, #3c63d4);
}
.settings-icon-support svg { width: 18px; height: 18px; }
.pf-stat {
  --pf-stat-base: rgba(8, 26, 60, .5);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 13px 10px 12px;
  border-radius: 22px;
  text-align: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 0 var(--pf-stat-base), 0 12px 20px rgba(4, 14, 40, .32), inset 0 3px 0 rgba(255, 255, 255, .45);
}
.pf-stat::after {
  content: "";
  position: absolute;
  inset: 3px 12px auto;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent);
  pointer-events: none;
}
.pf-stat-life {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 10px 12px;
}
.pf-stat-life .pf-stat-copy { display: flex; flex-direction: column; align-items: flex-start; }
.pf-stat-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 3px;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
  background: rgba(22, 10, 44, .22);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.pf-stat-life .pf-stat-ico { margin-bottom: 0; }
.pf-stat-ico img { width: 34px; height: 34px; object-fit: contain; }
.pf-star {
  display: block;
  width: 30px;
  height: 30px;
  background: linear-gradient(180deg, #ffffff, #fff4c9 60%, #ffe9a0);
  filter: drop-shadow(0 2px 0 rgba(150, 88, 0, .6)) drop-shadow(0 4px 5px rgba(90, 45, 0, .35));
  clip-path: polygon(50% 0%, 62% 35%, 100% 35%, 70% 57%, 82% 92%, 50% 71%, 18% 92%, 30% 57%, 0% 35%, 38% 35%);
}
.pf-stat strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 0 var(--pf-stat-base), 0 3px 6px rgba(0, 0, 0, .25);
}
.pf-stat small {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}
.pf-stat-star {
  --pf-stat-base: #c08a00;
  background: linear-gradient(180deg, #ffe987, #ffc72e 55%, #f5ac00);
}
.pf-stat-flag {
  --pf-stat-base: #0d7a52;
  background: linear-gradient(180deg, #74e9b4, #23c187 55%, #12a06d);
}
.pf-stat-trophy {
  --pf-stat-base: #40219f;
  background: linear-gradient(180deg, #a992ff, #7a56f0 55%, #5b34da);
}
.pf-stat-gold {
  --pf-stat-base: #a25100;
  background: linear-gradient(180deg, #ffc45c, #fa9312 55%, #e37000);
}
.pf-stat-life {
  --pf-stat-base: #a91250;
  background: linear-gradient(180deg, #ff8db8, #f5468d 55%, #e01f75);
}

.profile-competitive {
  margin: 14px 0 0;
  padding: 14px 12px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(160deg, rgba(140, 74, 205, .6), rgba(70, 30, 118, .72));
  border: 2px solid rgba(255, 209, 102, .55);
  box-shadow: 0 6px 0 rgba(48, 16, 88, .5), 0 12px 22px rgba(20, 5, 50, .3);
}
.competitive-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  color: #3d1d15;
  background: linear-gradient(180deg, #fff0aa, #ffbd24);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.profile-competitive strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
}
/* Game */
.screen-game { background: linear-gradient(180deg, #0a1d3d, #12305c 40%, #1a1740); }
.game-hud { gap: 8px; }
.hud-center { display: flex; flex-direction: column; align-items: center; }
.hud-level { font-weight: 900; letter-spacing: .04em; }
.hud-score { color: var(--gold); font-weight: 900; }
.hud-moves {
  min-width: 58px; text-align: center; padding: 8px 10px; border-radius: 16px;
  background: rgba(255,255,255,.1); font-family: var(--font-display); font-size: 22px; line-height: 1;
}
.hud-moves small { display: block; font-size: 10px; color: var(--muted); font-family: var(--font-ui); }
.objective-bar { padding: 0 16px 8px; }
.objective-bar span { font-size: 13px; font-weight: 800; color: var(--muted); }
.obj-progress { margin-top: 6px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.obj-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7dffa3, #ffd166, #ff4d9a); transition: width .25s ease; }

.board-wrap {
  position: relative; margin: 0 auto; width: min(92vw, 420px); aspect-ratio: 1;
  max-height: min(92vw, 56vh);
}
.board {
  display: grid; width: 100%; height: 100%; gap: 4px; padding: 8px;
  border-radius: 22px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
  touch-action: none;
}
.cell {
  border-radius: 14px; position: relative; cursor: pointer;
  transition: transform .12s ease;
}
.cell.selected { transform: scale(1.08); outline: 3px solid #fff; outline-offset: -3px; z-index: 2; }
.piece {
  position: absolute; inset: 8%; border-radius: 18%;
  box-shadow: inset 0 0 14px rgba(255,255,255,.45), 0 6px 10px rgba(0,0,0,.25);
  display: grid; place-items: center; font-size: clamp(14px, 4.5vw, 22px);
}
.piece.p0 { background: linear-gradient(145deg, #ff5ea8, #c9184a); }
.piece.p1 { background: linear-gradient(145deg, #56e0ff, #0077b6); }
.piece.p2 { background: linear-gradient(145deg, #ffe066, #f4a261); }
.piece.p3 { background: linear-gradient(145deg, #80ed99, #2d6a4f); }
.piece.p4 { background: linear-gradient(145deg, #c77dff, #7b2cbf); }
.piece.p5 { background: linear-gradient(145deg, #ff8e72, #d62828); }
.piece.pop { animation: pop .28s ease forwards; }
.piece.fall { transition: top .22s ease, left .22s ease; }
@keyframes pop { to { transform: scale(0); opacity: 0; } }

.fx-layer { pointer-events: none; position: absolute; inset: 0; overflow: hidden; }
.fx-score {
  position: absolute; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5);
  animation: floatScore .8s ease-out forwards; font-family: var(--font-display);
}
@keyframes floatScore { to { transform: translateY(-40px); opacity: 0; } }
.spark {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  animation: spark .5s ease-out forwards;
}
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

.boosters-bar {
  display: flex; justify-content: center; gap: 10px; padding: 10px 12px 16px;
}
.booster-btn {
  width: 58px; height: 58px; border-radius: 18px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; position: relative;
  box-shadow: var(--shadow);
}
.booster-btn span { font-size: 22px; }
.booster-btn i {
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px;
  border-radius: 999px; background: var(--gold); color: #2a1408;
  font-style: normal; font-size: 11px; font-weight: 900;
  display: grid; place-items: center; padding: 0 4px;
}
.booster-btn.active { outline: 2px solid #fff; background: rgba(255,209,102,.25); }

/* Modals / toast / sheets */
.modal-backdrop, .sheet-backdrop {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(4,10,24,.72); display: grid; place-items: end center;
  padding: 18px; backdrop-filter: blur(4px);
}
.modal-backdrop { place-items: center; }
.modal-backdrop[hidden], .sheet-backdrop[hidden], [hidden] {
  display: none !important;
}
.modal, .sheet {
  width: min(400px, 100%); border-radius: 28px; padding: 22px;
  background: linear-gradient(180deg, #1c3a6e, #13284d);
  border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); text-align: center;
}
.modal h2 { font-family: var(--font-display); margin: 8px 0; font-size: 30px; }
.modal .gold-pile { margin: 0 auto; }
.modal .stars { font-size: 28px; letter-spacing: 4px; color: var(--gold); margin: 8px 0; }
.modal .meta { color: var(--muted); font-weight: 700; margin-bottom: 16px; }
.modal:has(.redeem-reward) {
  padding: 9px;
  overflow: hidden;
  border: 2px solid #ffd166;
  background: linear-gradient(160deg, #3a1768, #151c55 58%, #092d59);
  box-shadow: 0 20px 55px rgba(13, 5, 45, .58), 0 0 34px rgba(255, 183, 3, .15);
}
.redeem-reward {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 14px;
  border-radius: 21px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 209, 102, .22), transparent 34%),
    rgba(8, 20, 55, .62);
}
.redeem-reward-kicker {
  display: block;
  margin: 2px 0 9px;
  color: #ffe08a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.redeem-reward-media {
  position: relative;
  overflow: hidden;
  width: min(100%, 340px);
  aspect-ratio: 1;
  max-height: min(43dvh, 340px);
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 209, 102, .55);
  background: #7d168e;
  box-shadow: 0 9px 22px rgba(5, 5, 32, .38);
}
.redeem-reward-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.redeem-reward-icon {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: -23px auto 5px;
  border-radius: 50%;
  color: #2d1703;
  font-size: 23px;
  font-weight: 950;
  background: linear-gradient(145deg, #fff3ad, #ffb703);
  border: 3px solid #332064;
  box-shadow: 0 6px 18px rgba(255, 183, 3, .28);
}
.redeem-reward h2 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: 29px;
}
.redeem-reward > p {
  margin: 0;
  color: #b9c9e5;
  font-size: 12px;
  font-weight: 700;
}
.redeem-reward > p strong { color: #fff; }
.redeem-reward-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 12px auto 7px;
  padding: 8px 20px;
  border-radius: 16px;
  background: rgba(255, 183, 3, .12);
  border: 1px solid rgba(255, 209, 102, .25);
}
.redeem-reward-value > span { font-size: 27px; }
.redeem-reward-value div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.redeem-reward-value strong {
  color: #ffd166;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}
.redeem-reward-value small {
  color: #fff1b2;
  font-size: 9px;
  font-weight: 900;
}
.redeem-reward-balance { margin-bottom: 12px !important; }
.redeem-reward-btn {
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 13px 14px;
  color: #301705;
  background: linear-gradient(180deg, #ffe58a, #ffb703);
  box-shadow: 0 5px 0 #a76005, inset 0 1px 0 rgba(255, 255, 255, .55);
  font-family: var(--font-display);
  font-size: 14px;
  cursor: pointer;
}
.redeem-reward-btn:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #a76005;
}
.competitive-form {
  position: relative;
  max-height: min(82vh, 650px);
  overflow-y: auto;
  padding: 2px;
  color: #eef5ff;
  text-align: left;
}
.competitive-form-head {
  margin: 0 0 15px;
  padding: 14px 12px 13px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(150deg, #3a1f6d, #6b2f9c);
  border: 1px solid rgba(255, 209, 102, .32);
}
.competitive-form-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  border-radius: 17px;
  font-size: 27px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 209, 102, .5);
}
.competitive-form-head h2 {
  margin: 3px 0 5px;
  font-size: 23px;
}
.competitive-form-head p {
  margin: 0 auto;
  max-width: 290px;
  color: #cbb9ec;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.competitive-modal-close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  font-size: 21px;
}
.competitive-field {
  display: block;
  margin: 0 0 13px;
  padding: 0;
  border: 0;
}
.competitive-field > span,
.competitive-field > legend {
  display: block;
  margin: 0 0 6px 2px;
  padding: 0;
  color: #c5d3e8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.competitive-field input[type="text"] {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  color: #1a2a44;
  background: #fff7e6;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
}
.competitive-field input[type="text"]:focus { outline: 3px solid rgba(255, 209, 102, .55); }
.competitive-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.competitive-chip { cursor: pointer; }
.competitive-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.competitive-chip span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 999px;
  color: #cddcf1;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .12);
  font-size: 11.5px;
  font-weight: 800;
  transition: transform .12s ease, background .12s ease;
}
.competitive-chip i { font-style: normal; }
.competitive-chip input:checked + span {
  color: #2a1408;
  background: linear-gradient(180deg, #ffe792, #ffb703);
  border-color: #fff2c2;
}
.competitive-chip input:focus-visible + span { outline: 3px solid rgba(255, 209, 102, .55); }
.competitive-chip span:active { transform: translateY(1px); }
.competitive-field small {
  display: block;
  margin: 4px 2px 0;
  color: #8298b7;
  font-size: 9px;
  font-weight: 700;
}
.competitive-fair-play {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 4px 0 13px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 209, 102, .08);
}
.competitive-fair-play input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #ffbd24;
}
.competitive-fair-play span {
  color: #c5d3e8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.competitive-submit:disabled { opacity: .65; cursor: wait; }

.competitive-confirm { color: #eef5ff; }
.competitive-confirm-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 9px;
  border-radius: 50%;
  font-size: 29px;
  background: rgba(214, 40, 90, .2);
  border: 1px solid rgba(255, 122, 158, .4);
}
.competitive-confirm h2 {
  margin: 4px 0 7px;
  font-size: 23px;
}
.competitive-confirm p {
  margin: 0 auto 17px;
  max-width: 300px;
  color: #a9b8d1;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
}
.competitive-btn-keep {
  width: 100%;
  margin-top: 8px;
  padding: 11px 10px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: #cddcf1;
  background: rgba(255, 255, 255, .1);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}
.competitive-delete-processing {
  color: #eef5ff;
  text-align: center;
}
.competitive-delete-orbit {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 50%;
  font-size: 31px;
  background: radial-gradient(circle, rgba(114, 74, 225, .34), rgba(20, 14, 66, .84));
  border: 1px solid rgba(164, 139, 255, .34);
}
.competitive-delete-orbit::before,
.competitive-delete-orbit::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #ffd65b;
  border-right-color: #7cecff;
  animation: competitiveDeleteSpin 1.15s linear infinite;
}
.competitive-delete-orbit::after {
  inset: 7px;
  border-width: 2px;
  border-top-color: #ff74c8;
  border-right-color: transparent;
  animation-direction: reverse;
  animation-duration: .8s;
}
.competitive-delete-processing h2 {
  margin: 5px 0 6px;
  font-size: 23px;
}
.competitive-delete-processing > p {
  margin: 0 auto 15px;
  max-width: 300px;
  color: #aebdd5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}
.competitive-delete-progress {
  height: 7px;
  margin-bottom: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.competitive-delete-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #784cff, #52ddff, #ffd65b);
  transform-origin: left;
  animation: competitiveDeleteProgress 4s ease-in-out both;
}
.competitive-delete-steps {
  display: grid;
  gap: 7px;
  text-align: left;
}
.competitive-delete-steps span {
  position: relative;
  padding: 8px 10px 8px 31px;
  border-radius: 11px;
  color: #788da9;
  background: rgba(255, 255, 255, .045);
  font-size: 10px;
  font-weight: 800;
}
.competitive-delete-steps span::before {
  content: "○";
  position: absolute;
  left: 11px;
  color: #6f829d;
}
.competitive-delete-steps span.active {
  color: #dcecff;
  background: rgba(91, 74, 217, .18);
}
.competitive-delete-steps span.active::before { content: "◌"; color: #79e8ff; }
.competitive-delete-steps span.done { color: #83e9b5; }
.competitive-delete-steps span.done::before { content: "✓"; color: #55e69d; }
.competitive-delete-processing.is-analysis .competitive-delete-progress i {
  animation-duration: 5s;
}
.competitive-delete-processing.is-analysis .competitive-delete-orbit {
  background: radial-gradient(circle, rgba(255, 197, 60, .28), rgba(23, 17, 63, .86));
  border-color: rgba(255, 214, 91, .4);
}
@keyframes competitiveDeleteSpin { to { transform: rotate(360deg); } }
@keyframes competitiveDeleteProgress {
  from { transform: scaleX(.04); }
  to { transform: scaleX(1); }
}
.wallet-processing,
.wallet-result,
.wallet-receipt {
  color: #eaf4ff;
}
.wallet-processing-orbit {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 29px;
  font-weight: 900;
  color: #9ef6ff;
  background: rgba(89, 71, 230, .22);
  border: 1px solid rgba(147, 134, 255, .28);
}
.wallet-processing-orbit::before,
.wallet-processing-orbit::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #6eecff;
  animation: walletOrbit 1s linear infinite;
}
.wallet-processing-orbit::after {
  inset: 5px;
  border-top-color: transparent;
  border-bottom-color: #8572ff;
  animation-direction: reverse;
  animation-duration: .75s;
}
@keyframes walletOrbit { to { transform: rotate(360deg); } }
.wallet-modal-kicker {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6ee8f5;
}
.wallet-processing h2,
.wallet-result h2,
.wallet-receipt h2 {
  margin: 5px 0 7px;
  font-size: 25px;
}
.wallet-processing > p,
.wallet-result > p {
  margin: 0 auto 15px;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  color: #91a8c8;
}
.wallet-processing > small {
  display: block;
  margin-top: 12px;
  font-size: 9px;
  color: #617898;
}
.wallet-processing-steps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 14px;
  text-align: left;
  background: rgba(3, 17, 46, .42);
  border: 1px solid rgba(139, 177, 225, .1);
}
.wallet-processing-steps span {
  position: relative;
  padding-left: 21px;
  font-size: 10.5px;
  font-weight: 800;
  color: #5f7697;
}
.wallet-processing-steps span::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #4d6384;
}
.wallet-processing-steps .done { color: #8fe5bb; }
.wallet-processing-steps .done::before {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: #49ca8a;
  background: #49ca8a;
  color: #071d25;
  font-size: 8px;
}
.wallet-processing-steps .active { color: #dce7ff; }
.wallet-processing-steps .active::before {
  border-color: #7568ff;
  border-top-color: transparent;
  animation: walletOrbit .7s linear infinite;
}
.wallet-result-icon,
.wallet-receipt-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
  color: #061f28;
  background: linear-gradient(145deg, #96ffd0, #4fd9b0);
  box-shadow: 0 8px 24px rgba(49, 213, 166, .25);
}
.wallet-result-error .wallet-result-icon {
  color: #fff;
  background: linear-gradient(145deg, #ff8daa, #eb4879);
  box-shadow: 0 8px 24px rgba(235, 72, 121, .25);
}
.bonus-lock-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 209, 102, .18);
  border-radius: 15px;
  background: rgba(5, 21, 51, .62);
}
.bonus-lock-balance span {
  max-width: 145px;
  text-align: left;
  color: #8da4c3;
  font-size: 10px;
  font-weight: 800;
}
.bonus-lock-balance strong {
  color: #ffd166;
  font-family: var(--font-display);
  font-size: 15px;
  white-space: nowrap;
}
/* O card do saque reaproveita o selo e as etapas do launcher, que não é flex aqui. */
.bonus-lock-result .bonus-lock-badge { margin-left: auto; margin-right: auto; }
.bonus-lock-result .bonus-lock-steps { margin-bottom: 14px; }
.wallet-result > .bonus-lock-note {
  margin-bottom: 16px;
  color: #a9bdd7;
  font-size: 11px;
  line-height: 1.5;
}
.bonus-entry-notice-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 1px solid rgba(155, 232, 255, .3);
  border-radius: 22px;
  color: #9be8ff;
  background: linear-gradient(145deg, rgba(109, 84, 247, .28), rgba(54, 196, 220, .2));
  box-shadow: 0 12px 30px rgba(50, 112, 218, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.bonus-entry-notice-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bonus-entry-notice > p strong { color: #eaf7ff; }
.bonus-entry-notice-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid rgba(126, 210, 255, .18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(74, 74, 205, .2), rgba(16, 72, 117, .26));
}
.bonus-entry-notice-balance span {
  color: #98b3d3;
  font-size: 10px;
  font-weight: 850;
}
.bonus-entry-notice-balance strong {
  color: #9be8ff;
  font-family: var(--font-display);
  font-size: 16px;
  white-space: nowrap;
}
.wallet-result-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  margin: 14px 0;
  border-radius: 14px;
  background: rgba(128, 163, 210, .1);
  border: 1px solid rgba(128, 163, 210, .1);
}
.wallet-result-summary > div {
  min-width: 0;
  padding: 10px 8px;
  background: rgba(5, 21, 51, .62);
}
.wallet-result-summary-wide {
  grid-column: 1 / -1;
}
.wallet-result-summary span,
.wallet-result-summary strong {
  display: block;
  overflow-wrap: anywhere;
}
.wallet-result-summary span {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #687f9f;
}
.wallet-result-summary strong {
  margin-top: 3px;
  font-size: 11px;
  color: #e9f3ff;
}
.wallet-analysis-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 13px;
  text-align: left;
  background: rgba(255, 183, 3, .09);
  border: 1px solid rgba(255, 209, 102, .13);
}
.wallet-analysis-status i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 5px rgba(255, 209, 102, .1);
}
.wallet-analysis-status span { display: flex; flex-direction: column; }
.wallet-analysis-status strong { font-size: 11px; color: #ffe08a; }
.wallet-analysis-status small { font-size: 9px; color: #7187a5; }
.wallet-modal-btn {
  width: 100%;
  min-height: 45px;
  border: 0;
  border-radius: 13px;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6d54f7, #357ed5);
  box-shadow: 0 6px 16px rgba(40, 49, 159, .28);
  cursor: pointer;
}
.wallet-modal-link {
  margin-top: 8px;
  border: 0;
  padding: 7px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  color: #7188a7;
  background: transparent;
  cursor: pointer;
}
.wallet-receipt-mark {
  color: #eafcff;
  background: linear-gradient(145deg, #6d54f7, #2c9bc3);
  box-shadow: 0 8px 24px rgba(54, 96, 202, .28);
}
.wallet-receipt-status {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  color: #b6ffd9;
  background: rgba(48, 202, 128, .12);
}
.wallet-receipt-value {
  margin: 2px 0 13px;
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(96, 76, 229, .17), rgba(41, 164, 192, .1));
}
.wallet-receipt-value strong {
  display: block;
  font-family: var(--font-display);
  font-size: 25px;
  color: #fff;
}
.wallet-receipt-value span {
  font-size: 9.5px;
  font-weight: 800;
  color: #7f96b5;
}
.wallet-receipt-details {
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
}
.wallet-receipt-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 1px;
  border-bottom: 1px solid rgba(130, 166, 211, .09);
}
.wallet-receipt-details dt {
  font-size: 9.5px;
  font-weight: 800;
  color: #6f86a5;
}
.wallet-receipt-details dd {
  max-width: 60%;
  margin: 0;
  font-size: 9.5px;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
  color: #dbe8f8;
}
.wallet-receipt-details > div.is-payee dd {
  color: #fff;
}
.wallet-receipt-security {
  margin-bottom: 12px;
  font-size: 8.5px;
  font-weight: 800;
  color: #5f7899;
}
.shop-payment-empty {
  grid-column: 1 / -1;
  padding: 28px 18px;
  border-radius: 22px;
  color: #eaf4ff;
  background: rgba(18, 44, 82, .76);
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-weight: 800;
}
.pix-preview {
  color: #eef7ff;
}
.pix-preview-stage {
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.pix-preview h2 {
  margin: 4px 0 6px;
  font-size: 27px;
}
.pix-preview-lead {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
  color: #8fa6c4;
}
.pix-preview-lead strong { color: #e8f3ff; }
.pix-receipt {
  margin: 0 0 12px;
  padding: 12px 14px 10px;
  border-radius: 16px;
  text-align: left;
  background: linear-gradient(160deg, rgba(8, 24, 54, .92), rgba(5, 16, 40, .94));
  border: 1px solid rgba(145, 181, 226, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pix-receipt-head {
  margin-bottom: 10px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6f87a7;
}
.pix-receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(130, 166, 211, .16);
  font-size: 12px;
  font-weight: 800;
  color: #a9bfd9;
}
.pix-receipt-row strong {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 900;
  color: #eaf3ff;
  font-variant-numeric: tabular-nums;
}
.pix-receipt-iof {
  margin: 2px 0 4px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 207, 103, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 188, 72, .16), rgba(255, 188, 72, .05));
  color: #ffe2a0;
}
.pix-receipt-iof strong {
  color: #ffd166;
  font-size: 14px;
}
.pix-receipt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(145, 181, 226, .18);
}
.pix-receipt-total span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #93aac9;
}
.pix-receipt-total strong {
  font-family: var(--font-display);
  font-size: 24px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pix-preview-details {
  margin: 0 0 14px;
  padding: 0 2px;
  text-align: left;
}
.pix-preview-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(130, 166, 211, .09);
}
.pix-preview-details > div:last-child { border-bottom: 0; }
.pix-preview-details dt {
  font-size: 9.5px;
  font-weight: 800;
  color: #6f86a5;
}
.pix-preview-details dd {
  max-width: 58%;
  margin: 0;
  font-size: 9.5px;
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
  color: #dbe8f8;
}
.pix-leave {
  color: #eef7ff;
}
.pix-leave-badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 18px;
  font-size: 22px;
  color: #ffe7b0;
  background: linear-gradient(145deg, rgba(255, 196, 92, .22), rgba(109, 84, 247, .24));
  border: 1px solid rgba(255, 210, 140, .28);
  box-shadow: 0 0 24px rgba(255, 186, 92, .16);
}
.pix-leave h2 {
  margin: 4px 0 8px;
  font-size: 26px;
}
.pix-leave > p {
  margin: 0 auto 10px;
  max-width: 32ch;
  color: #b7cce6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.pix-leave-note {
  margin-bottom: 14px !important;
  color: #9fdcff !important;
  font-size: 11px !important;
}
.pix-checkout {
  color: #eef7ff;
}
.pix-checkout h2 {
  margin: 4px 0 0;
  font-size: 27px;
}
.pix-checkout-price {
  margin: 0 0 6px;
  color: #98b3d4;
  font-size: 13px;
  font-weight: 900;
}
.pix-checkout-cta {
  margin: 0 auto 10px;
  max-width: 30ch;
  color: #cfe6ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
.pix-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 196, 92, .16), rgba(255, 128, 128, .14));
  border: 1px solid rgba(255, 196, 92, .38);
  box-shadow: 0 0 18px rgba(255, 170, 80, .16);
}
.pix-timer span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffd79a;
}
.pix-timer strong {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: #ffe9c2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 186, 92, .45);
}
.pix-timer i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb35c;
  animation: pixPulse 1.35s ease-in-out infinite;
}
.pix-timer.is-urgent {
  background: linear-gradient(135deg, rgba(255, 108, 108, .22), rgba(255, 72, 120, .18));
  border-color: rgba(255, 122, 122, .5);
}
.pix-timer.is-urgent strong { color: #ffdada; }
.pix-timer.is-urgent span { color: #ffb9b9; }
.pix-timer.is-urgent i { background: #ff7a7a; }
.pix-qr-shell {
  width: 206px;
  height: 206px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #eaf7ff);
  box-shadow:
    0 10px 28px rgba(1, 14, 40, .32),
    0 0 0 4px rgba(110, 236, 255, .13);
}
.pix-qr {
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
}
.pix-qr img,
.pix-qr canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.pix-qr-fallback {
  padding: 18px;
  color: #173b64;
  font-size: 12px;
  font-weight: 900;
}
.pix-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 14px;
  text-align: left;
  background: rgba(19, 49, 88, .76);
  border: 1px solid rgba(116, 213, 255, .13);
}
.pix-waiting i {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 0 5px rgba(103, 232, 249, .12);
  animation: pixPulse 1.35s ease-in-out infinite;
}
.pix-waiting span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pix-waiting strong {
  font-size: 10.5px;
  color: #e8f9ff;
}
.pix-waiting small {
  color: #7e9abc;
  font-size: 9px;
  font-weight: 800;
}
@keyframes pixPulse {
  50% { transform: scale(.72); opacity: .55; }
}
.pix-copy-head {
  display: flex;
  align-items: center;
  margin: 0 0 5px;
}
.pix-copy-label {
  color: #728eaf;
  text-align: left;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pix-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
}
.pix-code-mask {
  min-width: 0;
  min-height: 38px;
  max-height: 58px;
  display: flex;
  align-items: flex-start;
  margin: 0;
  border: 1px solid rgba(139, 181, 230, .15);
  border-radius: 12px;
  padding: 8px 10px;
  color: #cfe0f5;
  background: rgba(3, 17, 43, .56);
  text-align: left;
  overflow-wrap: anywhere;
  overflow-y: auto;
  font: 800 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Fica fora da tela, mas selecionável para o fallback de cópia. */
.pix-copy-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  resize: none;
}
.pix-copy-row button {
  border: 0;
  border-radius: 12px;
  padding: 0 16px;
  color: #071c2a;
  background: linear-gradient(145deg, #8bf7ee, #62d3ef);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 950;
  cursor: pointer;
}
.pix-success .wallet-result-icon {
  animation: pixSuccessIn .48s cubic-bezier(.2, .9, .25, 1.35);
}
@keyframes pixSuccessIn {
  from { transform: scale(.2) rotate(-18deg); opacity: 0; }
}
.modal:has(.pix-preview),
.modal:has(.pix-checkout),
.modal:has(.pix-leave),
.modal:has(.withdraw-tax) {
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 18px;
}
@media (max-height: 720px) {
  .pix-checkout h2 { font-size: 23px; }
  .pix-checkout-cta { font-size: 10.5px; }
  .pix-qr-shell { width: 178px; height: 178px; }
  .pix-qr { width: 162px; height: 162px; }
  .pix-timer { padding: 6px 12px; }
  .pix-timer strong { font-size: 19px; }
}
.toast-wrap { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 90; width: min(90%, 360px); }
.toast {
  margin-bottom: 8px; padding: 12px 16px; border-radius: 16px;
  background: rgba(10,20,40,.92); border: 1px solid rgba(255,255,255,.15);
  font-weight: 800; animation: toastIn .25s ease;
}
@keyframes toastIn { from { transform: translateY(-10px); opacity: 0; } }

.gate-card {
  margin: auto 20px; padding: 28px 20px; border-radius: 28px; text-align: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.gate-card h2 { font-family: var(--font-display); }
.big-emoji { font-size: 48px; }
.settings-panel {
  position: relative;
  width: min(430px, 100%);
  max-height: min(86dvh, 760px);
  padding: 13px 12px 15px;
  overflow: hidden;
  border: 2px solid rgba(143, 202, 255, .3);
  border-radius: 30px 30px 24px 24px;
  text-align: left;
  background:
    radial-gradient(circle at 90% 0, rgba(92, 108, 255, .18), transparent 34%),
    linear-gradient(180deg, #173e78, #102b56 58%, #0c2348);
  box-shadow: 0 -10px 40px rgba(3, 12, 35, .42), inset 0 2px 0 rgba(255, 255, 255, .1);
}
.settings-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 9px;
  border-radius: 999px;
  background: rgba(202, 226, 255, .42);
}
.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 11px;
}
.settings-kicker {
  display: block;
  margin-bottom: 2px;
  color: #8fcfff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}
.settings-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(4, 22, 54, .48);
}
.settings-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  padding: 0 0 4px;
  color: #fff;
  background: rgba(5, 24, 56, .45);
  font: 700 27px/1 var(--font-display);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
}
.settings-scroll {
  max-height: calc(min(86dvh, 760px) - 82px);
  overflow-y: auto;
  padding: 2px 3px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.settings-scroll::-webkit-scrollbar { display: none; }
.settings-group {
  overflow: hidden;
  margin-bottom: 11px;
  border: 1px solid rgba(153, 198, 249, .16);
  border-radius: 20px;
  background: rgba(5, 24, 57, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.settings-group h4 {
  margin: 0;
  padding: 10px 13px 6px;
  color: #779ac5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.settings-row {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid rgba(146, 192, 245, .1);
  padding: 8px 12px;
  color: #fff;
  text-align: left;
  background: transparent;
  font-family: var(--font-ui);
}
.settings-row:last-child { border-bottom: 0; }
.settings-action { cursor: pointer; }
.settings-action:active { background: rgba(255, 255, 255, .06); }
.settings-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: 0 3px 0 rgba(5, 18, 45, .28), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.settings-icon-sound { background: linear-gradient(145deg, #ff88bc, #e92d86); }
.settings-icon-vibration { background: linear-gradient(145deg, #6ce4ef, #168fca); }
.settings-icon-anim { background: linear-gradient(145deg, #a993ff, #6540df); }
.settings-icon-contrast { background: linear-gradient(145deg, #ffcd59, #e47c08); }
.settings-icon-screen { background: linear-gradient(145deg, #72e9b7, #16a370); }
.settings-icon-language { background: linear-gradient(145deg, #ff9d76, #e44c5e); }
.settings-icon-account { background: linear-gradient(145deg, #6edba9, #169365); }
.settings-icon-help { background: linear-gradient(145deg, #7da9ff, #3c63d4); }
.settings-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.settings-copy strong {
  font-size: 13px;
  font-weight: 900;
  color: #f7fbff;
}
.settings-copy small {
  overflow: hidden;
  color: #829fc2;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 27px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: #092142;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.settings-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #cddbed);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.settings-toggle:checked {
  border-color: #ffe694;
  background: linear-gradient(180deg, #ffd85f, #f5a900);
}
.settings-toggle:checked::after { transform: translateX(19px); }
.settings-chevron {
  color: #7f9ec4;
  font: 700 26px/1 var(--font-display);
}
.settings-value {
  padding: 5px 8px;
  border-radius: 999px;
  color: #9ec7f5;
  background: rgba(106, 155, 214, .12);
  font-size: 9px;
  font-weight: 900;
}
.settings-online {
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: #5be0a6;
  box-shadow: 0 0 0 4px rgba(91, 224, 166, .12), 0 0 10px rgba(91, 224, 166, .5);
}
.settings-version {
  margin: 5px 0 0;
  text-align: center;
  color: #55759d;
  font-size: 9px;
  font-weight: 800;
}
.settings-help {
  text-align: left;
}
.settings-help h2 {
  text-align: center;
  color: #fff;
}
.settings-help-list {
  display: grid;
  gap: 8px;
  margin: 15px 0 18px;
}
.settings-help-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 15px;
  color: #dceaff;
  background: rgba(255, 255, 255, .07);
  font-size: 11px;
  font-weight: 700;
}
.settings-help-item b { color: #ffe08a; }
.settings-help-item span { font-size: 22px; }

body.animations-off *:not(.intro-cta-spinner) {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
body.animations-off .intro-bg img,
body.animations-off .intro-hang,
body.animations-off .intro-cta {
  opacity: 1 !important;
  transform: none !important;
}
body.high-contrast #app { filter: contrast(1.12) saturate(1.06); }

.intro-overlay {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(5,12,28,.78); text-align: center; padding: 24px;
}
.intro-overlay h2 { font-family: var(--font-display); font-size: 42px; margin: 0; }
.intro-overlay p { color: var(--muted); font-weight: 800; }
.intro-overlay .go {
  margin-top: 18px; font-family: var(--font-display); font-size: 34px; color: var(--gold);
  animation: pulse 1s infinite;
}

/* Mobile polish */
@media (max-width: 480px) {
  .home-main { padding: 4px 8px 16px; gap: 12px; }
  .home-hang { width: min(182px, 52vw); margin-top: calc(-1 * (var(--cc-avatar-size) * 0.5 + 30px)); }
  .home-carousel-card { padding: 6px; border-radius: 20px; }
  .home-carousel { border-radius: 14px; }
  .home-carousel-slide img { border-radius: 0; }
  .hero-play { padding: 22px 14px; border-radius: 22px; }
  .trust-seals { gap: 7px; }
  .trust-seal { padding: 8px 9px; gap: 8px; }
  .daily-banner { padding: 12px 14px; font-size: 14px; }
  .shop-scroll { padding: 8px 10px 14px; }
  .shop-gold-grid { gap: 10px; }
  .shop-gold-card .qty { font-size: 21px; }
  .shop-gold-stage { min-height: 78px; }
  .shop-balance { padding: 8px 10px; }
  .shop-balance-ico { width: 34px; height: 34px; }
  .shop-balance-value { font-size: 19px; }
  .shop-balance-btn { padding: 9px 11px; font-size: 11px; }
  .pf-scroll { padding: 8px 12px 14px; }
  .pf-hero { padding: 40px 12px 14px; }
  .pf-avatar-slot { width: 92px; }
  .pf-avatar-slot .avatar.xl { width: 82px; height: 82px; font-size: 34px; }
  .pf-stat-ico { width: 42px; height: 42px; }
  .pf-stat strong { font-size: 21px; }
  .wallet-scroll { padding: 8px 14px 14px; }
  .wallet-card-icon { width: 64px; height: 64px; }
  .tourney-scroll { padding: 8px 14px 14px; }
  .rank-card { padding: 16px 10px 12px; border-radius: 22px; }
  .rank-podium-1 .rank-avatar { width: 64px; height: 64px; }
  .rank-avatar { width: 48px; height: 48px; }
  .rank-row { padding: 8px 10px; }
  .game-app-card { grid-template-columns: 76px 1fr; padding: 10px; gap: 10px; border-radius: 18px; }
  .game-app-card-featured { padding: 0; gap: 0; }
  .game-app-card-featured .game-app-body { padding: 12px 12px 14px; }
  .game-feature-tags { gap: 5px; }
  .game-feature-tags span { padding: 6px 6px; font-size: 9.5px; }
  .game-app-card-featured .game-app-btn,
  .game-feature-btn { padding: 13px 16px; font-size: 15px; }
  .game-app-cover { width: 76px; height: 76px; border-radius: 16px; }
  .game-app-name { font-size: 15px; }
  .tourney-card-icon { width: 64px; height: 64px; }
  .nav-item.nav-center .nav-ico { width: 40px; height: 40px; }
  .nav-item.nav-center.active .nav-ico { width: 48px; height: 48px; }
}

/* ===== Teclado virtual =====
   --kb-h recebe em runtime a altura coberta pelo teclado. A altura do app
   continua a mesma para o layout não se comprimir; o espaço do teclado vira
   recuo de rolagem e a barra inferior sai de cena enquanto se digita. */
.wallet-scroll,
.shop-scroll,
.tourney-scroll,
.pf-scroll,
.map-scroll {
  overscroll-behavior: contain;
  scroll-padding: 12px 0 calc(var(--kb-h, 0px) + 12px);
}
.bottom-nav {
  transition: transform .2s ease, opacity .2s ease;
}
body.kb-open .bottom-nav {
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
body.kb-open .screen {
  padding-bottom: 0;
}
body.kb-open .wallet-scroll,
body.kb-open .shop-scroll,
body.kb-open .tourney-scroll,
body.kb-open .pf-scroll,
body.kb-open .map-scroll {
  padding-bottom: calc(var(--kb-h, 0px) + 20px);
}
body.kb-open .modal-backdrop {
  place-items: start center;
  padding-top: calc(var(--safe-top) + 12px);
  padding-bottom: calc(var(--kb-h, 0px) + 12px);
}
body.kb-open .modal,
body.kb-open .sheet {
  max-height: calc(var(--app-h, 100dvh) - var(--kb-h, 0px) - 32px);
  overflow-y: auto;
}
/* Telas baixas: o formulário de saque precisa caber sem virar rolagem infinita. */
@media (max-height: 720px) {
  .wallet-scroll { padding-top: 8px; }
  .wallet-card-body { padding: 14px 16px 12px; }
  .wallet-form { padding: 14px; }
  .wallet-form-head { margin-bottom: 12px; }
  .wallet-field { margin-bottom: 11px; }
  .wallet-field input { min-height: 48px; }
  .wallet-conversion { margin: -2px 0 12px; padding: 9px 11px; }
  .wallet-submit { min-height: 48px; }
}
@media (max-height: 620px) {
  .wallet-hero { margin-bottom: 10px; }
  .wallet-card-icon { width: 54px; height: 54px; }
  .wallet-field { margin-bottom: 9px; }
  .wallet-pix-type { padding: 7px 4px; }
  .wallet-pix-type .wallet-ico { width: 16px; height: 16px; }
}

/* Taxa obrigatória de saque — card branco com detalhes verdes */
.modal:has(.withdraw-tax) {
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1px solid #d8f3e4;
  box-shadow: 0 18px 40px rgba(16, 185, 129, .18);
}
.withdraw-tax {
  position: relative;
  color: #1f2933;
  text-align: center;
}
.withdraw-tax-close {
  position: absolute;
  top: -6px;
  left: -4px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  color: #5b6b76;
  background: #f3f6f4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.withdraw-tax-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.withdraw-tax-badge i { font-style: normal; font-size: 11px; }
.withdraw-tax h2 {
  margin: 0 0 6px;
  color: #163027;
  font-size: 22px;
  line-height: 1.15;
}
.withdraw-tax-date {
  margin: 0 0 12px;
  color: #059669;
  font-size: 11px;
  font-weight: 800;
}
.withdraw-tax-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px;
  list-style: none;
  text-align: left;
  border-radius: 16px;
  background: #f6fbf8;
  border: 1px solid #e3f5eb;
}
.withdraw-tax-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.withdraw-tax-ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 13px;
}
.withdraw-tax-ico.is-cyan { background: #e0f8ff; }
.withdraw-tax-ico.is-purple { background: #eee8ff; }
.withdraw-tax-ico.is-green { background: #dcfce7; }
.withdraw-tax-list p {
  margin: 0;
  color: #4b5c57;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.withdraw-tax-list strong { color: #163027; }
.withdraw-tax-price {
  display: grid;
  gap: 2px;
  margin: 0 0 12px;
  padding: 12px 10px;
  border-radius: 16px;
  background: #f0fdf6;
  border: 1px solid #86efac;
}
.withdraw-tax-price > span {
  color: #6b7c75;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.withdraw-tax-price strong {
  color: #059669;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}
.withdraw-tax-price small {
  color: #5b6b76;
  font-size: 10px;
  font-weight: 700;
}
.withdraw-tax-alert {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0 0 14px;
  padding: 10px 11px;
  text-align: left;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.withdraw-tax-alert i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #10b981;
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}
.withdraw-tax-alert p {
  margin: 0;
  color: #14532d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.withdraw-tax-pay {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(135deg, #34d399, #10b981 55%, #059669);
  box-shadow: 0 8px 20px rgba(16, 185, 129, .28);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.withdraw-tax-pay svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.withdraw-tax-cancel {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d5dde3;
  border-radius: 14px;
  padding: 11px 14px;
  color: #1f2933;
  background: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.pix-checkout.is-tax .pix-checkout-price { color: #6ee7b7; }
.pix-checkout.is-tax .pix-waiting i { background: #34d399; }