/* Save Muu · página de exemplo. Cores e formas tiradas do jogo:
   contorno grosso roxo-azulado, cor quase chapada, brilho pequeno em cima à esquerda, sombra suave. */
@font-face{font-family:Fredoka;src:url(assets/Fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}

:root{
  /* The game palette is already dark: provide it directly to dark-mode browsers. */
  color-scheme:dark;
  --ink:#1a0f31; --ink2:#221d32;
  --navy:#14213f; --navy2:#1b2d57; --steel:#8096b8; --steel-l:#c5cfe2;
  --cream:#fff0d2; --red:#f3243d; --red-d:#b3122a; --gold:#f8c441; --gold-d:#c98a12;
  --mint:#57dc8f; --coral:#ff6a52; --sun:#ffd25a; --sky:#6fb6ff; --indigo:#252a6b;
  --line:4px; --r:28px;
  --ease:cubic-bezier(.3,1.5,.5,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--cream);font:500 18px/1.45 Fredoka,system-ui,sans-serif;overflow-x:hidden}
[hidden]{display:none!important}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:12px}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
section{position:relative;padding:92px 0 104px}

/* letreiro do jogo: cor chapada, contorno grosso, peso escuro embaixo */
h2{font-size:clamp(34px,5.4vw,58px);font-weight:700;line-height:1.05;letter-spacing:.2px;color:var(--cream);
  -webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);text-wrap:balance}
h2.gold{color:var(--gold)}
h3{font-size:22px;font-weight:600;line-height:1.15}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-l);margin-bottom:14px}

/* dentes de serra entre as seções */
.teeth{position:absolute;left:0;right:0;top:-15px;height:16px;background:repeat-x left bottom/26px 16px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cpath d='M0 16L13 0l13 16z'/%3E%3C/svg%3E") repeat-x left bottom/26px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='16'%3E%3Cpath d='M0 16L13 0l13 16z'/%3E%3C/svg%3E") repeat-x left bottom/26px 16px;
  background-color:var(--bg)}

/* peças de interface */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:600;font-size:20px;text-decoration:none;
  border:var(--line) solid var(--ink);box-shadow:0 6px 0 var(--ink);position:relative;transition:transform .12s,box-shadow .12s}
.btn::before{content:"";position:absolute;left:16px;top:7px;width:26px;height:9px;border-radius:9px;background:#fff;opacity:.38;filter:blur(1.5px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--ink)}
.btn svg{width:22px;height:22px;fill:currentColor}
.btn-red{background:var(--red);color:#fff}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn[disabled]{opacity:.55;pointer-events:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:16px;
  background:rgba(20,33,63,.72);border:3px solid rgba(197,207,226,.5);color:var(--cream)}
.chip-dark{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.tag{display:inline-block;padding:5px 14px 6px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--ink);color:var(--ink)}
.tag-good{background:var(--mint)} .tag-bad{background:#c79bff} .tag-red{background:var(--red);color:#fff;transform:rotate(-3deg)}

/* ── topo ── */
.top{position:fixed;z-index:50;inset:0 0 auto 0;display:flex;align-items:center;gap:18px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));pointer-events:none;transition:transform .2s ease,visibility .2s}
.top>*{pointer-events:auto}
.top.top-hidden{transform:translateY(-100%);visibility:hidden}
.top.top-hidden>*{pointer-events:none}
@media(prefers-reduced-motion:reduce){.top{transition:none}}
.top-logo{margin-right:auto;opacity:0;transform:scale(.6) rotate(-20deg);transition:.3s var(--ease)}
.top-logo img{width:52px;height:52px}
.top-nav{display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(20,33,63,.86);border:3px solid var(--ink);opacity:0;transform:translateY(-12px);transition:.25s}
.top-nav a{padding:6px 14px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none}
.top-nav a:hover{background:var(--navy2)}
.scrolled .top-logo{opacity:1;transform:none}
.scrolled .top-nav{opacity:1;transform:none}
@media (max-width:720px){.top-nav{display:none}}

