/* ==========================================================================
   Os mini-aplicativos. Cada um tem cara propria, mas todos usam a mesma
   moldura, a mesma escala de raio (zero) e o mesmo acento, senao a tela
   deixaria de parecer um computador so.
   ========================================================================== */

/* --- diálogo simples ------------------------------------------------------ */

.dialogo {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 6);
  text-align: center;
  font-size: var(--texto-peq);
}

/* --- ícone animado do Tarot na área de trabalho --------------------------- */

/* POSIÇÃO EM PIXEL, NÃO EM PORCENTAGEM.
   Com background-size: 1100% e a animação indo de 0% a 100% em steps(11), os
   valores caem em múltiplos de 1/11, mas os quadros de uma tira de 11 ficam em
   múltiplos de 1/10. A diferença é pequena e some no meio do quadro: o caderninho
   parecia deslizar da direita para a esquerda em vez de folhear parado.
   Ancorando na largura de um quadro em pixel, os 11 passos caem exatos. */
.icone__arte--tarot {
  --quadros: 11;
  --quadro: 44px;
  width: var(--quadro);
  height: 40px;
  background-image: url('../assets/sprites/tarot.png');
  background-repeat: no-repeat;
  background-size: calc(var(--quadro) * var(--quadros)) 100%;
  filter: drop-shadow(var(--sombra-icone));
  animation: tarot-quadros 1.1s steps(11) infinite;
}

@keyframes tarot-quadros {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: calc(var(--quadro) * var(--quadros) * -1);
  }
}

@media (min-width: 700px) {
  .icone__arte--tarot {
    --quadro: 54px;
    height: 48px;
  }
}

/* --- convite -------------------------------------------------------------- */

.janela--convite > .barra-titulo {
  background: repeating-linear-gradient(
    90deg,
    var(--janela-titulo) 0 6px,
    var(--acao-fundo) 6px 12px
  );
}

.convite {
  display: grid;
  align-content: start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 6) calc(var(--u) * 5) calc(var(--u) * 7);
  text-align: center;
}

.convite__saudacao {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.convite__chamada {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-grande);
  font-weight: 700;
  line-height: 1.15;
  color: var(--acao);
}

/* peso 400: carrega a idade, e 700 embaralha 2 com 8 */
.convite__selo {
  justify-self: center;
  margin: 0;
  padding: var(--u) calc(var(--u) * 4);
  background: var(--acao-fundo);
  border: var(--u) solid var(--janela-borda);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-base);
  font-weight: 400;
  color: var(--acao);
}

.convite__dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--u) calc(var(--u) * 4);
  margin: calc(var(--u) * 2) 0 0;
  padding: calc(var(--u) * 4);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda);
  text-align: left;
}

.convite__dados dt {
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-fraca);
  align-self: center;
}

/* a data, a hora e o numero da rua vivem aqui: peso 400 e inegociavel.
   text-wrap: balance para a data nao quebrar deixando "2026" sozinho na linha */
.convite__dados dd {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--tinta);
}

.convite__pergunta {
  margin: calc(var(--u) * 2) 0 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  color: var(--tinta);
}

.convite__botoes {
  display: grid;
  gap: calc(var(--u) * 2);
}

.convite__botoes .botao {
  width: 100%;
  padding-block: calc(var(--u) * 3);
  font-size: var(--texto-base);
}

.convite__coracao {
  margin: calc(var(--u) * 4) 0 0;
  font-size: 3rem;
  line-height: 1;
  color: var(--acao-viva);
  animation: coracao-bate 1.2s ease-in-out infinite;
}

@keyframes coracao-bate {
  0%,
  100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.14);
  }
}

.convite__recado {
  margin: 0;
  padding: 0 calc(var(--u) * 2);
  font-size: var(--texto-peq);
  line-height: 1.6;
  color: var(--tinta-media);
}

.convite__fechar {
  justify-self: center;
  margin-top: calc(var(--u) * 3);
  min-width: 140px;
}

.convite__nota {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
}

/* --- CD Player ------------------------------------------------------------ */

.player {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  background: var(--janela-tinta-clara);
}

.player__capa {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
}

.player__disco {
  width: 64px;
  height: 64px;
}

.player__disco.girando {
  animation: disco-gira 2.4s linear infinite;
}

@keyframes disco-gira {
  to {
    transform: rotate(360deg);
  }
}

.player__painel {
  display: grid;
  align-content: start;
  gap: calc(var(--u) * 2);
  min-width: 0;
}

.player__campos {
  display: grid;
  gap: var(--u);
}

