/* Jogar no Portal — jogarnoportal.com */
:root{
  --violet:#3D1A78;
  --violet-2:#5B2BB5;
  --pink:#FF3D7F;
  --pink-d:#D6125A;
  --orange:#FF8A00;
  --yellow:#FFD23F;
  --lime:#9BD43A;
  --teal:#00B8A9;
  --sky:#3A86FF;
  --sky-d:#2463D6;
  --ink:#1E1238;
  --ink-2:#4A3F66;
  --bg:#FFFFFF;
  --bg-soft:#F3EEFF;
  --card:#FFFFFF;
  --line:#E4DCF7;
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4EEFF;--ink-2:#CBBFE8;--bg:#150A30;--bg-soft:#1F1245;--card:#251653;--line:#3A2A6E;
  }
}
:root[data-theme="dark"]{
  --ink:#F4EEFF;--ink-2:#CBBFE8;--bg:#150A30;--bg-soft:#1F1245;--card:#251653;--line:#3A2A6E;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--pink-d)}
a:focus-visible,label:focus-visible,summary:focus-visible,.nav-toggle:focus-visible + .nav-btn{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--display);margin:0 0 .45em;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:760px){.wrap{padding:0 32px}}
section{padding:80px 0}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:36px}
.head-row h2{margin:0;max-width:20ch}
.head-row p{margin:0;max-width:46ch;color:var(--ink-2)}

/* rainbow bar */
.rainbow{height:6px;background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--lime),var(--teal),var(--sky),var(--violet-2))}

