/* ==========================================================
   gachapons
   Robinhood green #00C805 · Pons lime #d4fc50
   Setting: the gacha corner of a 7-Eleven
   ========================================================== */
:root{
  --rh:#00C805; --rh-dim:#00930A; --rh-glow:rgba(0,200,5,.32);
  --lime:#d4fc50;
  --sev-o:#F58220; --sev-g:#007D48; --sev-r:#EE2E24;

  --wall:#F4F6F3; --wall-2:#E9ECE7; --floor:#FBFCFA; --tile:rgba(10,12,10,.07);
  --ink:#0C0E0C; --ink-2:#585E56; --ink-3:#8D938B;

  --body-1:#FAFBF8; --body-2:#D6DBD2; --body-3:#B0B6AD; --body-4:#8B918A;

  --line:rgba(10,12,10,.13); --line-2:rgba(10,12,10,.065);

  --t-dust:#9AA096; --t-common:#189FE0; --t-rare:#7C57EE; --t-epic:#F5439A;
  --t-legend:#F57C00; --t-relic:#E01C12; --t-gold:#E0A800;

  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --jp:'Noto Sans JP',var(--sans);

  --sh-1:0 1px 2px rgba(10,12,10,.05),0 2px 10px rgba(10,12,10,.05);
  --sh-2:0 3px 8px rgba(10,12,10,.07),0 16px 40px rgba(10,12,10,.10);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* .btn/.pshare tem display proprio e ganhavam do [hidden] */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.07}
p{margin:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.mono{font-family:var(--mono)}
.wrap{width:min(1240px,calc(100% - 40px));margin-inline:auto;position:relative;z-index:2}
@media(max-width:640px){.wrap{width:calc(100% - 26px)}}

/* ---------- the store ---------- */
.store{position:absolute;inset:0 0 auto;height:1020px;z-index:0;overflow:hidden;pointer-events:none}
.store__wall{position:absolute;inset:0 0 300px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(233,236,231,0) 48%),
    repeating-linear-gradient(90deg,transparent 0 187px,rgba(10,12,10,.04) 187px 188px)}
.store__tube{position:absolute;left:50%;transform:translateX(-50%);top:0;width:min(780px,88%);height:8px;
  border-radius:0 0 6px 6px;background:linear-gradient(180deg,#fff,#F0F8EF);
  box-shadow:0 0 56px 20px rgba(255,255,255,.95),0 0 120px 56px rgba(212,252,80,.12)}
.store__light{position:absolute;left:50%;top:-200px;transform:translateX(-50%);width:150%;height:440px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.98),rgba(255,255,255,.5) 42%,transparent 72%);filter:blur(6px)}
.store__floor{position:absolute;left:-30%;right:-30%;bottom:0;height:330px;background:var(--floor);
  transform:perspective(560px) rotateX(58deg);transform-origin:top center;
  background-image:linear-gradient(var(--tile) 1px,transparent 1px),linear-gradient(90deg,var(--tile) 1px,transparent 1px);
  background-size:74px 74px}
.store__floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,246,243,.1),var(--wall) 74%)}
.store__shadow{position:absolute;left:50%;transform:translateX(-50%);top:650px;width:330px;height:30px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(10,12,10,.16),transparent 72%);filter:blur(8px)}
@media(max-width:980px){.store{height:780px}}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;backdrop-filter:blur(16px) saturate(1.2);
  background:color-mix(in srgb,var(--wall) 85%,transparent);border-bottom:1px solid var(--line-2)}