.player__campo {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--u);
  align-items: center;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.player__campo output {
  min-width: 0;
  padding: var(--u) calc(var(--u) * 2);
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-mini);
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Só um berço para o input range: o desenho da barra e do cursor vive nas
   pseudo-classes do próprio controle, mais abaixo. Sem padding nem borda aqui,
   senão o cursor de 18px de altura fica cortado pela moldura. */
.player__trilha {
  display: grid;
  align-items: center;
  min-height: 20px;
}

.player__controles {
  display: flex;
  gap: var(--u);
}

.player__botao {
  flex: 1;
  padding: calc(var(--u) * 1.5) 0;
  background: var(--branco);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: inset -2px -2px 0 var(--janela-titulo);
  font-size: var(--texto-mini);
  color: var(--acao);
}

.player__botao:hover:not(:disabled) {
  background: var(--acao-fundo);
}

.player__botao:disabled {
  color: var(--tinta-fraca);
  cursor: default;
}

.player__aviso {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  line-height: 1.4;
  color: var(--tinta-fraca);
}

/* --- Paint ---------------------------------------------------------------- */

.paint {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 0;
  background: var(--cinza-win);
}

.paint__menu {
  display: flex;
  gap: calc(var(--u) * 4);
  padding: var(--u) calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border-bottom: 1px solid var(--janela-borda);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.paint__area {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.paint__ferramentas {
  display: grid;
  grid-template-columns: repeat(2, 26px);
  gap: 2px;
  align-content: start;
  padding: calc(var(--u) * 1.5);
  background: var(--janela-tinta-clara);
  border-right: 1px solid var(--janela-borda);
}

.paint__ferramenta {
  height: 26px;
  background: var(--cinza-win);
  border: 2px outset var(--branco);
  font-size: var(--texto-peq);
  line-height: 1;
}

.paint__ferramenta.ativa {
  background: var(--acao-fundo);
  border-style: inset;
}

.paint__espessuras {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  margin-top: calc(var(--u) * 2);
}

.paint__espessura {
  display: grid;
  place-items: center;
  flex: 1;
  height: 22px;
  background: var(--cinza-win);
  border: 2px outset var(--branco);
}

.paint__espessura span {
  display: block;
  background: var(--tinta);
  border-radius: 50%;
}

.paint__espessura.ativa {
  background: var(--acao-fundo);
  border-style: inset;
}

.paint__moldura {
  min-width: 0;
  min-height: 0;
  padding: 2px;
  background: var(--cinza-win-sombra);
}

.paint__tela {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--branco);
  touch-action: none;
}

.paint__cores {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: calc(var(--u) * 1.5);
  background: var(--janela-tinta-clara);
  border-top: 1px solid var(--janela-borda);
}

.paint__cor-atual {
  width: 26px;
  height: 22px;
  margin-right: calc(var(--u) * 2);
  border: 2px inset var(--branco);
}

.paint__cor {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--cinza-win-sombra);
}

.paint__rodape {
  padding: var(--u) calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border-top: 1px solid var(--janela-borda);
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
}

/* --- Tarot ---------------------------------------------------------------- */

.tarot {
  display: grid;
  align-content: start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 5) calc(var(--u) * 4);
  background: linear-gradient(var(--lilas-fundo), var(--janela-corpo));
  text-align: center;
}

.tarot--carregando {
  align-content: center;
  justify-items: center;
  gap: calc(var(--u) * 4);
}

.tarot__pocao {
  width: 80px;
  height: 96px;
  background-image: url('../assets/sprites/pocao.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: pocao-borbulha 0.5s steps(1) infinite;
}

@keyframes pocao-borbulha {
  0%,
  50% {
    background-position: 0 0;
  }
  50.01%,
  100% {
    background-position: 100% 0;
  }
}

.tarot__preparando {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 700;
  color: var(--acao);
}

.tarot__murmurio {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
}

.tarot__titulo {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-titulo);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--acao);
}

.tarot__guia {
  margin: 0;
  font-size: var(--texto-peq);
  color: var(--tinta-media);
}

.tarot__mesa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
}

.carta {
  aspect-ratio: 2 / 3;
  padding: 0;
  background: none;
  border: 0;
  perspective: 600px;
  animation: carta-chega var(--t-lento) var(--curva) both;
}

@keyframes carta-chega {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.carta__giro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-lento) var(--curva);
}

.carta.virada .carta__giro {
  transform: rotateY(180deg);
}

.carta__lado {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 2);
  border: var(--u) solid var(--janela-borda-escura);
  backface-visibility: hidden;
}

.carta__costas {
  background: repeating-linear-gradient(
      45deg,
      var(--acao) 0 5px,
      var(--acao-viva) 5px 10px
    );
}