/* ── abertura ── */
.hero{min-height:max(100svh,700px);padding:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--navy) url(assets/fabrica.webp) center top/cover no-repeat}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:210px;background:linear-gradient(transparent,var(--navy) 78%);pointer-events:none}
.hero-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:84px 20px 24px;gap:22px}
.hero-logo{width:clamp(210px,34vh,360px);height:auto;animation:stamp .7s var(--ease) both,sway 6s ease-in-out .7s infinite;filter:drop-shadow(0 14px 14px rgba(8,12,30,.35))}
h1{font-size:clamp(30px,5.2vw,54px);font-weight:700;line-height:1.08;color:var(--cream);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);animation:rise .6s .25s both}
h1 em{font-style:normal;color:var(--gold)}
.hero-actions{display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;max-width:100%;animation:rise .6s .4s both}
.hero-saw{position:absolute;z-index:1;width:clamp(180px,26vw,360px);top:16%;animation:spin 9s linear infinite;filter:drop-shadow(0 10px 12px rgba(8,12,30,.3))}
.hero-saw-l{left:0;translate:-58% 0}
.hero-saw-r{right:0;translate:58% 0;top:44%;animation-direction:reverse;animation-duration:12s}

.belt{position:relative;z-index:3;height:190px;flex:none}
.belt-track{position:absolute;inset:auto 0 0 0;height:100px;background:url(assets/esteira.svg) center bottom/568px 100px repeat-x}
.belt-muus{position:absolute;left:0;bottom:78px;display:flex;gap:44px;padding-right:44px;width:max-content;animation:belt 44s linear infinite}
.belt-muus img{width:112px;height:112px;animation:bob 1.1s ease-in-out infinite}
.belt-muus img:nth-child(2n){animation-delay:-.35s}
.belt-muus img:nth-child(3n){animation-delay:-.7s}