.hd__in{display:flex;align-items:center;gap:18px;height:60px}
.brand{font-weight:900;font-size:21px;letter-spacing:-.06em;text-decoration:none;flex-shrink:0}
.brand i{font-style:normal;color:var(--rh)}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{padding:7px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:.16s}
.nav a:hover{background:rgba(10,12,10,.05);color:var(--ink)}
.sp{flex:1}
.tag{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.tag b{width:5px;height:5px;border-radius:50%;background:var(--rh);box-shadow:0 0 0 3px rgba(0,200,5,.18)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;
  font-weight:700;font-size:14px;transition:.16s;white-space:nowrap}
.btn--g{background:var(--rh);color:#032B08;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 18px var(--rh-glow)}
.btn--g:hover{background:#0ADB10;transform:translateY(-1px)}
.btn--o{border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink)}
.btn--o:hover{background:#fff;border-color:rgba(10,12,10,.22)}
@media(max-width:960px){.nav{display:none}}
@media(max-width:520px){.hd__in .tag{display:none}}

/* ---------- help (?) ---------- */
.q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;vertical-align:middle;
  border:1px solid rgba(10,12,10,.22);background:rgba(255,255,255,.8);color:var(--ink-3);
  font-size:10px;font-weight:800;line-height:1;cursor:pointer;transition:.15s;margin-left:5px;flex-shrink:0}
.q:hover,.q[aria-expanded=true]{background:var(--rh);border-color:var(--rh);color:#032B08}
.pop{position:fixed;z-index:300;width:min(310px,calc(100vw - 28px));padding:15px 16px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(10,12,10,.18);display:none;
  font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.pop.on{display:block;animation:popin .16s ease-out}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}}
.pop b{display:block;color:var(--ink);font-size:14px;font-weight:800;margin-bottom:5px;letter-spacing:-.02em}
.pop a{display:flex;width:fit-content;align-items:center;gap:5px;margin-top:10px;color:var(--rh-dim);
  font-weight:700;text-decoration:none;font-size:13px}
.pop a:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(320px,478px) 1fr;gap:52px;align-items:start;padding:42px 0 24px}
@media(max-width:980px){.hero{grid-template-columns:1fr;gap:26px;padding-top:20px}}
.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.eyebrow em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow hr{flex:1;height:1px;border:0;background:var(--line);margin:0}
h1.title{font-size:clamp(37px,5.2vw,61px);letter-spacing:-.05em;font-weight:900}
h1.title i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--rh-dim)}
.lede{margin-top:19px;font-size:17.5px;line-height:1.5;color:var(--ink-2);max-width:45ch}
.lede b{color:var(--ink);font-weight:600}

.free{margin-top:21px;display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(0,200,5,.34);background:linear-gradient(100deg,rgba(0,200,5,.08),rgba(212,252,80,.07))}
.free svg{flex-shrink:0;margin-top:2px}
.free p{font-size:14px;color:var(--ink-2)}
.free b{color:var(--ink);font-weight:700}

.ticket{margin-top:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.75);
  box-shadow:var(--sh-1);overflow:hidden}