.carta__losango {
  width: 26px;
  height: 26px;
  background: var(--acao-fundo);
  border: var(--u) solid var(--branco);
  transform: rotate(45deg);
}

.carta__frente {
  background: var(--janela-corpo);
  transform: rotateY(180deg);
}

.carta__arte {
  width: 60px;
  height: 60px;
}

.carta__nome {
  font-family: var(--fonte-pixel);
  font-size: var(--texto-mini);
  font-weight: 700;
  line-height: 1.1;
  color: var(--acao);
}

.tarot__leitura {
  display: grid;
  gap: var(--u);
  text-align: left;
}

.tarot__recado {
  margin: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--janela-tinta-clara);
  border-left: calc(var(--u) * 2) solid var(--acao);
  font-size: var(--texto-peq);
  line-height: 1.5;
  color: var(--tinta-media);
  animation: recado-entra var(--t-medio) var(--curva) both;
}

.tarot__recado strong {
  color: var(--acao);
}

@keyframes recado-entra {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.tarot__denovo {
  justify-self: center;
}

/* --- Orkut ---------------------------------------------------------------- */

.orkut {
  padding: 0;
  background: var(--azul-orkut-fundo);
  font-size: var(--texto-peq);
}

.orkut__topo {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--azul-orkut);
  color: var(--branco);
}

.orkut__topo strong {
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
}

.orkut__topo span {
  font-size: var(--texto-mini);
  opacity: 0.9;
}

.orkut__grade {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
}

.orkut__lado {
  display: grid;
  gap: calc(var(--u) * 2);
  align-content: start;
  padding: calc(var(--u) * 2);
  background: var(--branco);
  border: 1px solid var(--azul-orkut);
}

/* Quadrado e sem margem: a foto é 1:1, então cover preenche a caixa inteira.
   Com contain sobrava faixa clara em cima e embaixo, e o retrato ficava um
   retângulo vertical com a imagem boiando no meio. */
.orkut__foto {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  align-self: start;
  background: var(--janela-tinta-clara);
  border: 1px solid var(--azul-orkut);
}

.orkut__nome {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-peq);
  font-weight: 700;
  line-height: 1.2;
  color: var(--azul-orkut);
}

.orkut__barra {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.orkut__barra span {
  flex: 1;
}

.orkut__estrela {
  width: 9px;
  height: 9px;
  background: var(--cinza-win);
  transform: rotate(45deg);
}

.orkut__estrela.cheia {
  background: var(--acao-viva);
}

.orkut__contadores {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orkut__contadores li {
  display: flex;
  justify-content: space-between;
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.orkut__contadores strong {
  color: var(--azul-orkut);
}

.orkut__principal {
  display: grid;
  gap: calc(var(--u) * 3);
  min-width: 0;
}

.orkut__bloco {
  padding: calc(var(--u) * 3);
  background: var(--branco);
  border: 1px solid var(--azul-orkut);
}

.orkut__bloco h3 {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-peq);
  color: var(--azul-orkut);
}

.orkut__bloco p {
  margin: 0;
  line-height: 1.6;
  color: var(--tinta-media);
}

.orkut__comunidades {
  display: grid;
  gap: var(--u);
  margin: 0;
  padding-left: 1.1em;
  color: var(--tinta-media);
}

.orkut__recado {
  padding: calc(var(--u) * 2) 0;
  border-top: 1px dashed var(--cinza-win);
}

.orkut__recado strong {
  color: var(--azul-orkut);
}

.orkut__recado p {
  margin: 2px 0 0;
}

.orkut__deixar {
  margin-top: calc(var(--u) * 3);
}

.orkut__deixar:disabled {
  color: var(--tinta-fraca);
  cursor: default;
}

/* --- MSN ------------------------------------------------------------------ */

.msn {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 0;
  background: var(--branco);
  font-size: var(--texto-peq);
}

.janela.tremendo {
  animation: tremida 0.6s ease-in-out;
}

@keyframes tremida {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-7px, 4px); }
  30% { transform: translate(6px, -5px); }
  45% { transform: translate(-5px, -3px); }
  60% { transform: translate(4px, 5px); }
  80% { transform: translate(-3px, 2px); }
}

.msn__topo {
  display: flex;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: linear-gradient(var(--branco), var(--janela-tinta-clara));
  border-bottom: 1px solid var(--janela-borda);
}

.msn__retrato {
  width: 38px;
  height: 38px;
  padding: 2px;
  background: var(--branco);
  border: 1px solid var(--janela-borda);
}

.msn__quem {
  display: grid;
  min-width: 0;
}

