/* ============================================================
   Rede Prime // a pagina do Rankup

   A pagina e um poco. Cada seccao esta a uma altura (Y, como no
   ecra F3 do jogo), pela ordem em que um jogador encontra os
   sistemas, e o fundo escurece a medida que se desce: da pedra
   da superficie ao vermelho do Coracao, que e onde o jogo acaba.

   O ouro continua a ser so a accao e a marca (ver estilo.css).
   As cores dos patamares das skins sao as do chat do Minecraft
   (&6 &d &b &7), porque e assim que o jogador ja as conhece.
   ============================================================ */

.rk {
  background:
    linear-gradient(180deg,
      #0A0908 0%, #0D0C0B 16%, #0F1011 34%, #0C0E12 56%,
      #090B0E 74%, #0A0809 88%, #150706 100%);
}

/* --------------------------------------------------- o profundimetro */

.prof {
  position: fixed;
  z-index: 30;
  top: 50%;
  left: max(10px, calc((100vw - var(--largura)) / 2 - 150px));
  width: 150px;
  height: min(62vh, 560px);
  transform: translateY(-42%);
  --agora: 0%;
}
.prof[hidden] { display: none; }

/* o carril: a linha do poco, e a parte ja descida a ouro */
.prof::before,
.prof::after {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  width: 2px;
  border-radius: 2px;
}
.prof::before { bottom: 0; background: rgba(255, 255, 255, .08); }
.prof::after  { height: var(--agora); background: linear-gradient(180deg, rgba(240, 180, 41, .15), var(--coroa)); }

.prof__leitura {
  position: absolute;
  z-index: 1;
  right: calc(100% - 56px);
  top: var(--agora);
  transform: translateY(-50%);
  transition: top .12s linear;
  margin: 0;
  padding: 3px 8px 3px 6px;
  border-radius: 6px;
  background: var(--coroa);
  color: var(--traco);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(240, 180, 41, .7);
}
.prof__leitura span { opacity: .6; }
.prof__leitura em { display: none; font-style: normal; font-family: Archivo, sans-serif; font-weight: 600; }

.prof__marcas { list-style: none; margin: 0; padding: 0; }
.prof__marca {
  position: absolute;
  left: 55px;
  top: var(--pos);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.prof__marca::before {
  content: "";
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, .22);
}
.prof__marca a {
  font-size: .78rem;
  font-weight: 500;
  color: var(--nevoa-baixa);
  padding: 2px 0;
  transition: color .2s var(--suave);
}
.prof__marca a:hover,
.prof__marca a:focus-visible { color: var(--branco); }
.prof__marca--aqui a { color: var(--coroa-claro); }

/* Sem margem para o carril, fica so a leitura, num canto. */
@media (max-width: 1559px) {
  .prof {
    top: auto;
    left: auto;
    right: 16px;
    bottom: 16px;
    width: auto;
    height: auto;
    transform: none;
  }
  .prof::before, .prof::after, .prof__marcas { display: none; }
  .prof__leitura {
    position: static;
    transform: none;
    transition: none;
    padding: 6px 12px;
    font-size: .8rem;
    background: rgba(14, 12, 10, .92);
    color: var(--coroa-claro);
    border: 1px solid var(--linha);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .prof__leitura em { display: inline; color: var(--branco); margin-left: 6px; }
}

/* ------------------------------------------------------- a entrada */

.rk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(94vh, 880px);
  padding: 150px 24px 120px;
  overflow: hidden;
  isolation: isolate;
}
.rk-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.rk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 9, 8, .94) 0%, rgba(10, 9, 8, .72) 42%, rgba(10, 9, 8, .18) 100%),
    linear-gradient(180deg, rgba(10, 9, 8, .55) 0%, rgba(10, 9, 8, 0) 30%, rgba(10, 9, 8, 0) 70%, rgba(10, 9, 8, .9) 100%);
}
/* a orla de baixo: blocos, e nao uma linha recta */
.rk-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40px;
  background: #0A0908;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 40' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath d='M0 24h20v-8h20v16h20v-8h20v-16h20v8h20v16h20v-8h20v8h20v-16h20v8h20v-8h20v16h20v-8h20v-8h20v16h20V40H0z'/%3E%3C/svg%3E") 0 0 / 320px 40px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 40' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath d='M0 24h20v-8h20v16h20v-8h20v-16h20v8h20v16h20v-8h20v8h20v-16h20v8h20v-8h20v16h20v-8h20v-8h20v16h20V40H0z'/%3E%3C/svg%3E") 0 0 / 320px 40px repeat-x;
}