.ticket__top{display:flex;align-items:center;gap:14px;padding:15px 17px}
.qty{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.qty button{width:44px;height:40px;font-weight:800;font-size:14px;color:var(--ink-2);transition:.14s;font-variant-numeric:tabular-nums}
.qty button+button{border-left:1px solid var(--line-2)}
.qty button:hover{background:var(--wall-2);color:var(--ink)}
.qty button.on{background:var(--ink);color:#fff}
.cost{margin-left:auto;text-align:right;line-height:1.15}
.cost small{display:block;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.cost strong{font-size:23px;font-weight:800;letter-spacing:-.035em}
.go{display:block;width:100%;height:56px;background:var(--rh);color:#032B08;font-weight:900;font-size:16px;
  letter-spacing:.02em;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transition:.16s}
.go:hover{background:#0ADB10}
.go:disabled{background:var(--wall-2);color:var(--ink-3);cursor:wait}

.honest{margin-top:13px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.honest div{background:rgba(255,255,255,.72);padding:12px 14px}
.honest dt{display:flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.honest dd{margin:0;font-size:17px;font-weight:800;letter-spacing:-.035em}
.honest dd em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-3)}
@media(max-width:560px){.honest{grid-template-columns:1fr 1fr}.honest div:last-child{grid-column:1/-1}}
.fine{margin-top:13px;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:54ch}

/* ---------- machines ---------- */
.stage{position:sticky;top:80px;display:flex;flex-direction:column;align-items:center;padding-top:2px}
@media(max-width:980px){.stage{position:static;order:-1}}
.row{display:flex;align-items:flex-end;justify-content:center}
.machine{width:324px;position:relative;filter:drop-shadow(0 30px 36px rgba(10,12,10,.20))}
@media(max-width:400px){.machine{width:284px}}

.crown{height:66px;border-radius:15px 15px 3px 3px;position:relative;
  background:linear-gradient(178deg,#FFFFFF,#F6F7F4 70%,#E8EAE5);
  border:1px solid rgba(10,12,10,.19);box-shadow:0 1px 0 rgba(255,255,255,.95) inset;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden}
/* the Seven stripes live on the machine, wrapping it under the sign */
.band{height:15px;display:flex;flex-direction:column;position:relative;z-index:3;
  border-left:1px solid rgba(10,12,10,.19);border-right:1px solid rgba(10,12,10,.19);
  box-shadow:0 1px 3px rgba(10,12,10,.22)}
.band i{height:33.334%}
.band i:nth-child(1){background:var(--sev-o)}
.band i:nth-child(2){background:var(--sev-g)}
.band i:nth-child(3){background:var(--sev-r)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 45%,rgba(10,12,10,.16))}
.crown b{font-weight:900;font-size:22px;letter-spacing:-.06em}
.crown b i{font-style:normal;color:var(--rh-dim)}
.crown u{text-decoration:none;font-family:var(--jp);font-weight:700;font-size:9px;letter-spacing:.26em;color:var(--ink-3)}

.dome{position:relative;margin:0 auto;width:100%;height:244px;border-radius:0 0 24px 24px;overflow:hidden;
  background:linear-gradient(180deg,#FEFFFE,#EFF2EE);border:1px solid rgba(10,12,10,.19);border-top:0}
.dome__glass{position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen;
  background:linear-gradient(104deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.12) 21%,transparent 39%,transparent 63%,rgba(255,255,255,.32) 85%,rgba(255,255,255,.05) 100%),
    radial-gradient(122% 80% at 50% 4%,rgba(255,255,255,.7),transparent 55%)}
.dome__glass::after{content:"";position:absolute;left:8%;top:5%;width:22%;height:50%;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,0));filter:blur(6px)}
.dome__shade{position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 38px rgba(10,12,10,.12),inset 0 -18px 26px rgba(10,12,10,.08)}
.caps{position:absolute;inset:0;z-index:2}
.cap{position:absolute;width:45px;height:45px;border-radius:50%;
  background:linear-gradient(180deg,var(--c) 0 49.5%,rgba(253,253,251,.96) 50.5% 100%);
  box-shadow:inset 0 -9px 12px rgba(10,12,10,.18),inset 0 7px 10px rgba(255,255,255,.62),
    0 0 0 1px rgba(10,12,10,.13), 0 4px 7px rgba(10,12,10,.22);
  animation:jostle var(--d,5s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.cap::before{content:"";position:absolute;left:20%;top:12%;width:32%;height:26%;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(255,255,255,0))}
.cap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1.5px);height:3px;
  background:linear-gradient(90deg,rgba(10,12,10,.05),rgba(10,12,10,.19),rgba(10,12,10,.05))}
.cap--gold{background:linear-gradient(180deg,#FBDD74 0 49.5%,#E0A800 50.5% 100%);
  box-shadow:inset 0 -9px 12px rgba(120,80,0,.3),inset 0 7px 10px rgba(255,255,255,.6),
    0 0 0 1px rgba(224,168,0,.55),0 0 24px rgba(224,168,0,.6);
  animation:jostle var(--d,5s) ease-in-out infinite,gp 2.6s ease-in-out infinite}
@keyframes jostle{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(2px,-3px) rotate(5deg)}
  50%{transform:translate(-2px,2px) rotate(-4deg)}75%{transform:translate(3px,1px) rotate(3deg)}}
@keyframes gp{50%{filter:brightness(1.13)}}

.face{position:relative;margin-top:-1px;height:182px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,var(--body-1),var(--body-2) 44%,var(--body-3));
  border:1px solid rgba(10,12,10,.19);box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
.face::after{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1px,transparent 1px 3px)}
.plate{position:absolute;left:17px;top:17px;padding:6px 11px 5px;border-radius:8px;z-index:3;
  background:var(--rh);color:#032B08;box-shadow:0 3px 10px rgba(0,200,5,.35)}
.plate strong{font-size:17px;font-weight:900;letter-spacing:-.035em}
.plate small{display:block;font-family:var(--jp);font-size:8px;font-weight:700;letter-spacing:.18em;color:rgba(3,43,8,.6);margin-top:-2px}
.slot{position:absolute;right:22px;top:23px;width:62px;height:11px;border-radius:3px;z-index:3;
  background:linear-gradient(180deg,#15181A,#3C4142);box-shadow:0 1px 0 rgba(255,255,255,.85),inset 0 2px 3px rgba(0,0,0,.7)}
.slot::after{content:"COIN";position:absolute;top:15px;left:0;right:0;text-align:center;font-size:7.5px;
  font-weight:800;letter-spacing:.18em;color:var(--ink-3)}
.crank{position:absolute;left:50%;top:56px;transform:translateX(-50%);width:72px;height:72px;z-index:4;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF,#DCDFDA 42%,#A8ADA6 74%,#787D77);
  box-shadow:0 3px 0 rgba(10,12,10,.2),0 8px 16px rgba(10,12,10,.22),inset 0 -3px 6px rgba(10,12,10,.2);
  display:grid;place-items:center;cursor:pointer}
.crank__in{width:50px;height:50px;border-radius:50%;position:relative;
  background:linear-gradient(150deg,#FDFEFC,#C6CBC4);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.95),inset 0 -3px 6px rgba(10,12,10,.2);display:grid;place-items:center}
.crank__bar{position:absolute;width:6px;height:32px;border-radius:3px;background:linear-gradient(180deg,#8B908A,#5A5F59);top:9px;left:calc(50% - 3px)}
.crank__arrow{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:12px solid #5A5F59;transform:rotate(90deg)}
.machine.spin .crank__in{animation:cs .95s cubic-bezier(.34,.02,.2,1)}
@keyframes cs{to{transform:rotate(360deg)}}
.chute{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;width:110px;height:36px;
  border-radius:5px 5px 9px 9px;z-index:3;background:linear-gradient(180deg,#101314,#222626);
  box-shadow:inset 0 3px 9px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.9)}
.flap{position:absolute;inset:2px;border-radius:4px;transform-origin:top center;transition:transform .3s cubic-bezier(.3,1.4,.5,1);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16)}
.machine.open .flap{transform:rotateX(-72deg)}
.legs{display:flex;justify-content:space-between;padding:0 30px;margin-top:-1px}
.legs i{width:26px;height:12px;border-radius:0 0 5px 5px;background:linear-gradient(180deg,var(--body-3),var(--body-4))}

.tray{margin-top:24px;width:208px;height:72px;border-radius:14px;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));border:1px solid var(--line);
  box-shadow:inset 0 3px 10px rgba(10,12,10,.08);display:grid;place-items:center;backdrop-filter:blur(3px)}
.tray small{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tray .cap{position:absolute;animation:none;cursor:pointer;left:calc(50% - 26px);top:calc(50% - 26px);width:52px;height:52px}
.tray .cap.drop{animation:drop .75s cubic-bezier(.34,.9,.4,1.05)}
@keyframes drop{0%{transform:translate(0,-246px) scale(.72);opacity:0}40%{opacity:1}
  62%{transform:translate(0,6px) scale(1)}78%{transform:translate(0,-14px)}92%{transform:translate(0,2px)}100%{transform:translate(0,0)}}
.tray .cap.ready{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.hint{position:absolute;bottom:-23px;left:0;right:0;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-2);opacity:0;transition:.25s}
.hint.on{opacity:1}
.stack{margin-top:36px;display:flex;gap:6px;min-height:20px;flex-wrap:wrap;justify-content:center;max-width:280px}
.stack i{width:17px;height:17px;border-radius:50%;
  background:linear-gradient(180deg,var(--c) 0 50%,rgba(253,253,251,.96) 50% 100%);box-shadow:0 1px 3px rgba(10,12,10,.2)}

/* ---------- sections ---------- */
section{padding:64px 0;position:relative;z-index:2}
.sec-h{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(26px,3.3vw,37px);letter-spacing:-.045em}
.sec-h h2 i{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--rh-dim)}
.sec-h p{color:var(--ink-2);font-size:15px;max-width:46ch;margin-left:auto}
.rule{height:1px;background:var(--line);border:0;margin:0}

.odds{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.75);box-shadow:var(--sh-1)}
.orow{display:grid;grid-template-columns:42px 1.4fr 96px 1fr 92px;gap:16px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line-2);transition:.16s}
.orow:last-child{border-bottom:0}
.orow:hover{background:#fff}
.orow--h{background:rgba(10,12,10,.032);font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);padding:10px 20px}
.orow--h>div{display:flex;align-items:center}
.ocap{width:27px;height:27px;border-radius:50%;
  background:linear-gradient(180deg,var(--c) 0 50%,rgba(253,253,251,.96) 50% 100%);
  box-shadow:0 1px 3px rgba(10,12,10,.22),inset 0 -2px 4px rgba(10,12,10,.13)}
.oname{font-weight:700;letter-spacing:-.015em}
.oname small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:0}
.opct{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.obar{height:7px;border-radius:4px;background:rgba(10,12,10,.07);overflow:hidden}
.obar i{display:block;height:100%;border-radius:4px;background:var(--c)}
.oval{text-align:right;line-height:1.25;font-variant-numeric:tabular-nums}
.oval b{display:block;font-weight:800;letter-spacing:-.025em}
.oval small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:0}
@media(max-width:760px){
  .orow{grid-template-columns:34px 1fr auto;gap:11px;padding:12px 14px;row-gap:2px}
  .obar{display:none}.orow--h{display:none}
  .oname{grid-row:1}
  .oval{grid-column:3;grid-row:1;text-align:right;font-size:15px;color:var(--ink)}
  .oval small{display:none}
  .opct{grid-column:2;grid-row:2;font-size:12px;color:var(--ink-3);font-weight:700}}
.ofoot{padding:15px 20px;background:rgba(10,12,10,.035);font-size:13.5px;color:var(--ink-2);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ofoot b{color:var(--ink)}

.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:11px}
.tok{border:1px solid var(--line);border-radius:14px;padding:13px;background:rgba(255,255,255,.78);transition:.18s}
.tok:hover{transform:translateY(-2px);box-shadow:var(--sh-2);background:#fff}
.tok__t{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tok__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  font-weight:900;font-size:11.5px;color:#fff;letter-spacing:-.03em}
.tok__s{font-weight:800;font-size:14px;letter-spacing:-.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok__r{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.tok__n{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink-3)}
.tok__n b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.025em}

.shelf-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:16px;padding:26px 24px;
  background:rgba(255,255,255,.5);font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.shelf-empty b{display:block;color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.025em;margin-bottom:6px}
.gate{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px}
.gate>div{border:1px solid var(--line);border-radius:13px;padding:15px;background:rgba(255,255,255,.62);display:flex;gap:11px;align-items:flex-start}
.gate svg{flex-shrink:0;margin-top:1px}
.gate b{display:block;font-size:13.5px;font-weight:700;margin-bottom:2px}
.gate p{font-size:12.5px;color:var(--ink-2);line-height:1.5}

.gold{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center;border-radius:22px;padding:38px;
  border:1px solid rgba(224,168,0,.4);background:linear-gradient(135deg,rgba(224,168,0,.13),rgba(255,255,255,.7) 48%);box-shadow:var(--sh-1)}
@media(max-width:860px){.gold{grid-template-columns:1fr;gap:24px;padding:26px}}
.gold h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.045em;margin-bottom:13px}
.gold h3 i{font-family:var(--serif);font-style:italic;font-weight:400;color:#A87E00}
.gold>div>p{color:var(--ink-2);font-size:15.5px;max-width:52ch}
.gold ol{margin:20px 0 0;padding:0;list-style:none;counter-reset:g;display:grid;gap:11px}
.gold li{counter-increment:g;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.gold li>span{flex:1;min-width:0}   /* o texto e UM bloco so; sem isso cada <b> vira coluna */
.gold li::before{content:counter(g);flex-shrink:0;width:22px;height:22px;border-radius:7px;background:var(--ink);
  color:var(--rh);display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.gold li b{color:var(--ink);font-weight:700}
.gcap{width:196px;height:196px;border-radius:50%;margin-inline:auto;position:relative;
  background:linear-gradient(180deg,#FBDD74 0 49.5%,#DFA400 50.5% 100%);
  box-shadow:inset 0 -18px 26px rgba(120,80,0,.32),inset 0 14px 22px rgba(255,255,255,.62),
    0 18px 40px rgba(224,168,0,.4),0 0 0 1px rgba(168,126,0,.4);animation:gf 5.5s ease-in-out infinite}
.gcap::before{content:"";position:absolute;left:19%;top:12%;width:34%;height:28%;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.gcap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 2.5px);height:5px;
  background:linear-gradient(90deg,rgba(90,60,0,.18),rgba(90,60,0,.5),rgba(90,60,0,.18))}
@keyframes gf{50%{transform:translateY(-11px) rotate(-3deg)}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:13px}
.card{border:1px solid var(--line);border-radius:16px;padding:21px;background:rgba(255,255,255,.75)}
.card h4{display:flex;align-items:center;font-size:16px;letter-spacing:-.03em;margin-bottom:8px}
.card p{font-size:14px;color:var(--ink-2);line-height:1.55}

.log{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.7)}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:13.5px}
.lrow:last-child{border-bottom:0}
.lrow i{width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(180deg,var(--c) 0 50%,rgba(253,253,251,.96) 50% 100%);box-shadow:0 1px 2px rgba(10,12,10,.22)}
.lrow .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}
.lempty{padding:25px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}

.ov{position:fixed;inset:0;z-index:200;display:none;place-items:start center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:24px 24px max(24px,env(safe-area-inset-bottom));
  background:rgba(8,12,8,.58);backdrop-filter:blur(10px)}
.ov.on{display:grid}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.burst{position:absolute;inset:-70px;pointer-events:none;opacity:0}
@keyframes bu{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
.burst i{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%}

footer{border-top:1px solid var(--line);padding:40px 0 56px;margin-top:14px;position:relative;z-index:2}
.ft{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.ft p{font-size:12.5px;color:var(--ink-3);max-width:58ch;line-height:1.6}
.ftl{margin-left:auto;display:flex;gap:20px;font-size:13.5px}
.ftl a{color:var(--ink-2);text-decoration:none;font-weight:500}
.ftl a:hover{color:var(--ink)}

/* ================= carteira / pagamento ================= */
.cost span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-top:1px}
#act{display:grid;gap:1px;background:var(--line-2)}
#act .go{width:100%}
#act .go--alt{background:#fff;color:var(--ink);box-shadow:none;border-top:1px solid var(--line-2);height:50px;font-size:15px}
#act .go--alt:hover{background:var(--wall-2)}
#act .go--warn{background:var(--sev-o);color:#2A1300}
#act .go--warn:hover{background:#ff9438}
.actnote{margin:0;padding:11px 17px;font-size:12.5px;line-height:1.5;color:var(--ink-3);
  background:rgba(10,12,10,.03);border-top:1px solid var(--line-2)}
.actnote:empty{display:none}
.actnote b{color:var(--ink-2)}
.actnote a{color:var(--rh-dim);font-weight:600}
.actnote--bad{color:#B41109;background:rgba(238,46,36,.07)}
.actnote--bad b{color:#8E0D07}

/* pill de conta no header */
.acct{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 12px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.7);font-size:13.5px;font-weight:700}
.acct i{width:7px;height:7px;border-radius:50%;background:var(--rh);flex-shrink:0}
.acct .x{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);font-size:15px;line-height:1}
.acct .x:hover{background:rgba(10,12,10,.07);color:var(--ink)}

/* folha modal (carteira / envio) */
.sheet{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:22px;
  background:rgba(8,12,8,.5);backdrop-filter:blur(8px)}
.sheet[hidden]{display:none}
.sheet__box{width:min(432px,100%);max-height:88vh;overflow-y:auto;background:#fff;border-radius:20px;
  border:1px solid var(--line);box-shadow:0 24px 70px rgba(10,12,10,.28);padding:22px;
  animation:pop .28s cubic-bezier(.2,1.25,.4,1)}
.sheet__h{display:flex;align-items:center;margin-bottom:14px}
.sheet__h b{font-size:19px;font-weight:800;letter-spacing:-.035em}
.sheet__x{margin-left:auto;width:30px;height:30px;border-radius:9px;font-size:22px;line-height:1;color:var(--ink-3)}
.sheet__x:hover{background:var(--wall-2);color:var(--ink)}
.sheet__note{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.sheet__note b{color:var(--ink);font-weight:700}
.picks{display:grid;gap:8px}
.pick{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:13px;
  border:1px solid var(--line);background:#fff;font-weight:700;font-size:15px;text-align:left;transition:.15s}
.pick:hover{border-color:var(--rh);background:rgba(0,200,5,.05)}
.pick img{width:28px;height:28px;border-radius:8px;flex-shrink:0}
.pick span{margin-left:auto;color:var(--ink-3);font-size:13px;font-weight:600}
.warn{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:13px;margin-bottom:16px;
  border:1px solid rgba(238,46,36,.32);background:rgba(238,46,36,.06);font-size:13px;line-height:1.55;color:var(--ink-2)}
.warn svg{flex-shrink:0;margin-top:1px}
.warn b{color:#B41109}
.field{margin-bottom:13px}
.field label{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.copyrow{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--wall)}
.copyrow code{flex:1;min-width:0;padding:11px 13px;font-family:var(--mono);font-size:13px;color:var(--ink);
  overflow-x:auto;white-space:nowrap;background:none;border:0;border-radius:0}
.copy{padding:0 14px;font-size:12.5px;font-weight:800;color:var(--ink-2);border-left:1px solid var(--line);
  background:#fff;white-space:nowrap;transition:.15s}
.copy:hover{background:var(--wall-2);color:var(--ink)}
.copy.ok{background:var(--rh);color:#032B08;border-left-color:var(--rh)}
.copy:disabled{color:var(--ink-3);cursor:not-allowed;background:var(--wall-2)}
.copy:disabled:hover{background:var(--wall-2);color:var(--ink-3)}
.qr{display:grid;place-items:center;padding:14px 0 2px}
.qr canvas,.qr img{border-radius:12px;border:1px solid var(--line);background:#fff;padding:8px}
.qr:empty{display:none}

/* ================= reveal: card de prêmio ================= */
.ovb{width:min(468px,100%);text-align:center;margin-block:auto}
.split{position:relative;width:150px;height:150px;margin:0 auto -46px;z-index:2}
.half{position:absolute;left:0;width:150px;height:75px;overflow:hidden;
  transition:transform .55s cubic-bezier(.3,1.12,.4,1), opacity .45s ease .35s}
.half i{position:absolute;left:0;width:150px;height:150px;border-radius:50%;display:block;
  background:linear-gradient(180deg,var(--c) 0 50%,rgba(253,253,251,.97) 50% 100%);
  box-shadow:inset 0 -12px 18px rgba(10,12,10,.2),inset 0 10px 16px rgba(255,255,255,.55)}
.half--t{top:0}.half--t i{top:0}
.half--b{top:75px}.half--b i{top:-75px}
.ov.op .half--t{transform:translateY(-58px) rotate(-15deg);opacity:0}
.ov.op .half--b{transform:translateY(34px) rotate(10deg);opacity:0}

.pcard{position:relative;z-index:3;background:#fff;border-radius:22px;padding:56px 26px 20px;
  border:1px solid rgba(10,12,10,.1);box-shadow:0 30px 80px rgba(6,10,6,.45);
  opacity:0;transform:translateY(20px) scale(.96);transition:.45s .2s cubic-bezier(.2,1.2,.4,1)}
.ov.op .pcard{opacity:1;transform:none}
.ov--gold .pcard{box-shadow:0 30px 80px rgba(6,10,6,.45),0 0 0 1px rgba(224,168,0,.5),0 0 60px rgba(224,168,0,.35)}

.ptier{font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.pval{font-size:clamp(38px,9vw,54px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.pwhat{margin-top:8px;font-size:16px;color:var(--ink-2);font-weight:500}
.prare{margin-top:12px;display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(10,12,10,.05);border:1px solid var(--line-2);
  font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.ppot{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 14px;border-radius:12px;background:rgba(224,168,0,.1);border:1px solid rgba(224,168,0,.32)}
.ppot span{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8A6800}
.ppot b{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.ppot[hidden]{display:none}

.pshare{margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--wall)}
.pshare[hidden]{display:none}
.pshare canvas{display:block;width:100%;height:auto}

.ova{margin-top:16px;display:flex;gap:9px;justify-content:center}
.ova .btn{flex:1;height:44px}
.ova--sub{margin-top:10px;gap:20px;padding-top:12px;border-top:1px solid var(--line-2)}
.lnk{font-size:13.5px;font-weight:700;color:var(--ink-3);padding:4px 2px;border-radius:6px;transition:.15s}
.lnk:hover{color:var(--ink)}

.burst{position:absolute;inset:-70px;pointer-events:none;opacity:0}
.ov.op .burst{animation:bu 1s ease-out}
.burst i{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:400;
  padding:11px 18px;border-radius:12px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.24s cubic-bezier(.2,1.2,.4,1);box-shadow:0 12px 34px rgba(10,12,10,.3)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:520px){
  .pcard{padding:50px 18px 16px}
  .ova{flex-direction:column}
}