.msn__quem strong {
  font-family: var(--fonte-pixel);
  color: var(--verde-msn);
}

.msn__quem span {
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msn__historico {
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--u) * 3);
  display: grid;
  gap: calc(var(--u) * 2);
  align-content: start;
}

.msn__fala {
  margin: 0;
  line-height: 1.5;
  color: var(--tinta);
  animation: fala-entra var(--t-medio) var(--curva) both;
}

@keyframes fala-entra {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.msn__fala--ela strong {
  color: var(--verde-msn);
}

.msn__fala--voce strong {
  color: var(--azul-orkut);
}

.msn__digitando {
  margin: 0;
  padding: 0 calc(var(--u) * 3) var(--u);
  font-size: var(--texto-mini);
  font-style: italic;
  color: var(--tinta-fraca);
}

.msn__barra {
  display: grid;
  gap: var(--u);
  padding: calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border-top: 1px solid var(--janela-borda);
}

.msn__emoticons {
  display: flex;
  gap: var(--u);
}

.msn__emoticon {
  padding: 2px calc(var(--u) * 2);
  background: var(--branco);
  border: 1px solid var(--janela-borda);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.msn__emoticon:hover {
  background: var(--acao-fundo);
}

.msn__linha {
  display: flex;
  gap: var(--u);
}

.msn__linha input {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 2);
  background: var(--branco);
  border: 1px solid var(--janela-borda);
  font: inherit;
  color: var(--tinta);
}

.msn__cutucar {
  width: 100%;
}

/* --- Purble Place --------------------------------------------------------- */

/* grid-template-rows em vez de align-content: start, senao sobrava um terco de
   grama vazia embaixo das casinhas */
.purble {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 5) calc(var(--u) * 3) 0;
  background: linear-gradient(
    var(--ceu) 0%,
    var(--ceu-claro) 58%,
    var(--grama) 58%,
    var(--grama-escura) 100%
  );
  overflow: hidden;
}

.purble__ceu {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.purble__nuvem {
  position: absolute;
  width: 54px;
  height: 18px;
  background: var(--branco);
  border-radius: 999px;
  opacity: 0.9;
}

.purble__nuvem::before,
.purble__nuvem::after {
  content: '';
  position: absolute;
  background: var(--branco);
  border-radius: 50%;
}

.purble__nuvem::before {
  width: 24px;
  height: 24px;
  top: -11px;
  left: 8px;
}

.purble__nuvem::after {
  width: 18px;
  height: 18px;
  top: -8px;
  right: 9px;
}

.purble__nuvem--a {
  top: 16px;
  left: 8%;
  animation: nuvem-anda 22s linear infinite;
}

/* a nuvem da direita saia da janela ao andar, e o scrollWidth denunciava */
.purble__nuvem--b {
  top: 40px;
  left: 52%;
  animation: nuvem-anda 30s linear infinite reverse;
}

@keyframes nuvem-anda {
  to {
    transform: translateX(70px);
  }
}

.purble__titulo {
  position: relative;
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-titulo);
  font-weight: 700;
  color: var(--acao);
  text-shadow: 2px 2px 0 var(--branco), 4px 4px 0 var(--janela-borda);
}

.purble__casas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
  width: 100%;
  align-items: end;
}

.purble__casa {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0 0 calc(var(--u) * 2);
  background: none;
  border: 0;
}

.purble__telhado {
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 34px solid transparent;
  border-bottom: 26px solid var(--acao);
}

.purble__casa--pares .purble__telhado {
  border-bottom-color: var(--lilas);
}

.purble__casa--loja .purble__telhado {
  border-bottom-color: var(--dourado);
}

.purble__porta {
  width: 54px;
  height: 44px;
  background: var(--acao-fundo);
  border: var(--u) solid var(--janela-borda-escura);
  border-top: 0;
  box-shadow: inset 0 -14px 0 var(--janela-titulo);
}

.purble__nome {
  margin-top: var(--u);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta);
}

.purble__casa:hover .purble__porta {
  background: var(--branco);
}

.purble__chao {
  position: relative;
  width: 100%;
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    var(--grama-escura) 0 12px,
    var(--grama-listra) 12px 24px
  );
}

/* --- Paciência (Klondike) -------------------------------------------------- */

.solitaire {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
  background: var(--mesa-verde);
  overflow: hidden;
}

.solitaire__mesa {
  display: grid;
  align-content: start;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  min-height: 0;
  overflow-y: auto;
}

/* monte, descarte, um vão, e as quatro bases: é o desenho clássico da mesa */
.solitaire__topo {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 2);
}