/* ── modos ── */
.modes{--bg:#101a36;background:var(--bg)}
.modes h2{text-align:center}
.mode-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.mode{position:relative;display:grid;justify-items:center;align-content:start;gap:6px;padding:0 16px 24px;border-radius:var(--r);border:var(--line) solid var(--ink);
  box-shadow:0 8px 0 #070c1c;text-align:center;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.mode-easy{background:#1f7c58}.mode-normal{background:#22335f}.mode-hard{background:#4a2c8f}
.mode:hover{transform:translateY(-5px)}
.mode[aria-checked=true]{box-shadow:0 0 0 4px var(--gold),0 8px 0 4px #070c1c;transform:translateY(-5px)}
.mode-art{position:relative;display:block;width:100%;height:190px}
.mode-muu{position:absolute;left:50%;bottom:8px;width:128px;translate:-50% 0;filter:drop-shadow(0 8px 6px rgba(7,12,28,.35))}
.mode-deco{position:absolute;width:210px;left:-60px;top:-50px;opacity:.9}
.mode-hard .mode-deco{left:auto;right:-80px;top:-70px;width:220px}
.mode-item{position:absolute;width:52px;animation:float 3s ease-in-out infinite}
.mode-item.i1{right:16%;top:22px}.mode-item.i2{left:14%;bottom:18px;animation-delay:-1.4s}
.mode-hard .mode-item.i1{right:auto;left:14%}.mode-hard .mode-item.i2{left:auto;right:14%}
.mode-name{font-size:30px;font-weight:700;color:var(--cream)}
.mode[aria-checked=true] .mode-name{color:var(--gold)}
.mode-text{font-size:17px;color:#dfe6f5;min-height:3.2em;max-width:24ch}

/* ── fases ── */
.levels{--bg:var(--coral);background:var(--bg);color:var(--ink);overflow:hidden}
.stats{display:flex;justify-content:center;gap:clamp(18px,5vw,56px);margin:34px 0 44px}
.stats li{display:grid;justify-items:center;line-height:1.1}
.stats b{font-size:clamp(40px,7vw,64px);font-weight:700;color:var(--cream);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill}
.stats span{font-weight:600;font-size:17px}
.reel{padding:10px 0 26px}
.reel-row{display:flex;gap:20px;width:max-content;padding-right:20px;animation:belt 60s linear infinite}
.reel:hover .reel-row{animation-play-state:paused}
.reel-row img{width:188px;border-radius:22px;border:var(--line) solid var(--ink);box-shadow:0 8px 0 var(--ink);background:var(--ink)}
.reel-row img:nth-child(2n){translate:0 16px}


/* ── gerador ── */
.gen{--bg:var(--indigo);background:var(--bg)}
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.gen-art{position:relative;display:grid;place-items:center;min-height:340px}
.gen-art img{position:relative;width:min(340px,76%);animation:float 3.6s ease-in-out infinite;filter:drop-shadow(0 18px 12px rgba(8,8,40,.4))}
.gen-disc{position:absolute;width:min(400px,92%);aspect-ratio:1;border-radius:50%;background:#30378a}
.gen-disc::after{content:"";position:absolute;inset:15%;border-radius:50%;background:#3b44a4}
.gen-text{display:grid;justify-items:start;gap:16px}
.gen-text p{font-size:20px;color:#dfe2ff;max-width:32ch}

/* ── fazenda ── */
.farm{--bg:#59cdf7;min-height:660px;padding:80px 20px 0;background:#6fd0f5 url(assets/fazenda.webp) center bottom/cover no-repeat;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.farm-card{position:relative;display:grid;justify-items:center;gap:18px;padding:30px 30px 28px;border-radius:34px;background:var(--cream);border:var(--line) solid var(--ink);box-shadow:0 8px 0 var(--ink);text-align:center;max-width:560px}
.farm-card::before{content:"";position:absolute;left:22px;top:12px;width:54px;height:13px;border-radius:13px;background:#fff;opacity:.8;filter:blur(2px)}
.farm-card h2{font-size:clamp(28px,4.4vw,42px);color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.herd{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,22px);padding-bottom:54px;width:100%}
.herd img{width:clamp(74px,12vw,132px);animation:hop-loop 2.4s var(--ease) infinite;filter:drop-shadow(0 10px 6px rgba(20,70,20,.3))}
.herd img:nth-child(2){animation-delay:-.5s}.herd img:nth-child(3){animation-delay:-1.3s;translate:0 14px}.herd img:nth-child(4){animation-delay:-.9s}.herd img:nth-child(5){animation-delay:-1.8s;translate:0 10px}

.foot{background:var(--navy);padding:26px 20px calc(26px + env(safe-area-inset-bottom));text-align:center;font-size:15px;color:var(--steel-l)}
.foot a{text-decoration:none;font-weight:600;color:var(--cream)}
.foot a:hover{text-decoration:underline}
.foot .foot-links{display:flex;justify-content:center;align-items:center;gap:24px;font-size:14px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
@media(max-width:380px){.foot .foot-links{gap:16px;font-size:13px}}

/* ── entrada ao rolar ── */
[data-rev]{opacity:0;transform:translateY(34px) scale(.97);transition:opacity .5s,transform .6s var(--ease)}
[data-rev].in{opacity:1;transform:none}
.mode-row [data-rev]:nth-child(2){transition-delay:.08s}
.mode-row [data-rev]:nth-child(3){transition-delay:.16s}

.spin{animation:spin 2.4s linear infinite}.spin.fast{animation-duration:.7s}.spin.slow{animation-duration:14s}
.flip{animation:flip 1.6s linear infinite}

@keyframes spin{to{rotate:360deg}}
@keyframes flip{to{transform:rotateY(360deg)}}
@keyframes teeth{to{background-position-x:16px}}
@keyframes belt{to{transform:translateX(-50%)}}
@keyframes bob{50%{translate:0 -5px}}
@keyframes float{50%{translate:0 -10px}}
@keyframes sway{50%{rotate:-2.5deg;translate:0 -6px}}
@keyframes stamp{from{opacity:0;scale:1.7;rotate:-18deg}}
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes pop{40%{scale:1.35;opacity:1}to{scale:1.7;opacity:0}}
@keyframes hop{50%{translate:0 -34px}}
@keyframes hop-loop{0%,30%,100%{transform:none}12%{transform:translateY(-26px) scale(.97,1.04)}22%{transform:scale(1.05,.95)}}
@keyframes nut-in{from{scale:0}}
@keyframes nut-got{0%{translate:0 0}25%{translate:0 -46px;scale:1.5}75%{translate:0 -46px;scale:1.5;opacity:1}to{translate:0 -46px;scale:.4;opacity:0}}
@keyframes nut-bump{40%{scale:1.5}}
@keyframes count{from{scale:.3;opacity:0}60%{opacity:1}to{scale:1}}
@keyframes drop{0%{translate:0 -150%;rotate:0deg}8%,30%{translate:0 -62%}12%,20%,28%{rotate:-5deg}16%,24%{rotate:5deg}32%{rotate:0deg}62%,100%{translate:0 150%;rotate:0deg}}
@keyframes aim{0%,100%{rotate:-32deg}50%{rotate:32deg}}
@keyframes wiggle{25%{rotate:-9deg}75%{rotate:9deg}}

@media (max-width:900px){
  section{padding:76px 0 84px}
  .gen-grid{grid-template-columns:1fr}
  .mode-row{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .mode-text{min-height:0}
  .gen-text{justify-items:center;text-align:center}
  .gen-art{min-height:280px}
}
@media (max-width:520px){
  body{font-size:17px}
  .belt{height:160px}.belt-muus img{width:92px;height:92px}.belt-track{height:84px;background-size:477px 84px}.belt-muus{bottom:65px;gap:34px}
  .reel-row img{width:150px}
  .farm{min-height:600px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .belt-muus,.reel-row{animation:none!important}
  [data-rev]{opacity:1;transform:none}
}

/* ajustes da conferência */

.levels h2{text-align:center}

/* ── jogabilidade: celular animado ── */
.play{--bg:#14213f;background:var(--bg)}
.play-grid{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center}
.rules{display:grid;gap:20px;margin-top:34px}
.rules li{display:flex;align-items:center;gap:18px;font-size:21px;line-height:1.3;color:#dfe6f5;max-width:30ch}
.rules b{color:var(--cream);font-weight:700}
.rules img{width:58px;height:58px;flex:none}
.rule-clock{display:grid;place-items:center;width:58px;height:58px;flex:none;color:var(--cream);font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;--number-edge:4.8px;--ink:#221d32;text-shadow:var(--number-outline);filter:drop-shadow(0 4px 0 #221d32)}
.phone-stage{position:relative;perspective:900px;padding:26px 44px 44px}
.phone{--pw:min(270px,62vw);position:relative;width:calc(var(--pw) + 24px);padding:12px;border-radius:44px;background:#2a3350;
  border:var(--line) solid var(--ink);box-shadow:inset 0 0 0 3px #3d4a70;will-change:transform}
.phone::before{content:"";position:absolute;left:22px;top:6px;width:54px;height:10px;border-radius:10px;background:#fff;opacity:.22;filter:blur(2px)}
.phone-shadow{position:absolute;left:22%;right:22%;bottom:12px;height:24px;border-radius:50%;background:#050914;opacity:.5;filter:blur(12px)}
.screen{width:var(--pw);height:calc((var(--pw) - 6px)*16/9 + 6px);border-radius:32px;overflow:hidden;border:3px solid var(--ink);background:#ff7a55;position:relative}
.arena{position:absolute;left:0;top:0;width:360px;height:640px;transform-origin:0 0;transform:scale(var(--k,1))}
.arena-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.saw{position:absolute;left:0;top:0;height:20px;width:360px;transform-origin:0 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20'%3E%3Cpath d='M-1 0h18v6L8 19-1 6z' fill='%23c5cfe2' stroke='%231a0f31' stroke-width='2' stroke-linejoin='round'/%3E%3Crect width='16' height='6' fill='%232a2440'/%3E%3C/svg%3E") 0 0/16px 20px repeat-x;animation:teeth .5s linear infinite}
.saw.b{top:640px;transform:scaleY(-1)}
.saw.l,.saw.r{width:640px}
.saw.l{transform:rotate(90deg) scaleY(-1)}
.saw.r{left:360px;transform:rotate(90deg);animation-direction:reverse}
.muu{position:absolute;left:0;top:0;width:96px;height:96px;margin:-48px 0 0 -48px;will-change:transform;filter:drop-shadow(0 7px 5px rgba(60,10,10,.28))}
.muu.hop{animation:hop .5s var(--ease) 3}
.clock{position:absolute;right:26px;top:30px;width:44px;height:44px;display:grid;place-items:center;color:var(--cream);font-size:36px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;--number-edge:4px;--ink:#221d32;text-shadow:var(--number-outline);filter:drop-shadow(0 3px 0 #221d32)}
.nut{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;animation:nut-in .3s var(--ease) both}
.nut img{width:100%;height:100%;animation:flip 1.6s linear infinite}
.nut.got{animation:nut-got .9s ease-out forwards}
.nut b{position:absolute;left:52px;top:4px;font-size:30px;font-weight:700;color:var(--cream);-webkit-text-stroke:6px var(--ink2);paint-order:stroke fill;white-space:nowrap;opacity:0}
.nut.got b{opacity:1}

/* ── poderes ── */
.powers-sec{--bg:var(--cream);background:var(--bg);color:var(--ink)}
.powers-sec h2{text-align:center;color:var(--red)}
.pw-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.pw{position:relative;border-radius:var(--r);border:var(--line) solid var(--ink);box-shadow:0 8px 0 var(--ink);padding:22px 18px 26px;text-align:center;transition:transform .2s var(--ease)}
.pw::before{content:"";position:absolute;left:16px;top:12px;width:44px;height:13px;border-radius:13px;background:#fff;opacity:.5;filter:blur(2px)}
.pw:hover{transform:translateY(-6px) rotate(-1deg)}
.pw-leaf{background:#8fe9b4}.pw-glass{background:#9fc4ff}.pw-more{background:var(--navy2);color:var(--cream)}
.pw-art{position:relative;height:150px;display:grid;place-items:center}
.pw-art::after{content:"";position:absolute;bottom:8px;width:84px;height:14px;border-radius:50%;background:var(--ink);opacity:.22;filter:blur(5px)}
.pw-art img{width:120px;height:120px;object-fit:contain;animation:float 2.8s ease-in-out infinite}
.pw-glass img{animation-delay:-1.2s}
.pw-combine{background:var(--sun)}
.combine-art{position:relative;width:140px;height:145px;animation:float 2.8s ease-in-out infinite;animation-delay:-.6s}
.pw-art .combine-art img{position:absolute;animation:none;width:auto;height:auto;object-fit:contain}
.pw-art .combine-art .combine-muu{width:72%;height:66%;left:14%;bottom:0;z-index:1}
.pw-art .combine-art .combine-leaf{width:43%;height:43%;left:0;top:0;rotate:-16deg;z-index:2}
.pw-art .combine-art .combine-glass{width:43%;height:43%;right:0;top:0;rotate:14deg;z-index:2}
.combine-plus{position:absolute;left:50%;top:2%;translate:-50% 0;font-size:40px;font-weight:700;line-height:1;color:var(--cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;z-index:3}
.pw h3{font-size:26px;font-weight:700;margin-top:6px}
.pw p{font-size:18px;margin:6px auto 0;max-width:22ch}
.q{position:absolute;font-size:92px;font-weight:700;line-height:1;color:var(--gold);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;animation:float 2.6s ease-in-out infinite}
.q1{rotate:-14deg;translate:-58px 6px;font-size:66px;color:#8fe9b4}
.q3{rotate:13deg;translate:58px 10px;font-size:66px;color:#c79bff;animation-delay:-1.6s}
.q2{animation-delay:-.8s}

/* ── contador do gerador ── */
.gen{overflow:hidden}
.gen-text .gen-count{max-width:none;margin:4px 0 -4px;font-size:clamp(38px,6.6vw,78px);font-weight:700;line-height:1;color:var(--gold);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);white-space:nowrap}
.gen-count i{display:inline-block;width:.62em;text-align:center;font-style:normal}
.gen-count i.dot{width:.3em}
.gen-count i.set{animation:digit .28s var(--ease)}
.gen-count.done{animation:wow .7s var(--ease)}
.gen-art{cursor:pointer}
.gen-art.wow img{animation:cards .9s var(--ease),float 3.6s ease-in-out .9s infinite}
.gen-art.wow .gen-disc{animation:disc .7s var(--ease)}
.burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.burst span,.burst img{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);animation:burst 1.25s cubic-bezier(.15,.7,.3,1) forwards}
.gen-art .burst img{border:0;border-radius:0;width:30px;height:30px;left:-15px;top:-15px;filter:none;animation:burst 1.25s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes digit{from{translate:0 -.35em;scale:1.25}}
@keyframes wow{30%{scale:1.3;rotate:-4deg}60%{scale:.96;rotate:1.5deg}}
@keyframes cards{0%{scale:1}25%{scale:1.28;rotate:-9deg}55%{scale:.94;rotate:5deg}100%{scale:1;rotate:0deg}}
@keyframes disc{40%{scale:1.14}}
@keyframes burst{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r));opacity:0}}

@media (max-width:900px){
  .play-grid{grid-template-columns:1fr;justify-items:center;gap:30px}
  .play-text{display:grid;justify-items:center;text-align:center}
  .rules li{text-align:left}
  .pw-row{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){.saw{animation:none!important}}

/* ── seletor de língua: menu suspenso ── */
.langs{position:relative}
.langs summary{display:flex;align-items:center;gap:7px;height:46px;padding:0 14px 0 11px;border-radius:999px;background:rgba(20,33,63,.9);border:3px solid var(--ink);
  font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--cream);cursor:pointer;list-style:none;user-select:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary::after{content:"";width:7px;height:7px;margin:-4px 0 0 2px;border:solid var(--steel-l);border-width:0 3px 3px 0;border-radius:1px;rotate:45deg;transition:rotate .15s,margin .15s}
.langs[open] summary::after{rotate:225deg;margin-top:4px}
.langs summary:hover{background:var(--navy2)}
.langs svg{width:22px;height:22px;fill:none;stroke:var(--steel-l);stroke-width:2.2;stroke-linecap:round}
.langs-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:172px;max-height:min(70vh,420px);overflow:auto;display:grid;gap:2px;padding:7px;border-radius:20px;
  background:var(--cream);border:var(--line) solid var(--ink);box-shadow:0 6px 0 var(--ink);animation:menu .18s var(--ease)}
.langs-menu a{padding:9px 14px;border-radius:13px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.langs-menu a:hover{background:#ffe2a8}
.langs-menu a[aria-current]{background:var(--ink);color:var(--cream)}
@keyframes menu{from{opacity:0;translate:0 -8px;scale:.94}}

/* Nota sobre a capacidade de códigos do gerador. */
.gen-count .gen-asterisk{font-size:.3em;vertical-align:super;margin-left:.04em;line-height:0;-webkit-text-stroke:0;text-shadow:none;text-decoration:none}
.gen-asterisk:hover{text-decoration:underline}
.foot .gen-note{max-width:100ch;margin:14px auto 0;padding:0 20px;font-size:12px;line-height:1.5;color:#dfe2ff;scroll-margin-top:80px}

/* A seleção automática acompanha as cores e os desenhos de cada modo. */
.modes{isolation:isolate;transition:background-color .85s ease}
.modes[data-mode=easy]{--bg:#1f7c58}
.modes[data-mode=normal]{--bg:#22335f}
.modes[data-mode=hard]{--bg:#4a2c8f}
.modes>.wrap{position:relative;z-index:1}
.modes>.teeth{transition:background-color .85s ease}
.mode-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mode-landscape{position:absolute;inset:0;opacity:0;transition:opacity .85s ease}
.modes[data-mode=easy] .mode-landscape-easy,
.modes[data-mode=normal] .mode-landscape-normal,
.modes[data-mode=hard] .mode-landscape-hard{opacity:1}
.mode-landscape img{position:absolute;width:clamp(240px,32vw,470px);opacity:.32;filter:drop-shadow(0 12px 8px #070c1c45)}
.mode-landscape img:first-child{left:-8%;top:2%}
.mode-landscape img:last-child{right:-8%;bottom:-12%}
.mode-landscape-easy img{--leaf-angle:-24deg;animation:mode-leaf 6s ease-in-out infinite;rotate:var(--leaf-angle)}
.mode-landscape-easy img:last-child{--leaf-angle:155deg;animation-delay:-3s}
.mode-landscape-hard img{animation:spin 22s linear infinite;opacity:.4}
.mode-landscape-hard img:last-child{animation-direction:reverse}
.mode-landscape-normal img{width:clamp(220px,26vw,360px);height:115%;object-fit:cover;opacity:.12;mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);animation:mode-wave 9s ease-in-out infinite}
.mode-landscape-normal img:first-child{left:-10%;top:-7%;rotate:-18deg}
.mode-landscape-normal img:last-child{right:-10%;bottom:-7%;rotate:162deg;animation-delay:-4.5s}
.modes .mode[aria-checked=true]{transform:translateY(-9px)}
.modes .mode{transition:transform .55s var(--ease),box-shadow .55s ease}
.modes .mode[aria-checked=true] .mode-muu{animation:mode-muu 4s ease-in-out infinite}
.modes-paused .mode-backdrop img,.modes-paused .mode-muu{animation-play-state:paused!important}
@keyframes mode-leaf{50%{translate:0 -18px;rotate:calc(var(--leaf-angle) + 7deg)}}
@keyframes mode-wave{50%{translate:0 -16px}}
@keyframes mode-muu{50%{translate:-50% -7px;rotate:3deg}}
@media(max-width:900px){.mode-landscape img{width:310px}.mode-landscape img:first-child{left:-36%;top:6%}.mode-landscape img:last-child{right:-36%;bottom:0}.mode-landscape-normal img{width:240px}.mode-landscape-normal img:first-child{left:-40%}.mode-landscape-normal img:last-child{right:-40%}}
@media(prefers-reduced-motion:reduce){.modes,.modes>.teeth,.mode-landscape,.modes .mode{transition:none}.mode-backdrop img,.modes .mode-muu{animation:none!important}.modes .mode[aria-checked=true]{transform:none}}

/* Contorno redondo dos contadores: text-stroke abre uma falha na curva do 3 da Fredoka.
   O raio conserva a metade externa dos antigos traços de 8/9 px, sem trocar a fonte. */
h1,h2,.q,.nut b,.stats b,.gen-text .gen-count,.clock,.rule-clock{
  -webkit-text-stroke:0;
  --number-outline:
    calc(var(--number-edge) * 1.00000) calc(var(--number-edge) * 0.00000) 0 var(--ink),
    calc(var(--number-edge) * 0.96593) calc(var(--number-edge) * 0.25882) 0 var(--ink),
    calc(var(--number-edge) * 0.86603) calc(var(--number-edge) * 0.50000) 0 var(--ink),
    calc(var(--number-edge) * 0.70711) calc(var(--number-edge) * 0.70711) 0 var(--ink),
    calc(var(--number-edge) * 0.50000) calc(var(--number-edge) * 0.86603) 0 var(--ink),
    calc(var(--number-edge) * 0.25882) calc(var(--number-edge) * 0.96593) 0 var(--ink),
    calc(var(--number-edge) * 0.00000) calc(var(--number-edge) * 1.00000) 0 var(--ink),
    calc(var(--number-edge) * -0.25882) calc(var(--number-edge) * 0.96593) 0 var(--ink),
    calc(var(--number-edge) * -0.50000) calc(var(--number-edge) * 0.86603) 0 var(--ink),
    calc(var(--number-edge) * -0.70711) calc(var(--number-edge) * 0.70711) 0 var(--ink),
    calc(var(--number-edge) * -0.86603) calc(var(--number-edge) * 0.50000) 0 var(--ink),
    calc(var(--number-edge) * -0.96593) calc(var(--number-edge) * 0.25882) 0 var(--ink),
    calc(var(--number-edge) * -1.00000) calc(var(--number-edge) * 0.00000) 0 var(--ink),
    calc(var(--number-edge) * -0.96593) calc(var(--number-edge) * -0.25882) 0 var(--ink),
    calc(var(--number-edge) * -0.86603) calc(var(--number-edge) * -0.50000) 0 var(--ink),
    calc(var(--number-edge) * -0.70711) calc(var(--number-edge) * -0.70711) 0 var(--ink),
    calc(var(--number-edge) * -0.50000) calc(var(--number-edge) * -0.86603) 0 var(--ink),
    calc(var(--number-edge) * -0.25882) calc(var(--number-edge) * -0.96593) 0 var(--ink),
    calc(var(--number-edge) * -0.00000) calc(var(--number-edge) * -1.00000) 0 var(--ink),
    calc(var(--number-edge) * 0.25882) calc(var(--number-edge) * -0.96593) 0 var(--ink),
    calc(var(--number-edge) * 0.50000) calc(var(--number-edge) * -0.86603) 0 var(--ink),
    calc(var(--number-edge) * 0.70711) calc(var(--number-edge) * -0.70711) 0 var(--ink),
    calc(var(--number-edge) * 0.86603) calc(var(--number-edge) * -0.50000) 0 var(--ink),
    calc(var(--number-edge) * 0.96593) calc(var(--number-edge) * -0.25882) 0 var(--ink);
}
/* External outline stays behind the glyphs, without depending on paint-order. */
h1{--number-edge:4px;text-shadow:var(--number-outline),0 5px 0 var(--ink)}
h2,.q{--number-edge:4.5px;text-shadow:var(--number-outline),0 5px 0 var(--ink)}
.nut b{--number-edge:3px;text-shadow:var(--number-outline)}
.farm-card h2{text-shadow:none}
.stats b{--number-edge:4px;text-shadow:var(--number-outline)}
.gen-text .gen-count{--number-edge:4.5px;text-shadow:var(--number-outline),0 6px 0 var(--ink)}

/* Quadros de golden_nut.gd: giro vertical, espessura e luz do próprio jogo.
   level_nuts.gd completa uma volta em 1,4 s; 56 quadros = 40 fps. */
.rule-nut{display:block;width:58px;height:58px;flex:none;background:url("assets/porca-giro.webp") 0 0/3248px 58px no-repeat;animation:rule-nut-turn 1.4s steps(56) infinite}
@keyframes rule-nut-turn{to{background-position-x:-3248px}}
.play.nut-paused .rule-nut{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rule-nut{animation:none!important;background-position:0 0}}

/* Esta seção funciona mesmo se outra animação da página não inicializar. */
.modes [data-rev]{opacity:1;transform:none}
.modes .mode[aria-checked=true]{transform:translateY(-9px)}
@media(prefers-reduced-motion:reduce){.modes .mode[aria-checked=true]{transform:none}}

/* Símbolos das plataformas, com a mesma área de toque nos dois locais. */
.platforms{display:flex;align-items:flex-start;justify-content:center;gap:30px;direction:ltr}
.platform-link{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:84px;color:var(--ink);text-decoration:none;border-radius:12px;transition:transform .18s var(--ease)}
.platform-link img{display:block;width:64px;height:64px;object-fit:contain;flex:none;filter:brightness(0)}
.hero .platform-link img{filter:brightness(0) invert(1)}
a.platform-link:hover{transform:translateY(-3px)}
a.platform-link:active{transform:scale(.94)}
.platform-link:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.farm .platform-link:focus-visible{outline-color:var(--ink)}
.platform-soon{display:flex;flex-direction:column;align-items:center;max-width:116px}
.platform-status{max-width:100%;font-size:14px;line-height:1.35;text-align:center;color:var(--ink)}
.hero .platform-status{color:#fff}
.platform-credit{margin-top:14px;font-size:12px}
@media(prefers-reduced-motion:reduce){.platform-link{transition:none}}