/* Jogo de corrida/surf dos sites (moldura e interface). Usado junto com game.js.
   As cores vêm das variáveis --g-*, que o game.js preenche a partir do tema (window.JOGO.ui). */
.arcade{--g-accent:#ffc928;--g-accent-ink:#3d1a00;--g-main:#e30613;--g-main-d:#a3000f;--g-bg:#12060a;--g-shade:#5c0610;--g-soft:#ecdcdc;--g-muted:#cdb6b8;
  position:relative;aspect-ratio:4/5.1;border-radius:1.9rem;overflow:hidden;background:var(--g-bg);border:.3rem solid #fff;box-shadow:0 .55rem 0 var(--g-shade),0 3rem 5rem -2rem rgba(0,0,0,.85);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;color:#fff;font-family:inherit;line-height:1.4;text-align:left}
.arcade *,.arcade *::before,.arcade *::after{box-sizing:border-box;margin:0;padding:0}
.arcade [hidden]{display:none!important}
.arcade canvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.arcade.is-playing canvas{touch-action:none;cursor:grab}
.arcade.full{position:fixed;inset:0;z-index:2147483000;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
body.game-full{overflow:hidden}
.g-ic{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.g-hud{position:absolute;top:.9rem;left:.9rem;z-index:2;display:flex;align-items:center;gap:.5rem;opacity:0;transition:opacity .3s;padding-top:env(safe-area-inset-top)}
.arcade.is-playing .g-hud,.arcade.is-paused .g-hud{opacity:1}
.g-hud>span{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border-radius:62rem;background:rgba(8,8,12,.62);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);line-height:1}
.g-hud small{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted)}
.g-hud b{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.g-megas i,.jg-lg.mega{display:block;width:1rem;height:1rem;border-radius:50%;background:var(--g-accent);box-shadow:inset -.15rem -.15rem 0 rgba(0,0,0,.18),0 0 .6rem var(--g-accent)}
.g-tools{position:absolute;top:.9rem;right:.9rem;z-index:4;display:flex;gap:.4rem;padding-top:env(safe-area-inset-top)}
.g-tools button{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;background:rgba(8,8,12,.62);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);transition:background-color .2s,transform .2s}
.g-tools button:hover{background:var(--g-main);transform:translateY(-1px)}
.g-tools .g-ic{width:1.1rem;height:1.1rem}
.g-sound .off,.g-sound[aria-pressed=true] .on{display:none}
.g-sound[aria-pressed=true] .off{display:inline}
.g-pause,.g-close{display:none!important}
.arcade.is-playing .g-pause{display:grid!important}
.arcade.full .g-close{display:grid!important}
.arcade.full .g-full{display:none}
.g-toast{position:absolute;left:50%;top:22%;z-index:2;transform:translate(-50%,0) scale(.6);opacity:0;padding:.5rem 1.1rem;border-radius:62rem;background:var(--g-accent);color:var(--g-accent-ink);font-weight:800;font-size:.95rem;white-space:nowrap;box-shadow:0 .25rem 0 rgba(0,0,0,.3);pointer-events:none}
.g-toast.show{animation:g-toast 1.6s cubic-bezier(.22,.7,.2,1) both}
@keyframes g-toast{0%{opacity:0;transform:translate(-50%,.6rem) scale(.6)}14%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-.8rem) scale(.95)}}
.g-turbo{position:absolute;left:50%;bottom:1.1rem;z-index:2;transform:translateX(-50%);display:none;align-items:center;gap:.6rem;padding:.4rem .8rem;border-radius:62rem;background:rgba(8,8,12,.7);border:1px solid var(--g-accent);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-accent);white-space:nowrap;margin-bottom:env(safe-area-inset-bottom)}
.g-turbo.on{display:flex}
.g-turbo i{display:block;width:4.5rem;height:.35rem;border-radius:1rem;background:rgba(255,255,255,.2);overflow:hidden}
.g-turbo b{display:block;height:100%;background:var(--g-accent);transform-origin:left}
.g-panel{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:3.6rem 1.4rem 1.6rem;text-align:center}
.g-start{justify-content:flex-end;background:linear-gradient(to top,rgba(6,6,10,.94) 8%,rgba(6,6,10,.5) 46%,transparent 70%)}
.g-over,.g-paused{background:rgba(6,6,10,.8);-webkit-backdrop-filter:blur(.35rem);backdrop-filter:blur(.35rem)}
.arcade.full .g-panel{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
.g-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:62rem;background:var(--g-accent);color:var(--g-accent-ink);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.g-tag .g-ic{width:.9rem;height:.9rem}
.g-new{animation:g-pop .7s cubic-bezier(.22,.7,.2,1) both}
@keyframes g-pop{0%{transform:scale(.3) rotate(-8deg)}60%{transform:scale(1.15) rotate(3deg)}100%{transform:none}}
.g-title{font-weight:800;font-size:2.5rem;line-height:.92;letter-spacing:-.04em;text-transform:uppercase;color:#fff;text-shadow:0 .22rem 0 var(--g-main-d),0 0 2rem var(--g-main)}
.g-title span{color:var(--g-accent)}
.g-title.sm{font-size:2rem;text-transform:none}
.g-sub{font-size:.95rem;color:var(--g-soft);max-width:19rem;text-wrap:balance}
.g-best{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--g-muted)}
.g-best .g-ic{width:1rem;height:1rem;color:var(--g-accent)}
.g-best b{color:#fff}
.g-keys{font-size:.76rem;color:var(--g-muted)}
.k-touch{display:none}
@media(hover:none),(pointer:coarse){.k-touch{display:inline}.k-key{display:none}}
.g-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;max-width:21rem}
.g-stats div{padding:.6rem .4rem;border-radius:.9rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.g-stats small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted)}
.g-stats b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.g-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.3rem;padding:.8rem 1.8rem;border-radius:62rem;border:1.5px solid transparent;background:#fff;color:var(--g-main-d);font:inherit;font-weight:700;font-size:1.05rem;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 .3rem 0 rgba(0,0,0,.25),0 1rem 2rem -1rem rgba(0,0,0,.6);transition:transform .2s,filter .2s}
.g-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.g-btn.sm{min-height:2.6rem;padding:.5rem 1.1rem;font-size:.88rem;box-shadow:none}
.g-btn.ghost{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.6);color:#fff}
.g-btn.wa{background:#16a34a;color:#fff}
.g-play{animation:g-beat 1.8s ease-in-out infinite}
@keyframes g-beat{50%{transform:scale(1.06)}}

/* Seção do jogo na página */
.jg{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.jg-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.jg-copy h2{margin-top:1rem}
.jg-copy>p{margin-top:1.1rem;max-width:34rem}
.jg-how{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;margin:1.6rem 0 0;padding:0;list-style:none}
.jg-how li{display:flex;align-items:center;gap:.4rem;font-size:.9rem}
.jg-how kbd{display:inline-grid;place-items:center;min-width:2rem;height:2rem;padding:0 .4rem;border-radius:.5rem;background:#fff;color:#14141c;font:inherit;font-weight:700;font-size:.95rem;box-shadow:0 .2rem 0 rgba(0,0,0,.35)}
.jg-how span{margin-left:.2rem}
.jg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.jg-record{display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem;opacity:.85}
.jg-record b{font-size:1.1rem;opacity:1}
.jg-cab{position:relative;justify-self:end;width:min(100%,25.5rem)}
.jg-legend{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;list-style:none}
.jg-legend li{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:1rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.jg-legend b{display:block;font-weight:600;line-height:1.25}
.jg-legend div span{font-size:.86rem;opacity:.72}
.jg-lg{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem}
.jg-lg.mega{width:1.9rem;height:1.9rem;margin:.35rem}
.jg-lg.turbo{border-radius:50%;background:#fff;color:var(--g-main,#e30613)}
.jg-lg.lag{border-radius:.5rem;background:#14141c;border:2px solid currentColor;font-size:.62rem;font-weight:800;letter-spacing:.06em}
.jg-lg.low{height:1.1rem;margin:.75rem 0;border-radius:.3rem;background:repeating-linear-gradient(-45deg,#ffc928 0 .4rem,#1a0a00 .4rem .8rem)}
.jg-lg.high{position:relative;border-inline:3px solid #cfd3da}
.jg-lg.high::before{content:"";position:absolute;left:0;right:0;top:.2rem;height:.8rem;background:var(--g-main,#e30613);border:2px solid #fff;border-radius:.2rem}
@media(max-width:1180px){.jg-legend{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.jg-in{grid-template-columns:minmax(0,1fr)}.jg-cab{justify-self:center;width:min(100%,24rem)}}
@media(max-width:640px){.jg-legend{grid-template-columns:1fr 1fr}.jg-legend li:first-child{grid-column:1/-1}.jg-actions>a{flex:1 1 100%}}

/* Chamada do jogo na tela inicial (logo abaixo do hero) e botão de destaque do hero */
.jg-promo{--g-accent:#ffc928;--g-accent-ink:#3d1a00;--g-main:#e30613;--g-main-d:#a3000f;position:relative;z-index:2;padding:1.4rem 0}
.jg-promo-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.5rem;padding:.9rem 1.5rem .9rem .9rem;border-radius:1.6rem;border:1.5px solid var(--g-accent);background:linear-gradient(100deg,color-mix(in srgb,var(--g-main) 34%,transparent),rgba(255,255,255,.04) 70%);color:inherit;text-decoration:none;box-shadow:0 1.6rem 3rem -2.2rem var(--g-accent);transition:transform .3s,box-shadow .3s}
.jg-promo-in:hover{transform:translateY(-3px);box-shadow:0 2rem 3.4rem -2rem var(--g-accent)}
.jg-prev{position:relative;display:block;width:15.5rem;aspect-ratio:16/9;border-radius:1.05rem;overflow:hidden;border:.2rem solid #fff;background:#000}
.jg-scene{position:absolute;inset:0;display:block}
.jg-scene canvas{display:block;width:100%;height:100%;max-width:none}
.jg-prev em{position:absolute;left:.45rem;top:.45rem;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:62rem;background:var(--g-accent);color:var(--g-accent-ink);font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.jg-prev em .g-ic{width:.8rem;height:.8rem}
.jg-promo-txt{display:block;min-width:0}
.jg-promo-txt small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--g-accent)}
.jg-promo-txt b{display:block;margin-top:.3rem;font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.jg-promo-txt>span{display:block;margin-top:.35rem;font-size:.93rem;opacity:.78}
.jg-promo-btn,.btn.jg-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--jg-cta,var(--g-accent,#ffc928));color:var(--jg-cta-ink,var(--g-accent-ink,#2a1a00));border-color:transparent;font-weight:700;box-shadow:0 .28rem 0 rgba(0,0,0,.28);animation:g-beat 1.8s ease-in-out infinite}
.jg-promo-btn{min-height:3.1rem;padding:.7rem 1.6rem;border-radius:62rem;white-space:nowrap}
.jg-promo-btn .g-ic,.btn.jg-cta .g-ic{fill:currentColor;width:1.05rem;height:1.05rem}
.btn.jg-cta:hover{filter:brightness(1.08);animation-play-state:paused}
@media(max-width:860px){.jg-promo-in{grid-template-columns:minmax(0,1fr);gap:1rem;padding:.9rem;text-align:center}.jg-prev{width:100%}.jg-promo-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.jg-promo-btn,.btn.jg-cta,.g-play{animation:none}}