/* A primeira base salta para a quarta coluna e abre o vão do meio, como na mesa
   de verdade. É o terceiro filho, e não :first-of-type: o descarte também é uma
   div, então :first-of-type nunca casava com a base e o vão saía no fim. */
.solitaire__topo > :nth-child(3) {
  grid-column: 4;
}

.solitaire__colunas {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 2);
  align-items: start;
}

.solitaire__pilha,
.solitaire__coluna {
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
}

.solitaire__pilha {
  display: grid;
  min-height: 62px;
}

.solitaire__pilha.vazia,
.solitaire__coluna.vazia {
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  min-height: 62px;
}

.solitaire__coluna {
  display: grid;
  justify-items: stretch;
  min-height: 62px;
}

.solitaire__carta {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  min-height: 62px;
  padding: 3px 4px;
  background: var(--branco);
  border: 1px solid var(--tinta);
  border-radius: 3px;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-peq);
  font-weight: 400;
  line-height: 1;
  color: var(--tinta);
}

.solitaire__carta.vermelha {
  color: var(--carta-vermelha);
}

.solitaire__carta--costas {
  background: repeating-linear-gradient(
    45deg,
    var(--acao) 0 4px,
    var(--acao-viva) 4px 8px
  );
  border-color: var(--janela-borda-escura);
}

/* a carta escolhida sobe e ganha contorno: é o único retorno de que o toque pegou */
.solitaire__carta.escolhida {
  outline: var(--u) solid var(--dourado);
  outline-offset: -2px;
  translate: 0 -6px;
}

.solitaire__canto {
  font-variant-numeric: tabular-nums;
}

.solitaire__base,
.solitaire__descarte,
.solitaire__monte {
  cursor: pointer;
}

.solitaire__marca,
.solitaire__reciclar {
  display: grid;
  place-items: center;
  min-height: 62px;
  font-size: var(--texto-med);
  color: rgba(255, 255, 255, 0.6);
}

.solitaire__rodape {
  display: flex;
  gap: calc(var(--u) * 3);
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--janela-tinta-clara);
}

.solitaire__placar {
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta);
}

.solitaire__dica {
  flex: 1;
  min-width: 0;
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
  text-align: center;
}

.solitaire__voadora {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 52px;
  background: var(--branco);
  border: 1px solid var(--tinta);
  border-radius: 3px;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-mini);
  color: var(--tinta);
  pointer-events: none;
}

.solitaire__voadora.vermelha {
  color: var(--carta-vermelha);
}

/* --- Purble Shop ----------------------------------------------------------- */

.shop {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  background: linear-gradient(var(--lilas-fundo), var(--branco));
}

.shop__vitrine {
  display: grid;
  justify-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 2);
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
}

.shop__retrato {
  width: 76px;
  height: 76px;
}

.shop__placar {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.shop__escolhas {
  display: grid;
  gap: var(--u);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}

.shop__categoria {
  display: grid;
  gap: 2px;
}

.shop__cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* O veredito por peça: é ele que torna o jogo dedutível em vez de adivinhação,
   então precisa saltar aos olhos e não ser um risquinho pálido no canto. */
.shop__marca {
  min-width: 1.4em;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.shop__marca.certa {
  color: var(--verde-msn);
}

.shop__marca.errada {
  color: var(--acao);
}

.shop__fileira {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.shop__opcao {
  display: grid;
  place-items: center;
  padding: 2px;
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
}

.shop__opcao img {
  width: 100%;
  max-width: 34px;
  aspect-ratio: 1;
}

.shop__opcao.escolhida {
  background: var(--acao-fundo);
  border-color: var(--acao);
}

.shop__rodape {
  display: flex;
  gap: calc(var(--u) * 2);
  justify-content: center;
}

/* --- Comfy Cakes ----------------------------------------------------------- */

.cakes {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  background: linear-gradient(var(--ceu-claro), var(--branco));
}

.cakes__pedido {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 2);
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
}

.cakes__arte {
  width: 56px;
  height: 56px;
}

.cakes__titulo {
  margin: 0 0 2px;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* Uma coluna só. Em duas colunas as quatro linhas viravam "forma redondo massa
   baunilha" na leitura, e o pedido é justamente a coisa que precisa ficar clara. */
.cakes__lista {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-mini);
}

.cakes__lista li {
  display: flex;
  gap: calc(var(--u) * 3);
  justify-content: space-between;
  padding: 1px 0;
  border-bottom: 1px dotted var(--janela-titulo);
  color: var(--tinta-fraca);
}

.cakes__lista li:last-child {
  border-bottom: 0;
}

.cakes__lista strong {
  color: var(--tinta);
}

/* a esteira: faixa listrada com a forma andando por cima */
.cakes__esteira {
  position: relative;
  height: 44px;
  background: repeating-linear-gradient(
    90deg,
    var(--cinza-win) 0 8px,
    var(--cinza-win-sombra) 8px 16px
  );
  border: var(--u) solid var(--janela-borda-escura);
  overflow: hidden;
}

.cakes__forma {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 38px;
  height: 38px;
  translate: -50% -50%;
}

.cakes__tempo {
  height: 8px;
  background: var(--janela-tinta-clara);
  border: 1px solid var(--janela-borda);
}

.cakes__tempo span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--acao);
}