.rk-hero__interior {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
}

/* O grito desce em degraus: cada linha um passo mais para dentro e
   um tom mais funda. E a pagina a dizer o que vai fazer. */
.rk-hero__grito {
  margin: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8.2vw, 7rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.rk-hero__grito span { display: block; }
.rk-hero__grito span:nth-child(1) { color: var(--branco); }
.rk-hero__grito span:nth-child(2) { color: #DCD5CB; padding-left: .55em; }
.rk-hero__grito span:nth-child(3) { color: var(--coroa-claro); padding-left: 1.1em; }

.rk-hero__copia {
  max-width: 44ch;
  margin: 28px 0 0;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: #D5CEC4;
}
.rk-hero__accoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rk .botao .ip__acao {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.rk-hero__versao { margin: 18px 0 0; font-size: .88rem; color: var(--nevoa); }
.rk-hero__versao code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; color: var(--coroa-gelo); }

/* ------------------------------------------------------- seccoes */

.rk-sec {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 116px) 24px;
}
.rk-sec + .rk-sec { border-top: 1px solid rgba(255, 255, 255, .045); }

.rk-y {
  margin: 0 0 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .8rem;
  color: rgba(240, 180, 41, .72);
}

.rk-cabeca { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.rk-cabeca--lado {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(18px, 4vw, 60px);
  max-width: none;
}
.rk-cabeca__copia {
  max-width: 56ch;
  margin: 14px 0 0;
  font-size: 1.04rem;
  color: var(--nevoa);
}
.rk-cabeca--lado .rk-cabeca__copia { margin-top: 0; }
.rk-cabeca__copia b { color: var(--branco); font-weight: 600; }

.rk h3 {
  margin: 0 0 10px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.rk figure { margin: 0; }
.rk figcaption { margin-top: 12px; font-size: .9rem; color: var(--nevoa); }

.foto,
.ilha__foto img,
.estufa__foto img,
.aventura__mapa img,
.salas img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--ceu-baixo);
}

.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ------------------------------------------------------- as moedas */

.moedas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.moeda { padding: 4px 26px 0; border-left: 1px solid rgba(255, 255, 255, .07); }
.moeda:first-child { padding-left: 0; border-left: 0; }
.moeda:nth-child(1) { --tom: #F0B429; }
.moeda:nth-child(2) { --tom: #FFE27A; }
.moeda:nth-child(3) { --tom: #3FD9A8; }
.moeda:nth-child(4) { --tom: #9DB8FF; }

.moeda__icone {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.moeda__icone--nota  { background-image: url("imagens/rankup/moeda-nota.png"); background-size: 64px 64px; }
/* as tiras animadas do pacote: 8 e 4 fotogramas, ao ritmo do .mcmeta */
.moeda__icone--ficha { background-image: url("imagens/rankup/moeda-ficha.png"); background-size: 64px 512px; animation: quadros8 1.2s steps(8) infinite; }
.moeda__icone--gema  { background-image: url("imagens/rankup/moeda-gema.png");  background-size: 64px 256px; animation: quadros4 1.4s steps(4) infinite; }
@keyframes quadros8 { to { background-position: 0 -512px; } }
@keyframes quadros4 { to { background-position: 0 -256px; } }

.moeda__verbo {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--branco);
}
.moeda__nome { display: block; margin-top: 6px; font-weight: 600; color: var(--tom); }
.moeda p { margin: 12px 0 0; font-size: .95rem; color: var(--nevoa); max-width: 28ch; }

/* ------------------------------------------------------- a escada */

.escada__rolo {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 2px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 180, 41, .3) transparent;
}
.escada__rolo:focus-visible { outline: 2px solid var(--coroa); outline-offset: 4px; border-radius: 8px; }

.escada__degraus {
  display: flex;
  align-items: flex-end;
  flex: 1 0 auto;
  min-width: 700px;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Um degrau e um bloco: face de cima clara, lado escuro. Vai da pedra
   (A) ao ouro (Z), e o selo em cima e o do jogo. */
.degrau {
  --t: calc(var(--i) / 25);
  position: relative;
  flex: 1 1 0;
  height: calc(40px + var(--i) * 8.6px);
  display: flex;
  justify-content: center;
  padding-top: 7px;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0 5px, transparent 5px),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .18) 60%),
    color-mix(in oklab, #3B3834 calc((1 - var(--t)) * 100%), #E0A526);
}
.degrau__selo {
  width: 24px;
  height: 24px;
  background: url("imagens/rankup/ranks.png") 0 0 / 2600% 100% no-repeat;
  background-position: calc(var(--i) / 25 * 100%) 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}
.degrau__letra {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .78rem;
  color: var(--nevoa);
}
.degrau:first-child .degrau__letra,
.degrau:last-child .degrau__letra { color: var(--coroa-claro); }

.escada__alem {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  height: 290px;
}
.escada__p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 92px;
  height: 100%;
  border: 2px dashed rgba(255, 217, 116, .45);
  border-radius: 6px 6px 0 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--coroa-claro);
}
.escada__p i { font-family: Archivo, sans-serif; font-style: normal; font-weight: 500; font-size: .8rem; color: var(--nevoa); }

.escada__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin-top: 8px !important;
  color: var(--nevoa);
}
.escada__legenda b {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--branco);
}
.escada__fechado b { color: var(--nevoa); }

