/* Home — flor-termômetro e minigame */
html{scroll-behavior:smooth}
body{margin:0;background:#F4F3FA;color:#1E1E1E;font-family:'DM Sans',system-ui,sans-serif}
a{color:#235B43}a:hover{color:#1A4532}
.bg-disc{display:block;padding:0;border:none;background:transparent;border-radius:50%;cursor:grab;touch-action:none;width:min(420px,72vw,46vh)}
.bg-disc:active{cursor:grabbing}
.bg-disc:focus-visible{outline:3px solid #235B43;outline-offset:10px}
.bg-term{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:0 32px;border-radius:999px;border:2px solid #235B43;color:#235B43;text-decoration:none;font-weight:700;font-size:26px;letter-spacing:-0.01em;will-change:transform,opacity;transform-origin:50% 0;text-decoration-thickness:3px;text-underline-offset:7px;transition:background-color .2s ease}
.bg-term:hover,.bg-term:focus-visible{background:#DCEFE4}
.bg-leaf{position:absolute;inset:0;opacity:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lf0{-webkit-mask-image:url(../img/folhas/folha-0.png);mask-image:url(../img/folhas/folha-0.png)}
.lf1{-webkit-mask-image:url(../img/folhas/folha-1.png);mask-image:url(../img/folhas/folha-1.png)}
.lf2{-webkit-mask-image:url(../img/folhas/folha-2.png);mask-image:url(../img/folhas/folha-2.png)}
.lf3{-webkit-mask-image:url(../img/folhas/folha-3.png);mask-image:url(../img/folhas/folha-3.png)}
.lf4{-webkit-mask-image:url(../img/folhas/folha-4.png);mask-image:url(../img/folhas/folha-4.png)}
.lfall{-webkit-mask-image:url(../img/folhas/petalas.png);mask-image:url(../img/folhas/petalas.png)}
.bg-dot{width:8px;height:8px;border-radius:50%;background:rgba(35,91,67,0.25);transition:width .25s ease,height .25s ease}
.bg-seq{width:12px;height:12px;border-radius:50%;border:2px solid #235B43;box-sizing:border-box;transition:background-color .15s ease}
.bg-soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid #235B43;color:#235B43;transition:background-color .2s ease,color .2s ease}
.bg-soc:hover,.bg-soc:focus-visible{background:#235B43;color:#F4F3FA}
.bg-mute{background:transparent;padding:0;cursor:pointer;font:inherit}
.bg-policies{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.bg-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;border:1px solid #1E1E1E;color:#1E1E1E;text-decoration:none;font-size:12px;font-weight:500}
.bg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid #235B43;background:transparent;color:#235B43;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:background-color .2s ease}
.bg-btn:hover,.bg-btn:focus-visible{background:#DCEFE4}
.bg-btn-solid{background:#235B43;color:#F4F3FA}
.bg-btn-solid:hover,.bg-btn-solid:focus-visible{background:#1A4532}
.bg-pick:hover,.bg-pick:focus-visible{background:#235B43;color:#F4F3FA}
.bg-mode{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:8px 26px}
@keyframes bgshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.bg-shake{animation:bgshake .35s ease}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.bg-shake{animation:none}}
.bg-term[aria-disabled="true"]{cursor:default}
.bg-term[aria-disabled="true"]:hover,.bg-term[aria-disabled="true"]:focus-visible{background:transparent}
a,button{-webkit-tap-highlight-color:transparent}
.bg-disc{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.bg-contact{display:flex;flex-direction:column;align-items:center;margin-bottom:-8px}
.bg-contact-btn{min-height:40px;padding:0 18px;font-size:14px;font-weight:600}
.bg-contact-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;animation:bgpop .18s ease}
.bg-contact-opts[hidden]{display:none}
.bg-contact-note{flex-basis:100%;margin:2px 0 0;font-size:12px;color:#6B6B6B;text-align:center}
@keyframes bgpop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.bg-contact-opts{animation:none}}
.bg-contact-btn[hidden]{display:none}
.bg-intro{position:fixed;inset:0;z-index:100000;background:#F4F3FA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;transition:opacity .3s ease}
.bg-intro[hidden]{display:none}
.bg-intro.bg-out{opacity:0;pointer-events:none}
.bg-intro-flor{width:min(220px,55vw);height:auto}
.bg-intro-go{min-height:56px;padding:0 30px;font-size:20px}
.bg-intro-mute{border:none;background:transparent;font:inherit;font-size:13px;color:#6B6B6B;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@keyframes bgflash{0%{box-shadow:0 0 0 0 rgba(46,158,110,.55)}100%{box-shadow:0 0 0 14px rgba(46,158,110,0)}}
.bg-contact-opts.bg-flash .bg-contact-btn{animation:bgflash .9s ease 2}
@media (prefers-reduced-motion: reduce){.bg-intro{transition:none}.bg-contact-opts.bg-flash .bg-contact-btn{animation:none}}
.bg-contact-opts{flex-wrap:wrap}
.bg-contact-opts .bg-contact-btn{min-width:120px}
/* contact buttons: identical outlines; green fill only while pressed (and on mouse hover / keyboard focus) */
.bg-contact-opts .bg-contact-btn:active{background:#235B43;color:#F4F3FA}
@media (hover: none){.bg-contact-opts .bg-contact-btn:hover{background:transparent;color:#235B43}.bg-contact-opts .bg-contact-btn:active{background:#235B43;color:#F4F3FA}}
.bg-install{background:#235B43;color:#F4F3FA;border-color:#235B43;cursor:pointer;font:inherit;font-size:12px;font-weight:600}
.bg-install[hidden]{display:none}
/* botão de idioma (PT · EN · ES · FR) */
.bg-lang{position:relative;z-index:60;font-family:"DM Sans",system-ui,sans-serif}
.bg-lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid #235B43;background:transparent;color:#235B43;font:inherit;font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer}
.bg-lang-btn:hover,.bg-lang-btn:focus-visible,.bg-lang-btn[aria-expanded="true"]{background:#235B43;color:#F4F3FA}
.bg-lang-list{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#FFFFFF;border:1px solid #235B43;border-radius:12px;box-shadow:0 8px 24px rgba(30,30,30,.12);min-width:140px}
.bg-lang-list[hidden]{display:none}
.bg-lang-list a{display:block;padding:8px 12px;border-radius:8px;color:#235B43;text-decoration:none;font-size:14px;font-weight:500}
.bg-lang-list a:hover,.bg-lang-list a:focus-visible{background:#DCEFE4;outline:none}
.bg-lang-list a[aria-current="true"]{font-weight:700}
.bg-lang-fixed{position:absolute;top:14px;right:clamp(12px,3vw,28px)}
body.admin-bar .bg-lang-fixed{top:60px}
.bg-lang-head{justify-self:end}
@media (max-width:560px){.bg-lang-head{justify-self:center}.bg-lang-head .bg-lang-list{right:auto;left:50%;transform:translateX(-50%)}}
.bg-translation-note{font-size:14px!important;color:#6B6B6B!important;margin:4px 0 24px!important}
.bg-push{background:transparent;color:#235B43;border-color:#235B43;cursor:pointer;font:inherit;font-size:12px;font-weight:600}
.bg-push[hidden]{display:none}
.bg-push:disabled{opacity:.8;cursor:default}
.bg-app-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bg-app-row:not(:has(> :not([hidden]))){display:none}
.bg-app-row .bg-pill{min-height:36px;padding:0 16px;font-size:13px}
/* footer kept tight so the install button and the policies fit on a phone screen */
.bg-contact:not(:has(.bg-contact-opts:not([hidden]))){display:none}
.bg-home-foot .bg-contact{margin:2px 0}
@media (max-height: 760px){
  .bg-home-main{gap:clamp(16px,3vh,28px)!important;padding-top:clamp(20px,4vh,40px)!important;padding-bottom:clamp(14px,2.5vh,24px)!important}
  .bg-home-main #menuBox{min-height:88px!important;gap:14px!important}
}
/* never let the footer climb over the menu: on very short screens the flower shrinks instead */
@media (max-height: 640px){
  .bg-disc{width:min(420px,72vw,40vh)}
  .bg-home-main{gap:clamp(12px,2.4vh,20px)!important;padding-top:clamp(14px,3vh,28px)!important;padding-bottom:6px!important}
  .bg-home-main #menuBox{min-height:80px!important;gap:12px!important}
  .bg-home-foot{padding-top:6px!important}
}
/* the turning flower must never widen the page (on iPhone that made the screen shake between menus) */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
#dots{height:12px}
/* bottom block a little closer to the dots, so "instalar app" has more room above the bottom edge */
@media (max-height: 760px){
  .bg-home-main{padding-bottom:4px!important}
  .bg-home-foot{padding-top:2px!important;padding-bottom:clamp(22px,4vh,34px)!important}
}
/* very short screens: keep a real gap above the icons and below "instalar app" by shrinking the flower a little */
@media (max-height: 640px){
  .bg-home-main{padding-bottom:6px!important}
  .bg-home-foot{padding-top:6px!important;padding-bottom:18px!important}
}
/* a little more air between the dots and the social icons (+6 px) */
@media (max-height: 760px){ .bg-home-foot{padding-top:8px!important} }
@media (max-height: 640px){ .bg-home-foot{padding-top:12px!important} }
/* a touch more space above the social icons (+4 px) */
@media (max-height: 760px){ .bg-home-foot{padding-top:12px!important} }
@media (max-height: 640px){ .bg-home-foot{padding-top:16px!important} }
/* only the very shortest screens (small iPhones with Safari bars): tighter footer so "instalar app" is never cut */
@media (max-height: 580px){ .bg-home-foot{padding-top:6px!important;padding-bottom:10px!important;gap:8px!important} }
/* installed app (home screen): flower the same size as on the site; the socials + policies pinned to the bottom of the screen so they never
   move between the menu and the game; flower + menu/game are centred in the space above (html.bg-standalone, set in <head>) */
html.bg-standalone .bg-home-foot{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#F4F3FA;padding-top:10px!important;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px)!important}
html.bg-standalone .bg-home-main{padding-bottom:calc(var(--bg-foot-h, 150px) + 12px)!important}
/* notifications button: after "ativadas ✓" it fades and its row folds away gently instead of vanishing */
.bg-push{transition:opacity .5s ease}
.bg-push.bg-fade{opacity:0}
.bg-app-row.bg-fold{overflow:hidden;transition:max-height .45s ease,margin .45s ease,opacity .45s ease}
@media (prefers-reduced-motion: reduce){.bg-push,.bg-app-row.bg-fold{transition:none}}
/* installed app: same spacing between flower, menu and game as on the phone browser (the app is taller, so the height-based gap had grown) */
html.bg-standalone .bg-home-main{gap:20px!important}
/* ---- jogo da flecha na tela de entrada (BG_FLECHA / flecha.js) ---- */
.bg-intro[data-flecha]{cursor:crosshair;gap:22px}
.bg-intro[data-flecha] .bg-intro-flor{width:min(260px,64vw)}
.bg-intro[data-flecha] .bg-intro-go{background:transparent;color:#235B43;border:none;min-height:0;padding:0;font-size:18px;font-weight:700}
.bg-intro-aim{margin:-10px 0 0;font-size:13px;color:#6B6B6B;text-align:center;max-width:280px;line-height:1.4}
.bg-arrow{position:fixed;left:0;top:0;width:78px;height:16px;margin:-8px 0 0 -78px;transform-origin:78px 8px;pointer-events:none;z-index:3}
.bg-arrow svg{display:block;width:100%;height:100%}
.bg-arrow-score{position:fixed;z-index:4;transform:translate(-50%,-100%);pointer-events:none;text-align:center;font-weight:800;font-size:22px;color:#235B43;white-space:nowrap;animation:bgscore 1.1s ease forwards}
.bg-arrow-score small{display:block;font-size:12px;font-weight:600;color:#6B6B6B}
.bg-arrow-score.bg-miss{color:#8B559D;font-size:18px}
@keyframes bgscore{0%{opacity:0;transform:translate(-50%,calc(-100% + 6px))}15%{opacity:1;transform:translate(-50%,-100%)}80%{opacity:1;transform:translate(-50%,-100%)}100%{opacity:0;transform:translate(-50%,calc(-100% - 14px))}}   /* transform only: no layout per frame */
@keyframes bgwob{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
.bg-intro-flor.bg-hit{animation:bgwob .4s ease}
@media (prefers-reduced-motion: reduce){.bg-arrow-score{animation:none}.bg-intro-flor.bg-hit{animation:none}}
/* symmetry: the flower sits at the same distance from the triangle above and from the menu below
   (with a leaf at the top the drawing has equal margins inside the image, so equal gaps look equal) */
#menuBox{margin-top:6px!important}   /* menu a little away from the flower (was 12 px originally, 0 in 1.3.1) */
/* arrow game polish: readable score label over the flower, no focus ring around the instruction */
.bg-arrow-score{background:#FFFFFF;border:2px solid #235B43;border-radius:14px;padding:6px 12px;box-shadow:0 6px 18px rgba(30,30,30,.12)}
.bg-arrow-score.bg-miss{border-color:#8B559D}
.bg-intro[data-flecha] .bg-intro-go:focus{outline:none}
.bg-arrow{width:92px;height:18px;margin:-9px 0 0 -92px;transform-origin:92px 9px}
/* entry screen: the flower turns slowly; arrows that hit stick in it and turn with it */
.bg-intro-target{position:relative;line-height:0}
.bg-intro-spin{transform-origin:49.94% 52.77%;animation:bgspin 30s linear infinite;will-change:transform}
.bg-intro-flor-box{position:relative;transform-origin:49.94% 52.77%}
.bg-intro-flor-box .bg-intro-flor{display:block}
.bg-intro-flor-box.bg-hit{animation:bgjolt .35s ease}
@keyframes bgspin{to{transform:rotate(360deg)}}
@keyframes bgjolt{0%{transform:scale(1)}25%{transform:scale(.97) rotate(-2deg)}60%{transform:scale(1.01) rotate(1deg)}100%{transform:none}}
.bg-stuck{position:absolute;left:0;top:0;width:92px;height:18px;margin:-9px 0 0 -92px;transform-origin:92px 9px;pointer-events:none;z-index:2}
.bg-stuck svg{display:block;width:100%;height:100%}
.bg-hole{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,rgba(20,20,20,.55) 0 38%,rgba(20,20,20,.18) 39% 62%,transparent 63%);pointer-events:none;z-index:1}
.bg-hole::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(30,30,30,.45);animation:bgring .5s ease-out forwards}
@keyframes bgring{from{transform:scale(.3);opacity:1}to{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.bg-intro-spin{animation:none}.bg-intro-flor-box.bg-hit{animation:none}.bg-hole::after{animation:none;opacity:0}}
/* entry screen lined up with the home: the flower in the exact spot of the home flower, text where the menu goes;
   entering dissolves the screen around it (flor.js: place / close) */
.bg-intro{transition:opacity .24s ease,background-color .38s ease}
.bg-intro .bg-intro-target{opacity:0}
.bg-intro.bg-intro-aligned{justify-content:flex-start}
.bg-intro.bg-intro-aligned .bg-intro-target{position:fixed;margin:0;opacity:1;transition:opacity .2s ease}
.bg-intro.bg-intro-aligned .bg-intro-flor{width:100%!important}
.bg-intro.bg-leaving{pointer-events:none}
.bg-intro.bg-leaving>:not(.bg-intro-target){opacity:0;transition:opacity .2s ease}
.bg-intro.bg-leaving .bg-stuck,.bg-intro.bg-leaving .bg-hole{opacity:0;transition:opacity .25s ease}
@media (prefers-reduced-motion: reduce){.bg-intro{transition:none}}
/* DVD mode (dvd.js): instructions at the bottom so the flower has most of the screen to roam.
   Layout and size come with the page (data-dvd), and the flower only shows once it is moving — no jump on load */
.bg-intro[data-dvd]{justify-content:flex-end;padding-top:24px!important;padding-bottom:calc(36px + env(safe-area-inset-bottom))}
.bg-intro[data-dvd] .bg-intro-target{scale:.62}
.bg-intro[data-dvd]:not(.bg-dvd) .bg-intro-target{opacity:0!important}
/* computer: everything fits on one screen — install/notifications share the policies' line,
   and the flower shrinks with the window height (≈450 px is everything else on the page) */
@media (min-width: 761px){
  .bg-home-foot{flex-direction:row!important;flex-wrap:wrap;justify-content:center;column-gap:12px!important}
  .bg-home-foot>nav,.bg-home-foot>.bg-contact{flex-basis:100%;display:flex;justify-content:center}
  .bg-home-foot>.bg-contact:not(:has(> :not([hidden]))){display:none}
  .bg-disc{width:min(420px,72vw,46vh,calc((100vh - 450px) * 1.026));width:min(420px,72vw,46vh,calc((100svh - 450px) * 1.026))}
}
/* "app instalado ✓": soft green, still tappable on iPhone (shows the steps again to reinstall) */
.bg-pill.bg-install.bg-installed{border-color:#235B43;color:#235B43;background:#E6F2EC}
.bg-pill.bg-install[hidden]{display:none}
/* installed app on iPhone: keep the policies clear of the home bar (the page has no viewport-fit=cover,
   so env(safe-area-inset-bottom) often reads 0 — at least 34 px of air either way) */
html.bg-standalone .bg-home-foot{padding-bottom:max(34px, calc(env(safe-area-inset-bottom, 0px) + 20px))!important}
/* smooth hit: the moving parts get their own layers up front, instead of at the moment of impact */
.bg-intro[data-flecha] .bg-intro-target,.bg-intro[data-flecha] .bg-intro-flor-box{will-change:transform}
.bg-stuck,.bg-arrow,.bg-arrow-score{will-change:transform}
/* game screen: "toque/clique em qualquer lugar para entrar" is the main line, "ou mire na flor" small below it */
.bg-intro[data-flecha] .bg-intro-aim{margin:-14px 0 0;max-width:none;font-size:13px;font-weight:400;line-height:1.4;color:#6B6B6B}
/* entry screen background on its own layer: fading it is an opacity change (GPU), not a full-screen repaint */
.bg-intro{background:transparent!important;transition:opacity .24s ease!important}
.bg-intro::before{content:"";position:fixed;inset:0;z-index:-1;background:#F4F3FA;transition:opacity .38s ease;will-change:opacity}
.bg-intro.bg-leaving::before{opacity:0}
#disc{will-change:transform,opacity}
@media (prefers-reduced-motion: reduce){.bg-intro::before{transition:none}}
/* arrow a bit longer than the original (svg 98×16 drawn at 122×20): the tip is the hit point */
.bg-arrow,.bg-stuck{width:122px;height:20px;margin:-10px 0 0 -122px;transform-origin:122px 10px}
/* impact hole sized to the arrow tip (tip ≈ 20 px wide at the 122 px arrow) */
.bg-hole{width:22px;height:22px;margin:-11px 0 0 -11px}
.bg-hole::after{inset:-8px}
/* entry screen: the flower grows in softly instead of popping up (on the inner box, so it never fights the DVD move or the spin) */
@keyframes bgborn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.bg-intro.bg-dvd .bg-intro-flor-box,.bg-intro.bg-intro-aligned:not([data-dvd]) .bg-intro-flor-box{animation:bgborn .7s cubic-bezier(.2,.8,.3,1) both}
@media (prefers-reduced-motion: reduce){.bg-intro .bg-intro-flor-box{animation:none!important}}

/* ranking do jogo da flor (assets/js/ranking.js) */
.bg-rank-btn{border:none;background:transparent;font:inherit;font-size:13px;font-weight:700;color:#235B43;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:6px 10px}
.bg-rank{border:none;padding:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:min(640px,calc(100svh - 32px));border-radius:22px;background:#F4F3FA;color:#1E1E1E;box-shadow:0 18px 60px rgba(20,30,25,.28);overflow:auto;font:inherit}
.bg-rank::backdrop{background:rgba(20,30,25,.45)}
.bg-rank[open]{animation:bgrankin .22s cubic-bezier(.2,.8,.3,1)}
@keyframes bgrankin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.bg-rank-in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.bg-rank-h{display:flex;align-items:center;justify-content:space-between}
.bg-rank-h h2{margin:0;font-size:20px;font-weight:800;letter-spacing:.02em}
.bg-rank-x{border:none;background:transparent;font-size:28px;line-height:1;width:40px;height:40px;border-radius:50%;cursor:pointer;color:#1E1E1E}
.bg-rank-x:hover,.bg-rank-x:focus-visible{background:#E4E3EC}
.bg-rank-tabs{display:flex;gap:6px;background:#E4E3EC;border-radius:999px;padding:4px}
.bg-rank-tabs button{flex:1;border:none;background:transparent;font:inherit;font-weight:700;font-size:14px;padding:8px 0;border-radius:999px;cursor:pointer;color:#555}
.bg-rank-tabs button[aria-selected="true"]{background:#235B43;color:#F4F3FA}
.bg-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-height:120px}
.bg-rank-list li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;font-size:15px}
.bg-rank-list li:nth-child(-n+3) .bg-rank-p{background:#235B43;color:#F4F3FA}
.bg-rank-list li.bg-rank-me{background:#DCEFE4}
.bg-rank-p{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#E4E3EC}
.bg-rank-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bg-rank-l{flex:none;font-size:13px;color:#6B6B6B;font-variant-numeric:tabular-nums}
.bg-rank-g{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid #CFCFD8;font-size:10px;font-weight:800;color:#4285F4;vertical-align:1px}
.bg-rank-vazio{justify-content:center;color:#6B6B6B;padding:28px 0!important}
.bg-rank-eu{margin:0;text-align:center;font-size:14px;font-weight:700;color:#235B43}
.bg-rank-eu:empty,.bg-rank-msg:empty{display:none}
.bg-rank-conta{border-top:1px solid #E0DFE8;padding-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.bg-rank-conta p{margin:0}
.bg-rank-join,.bg-rank-as{font-weight:700;font-size:15px}
.bg-rank-nick,.bg-rank-renome{display:flex;gap:8px;width:100%}
.bg-rank-nick input,.bg-rank-renome input{flex:1;min-width:0;min-height:48px;border-radius:999px;border:2px solid #CFCFD8;background:#fff;padding:0 18px;font:inherit;font-size:16px;color:#1E1E1E}
.bg-rank-nick input:focus,.bg-rank-renome input:focus{outline:none;border-color:#235B43}
.bg-rank-nick .bg-btn,.bg-rank-renome .bg-btn{padding:0 20px}
.bg-rank-nota{font-size:12px;color:#6B6B6B}
.bg-rank-ou{font-size:13px;color:#6B6B6B}
.bg-rank-gbox{min-height:44px;display:flex;justify-content:center;width:100%}
.bg-rank-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.bg-rank-a{border:none;background:transparent;font:inherit;font-size:13px;color:#235B43;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.bg-rank-a[data-r="excluir"]{color:#9A3B30}
.bg-rank-msg{margin:0;text-align:center;font-size:13px;color:#2E9E6E}
.bg-rank-msg.bg-err{color:#D9483B}
html.bg-rank-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){.bg-rank[open]{animation:none}}
.bg-rank-renome[hidden],.bg-rank-gbox[hidden]{display:none}
.bg-rank-renome{flex-direction:column;align-items:center;gap:6px}
.bg-rank-nq{font-size:14px;font-weight:700}
.bg-rank-rrow{display:flex;gap:8px;width:100%}
.bg-rank-rrow input{flex:1;min-width:0;min-height:48px;border-radius:999px;border:2px solid #CFCFD8;background:#fff;padding:0 18px;font:inherit;font-size:16px;color:#1E1E1E}
.bg-rank-rrow input:focus{outline:none;border-color:#235B43}
.bg-rank-rrow .bg-btn{padding:0 20px}
/* tela do jogo (2026-11-11): "acerte a bromélia" é a linha principal; "ou toque em qualquer lugar para entrar" vem embaixo, pequena */
.bg-intro[data-flecha] .bg-intro-aim{margin:0;max-width:none;font-size:20px;font-weight:700;line-height:1.3;color:#235B43}
.bg-intro[data-flecha] .bg-intro-go{margin-top:-14px;font-size:13px;font-weight:400;color:#6B6B6B;line-height:1.4}