.cakes__painel {
  display: grid;
  align-content: start;
  gap: var(--u);
  min-height: 0;
  overflow-y: auto;
}

.cakes__estacao {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 700;
  color: var(--acao);
  text-align: center;
}

.cakes__botoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--u);
}

.cakes__opcao.escolhida {
  background: var(--acao);
  color: var(--branco);
}

.cakes__resultado {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  padding: calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda);
  text-align: center;
}

.cakes__resultado strong {
  font-family: var(--fonte-pixel);
  font-size: var(--texto-base);
  color: var(--acao);
}

.cakes__resultado span {
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.cakes__rodape {
  display: flex;
  justify-content: center;
}

/* --- Lixeira -------------------------------------------------------------- */

.lixeira {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  background: var(--branco);
  font-size: var(--texto-peq);
}

.lixeira__barra {
  padding: calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border-bottom: 1px solid var(--janela-borda);
}

.lixeira__lista {
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: calc(var(--u) * 2);
  list-style: none;
  display: grid;
  gap: 1px;
  align-content: start;
}

.lixeira__item {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  color: var(--tinta-media);
  transition: opacity var(--t-medio) ease, transform var(--t-medio) ease;
}

.lixeira__item:hover {
  background: var(--acao-fundo);
}

.lixeira__item img {
  width: 16px;
  height: 16px;
}

.lixeira__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta);
}

.lixeira__tipo,
.lixeira__tam {
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.lixeira__item.sumindo {
  opacity: 0;
  transform: translateX(18px);
}

.lixeira__vazio {
  margin: calc(var(--u) * 6) 0;
  text-align: center;
  color: var(--tinta-fraca);
}

.lixeira__rodape {
  margin: 0;
  padding: var(--u) calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border-top: 1px solid var(--janela-borda);
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
}

/* --- Internet Explorer ---------------------------------------------------- */

.ie {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  background: var(--branco);
}

.ie__barra {
  display: flex;
  gap: var(--u);
  padding: calc(var(--u) * 1.5);
  background: var(--janela-tinta-clara);
  border-bottom: 1px solid var(--janela-borda);
}

.ie__nav {
  width: 26px;
  background: var(--cinza-win);
  border: 2px outset var(--branco);
  font-size: var(--texto-mini);
  color: var(--tinta);
}

.ie__endereco {
  flex: 1;
  min-width: 0;
  padding: 2px calc(var(--u) * 2);
  background: var(--branco);
  border: 2px inset var(--cinza-win);
  font-family: var(--fonte-tela);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.ie__pagina {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 4);
  overflow-y: auto;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 222, 236, 0.5) 0 10px,
      rgba(255, 255, 255, 0.5) 10px 20px
    ),
    var(--branco);
  text-align: center;
}

.ie__marquee {
  width: 100%;
  overflow: hidden;
  padding: var(--u) 0;
  background: var(--acao);
  color: var(--branco);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  white-space: nowrap;
}

.ie__marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 16s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

.ie__titulo {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-grande);
  color: var(--acao);
  text-shadow: 2px 2px 0 var(--janela-titulo);
}

.ie__obras {
  margin: 0;
  font-size: var(--texto-peq);
  color: var(--tinta-media);
}

.ie__tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  border: var(--u) solid var(--janela-borda);
  font-size: var(--texto-peq);
}

.ie__tabela caption {
  padding: var(--u);
  background: var(--janela-titulo);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta);
}

.ie__tabela th,
.ie__tabela td {
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border: 1px solid var(--janela-titulo);
  text-align: left;
}

.ie__tabela th {
  width: 34%;
  background: var(--janela-tinta-clara);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-media);
}

.ie__mapa {
  text-decoration: none;
  text-align: center;
}