/* ------------------------------------------------------- o relogio */

.relogio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.eventos { list-style: none; margin: 30px 0 0; padding: 0; }
.eventos li {
  display: grid;
  grid-template-columns: 14px 86px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: .96rem;
}
.eventos li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tom);
  transform: translateY(1px);
}
.eventos time { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; color: var(--nevoa); }

.relogio__mostrador { text-align: center; }
.relogio__mostrador svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; overflow: visible; }
.m-aro { fill: #13110F; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.m-noite { fill: rgba(80, 100, 170, .09); }
.m-traco { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; }
.m-traco--grosso { stroke: rgba(255, 255, 255, .38); stroke-width: 2.5; }
.m-hora { fill: var(--nevoa-baixa); font: 700 11px "JetBrains Mono", ui-monospace, monospace; text-anchor: middle; }
.m-evento { stroke: #13110F; stroke-width: 3; }
.m-ponteiro { stroke: var(--branco); stroke-width: 3; stroke-linecap: round; }
.m-disco { fill: #0D0B0A; stroke: rgba(255, 255, 255, .07); }
.m-agora { fill: var(--branco); font: 700 28px "JetBrains Mono", ui-monospace, monospace; text-anchor: middle; }
.m-proximo { fill: var(--nevoa); font: 500 12px Archivo, sans-serif; text-anchor: middle; }

/* ------------------------------------------------------- os encantos */

.encantos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1.35fr);
  gap: clamp(22px, 3vw, 44px);
}
.encantos__grupo { padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, .08); }
.encantos__grupo:nth-child(1) { border-top-color: #FFE27A; }
.encantos__grupo:nth-child(2) { border-top-color: #3FD9A8; }
.encantos__grupo:nth-child(3) { border-top-color: #3FD9A8; border-top-style: double; border-top-width: 4px; }

.encantos__titulo { display: flex; align-items: baseline; gap: 10px; }
.encantos__titulo span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; color: var(--nevoa); }
.encantos__nota { margin: 0 0 16px; font-size: .9rem; color: var(--nevoa); }

.encantos__parede { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.encanto {
  display: block;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: url("imagens/rankup/selos.png") 0 0 / 3600% 100% no-repeat;
  background-position: calc(var(--i) / 35 * 100%) 0;
  background-color: transparent;
  transition: transform .15s var(--suave), box-shadow .15s var(--suave);
}
.encanto:hover { transform: translateY(-3px) scale(1.06); }
.encanto:focus-visible { outline: 2px solid var(--coroa-claro); outline-offset: 3px; }

.encantos__leitura { min-height: 1.6em; margin: 28px 0 0; color: var(--nevoa); }
.encantos__leitura b, .patamares__leitura b { color: var(--branco); font-weight: 600; }

/* ------------------------------------------------------- as skins */

.skins {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.skins__palco { text-align: center; }
.skins__peca {
  --brilho: #ff4f7b;
  position: relative;
  transition: background .3s var(--suave);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--brilho) 30%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 46% 7% at 50% 88%, rgba(0, 0, 0, .55), transparent),
    #110E0E;
  border: 1px solid rgba(255, 255, 255, .07);
}
.skins__peca img { width: 84%; height: auto; }

.alterna {
  display: inline-flex;
  margin-top: 16px;
  padding: 4px;
  border-radius: 12px;
  background: var(--ceu-alto);
  border: 1px solid rgba(255, 255, 255, .08);
}
.alterna button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--nevoa);
  font: 600 .92rem Archivo, sans-serif;
  cursor: pointer;
}
.alterna button[aria-pressed="true"] { background: #2C2722; color: var(--branco); }
.alterna button:focus-visible { outline: 2px solid var(--coroa); outline-offset: 2px; }

.patamares { margin-top: 30px; }
.patamar {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0 12px 16px;
  border-left: 3px solid var(--tom);
}
.patamar + .patamar { margin-top: 6px; }
.patamar__cabeca { display: flex; flex-direction: column; line-height: 1.3; }
.patamar__nome { color: var(--tom); font-weight: 600; font-size: 1.02rem; }
.patamar__vem { font-size: .86rem; color: var(--nevoa); }
.patamar__afinidade { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; color: var(--nevoa-baixa); }
.patamar__afinidade::after { content: " de afinidade"; font-family: Archivo, sans-serif; }

.patamar__pecas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.peca {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color .15s var(--suave), background .15s var(--suave);
}
.peca img { width: 48px; height: 48px; image-rendering: pixelated; image-rendering: crisp-edges; }
.peca:hover { border-color: var(--tom); background: rgba(255, 255, 255, .07); }
.peca[aria-pressed="true"] { border-color: var(--tom); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px var(--tom) inset; }
.peca:focus-visible { outline: 2px solid var(--tom); outline-offset: 2px; }
.patamar .peca { --tom: inherit; }
.patamares__leitura { min-height: 1.6em; margin: 20px 0 0; color: var(--nevoa); }

/* ------------------------------------------------------- a ilha */

.ilha {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "foto  lote"
    "esc   mina";
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.ilha__foto--grande { grid-area: foto; }
.ilha__lote { grid-area: lote; }
.ilha__foto:not(.ilha__foto--grande) { grid-area: mina; }
.ilha__escavacao { grid-area: esc; justify-self: end; max-width: 440px; }
.ilha p { margin: 0; color: var(--nevoa); }
.ilha p b { color: var(--branco); font-weight: 600; }

.crescer { display: block; width: 170px; height: 170px; margin: 6px 0 18px; }
.crescer rect { fill: none; stroke: var(--coroa); stroke-width: 2; shape-rendering: crispEdges; }
.crescer rect:nth-of-type(1) { stroke-opacity: 1; fill: rgba(240, 180, 41, .12); }
.crescer rect:nth-of-type(2) { stroke-opacity: .7; }
.crescer rect:nth-of-type(3) { stroke-opacity: .5; }
.crescer rect:nth-of-type(4) { stroke-opacity: .35; }
.crescer rect:nth-of-type(5) { stroke-opacity: .25; stroke-dasharray: 6 4; }
.crescer .crescer__canto { text-anchor: start; font-size: 11px; fill: var(--nevoa); }
.crescer text { fill: var(--coroa-claro); font: 700 12px "JetBrains Mono", ui-monospace, monospace; text-anchor: middle; }

/* ------------------------------------------------------- as plantacoes */

/* A secção tem duas cores so dela: a Seiva (o ambar do que se leva, e o do
   caminho no Canteiro) e a folha. O resto e o da pagina. */
#plantacoes {
  --seiva: #F0B040;
  --seiva-fundo: #6A4A12;
  --folha: #9AE05A;
  --terra: #2A1C12;
  --morta: #F06A50;
}

/* o ciclo e uma sequencia a serio: os numeros dizem a ordem por que se joga */
.ciclo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ciclo;
}
.ciclo li { counter-increment: ciclo; }
.ciclo li::before {
  content: counter(ciclo);
  display: block;
  margin-bottom: 6px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--seiva);
}
.rk .ciclo h3 { font-size: 1.2rem; margin-bottom: 6px; }
.ciclo p { margin: 0; font-size: .93rem; color: var(--nevoa); }
.ciclo b { color: var(--branco); font-weight: 600; }