/* notice */
.notice{background:var(--bg-soft);font-size:.9rem;color:var(--ink-2)}
.notice .wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:9px;padding-bottom:9px;text-align:center}
.pill-18{flex:none;background:var(--pink-d);color:#fff;font:700 .75rem var(--display);padding:3px 9px;border-radius:999px}
.notice strong{color:var(--ink)}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;min-height:72px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.15rem var(--display);letter-spacing:-.02em}
.brand b{color:var(--pink)}
.brand-balls{display:inline-flex}
.brand-balls i{width:16px;height:16px;border-radius:50%;margin-right:-5px;border:2px solid var(--bg)}
.brand-balls i:nth-child(1){background:var(--pink)}
.brand-balls i:nth-child(2){background:var(--yellow)}
.brand-balls i:nth-child(3){background:var(--teal);margin-right:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:9px 13px;border-radius:999px}
.nav a:hover{background:var(--bg-soft)}
.nav a.nav-cta{background:var(--violet);color:#fff;margin-left:8px}
.nav a.nav-cta:hover{background:var(--violet-2)}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:14px;background:var(--bg-soft);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-btn span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
@media (max-width:940px){
  .nav-btn{display:flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:12px 16px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
  .nav a.nav-cta{margin:8px 0 0;text-align:center}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-toggle:checked + .nav-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked + .nav-btn span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 24px;border-radius:16px;font-weight:800;text-decoration:none;border:2px solid transparent;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:#2A1B00;box-shadow:0 4px 0 #D9A800}
.btn-line{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-line-ink{border-color:#1E1238;color:#1E1238}

/* hero */
.hero{position:relative;background:var(--violet);color:#fff;padding:72px 0 88px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,61,127,.45),transparent 45%),radial-gradient(circle at 10% 90%,rgba(0,184,169,.35),transparent 40%)}
.hero-in{position:relative;display:grid;gap:48px}
@media (min-width:980px){.hero-in{grid-template-columns:1.15fr .85fr;align-items:center}}
.hello{display:inline-block;background:rgba(255,255,255,.12);padding:6px 14px;border-radius:999px;font-weight:600;margin-bottom:20px}
.hero h1{max-width:16ch}
.hero-lead{font-size:1.12rem;opacity:.9;max-width:54ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-stats{list-style:none;padding:0;margin:40px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.hero-stats li{background:rgba(255,255,255,.1);border-radius:16px;padding:10px 16px;font-weight:600}
.hero-stats strong{font-family:var(--display);color:var(--yellow);margin-right:4px}

.confetti .b{position:absolute;display:grid;place-items:center;border-radius:50%;font:800 1rem var(--display);color:#fff;box-shadow:inset -6px -8px 0 rgba(0,0,0,.15)}
.b1{width:64px;height:64px;background:var(--pink);top:8%;left:46%;animation:float 6s ease-in-out infinite}
.b2{width:44px;height:44px;background:var(--orange);top:72%;left:52%;font-size:.85rem!important;animation:float 7s ease-in-out -2s infinite}
.b3{width:54px;height:54px;background:var(--teal);top:86%;left:6%;animation:float 8s ease-in-out -1s infinite}
.b4{width:38px;height:38px;background:var(--sky);top:12%;right:4%;font-size:.8rem!important;animation:float 6.5s ease-in-out -3s infinite}
.b5{width:34px;height:34px;background:var(--lime);color:#1E1238!important;top:4%;left:4%;font-size:.8rem!important}
.b6{width:48px;height:48px;background:var(--yellow);color:#2A1B00!important;bottom:6%;right:12%;font-size:.9rem!important;animation:float 7.5s ease-in-out -4s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (max-width:979px){.b1,.b2,.b4,.b5{display:none!important}}

/* ticket */
.ticket{margin:0;background:#fff;color:#1E1238;border-radius:24px;padding:22px 22px 18px;transform:rotate(2deg);box-shadow:0 24px 50px rgba(20,5,50,.45);max-width:420px;justify-self:center;width:100%;position:relative}
.ticket::before{content:"";position:absolute;left:0;right:0;top:64px;border-top:2px dashed #E4DCF7}
.ticket-head{display:flex;justify-content:space-between;align-items:center;font:800 1.15rem var(--display);color:var(--violet);margin-bottom:22px}
.ticket-tag{font:700 .72rem var(--body);background:var(--bg-soft);color:var(--violet-2);padding:4px 10px;border-radius:999px}
:root[data-theme="dark"] .ticket-tag{background:#F3EEFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ticket-tag{background:#F3EEFF}}
.ticket-sub{font-size:.85rem;font-weight:700;color:#4A3F66;margin:0 0 8px}
.grid50{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-bottom:16px}
.grid50 span,.stars span{display:grid;place-items:center;aspect-ratio:1;font-size:.72rem;font-weight:600;border-radius:6px;background:#F6F2FF;color:#4A3F66}
.grid50 .on{background:var(--pink);color:#fff;border-radius:50%;font-weight:800}
.stars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.stars span{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border-radius:0;font-size:.6rem;padding-top:3px}
.stars .on{background:var(--yellow);color:#2A1B00;font-weight:800}
.ticket figcaption{margin-top:16px;padding-top:12px;border-top:2px dashed #E4DCF7;font-size:.85rem;font-weight:700;color:var(--violet-2)}

/* week */
.week{background:var(--bg)}
.days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.d{border-radius:20px;padding:18px 14px 20px;min-height:190px;display:flex;flex-direction:column;gap:6px;min-width:0}
.dname{font:700 .95rem var(--display);margin-bottom:10px}
.d a{color:inherit;font-weight:700;font-size:.92rem;text-decoration:none;background:rgba(255,255,255,.25);padding:6px 10px;border-radius:10px;overflow-wrap:anywhere}
.d a:hover{background:rgba(255,255,255,.45)}
.c-pink{background:var(--pink-d);color:#fff}
.c-orange{background:var(--orange);color:#2A1300}
.c-yellow{background:var(--yellow);color:#2A1B00}
.c-lime{background:var(--lime);color:#13260A}
.c-teal{background:var(--teal);color:#062B27}
.c-sky{background:var(--sky-d);color:#fff}
.c-violet{background:var(--violet-2);color:#fff}
@media (max-width:980px){
  .days{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:620px){
  .days{grid-template-columns:1fr}
  .d{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px}
  .dname{margin:0 8px 0 0;width:100%}
}

/* games bento */
.games{background:var(--bg-soft)}
.bento{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.tile{border-radius:24px;padding:24px;display:flex;flex-direction:column;min-width:0}
.tile h3{font-size:1.25rem}
.tile p{font-size:.97rem}
.tile .when{font-weight:800;margin:auto 0 14px;padding-top:6px}
.tile-links{display:flex;flex-wrap:wrap;gap:8px}
.tile-links a{text-decoration:none;font-weight:800;font-size:.9rem;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.3);color:inherit}
.tile-links a:hover{background:rgba(255,255,255,.55)}
.t-big{grid-column:span 2;grid-row:span 2;padding:36px}
.t-big h3{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.t-big p{font-size:1.08rem;max-width:40ch}
.badge{align-self:flex-start;background:#fff;color:#C25E00;font-weight:800;font-size:.8rem;padding:5px 12px;border-radius:999px;margin-bottom:18px}
.t-orange{background:var(--orange);color:#2A1300}
.t-teal{background:var(--teal);color:#062B27}
.t-violet{background:var(--violet-2);color:#fff}
.t-violet .tile-links a,.t-pink .tile-links a,.t-sky .tile-links a{background:rgba(255,255,255,.18)}
.t-pink{background:var(--pink-d);color:#fff}
.t-yellow{background:var(--yellow);color:#2A1B00}
.t-sky{background:var(--sky-d);color:#fff}
.t-lime{background:var(--lime);color:#13260A}
.t-white{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.t-white .tile-links a{background:var(--bg-soft);color:var(--ink)}
@media (max-width:1020px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.t-big{grid-column:auto;grid-row:auto;padding:26px}}

/* quick */
.quick{background:var(--yellow);color:#2A1B00;padding:56px 0}
.quick-in{display:grid;gap:24px}
@media (min-width:900px){.quick-in{grid-template-columns:1fr auto;align-items:center}}
.quick h2{margin-bottom:.25em}
.quick p{margin:0}
.quick-btns{display:flex;flex-wrap:wrap;gap:10px}
.quick-btns a{background:#2A1B00;color:var(--yellow);text-decoration:none;font-weight:800;padding:13px 20px;border-radius:16px}
.quick-btns a:hover{background:var(--violet);color:#fff}

/* where */
.ops{display:grid;gap:20px}
@media (min-width:880px){.ops{grid-template-columns:1.5fr 1fr}}
.op{border-radius:28px;padding:34px}
.op h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.op-kind{font-weight:800;font-size:.9rem;margin-bottom:10px}
.op-main{background:linear-gradient(135deg,var(--pink-d),var(--violet-2));color:#fff}
.op-main .op-kind{color:var(--yellow)}
.op-alt{background:var(--card);border:2px solid var(--line)}
.op-alt .op-kind{color:var(--sky-d)}
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:8px}
.checks li{padding-left:30px;position:relative;font-weight:600}
.checks li::before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:#2A1B00;display:grid;place-items:center;font-size:.75rem;font-weight:800}
.op-btns{display:flex;flex-wrap:wrap;gap:12px}
.op .small{font-size:.85rem;color:var(--ink-2);margin:16px 0 0}

/* tools */
.tools-sec{background:var(--bg-soft)}
.tools{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tl{display:block;text-decoration:none;border-radius:20px;padding:22px 22px 24px;transition:transform .15s}
.tl:hover{transform:translateY(-3px) rotate(-1deg)}
.tl b{display:block;font:700 1.08rem var(--display);margin-bottom:4px}
.tl b::after{content:" ↗"}
.tl span{font-weight:600;opacity:.9}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:st}
@media (min-width:880px){.steps{grid-template-columns:repeat(3,1fr)}}
.st{counter-increment:st;background:var(--card);border:2px solid var(--line);border-radius:24px;padding:28px;position:relative}
.st::before{content:counter(st);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font:800 1.5rem var(--display);margin-bottom:18px;box-shadow:inset -5px -6px 0 rgba(0,0,0,.15)}
.s1::before{background:var(--pink);color:#fff}
.s2::before{background:var(--orange);color:#2A1300}
.s3::before{background:var(--teal);color:#062B27}
.st p{color:var(--ink-2)}
.st a{font-weight:800}

/* compare */
.guide-sec{padding-top:0}
.compare{display:grid;gap:18px}
@media (min-width:880px){.compare{grid-template-columns:repeat(3,1fr)}}
.cmp{border-radius:24px;padding:28px;background:var(--bg-soft);border-top:8px solid var(--orange)}
.cmp:nth-child(2){border-top-color:var(--sky)}
.cmp:nth-child(3){border-top-color:var(--lime)}
.cmp dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}
.cmp dt{font-weight:800;font-size:.85rem;color:var(--ink-2);padding-top:2px}
.cmp dd{margin:0}
.cmp a{font-weight:800}

/* faq */
.faq-sec{background:var(--bg-soft)}
.faq{display:grid;gap:12px}
@media (min-width:880px){.faq{grid-template-columns:1fr 1fr;align-items:start}}
.faq details{background:var(--card);border-radius:18px;border:2px solid var(--line)}
.faq details[open]{border-color:var(--pink)}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 22px;font-weight:800;font-size:1.02rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#2A1B00;display:grid;place-items:center;font-weight:800;transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--pink);color:#fff}
.faq details p{padding:0 22px 20px;margin:0;color:var(--ink-2)}

/* safe */
.safe{background:var(--teal);color:#062B27}
.safe-in{display:grid;gap:26px}
@media (min-width:900px){.safe-in{grid-template-columns:auto 1fr auto;align-items:center}}
.safe-badge{width:110px;height:110px;border-radius:50%;background:#062B27;color:var(--yellow);display:grid;place-items:center;font:800 2.2rem var(--display)}
.safe h2{margin-bottom:.3em}
.safe p{margin:0;max-width:60ch}
.safe-btns{display:flex;flex-wrap:wrap;gap:10px}
.safe .btn-ink{background:#062B27;color:#fff}
.safe .btn-line-ink{border-color:#062B27;color:#062B27}

/* footer */
.foot{background:#1A0B3B;color:#CFC3EE;font-size:.95rem}
.foot .wrap{padding-top:60px;padding-bottom:28px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{color:var(--yellow)}
.brand-light{color:#fff}
.brand-light .brand-balls i{border-color:#1A0B3B}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.foot-about{grid-column:span 2;max-width:340px}
@media (max-width:600px){.foot-about{grid-column:auto}}
.foot-about p{margin-top:14px}
.domain{font-weight:800;color:var(--yellow)}
.foot h4{font-size:.95rem;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.helpers{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:48px 0 28px}
.helpers a,.helpers div{display:block;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.helpers b{display:block;color:#fff;font-family:var(--display);font-size:.95rem;margin-bottom:2px}
.helpers span{color:#CFC3EE;font-size:.88rem}
.legal{font-size:.85rem;line-height:1.6;color:#A99BD0;max-width:95ch}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#A99BD0}