.ie__visitas {
  margin: 0;
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.ie__contador {
  display: inline-block;
  padding: 1px calc(var(--u) * 2);
  background: var(--preto-tela);
  color: var(--dourado);
  font-family: var(--fonte-bitmap);
  letter-spacing: 0.16em;
}

.ie__assinatura {
  margin: 0;
  font-size: var(--texto-mini);
  color: var(--tinta-fraca);
}

/* --- responsivo dos apps -------------------------------------------------- */

@media (max-width: 560px) {
  .orkut__grade {
    grid-template-columns: 1fr;
  }

  .orkut__lado {
    grid-template-columns: 74px 1fr;
    display: grid;
    align-items: start;
    gap: calc(var(--u) * 3);
  }

  .orkut__foto {
    grid-row: span 3;
  }

  .player {
    grid-template-columns: 74px 1fr;
  }

  .player__capa {
    width: 74px;
    height: 74px;
  }

  .player__disco {
    width: 52px;
    height: 52px;
  }

  .convite__chamada {
    font-size: var(--texto-med);
  }

  .solitaire__colunas {
    gap: 2px;
  }

  .solitaire__carta,
  .solitaire__base,
  .solitaire__vazio {
    min-height: 40px;
    font-size: 0.625rem;
  }
}

/* --- movimento reduzido nos aplicativos ----------------------------------- */

/* O bloco global do sistema.css zera a duração de tudo, mas algumas animações
   daqui param num estado ruim quando são cortadas no meio: o marquee congela
   deslocado 100% para fora, o disco para virado e a poção fica no quadro errado.
   Aqui elas são desligadas de verdade, e não apenas aceleradas. */
@media (prefers-reduced-motion: reduce) {
  .icone__arte--tarot,
  .tarot__pocao,
  .player__disco.girando,
  .purble__nuvem--a,
  .purble__nuvem--b,
  .convite__coracao,
  .ie__marquee span,
  .carta {
    animation: none !important;
    transform: none !important;
    background-position: 0 0 !important;
  }

  /* o marquee vira texto parado e legível em vez de faixa correndo */
  .ie__marquee span {
    padding-left: 0;
  }

  /* a carta ainda precisa virar quando alguém clica, senão o app deixa de funcionar.
     O giro fica instantâneo em vez de animado. */
  .carta__giro {
    transition: none;
  }
}

/* --- Purble Pairs, o jogo da memória --------------------------------------- */

.pairs {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  background: linear-gradient(var(--ceu-claro), var(--branco));
}

.pairs__placar {
  display: flex;
  justify-content: space-between;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

/* Quatro colunas e quatro linhas iguais, sem aspect-ratio em lugar nenhum.
   Com aspect-ratio nas peças a altura vinha das colunas e o placar era empurrado
   para fora da janela; com aspect-ratio no tabuleiro a altura colapsava para zero
   e as peças ficavam invisíveis. Linhas 1fr dentro de uma linha 1fr resolvem o
   tamanho a partir da janela, que é o único valor definido aqui. */
.pairs__tabuleiro {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--u) * 2);
  min-height: 0;
}

.pairs__peca {
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  perspective: 500px;
  animation: peca-chega var(--t-medio) var(--curva) both;
}

@keyframes peca-chega {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

.pairs__giro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--t-medio) var(--curva);
}

.pairs__peca.virada .pairs__giro,
.pairs__peca.achada .pairs__giro {
  transform: rotateY(180deg);
}

.pairs__lado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: var(--u) solid var(--janela-borda-escura);
  backface-visibility: hidden;
}

.pairs__costas {
  background: repeating-linear-gradient(
    45deg,
    var(--janela-titulo) 0 6px,
    var(--acao-fundo) 6px 12px
  );
}

.pairs__interrogacao {
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 700;
  color: var(--acao);
}

.pairs__frente {
  background: var(--branco);
  transform: rotateY(180deg);
}

.pairs__arte {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

/* par encontrado: para de responder ao toque e desce um pouco a saturação,
   para o olho saber de imediato o que ainda está em jogo */
.pairs__peca.achada {
  cursor: default;
}

.pairs__peca.achada .pairs__frente {
  background: var(--janela-tinta-clara);
  border-color: var(--janela-borda);
}

.pairs__venceu {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--u);
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  animation: janela-entra var(--t-medio) var(--curva) both;
}

.pairs__venceu strong {
  font-family: var(--fonte-pixel);
  font-size: var(--texto-grande);
  color: var(--acao);
}

.pairs__venceu span {
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta-media);
}

.pairs__rodape {
  display: flex;
  gap: calc(var(--u) * 2);
  justify-content: center;
}

/* --- o aviso brega do Tarot ------------------------------------------------ */