/* ------------------------------------------- o laboratorio do Canteiro */

.lab {
  margin-top: clamp(44px, 6vw, 72px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(154, 224, 90, .14);
  border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(154, 224, 90, .045), rgba(154, 224, 90, 0) 220px), var(--noite-alta);
}
.lab__cabeca p { margin: 0; max-width: 62ch; color: var(--nevoa); }
.rk .lab__cabeca h3 { margin-bottom: 6px; }

.lab__comandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 22px 0 26px;
}
.lab__arranjos { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ceu-baixo); border: 1px solid rgba(255, 255, 255, .06); }
.lab__arranjos button {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nevoa);
  font: 600 .9rem Archivo, sans-serif;
  cursor: pointer;
}
.lab__arranjos button[aria-pressed="true"] { background: var(--seiva); color: #1A1206; }
.lab__arranjos button:focus-visible,
.lab__semana select:focus-visible { outline: 2px solid var(--folha); outline-offset: 2px; }
.lab__semana { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--nevoa); }
.lab__semana select {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--raio-s);
  background: var(--ceu-baixo);
  color: var(--branco);
  font: 500 .9rem Archivo, sans-serif;
}

.lab__corpo {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.lab__canteiro { margin: 0; }
.lab__canteiro figcaption { margin-top: 12px; font-size: .84rem; color: var(--nevoa-baixa); }
.lab__palco { position: relative; }
.lab__grelha {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 6px;
  background: var(--terra);
  box-shadow: 0 0 0 4px #3D6B2A, 0 18px 40px -18px rgba(0, 0, 0, .9);
}
.lcasa {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: default;
  background:
    url("imagens/rankup/sementes.png") 0 0 / 800% 100% no-repeat,
    linear-gradient(180deg, #5B3B24 0 20%, #4A2F1C 20%);
  background-position: calc(var(--i) / 7 * 100%) 0, 0 0;
  background-size: 800% 100%, 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.lcasa__n {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 18px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(6, 5, 5, .78);
  font: 700 .68rem/1.2 "JetBrains Mono", ui-monospace, monospace;
  color: var(--seiva);
  text-align: center;
}
.lcasa--morta { filter: grayscale(1) brightness(.55); }
.lcasa--morta .lcasa__n { color: var(--morta); }
.lcasa--acesa { box-shadow: 0 0 0 3px var(--seiva); z-index: 1; }
.lcasa:focus-visible { outline: 2px solid var(--folha); outline-offset: 1px; z-index: 1; }

/* o caminho por cima da grelha, dentro do mesmo rebordo de 10px */
.lab__caminho {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  pointer-events: none;
  overflow: visible;
}
.lab__caminho polyline {
  fill: none;
  stroke: var(--seiva);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .85;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 3px rgba(6, 5, 5, .9));
}
.lab__caminho .lab__traco--espera { stroke-dashoffset: 1; }
.lab__caminho .lab__traco--anda { animation: lab-traco 1.8s var(--suave) both; }
@keyframes lab-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* o relogio: uma linha por casa, pela ordem, de 0 a 90 segundos */
.lab__relogio { min-width: 0; }
.colheita { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.colheita__linha {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 11px;
}
.colheita__n { font: 700 .62rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--nevoa-baixa); text-align: right; }
.colheita__pista {
  position: relative;
  height: 100%;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255, 255, 255, .07) 0 calc(33.333% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(255, 255, 255, .07) 0 calc(66.666% + .5px), transparent 0),
    rgba(255, 255, 255, .025);
  border-radius: 2px;
}
.colheita__barra {
  position: absolute;
  top: 1px;
  bottom: 1px;
  min-width: 3px;
  border-radius: 2px;
  background: var(--cor);
  opacity: .82;
}
.colheita__linha--acesa .colheita__barra { opacity: 1; box-shadow: 0 0 0 2px var(--seiva); }
.colheita__linha--acesa .colheita__n { color: var(--seiva); }
.colheita__linha--morta .colheita__n { color: var(--morta); }
.colheita__linha--morta .colheita__barra { background: var(--morta); width: 3px !important; }
.colheita__eixo { position: relative; height: 18px; margin: 6px 0 0 34px; }
.colheita__eixo span {
  position: absolute;
  left: calc(var(--t) / 90 * 100%);
  transform: translateX(-50%);
  font: 700 .66rem "JetBrains Mono", ui-monospace, monospace;
  color: var(--nevoa-baixa);
  white-space: nowrap;
}
.colheita__eixo span:first-child { transform: none; }
.colheita__eixo span:last-child { transform: translateX(-100%); }

.lab__contas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 28px;
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.lab__contas dt {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--branco);
}
.lab__contas dd { margin: 6px 0 0; font-size: .84rem; color: var(--nevoa); }
.lab__contas .lab__conta--ma dt { color: var(--morta); }
.lab__nota { margin: 22px 0 0; max-width: 72ch; color: var(--nevoa); }
.lab__leitura { margin: 10px 0 0; min-height: 3em; max-width: 72ch; font-size: .92rem; color: var(--nevoa-baixa); }
.lab__leitura b { color: var(--branco); font-weight: 600; }

