/*! Desenvolvido por miza · Telegram: https://t.me/bydosmenor */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(../fonts/nunito.woff2) format("woff2"); }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one.woff2) format("woff2"); }

html[data-auth="pending"] .guest-only, html[data-auth="pending"] .user-only { visibility: hidden; }
html[data-auth="user"] .guest-only, html[data-auth="guest"] .user-only { display: none !important; }
html[data-start="jogar"] [data-view="home"] { display: none !important; }
html[data-start="jogar"] [data-view="jogar"].hidden { display: block !important; }
.avatar img:not([src]) { visibility: hidden; }

:root {
  --bg: #971355;
  --bg2: #af1964;
  --panel: #a61b61;
  --panel2: #bf1f6f;
  --line: rgba(255, 220, 238, .26);
  --txt: #ffeaf5;
  --mut: #ffd3e8;
  --cyan: #ffd84a;
  --blue: #ffc21a;
  --grad: linear-gradient(180deg, #fff27d 0%, #ffd21f 48%, #ffa30a 100%);
  --sol: #ffd21f;
  --grad-rosa: linear-gradient(180deg, #ff6ac1 0%, #ff239a 48%, #ff0f87 100%);
  --grad-soft: linear-gradient(180deg, rgba(255, 214, 236, .18), rgba(255, 196, 31, .1));
  --gold: #ffc83d;
  --green: #22c55e;
  --red: #ef4444;
  --r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --head: 64px;
  --nav: 66px;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--txt);
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
/* Google One Tap: a light iframe inside a dark page gets an opaque white backdrop unless the schemes match */
#credential_picker_container, #credential_picker_iframe, iframe[src*="accounts.google.com/gsi"] { color-scheme: light; background: transparent !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: transparent; }
.scroller { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
body::before { content: ""; position: fixed; inset: -20vh 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(255, 214, 236, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(255, 176, 32, .11), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
::selection { background: rgba(255, 214, 236, .35); color: #fff; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; }
button, a, .tabbar, .head { -webkit-touch-callout: none; }
button, .btn, .tabbar a, .menu a { user-select: none; -webkit-user-select: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--txt); caret-color: var(--txt);
  -webkit-box-shadow: 0 0 0 1000px #a31b5f inset; box-shadow: 0 0 0 1000px #a31b5f inset; transition: background-color 9999s; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 220, 238, .28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 220, 238, .28); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
button, input { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
input, select, textarea { font-size: 16px !important; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--cyan); text-decoration: none; }
.h-font { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; letter-spacing: .3px; }
.hidden { display: none !important; }

/* ícones: SVG do m9 usados como máscara para herdar a cor */
.ic { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 12px; font-weight: 800; transition: transform .12s var(--ease), filter .2s, box-shadow .2s; user-select: none; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--grad); color: #4a0628; box-shadow: 0 6px 18px rgba(255, 170, 10, .35), inset 0 1px 0 rgba(255, 255, 255, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--txt); }
.btn-ghost:hover { border-color: rgba(255, 214, 236, .5); }
.btn-lg { height: 54px; font-size: 18px; border-radius: 14px; padding: 0 28px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn .spin { width: 18px; height: 18px; border: 2.5px solid rgba(175, 11, 93, .35); border-top-color: #4a0628; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* cabeçalho */
.head { position: relative; flex: none; z-index: 30; height: calc(var(--head) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: rgba(151, 19, 85, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.head .wrap { height: var(--head); display: flex; align-items: center; gap: 20px; }
.sheet .card { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wrap { width: min(1180px, 100% - 32px); margin: 0 auto; }
.logo { display: inline-flex; align-items: center; flex: none; }
.alogo { position: relative; display: inline-block; height: 40px; line-height: 0; animation: logoIn .7s var(--ease) both; }
.alogo img { height: 100%; width: auto; animation: logoGlow 3.6s ease-in-out infinite; }
.alogo .shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../img/logo-anim.webp?v=1792108220) left center / auto 100% no-repeat; mask: url(../img/logo-anim.webp?v=1792108220) left center / auto 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 48%, rgba(255, 160, 215, .7) 52%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: logoShine 3.6s ease-in-out infinite 1s; mix-blend-mode: screen; }
.alogo .spark { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 140, 206, .9) 30%, transparent 62%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: logoSpark 3.6s ease-in-out infinite; animation-delay: calc(1.6s + var(--d, 0s)); }
@keyframes logoIn { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 236, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 214, 236, .55)); } }
@keyframes logoShine { 0% { background-position: 160% 0; } 45%, 100% { background-position: -60% 0; } }
@keyframes logoSpark { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 78% { opacity: 1; transform: scale(1.15) rotate(45deg); } 88% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .alogo, .alogo img, .alogo .shine, .alogo .spark { animation: none; } }
.menu-btn { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -8px; border-radius: 12px; color: var(--txt); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: rgba(255, 214, 236, .5); background: rgba(255, 214, 236, .08); }
.burger { display: grid; gap: 4px; width: 18px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s, width .3s var(--ease); }
.burger i:nth-child(2) { width: 70%; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; width: 0; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-btn:hover .burger i:nth-child(2) { width: 100%; }
.bage-insert { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bage-insert-panel { position: relative; display: block; width: 100%; height: 100%; }
.ui-badge { position: absolute; top: 0; right: 0; transform: translate(40%, -40%); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; border: 2px solid var(--bg); box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: badgePulse 2s infinite; }
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.drawer { position: fixed; inset: calc(var(--head) + env(safe-area-inset-top)) 0 0; z-index: 70; }
html.dr-open .head { z-index: 75; }
.dr-mask { position: absolute; inset: 0; background: rgba(124, 10, 67, .66); backdrop-filter: blur(3px); animation: fade .25s both; }
.dr-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(310px, 86vw); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #c11f70, #ad1561 60%, #9e1459); border-right: 1px solid rgba(255, 220, 238, .25); box-shadow: 20px 0 60px rgba(0, 0, 0, .5); animation: drIn .32s var(--ease) both; }
.drawer.out .dr-mask { animation: fadeOut .25s both; }
.drawer.out .dr-panel { animation: drOut .26s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes drIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drOut { to { transform: translateX(-100%); } }
.dr-body { flex: 1; overflow-y: auto; padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.dr-user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--grad-soft); border: 1px solid rgba(255, 214, 236, .28); }
.dr-user img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 214, 236, .6); object-fit: cover; flex: none; }
.dr-user b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-user span { display: block; color: var(--mut); font-size: 12px; font-weight: 700; }
.dr-user > div { min-width: 0; }
.dr-bal { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.dr-bal .coin { width: 26px; height: 26px; }
.dr-bal span { color: var(--mut); font-size: 12px; font-weight: 700; }
.dr-bal b { margin-left: auto; font-size: 17px; }
.dr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.dr-acts .btn { height: 40px; font-size: 14px; padding: 0 10px; }
.dr-guest p { margin: 0 0 10px; color: var(--mut); font-size: 13.5px; font-weight: 600; }
.dr-sec { margin: 18px 4px 6px; color: var(--mut); font-size: 11.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.dr-list { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.dr-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; color: var(--txt); font-weight: 700; font-size: 14.5px; text-align: left; background: rgba(0, 0, 0, .16); transition: background-color .15s; }
.dr-item + .dr-item { border-top: 1px solid var(--line); }
.dr-item:hover { background: rgba(255, 214, 236, .08); }
.dr-item.on { background: rgba(255, 214, 236, .1); box-shadow: inset 3px 0 0 var(--cyan); }
.dr-item > .svg, .dr-item > .ic { width: 20px; height: 20px; color: var(--cyan); flex: none; }
.dr-item .chev { margin-left: auto; width: 16px; height: 16px; color: var(--mut); }
.dr-item .ui-badge { position: static; transform: none; margin-left: auto; border-color: transparent; }
.dr-item .ui-badge + .chev { margin-left: 8px; }
.dr-item.danger, .dr-item.danger > .svg { color: #ff8a8a; }
.dr-item > .dr-coin { width: 22px; height: 22px; margin: 0 -1px; flex: none; }
.dr-soon { margin-left: auto; padding: 2px 7px; border-radius: 7px; font-size: 10.5px; font-weight: 900; letter-spacing: .03em; color: #3a2500; background: linear-gradient(180deg, #ffe08a, #ffb627); }
.dr-soon + .chev { margin-left: 8px; }

.menu { display: flex; gap: 6px; margin-left: 12px; }
.menu a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; color: var(--mut); font-weight: 700; transition: background .2s, color .2s; }
.menu a:hover { color: var(--txt); }
.menu a.on { background: var(--grad-soft); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .35); }
.menu .svg, .menu .ic { width: 18px; height: 18px; }
.head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bal { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-weight: 800; }
.coin { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; flex: none; display: block; }
.bal-wrap { position: relative; }
.bal { color: var(--txt); cursor: pointer; transition: border-color .2s, background-color .2s; }
.bal:hover, .bal[aria-expanded="true"] { border-color: rgba(255, 214, 236, .5); background: rgba(255, 214, 236, .08); }
.bal-add { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #4a0628; display: grid; place-items: center; transition: transform .12s; }
.bal-add .svg { width: 18px; height: 18px; transition: rotate .25s var(--ease); }
.bal[aria-expanded="true"] .bal-add .svg { rotate: 180deg; }
.bal:active .bal-add { transform: scale(.9); }
.bal-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 230px; padding: 6px; border-radius: 14px; z-index: 40;
  background: linear-gradient(180deg, #bc1f6d, #9f1a5c); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  transform-origin: top right; animation: menuIn .2s var(--ease) both; }
.bal-menu.out { animation: menuOut .16s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes menuOut { to { opacity: 0; transform: translateY(-6px) scale(.96); } }
.bal-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 10px; text-align: left; color: var(--txt); transition: background-color .15s; }
.bal-menu button:hover, .bal-menu button:active { background: rgba(255, 214, 236, .09); }
.bal-menu .mi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--grad-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .3); }
.bal-menu .mi.w { color: var(--gold); background: rgba(255, 200, 61, .1); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, .3); }
.bal-menu b { display: block; font-size: 15px; }
.bal-menu small { color: var(--mut); font-size: 12px; font-weight: 700; }
.bal-menu hr { border: 0; height: 1px; background: var(--line); margin: 4px 6px; }
.bal.flash { animation: flash .8s var(--ease); }
@keyframes flash { 30% { box-shadow: 0 0 0 4px rgba(255, 214, 236, .35); } }
.g-row { display: flex; gap: 10px; }
.g-row-m { display: none; gap: 8px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #4a0628; display: grid; place-items: center; font-weight: 900; border: 2px solid rgba(255, 255, 255, .5); overflow: hidden; padding: 0; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me .avatar { position: relative; cursor: pointer; }
.me .avatar .edit { position: absolute; inset: auto 0 0; height: 20px; background: rgba(150, 13, 82, .72); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.av-grid button { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid transparent; padding: 0; background: rgba(0, 0, 0, .25); transition: transform .15s var(--ease), border-color .15s; }
.av-grid button:active { transform: scale(.94); }
.av-grid button.on { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(255, 214, 236, .25); }
.av-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* home */
main { padding: 24px 0 40px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.banners { position: relative; aspect-ratio: 3 / 1; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #ce1370; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); isolation: isolate; }
.bn-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bn-track::-webkit-scrollbar { display: none; }
.bn-slide { display: block; flex: 0 0 100%; height: 100%; padding: 0; border: 0; background: none; scroll-snap-align: start; scroll-snap-stop: always; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; transition: transform .6s var(--ease), filter .3s; }
.bn-slide:hover img { filter: brightness(1.05); }
.bn-slide:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.bn-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.bn-dots button { width: 8px; height: 8px; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .45); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: auto; transition: width .3s var(--ease), background-color .3s; }
.bn-dots button.on { width: 24px; background: #fff; }
.bn-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; color: #fff; background: rgba(171, 11, 91, .55);
  border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s, background-color .2s; }
.bn-nav .svg { width: 20px; height: 20px; }
.bn-nav.prev { left: 14px; }
.bn-nav.next { right: 14px; }
.bn-nav.next .svg { transform: scaleX(-1); }
.bn-nav:hover { background: rgba(255, 22, 136, .75); }
.banners:hover .bn-nav, .bn-nav:focus-visible { opacity: 1; }
.row2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; margin-top: 18px; }
.panel { background: linear-gradient(180deg, rgba(191, 31, 111, .92), rgba(166, 27, 97, .92)); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.game-card { display: grid; grid-template-columns: 1fr 1.05fr; overflow: hidden; animation: rise .6s .1s var(--ease) both; }
.game-card .art { position: relative; min-height: 210px; background: url(../img/capa-cm.webp?v=1792110222) center 42% / cover; }
.game-card .art .tag-hot { position: absolute; right: 10px; top: 10px; }
.game-card .info { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tag { align-self: flex-start; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 900; letter-spacing: .5px; background: linear-gradient(180deg, #ffd65a, #f5a300); color: #4a2a00; }
.game-card h3 { margin: 0; font-size: 30px; }
.game-card p { margin: 0 0 6px; color: var(--mut); line-height: 1.45; }
.steps { display: grid; gap: 12px; animation: rise .6s .18s var(--ease) both; }
.step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.step .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid rgba(255, 214, 236, .3); color: var(--cyan); flex: none; }
.step b { display: block; font-size: 16px; }
.step span { color: var(--mut); font-size: 14px; }

/* início no desktop: o jogo em destaque, promoções depois */
.hero-game { position: relative; display: flex; align-items: center; min-height: 340px; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: #ce1370 url(../img/hero.webp?v=1792109059) right center / cover no-repeat; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); animation: rise .5s var(--ease) both; }
.hero-game::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(151, 19, 85, .97) 0%, rgba(151, 19, 85, .9) 36%, rgba(151, 19, 85, .4) 60%, rgba(151, 19, 85, 0) 78%); }
.hg-info { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 540px; padding: 32px 40px; }
.hg-kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.hero-game h1 { margin: 0; font-size: 48px; line-height: 1; }
.hg-info p { margin: 0; color: #eec6d9; font-size: 15.5px; line-height: 1.55; }
.hg-facts { display: flex; margin: 4px 0; padding: 0; list-style: none; }
.hg-facts li { padding: 0 22px; border-left: 1px solid var(--line); }
.hg-facts li:first-child { padding-left: 0; border-left: 0; }
.hg-facts b { display: block; font-size: 22px; font-weight: 900; }
.hg-facts span { color: var(--mut); font-size: 12.5px; font-weight: 700; }
.hg-cta { display: flex; gap: 12px; margin-top: 8px; }
.hg-cta .btn { padding: 0 28px; }
.hg-cta .btn-primary { min-width: 220px; }
.hero-arte { display: block; min-height: 0; aspect-ratio: 2109 / 746; background: #971355; transition: translate .28s var(--ease), border-color .28s, box-shadow .28s; }
.hero-arte::before { content: none; }
.hero-arte img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ha-fundo { position: absolute; inset: 0; }
.ha-hit { position: absolute; top: 68.4%; height: 13.8%; border-radius: 1.1vw; transition: background-color .2s, box-shadow .2s; }
.ha-jogar { left: 3.4%; width: 22.3%; }
.ha-como { left: 26.8%; width: 16.3%; }
.ha-hit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (hover: hover) {
  .hero-arte:hover { translate: 0 -3px; border-color: rgba(255, 214, 236, .45); box-shadow: 0 24px 56px rgba(0, 0, 0, .45); }
  .ha-jogar:hover { background: rgba(255, 255, 255, .1); box-shadow: 0 0 28px rgba(255, 214, 236, .55); }
  .ha-como:hover { background: rgba(255, 255, 255, .08); }
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sec-title { margin: 30px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sol); }
.steps-row { grid-template-columns: repeat(3, 1fr); }
.home-d { margin-top: 18px; }

/* mobile home */
.m-only { display: none; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; font-weight: 800; font-size: 13px; }
.tile .svg, .tile .ic { width: 26px; height: 26px; color: var(--cyan); }

/* barra inferior (mobile) */
.tabbar { position: relative; flex: none; z-index: 60; height: calc(var(--nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: none; grid-template-columns: repeat(5, 1fr); background: rgba(156, 23, 90, .96); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .1px; transition: color .2s; }
.tabbar a .svg, .tabbar a .ic { width: 24px; height: 24px; }
/* outline when idle; the active tab turns solid with the inner details cut out in the bar's color */
.tabbar a .svg { stroke-width: 1.6; transition: filter .2s; }
.tabbar a.on { color: var(--cyan); }
.tabbar a.on .svg { --tf: currentColor; --td: #9c175a; filter: drop-shadow(0 0 6px rgba(255, 214, 236, .45)); }
.tabbar a.on .svg, .tabbar a.on .ic { animation: hop .45s var(--ease); }
.tabbar a::before { content: ''; position: absolute; top: -1px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(255, 214, 236, .7); transform: scaleX(0); transition: transform .25s var(--ease); }
.tabbar a.on::before { transform: scaleX(1); }
.tabbar .pill { padding: 5px 12px; border-radius: 12px; display: grid; place-items: center; transition: background .2s; }
@keyframes hop { 40% { transform: translateY(-5px) scale(1.12); } }

/* tela do jogo */
.game { width: min(460px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; animation: rise .4s var(--ease) both; }
.game-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); display: grid; place-items: center; transition: transform .12s; }
.icon-btn:active { transform: scale(.92); }
.stage { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #ce1370 url(../img/capa-jogo.webp?v=1792110065) center / cover; }
.game-tit { font-size: 20px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.game-ic { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); transition: transform .12s; }
.game-ic .svg { width: 20px; height: 20px; }
.game-ic:active { transform: scale(.92); }
.game-som.mudo { color: rgba(255, 255, 255, .6); }
.game-som.mudo::after { content: ''; position: absolute; width: 24px; height: 2.5px; border-radius: 2px; background: #ff6b6b; box-shadow: 0 0 0 1.5px rgba(151, 19, 85, .9); transform: rotate(-45deg); }
.game-full-btn { display: none; }
html.jogo-aberto .game-full-btn { display: grid; }
.soon { position: absolute; inset: auto 16px 16px; padding: 14px 16px; border-radius: 14px; background: rgba(151, 19, 85, .78); backdrop-filter: blur(8px); border: 1px solid var(--line); text-align: center; }
.stage.live { aspect-ratio: auto; height: clamp(360px, calc(100dvh - var(--head) - env(safe-area-inset-top) - 190px), 900px); background: radial-gradient(120% 80% at 50% 40%, #c61a70 0%, #971355 60%, #810d47 100%); }
.stage.live .soon { display: none; }
.stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #971355; }
.stage:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.stage:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
html.game-full .game { animation: none; }
html.game-full .stage.live { position: fixed; inset: 0; z-index: 70; height: auto; border: 0; border-radius: 0; }
/* iPhone: dentro do scroller com rolagem por toque o palco fixo fica abaixo do cabeçalho e da barra de abas, que escondiam o Voltar */
html.game-full .head, html.game-full .tabbar { display: none; }
html.game-full .scroller { -webkit-overflow-scrolling: auto; }
/* in fullscreen the exit and sound controls get their own strip under the game instead of covering it */
.full-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 calc(10px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
  align-items: center; justify-content: space-between; background: #971355; border-top: 1px solid var(--line); }
.stage.live:fullscreen .full-bar, .stage.live:-webkit-full-screen .full-bar, html.game-full .stage.live .full-bar { display: flex; }
.stage.live:fullscreen iframe, html.game-full .stage.live iframe { height: calc(100% - 56px - env(safe-area-inset-bottom)); }
.stage.live:-webkit-full-screen iframe { height: calc(100% - 56px - env(safe-area-inset-bottom)); }
.game-full-back { height: 40px; padding: 0 16px 0 10px; display: flex; align-items: center; gap: 6px; border-radius: 12px; color: #fff; background: rgba(255, 214, 236, .08); border: 1px solid rgba(255, 214, 236, .55);
  font: 15px/1 "Lilita One", system-ui, sans-serif; letter-spacing: .5px; cursor: pointer; }
.game-full-back .svg { width: 18px; height: 18px; }
.soon b { font-size: 20px; }
.soon p { margin: 4px 0 0; color: var(--mut); font-size: 14px; }
.bet { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px; }
.bet#betPanel { display: block; }
.game-bets { margin: 0 0 10px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.game-bets button { height: 42px; font-size: 15px; }
.game-rule { margin: 0; color: var(--mut); font-size: 13px; line-height: 1.45; }
.bet-step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; margin: 0 0 10px; }
.bet-step button { height: 42px; border-radius: 10px; background: var(--grad-soft); border: 1px solid rgba(255, 214, 236, .35); color: var(--txt); font-size: 22px; font-weight: 900; line-height: 1; }
.bet-step button:active { transform: scale(.94); }
.bet .bet-step label { display: flex; margin: 0; min-width: 0; font-size: 14px; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); cursor: text; }
.bet .bet-step label:focus-within { border-color: rgba(255, 214, 236, .7); }
.bet-step span { color: var(--mut); font-weight: 800; font-size: 14px; }
.bet-step input { flex: 1; font-size: 17px !important; min-width: 0; width: 100%; height: 100%; border: 0; background: none; color: var(--txt); font-size: 17px; font-weight: 900; text-align: center; outline: none; }
.bet-step input.bad { color: #ff9c9c; }
.game-rule b { color: var(--green); }
.game-rule b.need { display: block; margin-bottom: 2px; color: var(--cyan); }
.gr-curto { display: flex; align-items: center; gap: 8px; }
.gr-txt { flex: 1; min-width: 0; }
.gr-i { flex: none; width: 22px; height: 22px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; color: var(--cyan);
  background: rgba(255, 214, 236, .1); border: 1px solid rgba(255, 214, 236, .3); transition: background-color .15s, transform .15s; }
.gr-i .svg { width: 14px; height: 14px; }
.gr-i:hover { background: rgba(255, 214, 236, .2); }
.gr-i:active { transform: scale(.92); }
.game-rule.aberta .gr-i { color: var(--bg); background: var(--cyan); }
.gr-mais { display: none; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.game-rule.aberta .gr-mais { display: block; animation: accIn .18s var(--ease) both; }
.gr-mais a { color: var(--cyan); }
.bet.need-bet { border-color: rgba(255, 214, 236, .45); box-shadow: 0 0 0 1px rgba(255, 214, 236, .18), 0 0 22px rgba(255, 214, 236, .12); }
.bet.pick { animation: betPick .9s var(--ease); }
@keyframes betPick { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: translateX(-5px); } 30%, 60%, 90% { transform: translateX(5px); } }
#startBtn.need-bet { filter: saturate(.35) brightness(.8); box-shadow: none; }
.bet-step input::placeholder { color: var(--mut); font-weight: 800; }
.game-help { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; color: var(--txt); font-size: 13px; font-weight: 800;
  background: rgba(255, 214, 236, .08); border: 1px solid rgba(255, 214, 236, .35); }
.game-help .svg { width: 16px; height: 16px; color: #ff2fa7; }
.tt { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; background: rgba(129, 13, 71, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: ttFade .25s ease both; }
.tt.saindo { animation: ttFade .22s ease reverse both; }
.tt-card { position: relative; width: min(400px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px 18px 18px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #c11f70 0%, #a61b61 100%); border: 1px solid rgba(255, 214, 236, .35); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 214, 236, .12); }
.tt-card.troca .tt-arte, .tt-card.troca .tt-passo, .tt-card.troca .tt-texto { animation: ttIn .35s var(--ease) both; }
.tt-card.troca .tt-passo { animation-delay: .04s; }
.tt-card.troca .tt-texto { animation-delay: .08s; }
.tt-top { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.tt-tag { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: #ff2fa7; background: rgba(255, 214, 236, .1); border: 1px solid rgba(255, 214, 236, .3); }
.tt-x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--mut); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.tt-x .svg { width: 16px; height: 16px; }
.tt-arte { position: relative; height: 128px; margin: 12px 0 14px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(90% 120% at 50% 100%, rgba(255, 214, 236, .18), transparent 70%), linear-gradient(180deg, #9d195b, #bd1f6e); border: 1px solid var(--line); }
.tt-passo { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tt-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #4a0628; background: var(--grad); }
.tt-ic .svg { width: 17px; height: 17px; }
.tt-passo h3 { margin: 0; font-size: 22px; letter-spacing: .4px; }
.tt-texto { margin: 8px 0 0; min-height: 84px; color: var(--mut); font-size: 14.5px; line-height: 1.5; }
.tt-texto b { color: var(--txt); }
.tt-texto b.neg { color: #ff6b81; }
.tt-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0; }
.tt-dots i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); transition: background .25s; }
.tt-dots i.on { background: #ff2fa7; box-shadow: 0 0 8px rgba(255, 214, 236, .6); }
.tt-acoes { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.tt-acoes .btn { height: 46px; }
.tt-pista { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(90deg, transparent 18%, rgba(255, 255, 255, .06) 18% 82%, transparent 82%); }
.tt-tropa { position: relative; display: grid; grid-template-columns: repeat(4, 12px); gap: 3px; justify-content: center; padding-top: 16px; }
.tt-tropa i { width: 12px; height: 16px; border-radius: 6px 6px 4px 4px; background: #f838a1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); animation: ttCorre .5s ease-in-out infinite alternate; }
.tt-tropa i:nth-child(2n) { animation-delay: .25s; }
.tt-tropa.verm i { background: #ef4444; }
.tt-tropa b { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 8px; font: 400 15px "Lilita One", sans-serif; color: #fff; background: rgba(151, 19, 85, .8); }
.tt-desliza { animation: ttLado 2.4s ease-in-out infinite; }
.tt-seta { color: #ff2fa7; opacity: .8; }
.tt-seta .svg { width: 26px; height: 26px; }
.tt-seta.d { transform: scaleX(-1); }
.tt-portoes { display: flex; gap: 8px; }
.tt-portoes span { width: 84px; height: 64px; display: grid; place-items: center; border-radius: 10px; font: 400 26px "Lilita One", sans-serif; color: #fff;
  background: linear-gradient(180deg, rgba(248, 56, 161, .55), rgba(210, 14, 112, .55)); border: 2px solid rgba(252, 125, 194, .8); }
.tt-portoes span.neg { background: linear-gradient(180deg, rgba(239, 68, 68, .55), rgba(153, 27, 27, .55)); border-color: rgba(252, 165, 165, .8); }
.tt-luta { display: flex; align-items: center; gap: 16px; }
.tt-luta em { font: 400 22px "Lilita One", sans-serif; font-style: normal; color: #ffd84a; }
.tt-sorteio { display: flex; gap: 10px; }
.tt-sorteio span { width: 130px; padding: 12px 8px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 900; letter-spacing: .8px; }
.tt-sorteio b { font: 400 30px "Lilita One", sans-serif; }
.tt-sorteio .livre { color: #86efac; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .45); }
.tt-sorteio .muro { color: #fca5a5; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .45); }
.tt-ganhos { padding: 8px 20px 10px; border-radius: 14px; background: rgba(151, 19, 85, .78); border: 1px solid rgba(255, 214, 236, .35); }
.tt-ganhos small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #d99fc0; }
.tt-ganhos b { font: 400 32px "Lilita One", sans-serif; color: #22c55e; }
.tt-final span { font: 400 34px "Lilita One", sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 0 18px rgba(255, 214, 236, .7); animation: ttPulso 1.4s ease-in-out infinite; }
@keyframes ttFade { from { opacity: 0; } }
@keyframes ttIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes ttCorre { to { transform: translateY(-3px); } }
@keyframes ttLado { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes ttPulso { 50% { transform: scale(1.06); } }
.bal-demo { display: none; position: relative; }
html.treino-on .bal-demo { display: flex; }
html.treino-on .bal-wrap { display: none !important; }
.bal-demo [data-t="saldo"] { white-space: nowrap; }
#balChip { position: relative; }
@media (max-width: 520px) { html.treino-on .g-row-m [data-open="login"] { display: none; } .bal-demo { height: 38px; padding-right: 10px; } .bal-demo .bal-add { display: none; } }
.tt-ganhos em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: #ffd84a; }
.treino-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-color: rgba(255, 214, 236, .45); background: linear-gradient(90deg, rgba(255, 214, 236, .1), rgba(166, 27, 97, .9)); }
.treino-bar.hidden { display: none; }
.treino-bar > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.treino-bar b { color: var(--cyan); font-size: 13px; font-weight: 900; letter-spacing: .8px; }
.treino-bar span { color: var(--mut); font-size: 12.5px; line-height: 1.35; }
.treino-bar strong { color: var(--txt); }
.treino-bar .btn { height: 38px; padding: 0 14px; font-size: 13px; white-space: nowrap; }
html.coaching .game, html.coaching [data-view] { animation: none; }
.coach { position: fixed; inset: 0; z-index: 76; pointer-events: none; }
.coach-bl { position: fixed; pointer-events: auto; }
.coach-furo { position: fixed; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px rgba(255, 214, 236, .85), 0 0 22px rgba(255, 214, 236, .45), 0 0 0 9999px rgba(129, 13, 71, .74);
  transition: top .15s, left .15s, width .15s, height .15s; animation: coachAnel 1.6s ease-in-out infinite; }
.coach-bolha { position: fixed; left: 50%; width: min(380px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: auto; padding: 12px 14px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #c11f70, #a61b61); border: 1px solid rgba(255, 214, 236, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: ttIn .3s var(--ease) both; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tt-x { flex: none; width: 30px; height: 30px; margin: -4px -4px -4px auto; display: grid; place-items: center; border-radius: 50%; color: var(--mut);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: color .15s, background .15s; }
.tt-x:hover, .tt-x:active { color: var(--txt); background: rgba(255,255,255,.12); }
.tt-x .svg { width: 13px; height: 13px; }
.coach-bolha h4 { margin: 8px 0 4px; font-size: 19px; letter-spacing: .3px; }
.coach-bolha p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.45; }
.coach-bolha p b { color: var(--txt); }
.coach-bolha .btn { width: 100%; height: 42px; margin-top: 10px; }
@keyframes coachAnel { 50% { box-shadow: 0 0 0 5px rgba(255, 214, 236, .55), 0 0 30px rgba(255, 214, 236, .55), 0 0 0 9999px rgba(129, 13, 71, .74); } }
.tt-acoes.um { grid-template-columns: 1fr; }
.tt-ganhos.perda b { color: #ff6b81; }
.tt-moeda img { height: 104px; width: auto; filter: drop-shadow(0 6px 16px rgba(255, 200, 40, .35)); animation: ttPulso 1.6s ease-in-out infinite; }
.game-live { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; }
.game-live.hidden { display: none; }
.game-live span { display: flex; flex-direction: column; color: var(--mut); font-size: 11.5px; font-weight: 700; }
.game-live b { color: var(--txt); font-size: 15px; font-weight: 900; }
.game-live b.ok { color: var(--green); }
.game-live .btn { height: 38px; padding: 0 14px; font-size: 13px; }
.bet label { display: block; font-size: 13px; color: var(--mut); font-weight: 700; margin-bottom: 8px; }
/* between rounds the game stays open and big: only the quick amounts and the start button remain */
html.pos-jogo .treino-bar, html.pos-jogo .bet#betPanel > label, html.pos-jogo .bet-step, html.pos-jogo .game-rule { display: none; }
html.pos-jogo .bet#betPanel { padding: 0; background: none; border: 0; box-shadow: none; }
html.pos-jogo .game-bets { margin: 0; }
html.jogo-aberto .game-help span { display: none; }
html.jogo-aberto .game-help { width: 40px; padding: 0; justify-content: center; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 40px; height: 40px; border-radius: 10px; background: var(--grad); color: #4a0628; font-size: 22px; font-weight: 900; transition: transform .12s; }
.stepper button:active { transform: scale(.9); }
.stepper input { width: 100%; min-width: 0; height: 40px; text-align: center; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); font-weight: 900; font-size: 17px; }
.seg { display: flex; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 14px; border-radius: 9px; color: var(--mut); font-weight: 800; transition: background .2s, color .2s; }
.seg button.on { background: var(--grad-soft); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .45); }

/* sheets (modais) */
.sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.sheet .mask { position: absolute; inset: 0; background: rgba(124, 10, 67, .72); backdrop-filter: blur(4px); animation: fade .25s both; }
.sheet .card { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 18px 20px 22px; border-radius: 20px;
  background: linear-gradient(180deg, #bc1f6d, #9f1a5c); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: pop .32s var(--ease) both; }
.game-card, .step, .tile, .method, .stat { transition: translate .28s var(--ease), border-color .28s, box-shadow .28s, background-color .28s; }
.game-card .art { transition: scale .5s var(--ease); }
@media (hover: hover) {
  .game-card:hover, .step:hover, .tile:hover { translate: 0 -3px; border-color: rgba(255, 214, 236, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); }
  .game-card:hover .art { scale: 1.04; }
  .icon-btn:hover, .bal-add:hover, .copy-btn:hover, .stepper button:hover { translate: 0 -1px; }
}
.icon-btn, .bal-add, .copy-btn, .stepper button { transition: transform .12s, translate .2s var(--ease), background-color .2s; }
.sheet.out { pointer-events: none; }
.sheet.out .mask { animation: fadeOut .24s ease both; }
.sheet.out .card { animation: popOut .22s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes popOut { to { opacity: 0; transform: scale(.94) translateY(10px); } }
.view-out { animation: viewOut .18s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
@keyframes viewOut { to { opacity: 0; transform: translateY(-10px); } }
.swap-out { animation: swapOut .16s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
.swap-in { animation: rise .32s var(--ease) both; }
@keyframes swapOut { to { opacity: 0; transform: translateX(-14px); } }
.collapse-in { animation: collapseIn .25s var(--ease) both; overflow: hidden; }
.collapse-out { animation: collapseOut .2s ease both; overflow: hidden; }
@keyframes collapseIn { from { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 240px; } }
@keyframes collapseOut { from { max-height: 240px; } to { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.sheet-head { display: flex; align-items: center; justify-content: center; position: relative; height: 40px; margin-bottom: 8px; }
.sheet-head img { height: 30px; width: auto; }
.sheet-head .x { position: absolute; right: -6px; top: 2px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--mut); }
.sheet-head .back { position: absolute; left: -6px; top: 2px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--mut); }
.sheet-tools { position: relative; height: 0; z-index: 3; }
.sheet-tools .x, .sheet-tools .back { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--mut);
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.sheet-tools .x { right: -6px; }
.sheet-tools .back { left: -6px; }
.sheet-tools .x:hover, .sheet-tools .back:hover { color: var(--txt); border-color: rgba(255, 214, 236, .45); }
.sheet-tools .back .svg, .sheet-tools .x .svg, .sheet-head .x .svg { width: 18px; height: 18px; }
.sheet.plain .body > h3:first-child { min-height: 34px; margin-top: 0; padding-right: 40px; display: flex; align-items: center; }
.sheet.plain.has-back .body > h3:first-child, .sheet.plain.has-back .body > h3:first-child + .sub { padding-left: 40px; }
.sheet h3 { margin: 6px 0 2px; font-size: 22px; }
.sheet .sub { margin: 0 0 16px; color: var(--mut); font-size: 14px; }

/* formulários */
.field { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: rgba(255, 214, 236, .6); box-shadow: 0 0 0 3px rgba(255, 214, 236, .12); }
.field.ok { border-color: rgba(34, 197, 94, .55); }
.field.bad { border-color: rgba(239, 68, 68, .7); box-shadow: 0 0 0 3px rgba(239, 68, 68, .1); }
.field .kic { display: grid; place-items: center; color: var(--mut); transition: color .2s; }
.field .kic .svg { width: 20px; height: 20px; }
.field:focus-within .kic { color: var(--cyan); }
.field .st { display: grid; place-items: center; width: 22px; flex: none; }
.field .st .svg { width: 20px; height: 20px; animation: pop .25s var(--ease) both; }
.field.ok .st { color: var(--green); }
.field.bad .st { color: #ff7a7a; }
.field.money { height: 60px; }
.field.money .cur { font-weight: 900; color: var(--mut); font-size: 18px; }
.field.money input { font-size: 26px !important; font-weight: 900; letter-spacing: .3px; }
.field-msg { margin: -6px 2px 14px; font-size: 12.5px; color: var(--mut); font-weight: 600; transition: color .2s; }
.field-msg.bad { color: #ff8a8a; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; letter-spacing: .2px; word-break: break-all; }
.wd-bal { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--grad-soft); border: 1px solid rgba(255, 214, 236, .3); }
.wd-bal span { color: var(--mut); font-size: 13px; font-weight: 700; }
.wd-bal b { font-size: 22px; line-height: 1; }
.wd-all { flex: none; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 900; color: #4a0628; background: var(--grad); }
.wd-all:active { transform: scale(.95); }
.pix-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pix-types button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line); color: var(--mut); font-weight: 800; font-size: 12.5px; transition: border-color .2s, background-color .2s, color .2s, transform .12s; }
.pix-types button .svg { width: 22px; height: 22px; }
.pix-types button.on { color: var(--txt); background: var(--grad-soft); border-color: rgba(255, 214, 236, .55); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .25); }
.pix-types button.on .svg { color: var(--cyan); }
.pix-types button:active { transform: scale(.95); }
.holder { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.holder > .svg { color: var(--green); }
.holder span { display: block; font-size: 12px; color: var(--mut); font-weight: 700; }
.holder b { display: block; font-size: 15px; }
.holder small { color: var(--mut); font-size: 12.5px; font-weight: 700; }
.summary { margin: 4px 0 14px; padding: 4px 14px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.summary .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.summary .row + .row { border-top: 1px dashed rgba(255, 220, 238, .16); }
.summary .row > span:first-child { color: var(--mut); font-weight: 700; flex: none; }
.summary .row b { text-align: right; font-weight: 800; min-width: 0; }
.summary .row.tot b { font-size: 18px; color: var(--cyan); }
.summary .free { color: var(--green); font-weight: 900; }
.note { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; margin-bottom: 14px; border-radius: 12px; text-align: left;
  background: rgba(255, 200, 61, .08); border: 1px solid rgba(255, 200, 61, .28); color: #ffd978; font-size: 13px; font-weight: 700; }
.note .svg { width: 20px; height: 20px; flex: none; }
.note.warn { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .3); color: #ffb4b4; align-items: flex-start; }
.review { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 12px; margin-bottom: 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, rgba(255, 214, 236, .16), rgba(255, 22, 136, .08)); border: 1px solid rgba(255, 214, 236, .28); }
.review span { color: var(--mut); font-size: 13px; font-weight: 700; }
.review b { font-size: 36px; line-height: 1.15; }
.review small { display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 12.5px; font-weight: 700; }
.field .ic { width: 20px; height: 20px; color: var(--mut); }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; }
.field input::placeholder { color: #ad6f92; }
.field .ddi { display: flex; align-items: center; gap: 6px; padding-right: 10px; border-right: 1px solid var(--line); font-weight: 800; color: var(--txt); }
.flag { width: 22px; height: 15px; border-radius: 3px; background: #009b3a; position: relative; overflow: hidden; }
.flag::before { content: ""; position: absolute; inset: 2px 3px; background: #fedf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.flag::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #002776; left: 8px; top: 4.5px; }
.eye { color: var(--mut); display: grid; place-items: center; }
.fx { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); background: var(--mut); opacity: .7; transition: opacity .15s, background-color .15s; }
.fx .svg { width: 12px; height: 12px; stroke-width: 3; }
.fx:hover, .fx:active { opacity: 1; background: var(--txt); }
.field input:placeholder-shown ~ .fx { display: none; }
.acc-wrap { position: relative; }
.acc-list { position: absolute; z-index: 6; top: calc(100% - 4px); left: 0; right: 0; max-height: 236px; overflow-y: auto; padding: 6px; border-radius: 14px;
  background: var(--panel2); border: 1px solid rgba(255, 214, 236, .3); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); animation: accIn .18s var(--ease) both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }
.acc-tit { margin: 4px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.acc-it { display: flex; align-items: center; border-radius: 10px; transition: background-color .15s; }
.acc-it:hover { background: rgba(255, 214, 236, .08); }
.acc-usar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px; color: var(--txt); font-size: 15px; font-weight: 700; text-align: left; }
.acc-usar .svg { width: 18px; height: 18px; color: var(--mut); }
.acc-usar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-usar em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--cyan); }
.acc-del { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--mut); transition: color .15s, background-color .15s; }
.acc-del:hover, .acc-del:active { color: #ff8a8a; background: rgba(239, 68, 68, .1); }
.acc-del .svg { width: 18px; height: 18px; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 16px; font-size: 14px; color: var(--mut); }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--mut); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { background: #fff; color: #b41d69; }
.btn-google img { width: 20px; height: 20px; }
.g-note { margin: 8px 4px 0; text-align: center; color: var(--mut); font-size: 11.5px; line-height: 1.4; }
.g-note a { color: var(--cyan); }
.foot-link { margin-top: 16px; text-align: center; color: var(--mut); font-size: 14px; }
.err-msg { margin: -4px 0 12px; color: #ff8a8a; font-size: 13px; min-height: 0; }

/* convite */
.inv-hero { height: 120px; border-radius: 14px; margin-bottom: 14px; background: url(../img/invite.webp?v=1792109059) center / cover; }
.copy-row { display: flex; gap: 8px; margin-bottom: 14px; }
.copy-row .field { flex: 1; margin: 0; }
.copy-row .field input { font-size: 13px; color: var(--mut); }
.copy-btn { width: 50px; border-radius: 12px; background: var(--grad); color: #4a0628; display: grid; place-items: center; transition: transform .12s; }
.copy-btn:active { transform: scale(.92); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stat { padding: 12px 6px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); text-align: center; }
.stat b { display: block; font-size: 20px; }
.stat span { color: var(--mut); font-size: 12px; font-weight: 700; }
.inv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.inv-stats .stat { padding: 11px 8px; }
.inv-stats .stat b { font-size: 19px; white-space: nowrap; }
.inv-stats .stat.gold b { color: var(--gold); }
.chest-box { position: relative; margin-bottom: 16px; padding: 12px 0 12px; border-radius: 16px; background: linear-gradient(180deg, #c11f70, #c11f70); border: 1px solid rgba(255, 120, 182, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .3); overflow: hidden; }
.chest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 4px; font-size: 13px; color: var(--mut); font-weight: 700; }
.chest-head > b { display: flex; align-items: center; gap: 6px; color: var(--txt); font-size: 15px; }
.chest-head .svg { width: 18px; height: 18px; color: var(--gold); }
.chest-head span b { color: var(--cyan); font-size: 15px; }
.chest-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.chest-scroll::-webkit-scrollbar { display: none; }
.chest-track { position: relative; display: flex; width: max-content; padding: 0 10px; }
.ct-line { position: absolute; left: 0; right: 0; top: 54px; height: 8px; margin-top: -4px; background: #9f1a5c; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.ct-line i { display: block; width: 0; height: 100%; border-radius: 0 6px 6px 0; background: linear-gradient(180deg, #ffe7b8, #ffb36b 60%, #f08a3c); box-shadow: 0 0 10px rgba(255, 190, 110, .6); transition: width .9s var(--ease); }
.chest { position: relative; z-index: 1; flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; padding: 4px 0 0; color: var(--txt); cursor: default; -webkit-tap-highlight-color: transparent; }
.chest .cv { height: 22px; font-weight: 900; font-size: 15px; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); white-space: nowrap; }
.chest .ci { position: relative; width: 60px; height: 56px; display: grid; place-items: center; }
.chest .ci img { width: 58px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); transition: transform .3s var(--ease), filter .3s; }
.chest .cn { display: flex; align-items: center; gap: 3px; height: 22px; margin-top: 4px; font-size: 13px; font-weight: 800; color: #ff8fc1; }
.chest .cn .svg { width: 13px; height: 13px; }
.chest.is-locked .ci img { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)) saturate(.75) brightness(.85); }
.chest.is-locked .cv { color: #f5c7dc; }
.chest.is-ready { cursor: pointer; }
.chest.is-ready .cv { color: var(--gold); }
.chest.is-ready .ci::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 90, .55), rgba(255, 220, 90, 0) 65%); animation: glow 1.6s ease-in-out infinite; }
.chest.is-ready .ci img { animation: wiggle 1.8s ease-in-out infinite; }
.chest.is-ready .cn { padding: 0 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #f0a516); color: #4a2a00; font-size: 12px; letter-spacing: .5px; box-shadow: 0 2px 8px rgba(255, 190, 60, .45); }
.chest.is-ready:active .ci img { transform: scale(.92); }
.chest.is-open .cv { color: #e09fbd; }
.chest.is-open .cn { color: #6ee7a0; }
.chest.opening .ci img { animation: shake .45s linear infinite; }
.chest.burst .ci img { animation: chestPop .5s var(--ease); }
.chest .coins { position: absolute; left: 50%; top: 58px; width: 0; height: 0; pointer-events: none; }
.chest .coins i { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3a8, #ffc83d 55%, #c77a06); box-shadow: 0 0 6px rgba(255, 200, 61, .8);
  animation: coin 1s cubic-bezier(.2, .7, .3, 1) both; }
.chest .coins i:nth-child(1) { --x: -38px; --y: -46px; }
.chest .coins i:nth-child(2) { --x: 34px; --y: -50px; animation-delay: .04s; }
.chest .coins i:nth-child(3) { --x: -18px; --y: -64px; animation-delay: .08s; }
.chest .coins i:nth-child(4) { --x: 16px; --y: -68px; animation-delay: .02s; }
.chest .coins i:nth-child(5) { --x: -44px; --y: -20px; animation-delay: .1s; }
.chest .coins i:nth-child(6) { --x: 44px; --y: -24px; animation-delay: .06s; }
.chest .coins i:nth-child(7) { --x: 0; --y: -76px; animation-delay: .12s; }
.chest .coins i:nth-child(8) { --x: -28px; --y: -36px; animation-delay: .14s; }
@keyframes glow { 50% { opacity: .45; transform: scale(.88); } }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg) scale(1.06); } 82% { transform: rotate(6deg) scale(1.06); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
@keyframes shake { 25% { transform: translateX(-3px) rotate(-4deg); } 75% { transform: translateX(3px) rotate(4deg); } }
@keyframes chestPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes coin { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
.chest-bar { height: 5px; margin: 8px 14px 0; border-radius: 5px; background: #9f1a5c; overflow: hidden; }
.chest-bar i { display: block; height: 100%; width: 30%; border-radius: 5px; background: linear-gradient(90deg, #ff6fab, #ff8fbe); }
.chest-bar.hidden { display: block !important; visibility: hidden; }
.rules { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 214, 236, .06); border: 1px solid rgba(255, 214, 236, .2); font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.rules:empty { display: none; }
.rules-t { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--txt); font-weight: 800; font-size: 14px; }
.rules-t .svg { width: 17px; height: 17px; color: var(--cyan); }
.rules ol { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.rules b { color: var(--txt); }
.sec-title { margin: 18px 0 8px; font-weight: 800; font-size: 15px; }
.member .m-av { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 214, 236, .35); }
.member > div:nth-child(2) { min-width: 0; }
.member > div:nth-child(2) b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member > div:nth-child(2) span { display: block; white-space: nowrap; line-height: 1.35; }
.member .v { white-space: nowrap; }
.member .m-n { font-size: 11px; font-weight: 700; }
.st.muted { background: rgba(255, 255, 255, .07); color: var(--mut); }
.how { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 214, 236, .07); border: 1px solid rgba(255, 214, 236, .22); color: var(--mut); font-size: 14px; line-height: 1.5; }

/* depósito */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.tabs button { height: 38px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); color: var(--mut); font-weight: 800; font-size: 14px; transition: all .2s; }
.tabs button.on { background: var(--grad-soft); color: var(--txt); border-color: rgba(255, 214, 236, .55); }
.method { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); margin-bottom: 12px; }
.method img { width: 38px; height: 38px; }
.method b { display: block; }
.method span { color: var(--mut); font-size: 13px; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.dep-pane .chips { grid-template-columns: repeat(3, 1fr); }
.chips button { height: 42px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); font-weight: 800; transition: all .15s; }
.chips button.on { border-color: rgba(255, 214, 236, .7); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .45); background: var(--grad-soft); color: var(--txt); }
.chips button:active { transform: scale(.95); }
.hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--mut); font-size: 13px; }
.hint .svg { width: 16px; height: 16px; color: var(--green); }
.pix-box { text-align: center; }
.pix-box .qr { position: relative; width: 220px; height: 220px; margin: 6px auto 4px; border-radius: 14px; background: #fff; padding: 8px; }
.qr-mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.qr-mask span { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: var(--green); transform: scale(.4); transition: transform .4s var(--ease); }
.qr-mask span img { width: 35px; height: 35px; }
.pix-box.paid .qr-mask { opacity: 1; visibility: visible; }
.pix-box.paid .qr-mask span { transform: none; }
.pix-box.expired .qr img { opacity: .25; filter: grayscale(1); }
.pix-period { margin: 4px 0 12px; font-size: 13px; color: var(--mut); }
.pix-period .cd { margin-left: 6px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pix-tips { margin: 14px 0 0; padding: 0 0 0 14px; list-style: none; text-align: left; font-size: 12.5px; color: var(--mut); }
.pix-tips li { position: relative; margin-bottom: 8px; line-height: 1.45; }
.pix-tips li::after { content: ""; position: absolute; top: 6px; left: -11px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.pix-tips .warn { color: var(--gold); font-weight: 800; }
.pix-res { padding: 12px 0 4px; animation: fade .3s ease both; }
.pix-res .t { margin: 0 0 8px; font-size: 20px; font-weight: 900; color: var(--green); }
.pix-res.off .t { color: var(--red); }
.pix-res p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; }
.pix-res .m { color: var(--mut); }
.pix-res .cd { color: var(--cyan); font-variant-numeric: tabular-nums; }
.pix-res .gold { color: var(--gold); }
.pix-act { margin-top: 12px !important; color: var(--mut); }
.pix-act a { margin: 0 4px; color: var(--cyan); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.lev { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 95; max-width: 355px; margin-left: auto; border: 1px solid rgba(34, 197, 94, .5); border-radius: 6px; background: rgba(175, 25, 100, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); overflow: hidden; animation: levIn .3s var(--ease) both; }
.lev.out { animation: levOut .3s ease both; }
.lev-in { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 10px 30px 10px 10px; background: rgba(34, 197, 94, .06); }
.lev-bar { flex: none; align-self: stretch; width: 3px; min-height: 36px; border-radius: 2px; background: var(--green); }
.lev-ico { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--green); }
.lev-ico img { width: 10px; height: 10px; }
.lev-txt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.lev-txt > b { color: var(--txt); font-weight: 800; }
.lev-txt b { color: var(--txt); }
.lev-txt b.gold { color: var(--gold); }
.lev-act { margin: 4px 0 0; display: flex; gap: 14px; }
.lev-act a { color: var(--cyan); font-weight: 800; text-decoration: none; }
.lev-x { position: absolute; top: 8px; right: 6px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--mut); }
.lev-x .svg { width: 12px; height: 12px; }
@keyframes levIn { from { opacity: 0; transform: translateX(100%); } }
@keyframes levOut { to { opacity: 0; transform: translateX(100%); } }
.pix-box .qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.pix-box .val { font-size: 26px; margin: 0 0 4px; }
.wait { display: inline-flex; align-items: center; gap: 8px; color: var(--mut); font-size: 14px; margin: 10px 0 0; }
.wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.done-ico { width: 72px; height: 72px; margin: 8px auto 10px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 197, 94, .15); color: var(--green); animation: pop .4s var(--ease) both; }

/* perfil */
.me { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.me .avatar { width: 64px; height: 64px; font-size: 24px; }
.me b { font-size: 18px; }
.vip-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 8px; background: linear-gradient(180deg, #ffd65a, #f5a300); color: #4a2a00; font-size: 12px; font-weight: 900; }
.uid { display: flex; align-items: center; gap: 6px; color: var(--mut); font-size: 13px; margin-top: 4px; }
.uid button { color: var(--mut); display: grid; }
.wallet { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); margin-bottom: 14px; }
.wallet .coin { width: 36px; height: 36px; }
.wallet span { color: var(--mut); font-size: 13px; }
.wallet b { display: block; font-size: 22px; color: #7ff0a8; }
.wallet .acts { margin-left: auto; display: grid; gap: 6px; }
.wallet .btn { height: 36px; padding: 0 14px; font-size: 14px; }
.list { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.list button, .list a { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 14px; background: rgba(0, 0, 0, .18); color: var(--txt); font-weight: 700; text-align: left; transition: background .15s; }
.list > * + * { border-top: 1px solid var(--line); }
.list button:hover, .list a:hover { background: rgba(255, 214, 236, .07); }
.list .ic { color: var(--cyan); width: 22px; height: 22px; }
.list .chev { margin-left: auto; color: var(--mut); width: 18px; height: 18px; }
.list .danger, .list .danger .ic { color: #ff8a8a; }

.items { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.item b { display: block; font-size: 15px; }
.item span { color: var(--mut); font-size: 12px; }
.item .v { margin-left: auto; text-align: right; font-weight: 900; }
.st { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.st.paid { background: rgba(34, 197, 94, .15); color: #6ee7a0; }
.st.pending, .st.processing { background: rgba(255, 200, 61, .15); color: #ffd56b; }
.st.failed, .st.canceled { background: rgba(239, 68, 68, .15); color: #ff8a8a; }
.empty { padding: 30px 10px; text-align: center; color: var(--mut); }
.sk { height: 62px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.label { display: block; font-size: 13px; color: var(--mut); font-weight: 700; margin: 4px 0 8px; }
.sel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }

/* toast */
.toast { position: fixed; left: 50%; top: 42%; z-index: 80; transform: translate(-50%, -50%); max-width: min(360px, 86vw); padding: 12px 18px; border-radius: 12px;
  background: rgba(133, 9, 71, .9); border: 1px solid var(--line); font-weight: 700; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation: toast 2.4s var(--ease) both; pointer-events: none; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.92); } 12%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -55%); } }

footer { padding: 26px 0 40px; color: var(--mut); font-size: 13px; text-align: center; }
footer .r18 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--red); color: #ff8a8a; font-weight: 900; margin-bottom: 8px; }

@media (max-width: 860px) {
  :root { --head: 58px; }
  .d-only { display: none !important; }
  .m-only { display: block; }
  .tiles.m-only { display: grid; }
  .tabbar { display: grid; }
  .g-row-m { display: flex; }
  .alogo { height: 32px; }
  .menu-btn { width: 36px; height: 36px; margin-right: -4px; border-radius: 10px; }
  .head .wrap { gap: 12px; }
  main { padding: 14px 0 24px; }
  .wrap { width: calc(100% - 24px); }
  .home-m { display: grid; gap: 12px; }
  .banners { margin-bottom: 12px; border-radius: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
  .bn-nav { display: none; }
  .bn-dots { bottom: 6px; gap: 5px; }
  .bn-dots button { width: 6px; height: 6px; }
  .bn-dots button.on { width: 16px; }
  .game-card { grid-template-columns: 1fr; }
  .game-card .art { min-height: 0; aspect-ratio: 16 / 9; }
  .game-card .info { padding: 14px 16px 16px; gap: 6px; }
  .game-card h3 { font-size: 24px; }
  .sheet { place-items: end center; padding: 0; bottom: calc(var(--nav) + env(safe-area-inset-bottom)); overflow: hidden; }
  .sheet .card { width: 100%; max-height: calc(100% - 10px); border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: 20px; animation: up .32s var(--ease) both; }
  .sheet.out .card { animation: downOut .26s cubic-bezier(.4, 0, 1, 1) both; }
  .sheet .card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin: -6px auto 8px; }
  .game { gap: 10px; }
  .stage { aspect-ratio: 4 / 5; }
  .stage:not(.live) { aspect-ratio: auto; height: clamp(110px, calc(100dvh - var(--head) - var(--nav) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 332px), 460px); }
  .stage:not(.live) .bar, .stage:not(.live) .fase, .stage:not(.live) .side { display: none; }
  .stage .soon { display: none; }
  .bet#betPanel { padding: 12px; }
  .bet label { margin-bottom: 6px; }
  .game-bets { margin-bottom: 8px; }
  .game-bets button { height: 40px; }
  .bet-step { margin-bottom: 8px; }
  .bet-step button, .bet .bet-step label { height: 40px; margin: 0; }
  .game-rule { font-size: 12px; line-height: 1.4; }
  .stage.live { aspect-ratio: auto; height: max(340px, calc(100dvh - var(--head) - var(--nav) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 150px)); }
  /* the play screen is one column the exact height of the visible area: the stage takes what the controls
     leave, so the start button never needs scrolling and the game is as big as possible */
  [data-view="jogar"] .game { height: calc(100dvh - var(--head) - var(--nav) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 38px); min-height: 420px; gap: 8px; }
  [data-view="jogar"] .game > * { flex: none; }
  [data-view="jogar"] .game > .stage, [data-view="jogar"] .game > .stage.live { flex: 1 1 auto; min-height: 140px; height: auto; aspect-ratio: auto; border-radius: 16px; }
  .game-top .icon-btn, .game-ic { width: 36px; height: 36px; }
  .game-tit { font-size: 18px; }
  .game-help { height: 36px; }
  html.jogo-aberto .game-help { width: 36px; }
  /* during a round the tab bar goes away so the game gets that height too */
  html.em-jogo .tabbar { display: none; }
  html.em-jogo [data-view="jogar"] .game { height: calc(100dvh - var(--head) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
  html.pos-jogo .game-bets button { height: 42px; }
  html.em-jogo .treino-bar { display: none; }
  .treino-bar { padding: 8px 10px 8px 12px; }
  .treino-bar span { font-size: 11.5px; line-height: 1.3; }
  .treino-bar .btn { height: 34px; padding: 0 12px; }
  .game-live { padding: 8px 10px; }
  #startBtn { height: 50px; white-space: nowrap; font-size: clamp(13px, 3.9vw, 18px); letter-spacing: .2px; gap: 8px; } #startBtn span { overflow: hidden; text-overflow: ellipsis; }
  footer { padding-bottom: 20px; }
}
/* desktop: same single-screen column as on phones, so the start button is visible without scrolling */
@media (min-width: 861px) {
  [data-view="jogar"] .game { height: calc(100dvh - var(--head) - 48px); min-height: 540px; max-height: 920px; gap: 10px; }
  [data-view="jogar"] .game > * { flex: none; }
  [data-view="jogar"] .game > .stage, [data-view="jogar"] .game > .stage.live { flex: 1 1 auto; min-height: 220px; height: auto; aspect-ratio: auto; }
  [data-view="jogar"] .bet#betPanel { padding: 12px 14px; }
  [data-view="jogar"] #startBtn { height: 52px; }
  html.em-jogo .treino-bar { display: none; }
}
@media (min-width: 861px) and (max-height: 900px) {
  .soon { inset: auto 12px 12px; padding: 10px 14px; }
  .soon b { font-size: 17px; }
  .soon p { display: none; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .treino-bar span { display: none; }
  .treino-bar { padding: 6px 8px 6px 12px; }
  .bet#betPanel { padding: 10px 12px; }
  .bet label { margin-bottom: 4px; font-size: 12.5px; }
  .game-bets button, .bet-step button, .bet .bet-step label { height: 38px; }
  .game-rule { font-size: 11.5px; }
  #startBtn { height: 48px; }
}
@media (max-width: 860px) and (max-height: 660px) {
  .game-rule { display: none; }
  .bet-step { margin-bottom: 0; }
}
@keyframes up { from { transform: translateY(100%); } }
@keyframes downOut { to { transform: translateY(100%); } }
.toast.out { animation: toastOut .2s ease both; }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, -60%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* saque: abas, etapas e conta PIX */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); }
.seg button { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 10px; color: var(--mut); font-weight: 800; font-size: 14px; transition: background-color .25s, color .25s, box-shadow .25s; }
.seg button .svg { width: 18px; height: 18px; }
.seg button.on { color: var(--txt); background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .45); }
.seg button.on .svg { color: var(--cyan); }
.acc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 214, 236, .12), rgba(0, 0, 0, .2)); border: 1px solid rgba(255, 214, 236, .3); }
.acc-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 214, 236, .14); color: var(--cyan); }
.acc-card > div { min-width: 0; flex: 1; }
.acc-card span { display: block; font-size: 12px; color: var(--mut); font-weight: 800; }
.acc-card b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card small { display: block; font-size: 12px; color: var(--mut); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-card b.shown { font-size: 14.5px; color: var(--cyan); }
.acc-eye { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; color: var(--mut); background: rgba(0, 0, 0, .22); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.acc-eye .ic { width: 20px; height: 20px; }
.acc-eye:hover, .acc-eye[aria-pressed="true"] { color: var(--cyan); border-color: rgba(255, 214, 236, .45); }
.acc-eye[aria-pressed="true"] .ic { background: var(--cyan); }
.wd-empty { padding: 26px 18px 20px; border-radius: 16px; text-align: center; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.wd-empty-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: rgba(255, 214, 236, .12); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .3); }
.wd-empty-ico .svg { width: 26px; height: 26px; }
.wd-empty h4 { margin: 0 0 6px; font-size: 17px; }
.wd-empty p { margin: 0 0 18px; color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.wd-head { margin: 2px 0 12px; }
.wd-head b { display: block; font-size: 16px; }
.wd-head span { color: var(--mut); font-size: 13px; font-weight: 600; }
.wd-foot { display: flex; align-items: flex-start; gap: 8px; margin: 12px 2px 0; color: var(--mut); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.wd-foot .svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.wd-foot a { color: var(--cyan); }
.sec-list { margin-bottom: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.sec-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: rgba(0, 0, 0, .18); color: var(--txt); text-align: left; transition: background .15s; }
.sec-row + .sec-row { border-top: 1px solid var(--line); }
.sec-row:hover { background: rgba(255, 214, 236, .07); }
.sec-row > div { flex: 1; min-width: 0; }
.sec-row b { display: block; font-size: 15px; }
.sec-row small { display: block; color: var(--mut); font-size: 12px; font-weight: 600; }
.sec-row > .svg { width: 16px; height: 16px; flex: none; color: var(--mut); }
.sec-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 214, 236, .12); color: var(--cyan); }
.sec-ic .svg { width: 20px; height: 20px; }
.sec-st { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12.5px; font-weight: 800; color: var(--mut); }
.sec-st.ok { color: #6ee7a0; }
.sec-st .svg { width: 13px; height: 13px; stroke-width: 3; }
html.wait, html.wait * { cursor: progress !important; }

/* senha de saque + teclado numérico */
.pin-sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.pin-sheet .mask { position: absolute; inset: 0; background: rgba(124, 10, 67, .78); backdrop-filter: blur(4px); animation: fade .22s both; }
.pin-card { position: relative; width: min(380px, 100%); padding: 22px 18px 14px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #c11f70, #a81a61); border: 1px solid rgba(255, 220, 238, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: pop .26s var(--ease) both; }
.pin-sheet.out { pointer-events: none; }
.pin-sheet.out .mask { animation: fadeOut .24s ease both; }
.pin-sheet.out .pin-card { animation: popOut .22s cubic-bezier(.4, 0, 1, 1) both; }
.pin-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--mut); }
.pin-x .svg { width: 20px; height: 20px; }
.pin-ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 16px; background: var(--grad-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .35); }
.pin-card h3 { margin: 0 0 4px; font-size: 20px; }
.pin-sub { margin: 0 auto 12px; max-width: 300px; color: var(--mut); font-size: 13.5px; line-height: 1.4; }
.pin-steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.pin-steps i { width: 26px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); transition: background .3s; }
.pin-steps i.on { background: var(--cyan); }
.pin-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 312px; margin: 0 auto; }
.pin-boxes span { position: relative; height: 50px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(255, 220, 238, .25); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pin-boxes span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--txt); transform: scale(0); transition: transform .18s var(--ease); }
.pin-boxes span.fill { border-color: rgba(255, 214, 236, .55); background: rgba(255, 214, 236, .08); }
.pin-boxes span.fill::after { transform: scale(1); }
.pin-boxes span.cur { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(255, 214, 236, .18); }
.pin-boxes span.cur::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 2px; margin-left: -1px; background: var(--cyan); animation: caret 1s steps(1) infinite; }
.pin-boxes.shake { animation: pinShake .4s; }
.pin-boxes.next { animation: pinNext .3s var(--ease); }
.pin-sheet.busy .pin-boxes span { animation: pinWait .9s ease-in-out infinite; }
.pin-sheet.busy .pin-boxes span:nth-child(2) { animation-delay: .1s; } .pin-sheet.busy .pin-boxes span:nth-child(3) { animation-delay: .2s; }
.pin-sheet.busy .pin-boxes span:nth-child(4) { animation-delay: .3s; } .pin-sheet.busy .pin-boxes span:nth-child(5) { animation-delay: .4s; } .pin-sheet.busy .pin-boxes span:nth-child(6) { animation-delay: .5s; }
.pin-sheet.done .pin-boxes span { border-color: rgba(34, 197, 94, .7); background: rgba(34, 197, 94, .12); }
.pin-sheet.done .pin-boxes span::after { background: #6ee7a0; }
.pin-err { min-height: 20px; margin: 8px 0 2px; color: #ff8a8a; font-size: 13px; font-weight: 700; }
.pin-tip { margin: 0 0 10px; color: var(--mut); font-size: 12px; }
.pin-forgot { display: inline-block; margin: 0 0 10px; color: var(--cyan); font-size: 13px; font-weight: 700; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes pinShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pinNext { from { opacity: 0; transform: translateX(18px); } }
@keyframes pinWait { 50% { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(255, 214, 236, .2); } }

.ui-number-keyboard { margin: 4px -18px -14px; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 0 0 22px 22px; background: rgba(0, 0, 0, .28); border-top: 1px solid rgba(255, 220, 238, .16); user-select: none; -webkit-user-select: none; }
.ui-number-keyboard__header { display: flex; align-items: center; justify-content: center; height: 34px; color: var(--mut); font-size: 12px; font-weight: 700; }
.ui-number-keyboard__title { display: inline-flex; align-items: center; gap: 5px; }
.ui-number-keyboard__title .svg { width: 13px; height: 13px; color: var(--green); }
.ui-number-keyboard__body { display: flex; padding: 0 0 4px; }
.ui-number-keyboard__keys { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ui-number-keyboard-key__wrapper { position: relative; }
.ui-number-keyboard-key { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 12px; font-size: 22px; font-weight: 800; color: var(--txt);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35); touch-action: manipulation;
  transition: transform .08s, background-color .12s; -webkit-tap-highlight-color: transparent; }
.ui-number-keyboard-key--active { transform: translateY(1px) scale(.97); background: rgba(255, 214, 236, .22); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .45); }
.ui-number-keyboard-key--delete, .ui-number-keyboard-key--extra { background: transparent; box-shadow: none; color: var(--mut); }
.ui-number-keyboard-key--delete .svg, .ui-number-keyboard-key--extra .svg { width: 26px; height: 26px; }
.ui-number-keyboard-key--delete.ui-number-keyboard-key--active, .ui-number-keyboard-key--extra.ui-number-keyboard-key--active { background: rgba(255, 255, 255, .08); }
.pin-sheet.busy .ui-number-keyboard { opacity: .55; pointer-events: none; transition: opacity .2s; }

/* saque: detalhe e registro */
.wd-det-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; text-align: left; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.wd-det-head span { font-weight: 800; font-size: 14px; }
.wd-det-head b { font-size: 22px; line-height: 1.1; white-space: nowrap; }
.wd-det-head small { grid-column: 1 / -1; color: var(--mut); font-size: 12px; font-weight: 700; }
.wd-det-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; animation: chestPop .45s var(--ease); }
.wd-det-ico .svg { width: 19px; height: 19px; stroke-width: 2.5; }
.wd-det-head.paid { border-color: rgba(34, 197, 94, .35); background: linear-gradient(180deg, rgba(34, 197, 94, .12), rgba(0, 0, 0, .18)); }
.wd-det-head.paid .wd-det-ico { background: rgba(34, 197, 94, .2); color: #6ee7a0; }
.wd-det-head.pending .wd-det-ico, .wd-det-head.processing .wd-det-ico { background: rgba(255, 200, 61, .16); color: #ffd56b; }
.wd-det-head.pending, .wd-det-head.processing { border-color: rgba(255, 200, 61, .3); background: linear-gradient(180deg, rgba(255, 200, 61, .1), rgba(0, 0, 0, .18)); }
.wd-det-head.failed, .wd-det-head.canceled { border-color: rgba(239, 68, 68, .35); background: linear-gradient(180deg, rgba(239, 68, 68, .1), rgba(0, 0, 0, .18)); }
.wd-det-head.failed .wd-det-ico, .wd-det-head.canceled .wd-det-ico { background: rgba(239, 68, 68, .18); color: #ff8a8a; }
.wd-time { display: flex; margin: 0 0 8px; padding: 10px 6px; list-style: none; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); }
.wd-time li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.wd-time li + li::before { content: ""; position: absolute; top: 10px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: rgba(255, 255, 255, .12); }
.wd-time li.ok + li::before { background: rgba(34, 197, 94, .55); }
.wd-time i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .16); }
.wd-time i .svg { width: 12px; height: 12px; stroke-width: 3.2; }
.wd-time li.ok i { background: rgba(34, 197, 94, .2); border-color: rgba(34, 197, 94, .7); color: #6ee7a0; }
.wd-time li.cur i { border-color: #ffd56b; box-shadow: 0 0 0 4px rgba(255, 200, 61, .14); animation: pulse2 1.6s ease-in-out infinite; }
.wd-time li.bad i { background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .7); color: #ff8a8a; }
.wd-time li > div { min-width: 0; max-width: 100%; }
.wd-time b { display: block; font-size: 12px; line-height: 1.25; }
.wd-time li:not(.ok):not(.cur):not(.bad) b { color: var(--mut); }
.wd-time span { display: block; color: var(--mut); font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.wd-det .summary { margin: 0 0 10px; padding: 2px 12px; }
.wd-det .summary .row { padding: 7px 0; font-size: 13px; }
.wd-det .note { margin-bottom: 10px; padding: 9px 11px; font-size: 12.5px; }
.wd-det-act { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.wd-det-act .btn { height: 44px; }
.wd-det-act .btn .svg { width: 18px; height: 18px; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 7px rgba(255, 200, 61, 0); } }
.mini-copy { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; vertical-align: middle; border-radius: 8px; color: var(--cyan); background: rgba(255, 214, 236, .1); }
.mini-copy .svg { width: 14px; height: 14px; }
.wd-det .summary .row b { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.wd-det .summary .mono { word-break: break-all; }
.rec-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.dd { position: relative; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 38px; padding: 0 10px 0 12px; border-radius: 10px; font-size: 13px; font-weight: 800; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); transition: border-color .2s; }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn .svg { width: 16px; height: 16px; color: var(--mut); transition: transform .2s var(--ease); }
.dd.open .dd-btn { border-color: rgba(255, 214, 236, .55); }
.dd.open .dd-btn .svg { transform: rotate(180deg); color: var(--cyan); }
.dd-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; padding: 4px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s var(--ease), visibility .16s; }
.dd.open .dd-list { opacity: 1; visibility: visible; transform: none; }
.dd-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--mut); text-align: left; }
.dd-list button:hover { background: rgba(255, 214, 236, .06); }
.dd-list button .svg { width: 15px; height: 15px; color: var(--cyan); opacity: 0; }
.dd-list button[aria-selected="true"] { color: var(--txt); }
.dd-list button[aria-selected="true"] .svg { opacity: 1; }
.rec-sum { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.rec-sum:empty { display: none; }
.rec-list { min-height: 170px; }
.rec-sum b.ok { color: #6ee7a0; }
.rec-item { width: 100%; text-align: left; transition: border-color .2s, background-color .2s; }
.rec-item:hover { border-color: rgba(255, 214, 236, .4); background: rgba(255, 214, 236, .05); }
.rec-item > div:nth-child(2) { min-width: 0; }
.rec-item > div:nth-child(2) span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-item .v { white-space: nowrap; }
.rec-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; }
.rec-ico .svg { width: 19px; height: 19px; stroke-width: 2.4; }
.rec-ico.paid { background: rgba(34, 197, 94, .15); color: #6ee7a0; }
.rec-ico.pending, .rec-ico.processing { background: rgba(255, 200, 61, .14); color: #ffd56b; }
.rec-ico.failed, .rec-ico.canceled { background: rgba(239, 68, 68, .14); color: #ff8a8a; }
.rec-ico img, .wd-det-ico img { width: 58%; height: 58%; }
.rec-ico.paid, .rec-ico.pending, .rec-ico.processing { border-radius: 50%; }
.rec-ico.paid, .wd-det-head.paid .wd-det-ico { background: var(--green); }
.rec-ico.pending, .rec-ico.processing, .wd-det-head.pending .wd-det-ico, .wd-det-head.processing .wd-det-ico { background: #f5a524; }
.wd-time i img { width: 12px; height: 12px; }
.wd-time li.ok i { background: var(--green) !important; border-color: var(--green) !important; }
.wd-time li.cur i { background: #f5a524; border-color: #f5a524; }
.rec-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rec-empty .svg { width: 34px; height: 34px; opacity: .5; }

@media (max-width: 768px) {
  .pin-sheet { place-items: end center; padding: 0; }
  .pin-card { width: 100%; padding: 20px 16px 0; border-radius: 22px 22px 0 0; border-bottom: 0; animation: up .3s var(--ease) both; }
  .pin-sheet.out .pin-card { animation: downOut .24s cubic-bezier(.4, 0, 1, 1) both; }
  .ui-number-keyboard { margin: 6px -16px 0; border-radius: 0; padding: 0 6px calc(10px + env(safe-area-inset-bottom)); }
  .ui-number-keyboard-key { height: 54px; }
}
.sheet-head .alogo { height: 30px; }
.sheet-head .alogo img { height: 100%; }

/* sem seleção de texto no site; campos continuam editáveis */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }

/* promoção de primeiro depósito */
.dep-ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dep-ch button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 74px; padding: 6px 4px; border-radius: 12px;
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line); color: var(--mut); overflow: hidden; transition: border-color .2s, background-color .2s, transform .12s; }
.dep-ch button .ic { width: 24px; height: 24px; }
.dep-ch button b { font-size: 13.5px; color: var(--txt); white-space: nowrap; }
.dep-ch button small { font-size: 11px; font-weight: 700; }
.dep-ch button.on { background: var(--grad-soft); border-color: rgba(255, 214, 236, .6); box-shadow: inset 0 0 0 1px rgba(255, 214, 236, .35); color: var(--cyan); }
.dep-ch button.soon { opacity: .55; }
.dep-ch button.soon b { color: var(--mut); }
.dep-ch button:active { transform: scale(.96); }
.dep-ch .ck { position: absolute; top: 0; right: 0; width: 22px; height: 20px; display: grid; place-items: center; border-radius: 0 11px 0 9px; background: var(--cyan); color: #4a0628; }
.dep-ch .ck .svg { width: 13px; height: 13px; stroke-width: 3; }
.fd-promo { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; overflow: hidden;
  background: var(--grad-soft); border: 1px solid rgba(255, 214, 236, .3); }
.fd-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .08) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: logoShine 4s ease-in-out infinite; pointer-events: none; }
.fd-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 214, 236, .14); color: var(--cyan); }
.fd-ico .svg { width: 22px; height: 22px; }
.fd-promo > div { min-width: 0; flex: 1; }
.fd-promo b { display: block; font-size: 14.5px; color: var(--txt); }
.fd-promo div span { display: block; font-size: 12px; color: var(--mut); font-weight: 700; line-height: 1.4; }
.fd-promo small.fd-roll { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--cyan); }
.fd-roll .svg { width: 13px; height: 13px; flex: none; stroke-width: 3; }
.dep-min { margin: -4px 2px 10px; font-size: 12px; color: var(--mut); font-weight: 600; }
.dep-ch button:not(.on) .ck { display: none; }
.rec-item .rec-bonus { color: var(--gold) !important; font-weight: 800; }
.summary .gold { color: var(--gold); }
.chips.has-r button { display: flex; flex-direction: column; height: 58px; padding: 0; overflow: hidden; }
.chips.has-r .cv { flex: 1; display: grid; place-items: center; font-size: 15px; }
.chips .reward { display: inline-block; width: 100%; font-size: 11.5px; font-weight: 900; line-height: 19px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); border-radius: 0 0 9px 9px; }
.chips .reward.none { background: rgba(255, 255, 255, .04); color: var(--mut); font-weight: 700; }
.chips.has-r button.on .reward:not(.none) { background: var(--gold); color: #3a2600; }
.fd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -4px 2px 12px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.fd-line .svg { width: 16px; height: 16px; color: var(--mut); flex: none; }
.fd-line.on { color: var(--txt); }
.fd-line.on .svg { color: var(--cyan); }
.fd-line b { color: var(--txt); }
.fd-line.on > span:first-of-type b { color: var(--gold); }
.fd-line .fd-tot { margin-left: auto; color: var(--mut); }
.fd-line .fd-tot b { color: var(--txt); }
.fd-pix { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 12px; color: var(--txt); font-size: 13px; font-weight: 800; }
.fd-pix .svg { width: 16px; height: 16px; color: var(--cyan); }

/* boas-vindas pós-cadastro */
.welcome { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px 20px 76px; overflow-y: auto; }
.welcome .mask { position: fixed; inset: 0; background: rgba(124, 10, 67, .78); backdrop-filter: blur(4px); animation: fade .22s both; }
.wc-card { position: relative; width: min(340px, 100%); padding: 20px 18px 18px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #c11f70, #a81a61); border: 1px solid rgba(255, 220, 238, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: pop .26s var(--ease) both; }
.wc-ico { display: block; width: 72px; height: 72px; margin: 0 auto 6px; }
.wc-card h3 { margin: 0 0 4px; font-size: 20px; }
.wc-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--mut); }
.wc-table { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.wc-table > div { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 14px; font-size: 14px; font-weight: 700; }
.wc-table > div + div { border-top: 1px solid var(--line); }
.wc-table .wc-th { height: 32px; font-size: 12px; color: var(--mut); background: rgba(255, 214, 236, .06); }
.wc-table b { color: var(--gold); }
.wc-note { margin: 8px 0 14px; font-size: 12px; color: var(--mut); }
.wc-x { position: absolute; left: 50%; bottom: -56px; width: 38px; height: 38px; margin-left: -19px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .5); }
.wc-x .svg { width: 18px; height: 18px; }
.welcome.out { pointer-events: none; }
.welcome.out .mask { animation: fadeOut .24s ease both; }
.welcome.out .wc-card { animation: popOut .22s cubic-bezier(.4, 0, 1, 1) both; }

/* dúvidas */
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.faq details[open] { border-color: rgba(255, 214, 236, .35); background: rgba(255, 214, 236, .06); }
.faq summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px 0 14px; font-weight: 800; font-size: 14px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .svg { margin-left: auto; width: 16px; height: 16px; flex: none; color: var(--mut); transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] summary .svg { transform: rotate(-90deg); color: var(--cyan); }
.faq details p { margin: 0; padding: 0 14px 13px; color: var(--mut); font-size: 13.5px; line-height: 1.5; animation: fade .25s both; }
.faq-more { margin-top: 14px; gap: 8px; font-size: 14px; }
.faq-more .ic { width: 18px; height: 18px; }

/* loja coin */
.cs-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; margin-bottom: 12px;
  background: radial-gradient(90% 120% at 0 0, rgba(255, 200, 61, .2), transparent 60%), linear-gradient(135deg, #c11f70, #b11d67); border: 1px solid rgba(255, 210, 110, .3); }
.cs-hero img { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 6px 14px rgba(255, 182, 39, .4)); }
.cs-hero h3 { margin: 4px 0 2px; font-size: 22px; }
.cs-hero p { margin: 0; color: var(--mut); font-size: 13px; }
.cs-tag { display: inline-block; padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #3a2500; background: linear-gradient(180deg, #ffe08a, #ffb627); }
.cs-list { display: grid; gap: 8px; }
.cs-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--line); opacity: .75; }
.cs-item > .svg { width: 22px; height: 22px; flex: none; color: var(--cyan); }
.cs-item > .svg:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--mut); }
.cs-item b { display: block; font-size: 14px; }
.cs-item span { display: block; color: var(--mut); font-size: 12.5px; }
.cs-note { margin: 12px 0 0; text-align: center; color: var(--mut); font-size: 12.5px; }
.cs-tag.off { color: #fff; background: rgba(255, 255, 255, .16); }
.cs-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cs-wallet > div { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.cs-wallet > div:first-child { background: linear-gradient(135deg, rgba(255, 182, 39, .16), rgba(0, 0, 0, .2)); border-color: rgba(255, 182, 39, .35); }
.cs-wallet span { display: block; color: var(--mut); font-size: 12px; font-weight: 800; }
.cs-wallet b { display: block; margin: 2px 0; font-size: 22px; font-weight: 900; }
.cs-wallet > div:first-child b { color: var(--gold); }
.cs-wallet small { color: var(--mut); font-size: 12px; font-weight: 700; }
.cs-roll { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 182, 39, .1); border: 1px solid rgba(255, 182, 39, .3); }
.cs-roll > .svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.cs-roll b { display: block; font-size: 13.5px; }
.cs-roll span { display: block; color: var(--mut); font-size: 12px; }
.cs-field > .svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.cs-field input { min-width: 0; }
.cs-max { flex: none; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 900; color: var(--cyan); background: rgba(255, 214, 236, .12); }
.cs-calc { margin: 8px 2px 12px; color: var(--mut); font-size: 13px; }
.cs-calc b { color: var(--green); }
.cs-calc .bad { color: #ff9c9c; }
.cs-rules { margin: 12px 0 0; padding-left: 18px; color: var(--mut); font-size: 12.5px; line-height: 1.6; }
.cs-rules b { color: var(--txt); }
.fair-next{margin:-4px 0 10px;font-size:11px;color:var(--mut,#b29ab0);line-height:1.4}
.fair-next code,.fair-box code{display:block;font:10px/1.35 ui-monospace,monospace;word-break:break-all;color:#e4cfdb;opacity:.85}
.fair-box{display:grid;gap:4px;margin-top:6px;font-size:11px;line-height:1.35}
.fair-box b.ok{color:#7ff0a8}
.fair-box b.bad{color:#ff9c9c}

/* Sky Stackers: entrada, modo e partida ficam dentro do jogo; o palco ocupa o lugar dos painéis */
html.sky #betPanel, html.sky #startBtn, html.sky #gameLive, html.sky #treinoBar, html.sky #gameHelp { display: none !important; }
html.sky .stage.live { height: clamp(420px, calc(100dvh - var(--head) - env(safe-area-inset-top) - 100px), 960px); }