/* Brega de propósito: arco-íris girando na moldura, texto piscando e o gatinho
   balançando. É o único lugar do site que quebra a paleta, e quebra porque a
   graça está em parecer aquele pop-up de corrente de e-mail de 2009. */
.janela--brega {
  animation: janela-entra var(--t-medio) var(--curva) both,
             brega-treme 0.5s ease-in-out 3;
}

@keyframes brega-treme {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -1.2deg; }
  75% { rotate: 1.2deg; }
}

.brega {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4);
  background: transparent;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* O arco-íris é um disco girando atrás do miolo branco, e não um border-image:
   assim ele realmente corre em volta da caixa em vez de ficar parado. */
.brega::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 0;
  background: conic-gradient(
    var(--arco-rosa), var(--arco-amarelo), var(--arco-verde),
    var(--arco-azul), var(--arco-roxo), var(--arco-rosa)
  );
  animation: brega-gira 3.2s linear infinite;
}

.brega::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 1;
  background: var(--branco);
}

.brega > * {
  position: relative;
  z-index: 2;
}

@keyframes brega-gira {
  to {
    rotate: 360deg;
  }
}

/* Pisca trocando a cor da sombra, e não a opacidade do texto: o texto fica em
   5,4:1 o tempo inteiro em vez de cair para metade disso na metade do ciclo. */
.brega__grito {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-base);
  font-weight: 700;
  line-height: 1.25;
  color: var(--acao);
  animation: brega-pisca 0.8s steps(1) infinite;
}

@keyframes brega-pisca {
  0%, 50% { text-shadow: 2px 2px 0 var(--dourado); }
  50.01%, 100% { text-shadow: 2px 2px 0 var(--lilas); }
}

.brega__gato {
  width: auto;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
  justify-self: center;
  border: 3px solid var(--acao-viva);
  animation: brega-balanca 1.6s ease-in-out infinite;
}

@keyframes brega-balanca {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

.brega__botoes {
  display: grid;
  gap: var(--u);
}

/* --- recado do Orkut ------------------------------------------------------- */

.orkut__lista {
  display: grid;
}

.orkut__recado--novo {
  background: var(--acao-fundo);
  animation: recado-entra var(--t-medio) var(--curva) both;
}

.orkut__forma {
  display: grid;
  gap: var(--u);
  margin-top: calc(var(--u) * 3);
  padding-top: calc(var(--u) * 3);
  border-top: 1px dashed var(--cinza-win);
}

.orkut__rotulo {
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--azul-orkut);
}

.orkut__campo {
  width: 100%;
  padding: calc(var(--u) * 2);
  background: var(--branco);
  border: 1px solid var(--azul-orkut);
  border-radius: var(--raio);
  font-family: var(--fonte-tela);
  font-size: var(--texto-peq);
  color: var(--tinta);
  resize: vertical;
}

.orkut__campo::placeholder {
  color: var(--tinta-fraca);
}

.orkut__envio {
  display: flex;
  gap: calc(var(--u) * 3);
  align-items: center;
  flex-wrap: wrap;
}

.orkut__estado {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--texto-mini);
  color: var(--verde-msn);
}

.orkut__estado.erro {
  color: var(--acao);
}

/* --- barra de posição do player, arrastável -------------------------------- */

.player__barra {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.player__barra::-webkit-slider-runnable-track {
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--janela-titulo) 0 4px,
    var(--janela-tinta-clara) 4px 8px
  );
}

.player__barra::-moz-range-track {
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--janela-titulo) 0 4px,
    var(--janela-tinta-clara) 4px 8px
  );
}

.player__barra::-moz-range-progress {
  height: 10px;
  background: var(--acao);
}

/* pega o dedo com folga sem engordar o desenho */
.player__barra::-webkit-slider-thumb {
  width: 10px;
  height: 18px;
  margin-top: -4px;
  background: var(--acao);
  border: var(--u) solid var(--janela-borda-escura);
  appearance: none;
  -webkit-appearance: none;
}

.player__barra::-moz-range-thumb {
  width: 10px;
  height: 18px;
  background: var(--acao);
  border: var(--u) solid var(--janela-borda-escura);
  border-radius: 0;
}

.player__barra:disabled {
  cursor: default;
  opacity: 0.55;
}

.player__tempo {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--tinta-media);
}

/* o arco-íris girando e o gatinho balançando somem com movimento reduzido; o
   aviso continua funcionando, só para de dançar */
@media (prefers-reduced-motion: reduce) {
  .brega::before,
  .brega__gato,
  .brega__grito,
  .janela--brega {
    animation: none !important;
  }

  .brega__grito {
    text-shadow: 2px 2px 0 var(--dourado);
  }
}