/* ------------------------------------------------------- as pecas */

.pecas { margin-top: clamp(48px, 6vw, 80px); }
.pecas__rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pecas__tabela { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.pecas__tabela th,
.pecas__tabela td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); text-align: left; vertical-align: middle; }
.pecas__tabela thead th { font-size: .78rem; font-weight: 500; color: var(--nevoa-baixa); }
.pecas__tabela tbody th { font-weight: 600; color: var(--branco); white-space: nowrap; }
.pecas__tabela td { color: var(--nevoa); }
.pecas__tabela td:nth-child(2),
.pecas__tabela td:nth-child(3),
.pecas__tabela td:nth-child(4) { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .82rem; color: var(--coroa-gelo); white-space: nowrap; }
.semente {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: -7px;
  background: url("imagens/rankup/sementes.png") 0 0 / 800% 100% no-repeat;
  background-position: calc(var(--i) / 7 * 100%) 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pecas__nota { margin: 16px 0 0; max-width: 72ch; font-size: .9rem; color: var(--nevoa-baixa); }

/* ------------------------------------------- graus, semanas e Seiva */

.regras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}
.regras__bloco > p { margin: 16px 0 0; font-size: .9rem; color: var(--nevoa); }
.regras__bloco > p b { color: var(--branco); font-weight: 600; }

