:root{color-scheme:dark;--bg:#0a0718;--ink:#faf6ff;--muted:#c9bfdc;--purple:#c5a5ff;--line:#382650;font-family:system-ui,sans-serif;font-style:italic;font-weight:650}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #75edff;outline-offset:5px}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem max(5vw,1rem);border-bottom:1px solid var(--line)}.wordmark{font-weight:900;letter-spacing:.055em;white-space:nowrap}.wordmark span{color:var(--purple)}nav{display:flex;gap:clamp(.65rem,3vw,2.5rem);color:var(--muted);font-size:.9rem}nav a:hover,footer a:hover{color:#85efff}.hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(570px,60vw,850px);overflow:hidden;text-align:center}.intro{padding:2rem 1.25rem 3rem;max-width:42rem;margin:auto auto 0}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.17em;color:#80e8ff;margin:0 0 .75rem}h1,h2,h3{line-height:1.08;margin:0}h1{font-size:clamp(2.8rem,8vw,6rem);letter-spacing:.075em}h2{font-size:clamp(2rem,5vw,3.8rem);letter-spacing:.075em;margin-bottom:1.35rem}h3{font-size:1.2rem}p{color:var(--muted);line-height:1.6}.wrap{max-width:78rem;margin:auto;padding:clamp(2.2rem,6vw,5rem) max(1rem,5vw);scroll-margin-top:1rem}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.modes article{background:#17102b;border:1px solid var(--line);border-top-color:#9969f8;border-radius:1rem;padding:1.3rem}.modes p{margin-bottom:0;font-size:.94rem}.gesture{padding:.85rem 0;margin-bottom:0}.gesture span{color:var(--purple);margin:0 .35rem}.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.themes figure{position:relative;isolation:isolate;margin:0;border:1px solid var(--line);border-radius:1rem;overflow:hidden;aspect-ratio:4/3;background:#191032}.themes .wide{grid-column:1/-1;aspect-ratio:3.2}.themes img{display:block;width:100%;height:100%;object-fit:cover}.themes .tech img{object-fit:contain;padding:.8rem .65rem 2.8rem}.themes figcaption{position:absolute;inset:auto 0 0;padding:1.5rem .9rem .9rem;font-weight:550;background:linear-gradient(transparent,#0a0718ef)}.note{font-size:.95rem}.achievements{border:1px solid var(--line);background:radial-gradient(ellipse at top right,#3e2168,#17102b 60%);border-radius:1.4rem;padding:clamp(1.4rem,5vw,4rem)}.achievements p:not(.eyebrow){max-width:44rem}footer.wrap{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:1.3rem;font-size:.9rem}footer p{margin:0}@media(max-width:850px){.modes,.themes{grid-template-columns:repeat(2,1fr)}}@media(max-width:570px){header{flex-wrap:wrap;padding:.85rem 1rem}.intro{padding-bottom:2.4rem}.themes .wide{aspect-ratio:1.8}.modes{gap:.65rem}.modes article{padding:.85rem}.themes{gap:.65rem}}@media(max-width:355px){.modes{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.55rem,1.4vw,.9rem);width:min(100%,35rem)}
.game-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:44px;padding:.35em 7% .35em 24%;aspect-ratio:4.55;
  background:var(--sprite) center / 100% 100% no-repeat;
  color:#fff;font-weight:800;line-height:1.35;letter-spacing:.035em;text-transform:uppercase;text-align:center;white-space:nowrap;
  text-shadow:0 1px 4px #0a0718;
}
.game-button--start{--sprite:url("assets/menu-start.webp")}
.game-button--mode{--sprite:url("assets/menu-mode.webp")}
.game-button--theme{--sprite:url("assets/menu-theme.webp")}
.game-button--medals{--sprite:url("assets/menu-medals.webp")}
.game-button:hover{color:#fff;filter:brightness(1.2)}
.cta{width:min(100%,18rem);padding-inline:3.5rem 1rem;margin-top:.3rem}
.footer-top{width:11rem;padding-inline:2.7rem .6rem}
@media(max-width:850px){header{flex-wrap:wrap}}
@media(max-width:570px){nav{font-size:clamp(.625rem,2.6vw,.8rem)}nav .game-button{letter-spacing:.025em}}


/* Live text styled after the lettering in the illustrated game title. */
h1,h2,h3,.eyebrow,.themes figcaption{font-weight:900;text-transform:uppercase}
h1,h2,h3{line-height:1.15;letter-spacing:-.045em;overflow-wrap:anywhere;text-wrap:balance}
h1{font-size:clamp(2.1rem,7vw,5.6rem)}
h2{font-size:clamp(1.6rem,4.5vw,3.6rem)}
.eyebrow{letter-spacing:.12em}
@supports (background-clip:text){
  h1,h2{
    background-image:linear-gradient(180deg,#fff 33%,#ede4ff 51%,#ad98e4 53%,#f3ebff 90%);
    background-clip:text;
    color:transparent;
  }
}

/* Beveled corners and a double neon rim, sized to the text inside. */
.text-frame{
  --corner:17px;
  position:relative;
  isolation:isolate;
  filter:drop-shadow(0 0 5px #9566ff65);
}
.text-frame::before,.text-frame::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  clip-path:polygon(var(--corner) 0,calc(100% - var(--corner)) 0,100% var(--corner),100% calc(100% - var(--corner)),calc(100% - var(--corner)) 100%,var(--corner) 100%,0 calc(100% - var(--corner)),0 var(--corner));
}
.text-frame::before{
  inset:0;
  background:linear-gradient(105deg,#8954ec,#e9d7ff 20%,#9c70ff 50%,#c9a8ff 82%,#7950d8);
}
.text-frame::after{
  inset:2px;
  --corner:15px;
  background:linear-gradient(150deg,#251544,#100a22 55%,#191030);
  box-shadow:inset 0 0 0 2px #a478ff, inset 0 0 14px #9866ef82;
}
.section-heading{padding:clamp(1rem,3vw,1.75rem);margin-bottom:1.2rem}
.section-heading h2{margin-bottom:0}
.hero .intro{width:min(calc(100% - 2rem),42rem);padding:clamp(1.25rem,3vw,2.25rem);margin-bottom:1.5rem}
.modes .text-frame,.achievements.text-frame{background:none;border:0}
.gesture.text-frame,.note.text-frame{padding:.85rem 1.2rem}

/* Keep the artwork and the introduction in a single, centered composition. */
header{max-width:78rem;margin:auto;padding-inline:clamp(1rem,4vw,3rem)}
nav{width:min(100%,32rem)}
nav .game-button{min-width:0;width:100%}
.hero{
  display:flex;flex-direction:column;align-items:center;min-height:0;
  max-width:78rem;margin:auto;padding:1rem clamp(1rem,4vw,3rem) 2.5rem;
}



.hero .intro{width:min(100%,42rem);margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem) 0 0}
.hero .intro p:not(.eyebrow){max-width:35rem;margin:1rem auto}
main>.wrap{padding:clamp(2.5rem,5vw,4.25rem) clamp(1rem,4vw,3rem);border-top:1px solid var(--line)}
.section-heading{padding:0;margin:0 0 1.5rem}
.modes,.themes{gap:1.15rem}
.modes article{padding:clamp(1.1rem,2vw,1.6rem)}
.modes p,.achievements p,.gesture,.note{font-weight:450}
.themes{grid-template-columns:repeat(3,minmax(0,1fr))}
.themes figure,.themes .wide{grid-column:auto;aspect-ratio:16/10}
.themes figcaption{padding:.95rem}
.themes .tech img{object-fit:contain;padding:1rem 1rem 2.6rem}
.gesture{margin:1.15rem 0 0}
@media(max-width:900px){
  .modes,.themes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  header{justify-content:center;row-gap:.7rem}
  .modes{grid-template-columns:minmax(0,1fr)}
  .modes,.themes{gap:.85rem}
  .themes figcaption{font-size:.8rem;padding:.7rem}
}
@media(max-width:375px){
  nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav a:last-child{grid-column:1/-1;width:55%;justify-self:center}
}

/* A viewport layer keeps the artwork stationary while the document scrolls. */
body{isolation:isolate}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#0a071812 0%,#0a071840 35%,#0a0718b0 100%),
    url("assets/pulse-cascade-fundo.png") center top / cover no-repeat, var(--bg);
}
.hero{
  justify-content:flex-end;
  min-height:clamp(29rem,78svh,54rem);
}
.hero .intro{
  background:#100a23c9;
  padding:clamp(1rem,3vw,2rem);
  border:1px solid var(--line);
  border-radius:1rem;
}
main>.wrap,footer.wrap{background:#0a0718a8}
@media(max-width:640px){
  .hero{min-height:clamp(27rem,76svh,42rem)}
}

.privacy-page .privacy-back{width:min(100%,13rem);padding-inline:3rem .65rem}
.privacy-page main.wrap{max-width:62rem}
.privacy-page h1{font-size:clamp(1.8rem,5vw,3.5rem)}
.privacy-page h2{font-size:clamp(1.05rem,2.5vw,1.5rem);margin-bottom:.6rem}
.privacy-content section{margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--line)}
.privacy-content p{font-style:normal;font-weight:450}
.privacy-content section p{margin-bottom:0}

/* Game shapes drift between the fixed artwork and the page content. */
.falling-pieces{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.falling-piece{
  position:absolute;
  top:0;
  left:var(--lane);
  width:0;
  height:0;
  opacity:.5;
  animation:falling-piece var(--duration) var(--delay) linear infinite;
}
.falling-piece i{
  position:absolute;
  left:calc(var(--size) * var(--x));
  top:calc(var(--size) * var(--y));
  width:calc(var(--size) - 2px);
  height:calc(var(--size) - 2px);
  border:1px solid hsl(var(--hue) 95% 75%);
  border-radius:3px;
  background:linear-gradient(145deg,hsl(var(--hue) 85% 60% / .65),hsl(var(--hue) 80% 21% / .7));
  box-shadow:inset 0 0 4px hsl(var(--hue) 90% 80% / .6),0 0 6px hsl(var(--hue) 95% 65% / .5);
}
@keyframes falling-piece{
  from{transform:translate3d(-20px,-110px,0) rotate(-14deg)}
  to{transform:translate3d(14px,calc(100vh + 110px),0) rotate(55deg)}
}
@media(max-width:640px){
  .falling-piece{opacity:.36}
  .falling-piece:nth-child(n+5){display:none}
}
@media(prefers-reduced-motion:reduce){
  .falling-pieces{display:none}
}

.game-button,.hero .intro{position:relative}
.circuit-border{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:visible;
  pointer-events:none;
}
.circuit-border path{
  fill:none;
  stroke:#cdfcff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:4 1.4 1.5 .9 .7 91.5;
  filter:drop-shadow(0 0 2px #61dfff) drop-shadow(0 0 4px #a879ff);
  animation:
    circuit-travel 6s linear var(--circuit-delay) infinite,
    circuit-beat 2.4s ease-in-out var(--circuit-delay) infinite;
}
@keyframes circuit-travel{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-100}
}
@keyframes circuit-beat{
  0%, 52%, 100%{opacity:.55;stroke-width:1.6}
  22%{opacity:1;stroke-width:3.4}
  33%{opacity:.78;stroke-width:2.2}
  43%{opacity:1;stroke-width:2.8}
}
@media(prefers-reduced-motion:reduce){
  .circuit-border{display:none}
  .circuit-border path{animation:none}
}

/* The selector uses the same active and idle flag sprites as the game. */
.language-selector{display:flex;gap:.35rem;margin-inline-start:auto}
.language-option{
  width:clamp(3.5rem,8vw,4.5rem);aspect-ratio:488/480;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 .15rem .65rem;background:var(--flag) center/contain no-repeat;
  color:#fff;font:600 clamp(.57rem,1.3vw,.66rem)/1 system-ui,sans-serif;
  white-space:nowrap;text-shadow:0 1px 3px #0a0718;
}
.language-option[lang="pt-BR"]{--flag:url("assets/idioma-pt-br-normal.webp");--active:url("assets/idioma-pt-br-selecionado.webp")}
.language-option[lang="en"]{--flag:url("assets/idioma-en-normal.webp");--active:url("assets/idioma-en-selecionado.webp")}
.language-option[lang="ja"]{--flag:url("assets/idioma-ja-normal.webp");--active:url("assets/idioma-ja-selecionado.webp")}
.language-option[aria-current="page"]{background-image:var(--active)}
.language-option:hover{filter:brightness(1.18)}
header{flex-wrap:wrap}
@media(max-width:640px){
  .language-selector{justify-content:center;flex-basis:100%;margin:0}
}
html[lang="ja"]{font-style:normal}

.game-button--music{
  --sprite:url("assets/menu-audio.webp");
  width:min(100%,11.5rem);
  margin:0;
  padding-inline:2.65rem .55rem;
  border:0;
  font-family:inherit;
  font-size:.72rem;
  font-style:inherit;
  cursor:pointer;
}
.game-button--music:focus-visible{outline:2px solid #75edff;outline-offset:3px}
.game-button--music[aria-pressed="true"]{color:#a9f9ff}