.graus { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.graus li { display: grid; justify-items: center; align-content: start; gap: 2px; font-size: .72rem; line-height: 1.25; text-align: center; color: var(--nevoa-baixa); }
.graus li::before {
  content: "";
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  background: url("imagens/rankup/graus.png") 0 0 / 500% 100% no-repeat;
  background-position: calc(var(--i) / 4 * 100%) 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.graus b { font-size: .86rem; font-weight: 600; color: var(--branco); }

.semanas { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--nevoa); }
.semanas b { color: var(--branco); font-weight: 600; }

.seiva { margin: 10px 0 0; }
.seiva__barra {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 0 30%, var(--seiva-fundo) 30%, var(--seiva) 70%, var(--seiva) 100%);
}
.seiva__marcas { position: relative; height: 40px; margin-top: 8px; }
.seiva__marcas span {
  position: absolute;
  left: calc(var(--x) * 1%);
  transform: translateX(-50%);
  font-size: .76rem;
  line-height: 1.3;
  color: var(--nevoa);
  text-align: center;
  white-space: nowrap;
}

/* ------------------------------------------------------- as melhorias */

.melhorias { margin-top: clamp(48px, 6vw, 80px); }
.melhorias__intro { margin: 0; color: var(--nevoa); }
.melhorias__intro code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .86rem; color: var(--coroa-gelo); }
.melhorias__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 32px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.melhorias__lista li { padding-top: 14px; border-top: 2px solid rgba(111, 226, 192, .35); }
.melhorias__lista b {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--branco);
}
.melhorias__lista p { margin: 6px 0 8px; font-size: .9rem; color: var(--nevoa); max-width: 60ch; }
.melhorias__lista span { font-size: .82rem; color: var(--seiva); }
.melhorias__lista .melhorias__canteiro { grid-column: 1 / -1; border-top-color: rgba(154, 224, 90, .45); }

.estufa__foto { margin-top: clamp(40px, 5vw, 64px) !important; }
.estufa__foto img { max-height: 440px; object-fit: cover; }

@media (max-width: 960px) {
  .ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab__corpo { grid-template-columns: minmax(0, 1fr); }
  .lab__canteiro { max-width: 360px; }
  .lab__contas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regras { grid-template-columns: minmax(0, 1fr); }
  .melhorias__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ciclo { grid-template-columns: minmax(0, 1fr); }
  .lab__arranjos { width: 100%; }
  .lab__arranjos button { flex: 1; padding: 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab__caminho .lab__traco--anda { animation: none; }
}

/* ------------------------------------------------------- a aventura */

.aventura {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.numeros { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 26px 0 0; }
.numeros div { max-width: 130px; }
.numeros dt {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--branco);
}
.numeros dd { margin: 4px 0 0; font-size: .86rem; color: var(--nevoa); }
.aventura__paga { margin: 22px 0 0; color: #3FD9A8; font-weight: 600; }

.salas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(24px, 4vw, 40px);
}

.arsenal {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(48px, 6vw, 80px);
}
.arsenal p { margin: 0; color: var(--nevoa); max-width: 50ch; }
.laminas { margin-top: 18px !important; }
.laminas img { display: block; width: 100%; height: auto; }

.conjuntos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.conjuntos li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
}
.conjuntos li::before {
  content: "";
  flex: 0 0 40px;
  height: 40px;
  border-radius: 6px;
  background:
    url("imagens/rankup/conjuntos.png") 0 0 / 600% 100% no-repeat,
    rgba(255, 255, 255, .04);
  background-position: calc(var(--i) / 5 * 100%) 0, 0 0;
  background-size: 600% 100%, 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ------------------------------------------------------- caixas e pets */

.caixas img { display: block; width: 100%; height: auto; }
.caixas__nomes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-weight: 600;
  font-size: .95rem;
}
.caixas__nomes li:nth-child(1) { color: #D8D2C8; }
.caixas__nomes li:nth-child(2) { color: #F0B429; }
.caixas__nomes li:nth-child(3) { color: #FF6FD8; }
.caixas__nomes li:nth-child(4) { color: #A98BFF; }
.caixas__nomes li:nth-child(5) { color: #4FE3E8; }
.caixas__nomes li:nth-child(6) { color: #47D18A; }
.caixas figcaption { text-align: center; margin-top: 18px; }

.pets {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
}
.pets p { margin: 0; max-width: 58ch; color: var(--nevoa); }
.ovos { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; }
.ovos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--nevoa);
}
.ovos li::before {
  content: "";
  width: 48px;
  height: 48px;
  background: url("imagens/rankup/ovos.png") 0 0 / 400% 100% no-repeat;
  background-position: calc(var(--i) / 3 * 100%) 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ------------------------------------------------------- comercio */

.quadro-duplo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
}
.lista { margin: 0; }
.lista div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.lista dt { font-weight: 600; color: var(--branco); }
.lista dd { margin: 0; color: var(--nevoa); }

/* ------------------------------------------------------- clas */

.faixa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: 30px 34px;
  border-radius: 18px;
  border: 1px solid var(--linha);
  background: rgba(240, 180, 41, .035);
}
.faixa p:not(.rk-y) { margin: 0; color: var(--nevoa); max-width: 50ch; }

/* ------------------------------------------------------- a descida */

.poco {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}

/* O corte do poco: as paredes sao bedrock, as camadas vao pela ordem
   em que se cavam, e o Coracao bate no fundo. */
.poco__corte {
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
  border-radius: 0 0 6px 6px;
  background:
    repeating-linear-gradient(90deg, #1C1A18 0 6px, #121110 6px 10px, #242120 10px 14px),
    #161412;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.camada {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 18px;
  border: 0;
  background-size: 32px 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  color: var(--branco);
  text-align: left;
  cursor: pointer;
  transition: filter .15s var(--suave);
}
.camada:hover { filter: brightness(1.18); }
.camada[aria-selected="true"] { z-index: 1; outline: 3px solid var(--coroa); outline-offset: -3px; }
.camada:focus-visible { z-index: 2; outline: 3px solid var(--branco); outline-offset: -3px; }
.camada__n {
  min-width: 28px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .76rem;
  text-align: center;
}
.camada__nome {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .5);
}
.camada--coracao { height: 96px; }
.camada__nucleo {
  position: absolute;
  right: 28px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  background: #0F3B3E;
  box-shadow: inset 0 0 0 6px #147D82, 0 0 0 0 rgba(31, 199, 199, .6);
  animation: bate 2.6s ease-in-out infinite;
}
@keyframes bate {
  0%, 100% { box-shadow: inset 0 0 0 6px #147D82, 0 0 0 0 rgba(31, 199, 199, .0); }
  12%      { box-shadow: inset 0 0 0 6px #25D0D0, 0 0 26px 8px rgba(31, 199, 199, .55); }
  28%      { box-shadow: inset 0 0 0 6px #147D82, 0 0 8px 2px rgba(31, 199, 199, .2); }
  40%      { box-shadow: inset 0 0 0 6px #25D0D0, 0 0 20px 6px rgba(31, 199, 199, .45); }
}
.poco__corte { grid-column: 1; grid-row: 1; }
.poco__lado { grid-column: 2; grid-row: 1 / span 2; }
.poco__ordem { grid-column: 1; grid-row: 2; margin: -18px 4px 0; font-size: .82rem; color: var(--nevoa-baixa); }

.camada-lida {
  --tom: #8A5A3C;
  padding: 22px 24px;
  border-left: 4px solid var(--tom);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, .03);
}
.camada-lida h3 { font-size: 2rem; margin-bottom: 12px; }
.camada-lida p { margin: 8px 0 0; color: var(--nevoa); }
.camada-lida p b { color: var(--branco); font-weight: 600; }
.camada-lida__n { margin: 0 0 6px !important; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; }

.papeis__titulo { margin-top: 36px !important; font-size: 1.2rem !important; }
.papeis { margin: 0; padding: 0; list-style: none; }
.papeis li {
  display: block;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--nevoa);
}
.papeis li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--tom);
}
.papeis b { color: var(--tom); font-weight: 600; margin-right: 2px; }
.poco__nota { margin: 22px 0 0; color: var(--branco); font-weight: 500; }

.remate { padding-top: clamp(80px, 10vw, 140px); text-align: center; }
.remate__y { margin: 0 0 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; color: #FF7A5C; }
.remate__grito {
  max-width: 17ch;
  margin: 0 auto 34px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: .98;
  text-transform: uppercase;
}

/* ------------------------------------------------------- ecras menores */

@media (max-width: 960px) {
  .rk-cabeca--lado,
  .relogio,
  .skins,
  .aventura,
  .arsenal,
  .poco { grid-template-columns: minmax(0, 1fr); }
  .poco__lado { grid-column: 1; grid-row: 3; }
  .rk-cabeca--lado .rk-cabeca__copia { margin-top: 0; }

  .moedas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .moeda:nth-child(3) { padding-left: 0; border-left: 0; }

  .encantos { grid-template-columns: minmax(0, 1fr); }

  .skins__palco { max-width: 420px; margin: 0 auto; }
  .skins__texto { order: -1; }

  .ilha {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "lote" "mina" "esc";
  }
  .ilha__escavacao { justify-self: start; }

  .relogio__mostrador { max-width: 380px; margin: 0 auto; }

  .faixa { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

@media (max-width: 620px) {
  .rk-hero { min-height: 0; padding: 120px 16px 88px; }
  .rk-hero__grito span:nth-child(2) { padding-left: .35em; }
  .rk-hero__grito span:nth-child(3) { padding-left: .7em; }
  .rk-sec { padding-left: 16px; padding-right: 16px; }

  .moedas { grid-template-columns: minmax(0, 1fr); }
  .moeda { padding-left: 0; border-left: 0; }
  .moeda + .moeda { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .07); }
  .moeda__icone { width: 48px; height: 48px; margin-bottom: 14px; }
  .moeda__icone--nota { background-size: 48px 48px; }
  .moeda__icone--ficha { background-size: 48px 384px; animation-name: quadros8p; }
  .moeda__icone--gema { background-size: 48px 192px; animation-name: quadros4p; }

  .patamar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .peca { width: 48px; height: 48px; }
  .peca img { width: 40px; height: 40px; }

  .salas { grid-template-columns: minmax(0, 1fr); }
  .conjuntos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .caixas__nomes { font-size: .72rem; }
  .pets { flex-direction: column; align-items: flex-start; padding: 20px; }

  .quadro-duplo { grid-template-columns: minmax(0, 1fr); }
  .lista div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .camada { height: 48px; padding: 0 12px; }
  .camada__nome { font-size: 1.1rem; }
  .camada--coracao { height: 80px; }
  .camada__nucleo { right: 16px; }
  .faixa { padding: 24px 20px; }
}
@keyframes quadros8p { to { background-position: 0 -384px; } }
@keyframes quadros4p { to { background-position: 0 -192px; } }

/* ------------------------------------------------------- menos movimento */

@media (prefers-reduced-motion: reduce) {
  .moeda__icone, .camada__nucleo { animation: none !important; }
  .encanto, .encanto:hover { transition: none; transform: none; }
}