/* ==========================================================================
   O sistema: papel de parede, icones, janelas, barra de tarefas, cursor.
   Mobile-first. Ordem: base, chrome de janela, desktop, telas do roteiro,
   responsivo, movimento reduzido.
   ========================================================================== */

/* --- base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--papel-poeira);
  color: var(--tinta);
  font-family: var(--fonte-tela);
  font-size: var(--texto-base);
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

/* O atributo hidden vem do agente do usuario como [hidden] { display: none }, e
   qualquer classe que declare display ganha dele por especificidade. As telas deste
   projeto sao todas grid ou flex, entao sem esta linha o login continuava por cima
   do desktop inteiro depois do login. */
[hidden] {
  display: none !important;
}

/* Só quem é pixel art de verdade leva image-rendering duro. Aplicar em todo img
   serrilhava os ícones lustrosos da era Vista, que são desenho suave e precisam
   continuar suaves ao reduzir de 96px para 40px. */
.pixelado {
  image-rendering: pixelated;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:where(button, a, input, [tabindex]):focus-visible {
  outline: var(--u) solid var(--acao);
  outline-offset: var(--u);
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- cursor rosa, so onde existe ponteiro fino ---------------------------- */

@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url('../assets/cursores/seta.png') 0 1, auto;
  }

  button,
  .icone,
  .barra-titulo,
  [role='button'] {
    cursor: url('../assets/cursores/seta.png') 0 1, pointer;
  }
}

/* --- tela ---------------------------------------------------------------- */

.tela {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* --- chrome de janela ----------------------------------------------------- */

.janela {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--janela-borda);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: var(--sombra-janela);
  padding: var(--u);
  animation: janela-entra var(--t-medio) var(--curva) both;
}

@keyframes janela-entra {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }
}

.janela.saindo {
  animation: janela-sai var(--t-rapido) ease-in both;
  pointer-events: none;
}

@keyframes janela-sai {
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

.janela.minimizada {
  display: none;
}

.barra-titulo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.5) var(--u) calc(var(--u) * 1.5) calc(var(--u) * 3);
  background: var(--janela-titulo);
  border-bottom: var(--u) solid var(--janela-borda-escura);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  touch-action: none;
  user-select: none;
}

.janela:not(.ativa) > .barra-titulo {
  background: var(--janela-titulo-inativo);
  color: var(--tinta-media);
}

.barra-titulo__icone {
  flex: none;
  width: 16px;
  height: 16px;
}

.barra-titulo__texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-titulo__botoes {
  display: flex;
  flex: none;
  gap: var(--u);
}

/* Os tres botoes quadrados das referencias: moldura branca, glifo desenhado em CSS. */
.botao-janela {
  position: relative;
  width: 18px;
  height: 16px;
  padding: 0;
  background: var(--janela-corpo);
  border: var(--u) solid var(--janela-borda-escura);
  color: var(--acao);
}

.botao-janela::before,
.botao-janela::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.botao-janela--minimizar::before {
  inset: auto 3px 2px 3px;
  height: var(--u);
}

.botao-janela--maximizar::before {
  inset: 2px 3px;
  border: var(--u) solid currentColor;
  background: none;
}

.botao-janela--fechar::before,
.botao-janela--fechar::after {
  inset: 6px 1px;
  height: var(--u);
}

.botao-janela--fechar::before {
  transform: rotate(45deg);
}

.botao-janela--fechar::after {
  transform: rotate(-45deg);
}

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

.janela__corpo {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--janela-corpo);
  border: var(--u) solid var(--janela-borda-escura);
  border-top: 0;
}

/* --- botao padrao do sistema ---------------------------------------------- */

.botao {
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--janela-borda);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-peq);
  font-weight: 700;
  color: var(--acao);
}

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

.botao:active {
  box-shadow: inset var(--u) var(--u) 0 var(--janela-borda);
  transform: translate(1px, 1px);
}

.botao--forte {
  background: var(--acao);
  color: var(--branco);
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 rgba(0, 0, 0, 0.18);
}

.botao--forte:hover {
  background: var(--acao-viva);
}

/* --- papel de parede ------------------------------------------------------ */

.area-de-trabalho {
  position: absolute;
  inset: 0;
  background-color: var(--papel-fundo);
  background-image: url('../assets/papel-de-parede-mobile.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- icones do desktop ---------------------------------------------------- */

/* Os ícones são posicionados um a um por js/arrastar.js, e não por grade: quem
   arrasta um ícone espera que ele fique onde soltou. A grade voltaria tudo para o
   lugar na primeira mudança de tamanho de tela. */
.icones {
  position: absolute;
  inset: 0 0 calc(var(--u) * 22) 0;
  pointer-events: none;
}

/* user-select e -webkit-user-drag desligados: sem eles, clicar e arrastar um ícone
   selecionava o rótulo e levantava a imagem no arrasto nativo do navegador, e o
   gesto virava "pegar a figurinha" em vez de mover o ícone. */
.icone {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  justify-items: center;
  gap: var(--u);
  width: 74px;
  padding: calc(var(--u) * 1.5) var(--u);
  background: none;
  border: var(--u) dotted transparent;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-mini);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--branco);
  text-shadow: 1px 1px 0 rgba(64, 32, 47, 0.85), 0 0 6px rgba(64, 32, 47, 0.5);
}

.icone__arte {
  width: 40px;
  height: 40px;
  filter: drop-shadow(var(--sombra-icone));
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.icone.selecionado {
  background: rgba(196, 42, 107, 0.32);
  border-color: var(--branco);
}

/* O ícone de origem apaga enquanto a cópia viaja, para ficar claro de onde ele
   saiu sem sumir e deixar buraco na grade. */
.icone.saindo-do-lugar {
  opacity: 0.35;
}

/* A cópia translúcida que acompanha o ponteiro, como no Windows. */
.icone-fantasma {
  position: absolute;
  z-index: 60;
  opacity: 0.75;
  pointer-events: none;
  rotate: -3deg;
  filter: drop-shadow(0 6px 12px rgba(64, 32, 47, 0.55));
}

/* A casa de destino acende, para o encaixe ser previsível antes de soltar. */
.casa-alvo {
  position: absolute;
  z-index: 40;
  background: rgba(255, 255, 255, 0.22);
  border: var(--u) dashed var(--branco);
  pointer-events: none;
}

/* A caixa de seleção do desktop, arrastando no vazio. Fica branca translúcida com
   borda de acento em vez do azul do Windows: azul sobre o papel de parede rosa
   seria a única coisa fria da tela inteira. */
.selecao-caixa {
  position: absolute;
  z-index: 30;
  background: rgba(255, 255, 255, 0.26);
  border: 1px solid var(--acao);
  pointer-events: none;
}

/* A área de trabalho inteira recusa seleção de texto: arrastar nela é gesto de
   marquise, e o navegador não pode roubar isso para grifar rótulo de ícone. */
.area-de-trabalho {
  user-select: none;
  -webkit-user-select: none;
}

.icone:hover .icone__arte {
  transform: translateY(-2px);
}

.icone__arte {
  transition: transform var(--t-rapido) var(--curva);
}

/* --- envelope central ----------------------------------------------------- */

/* O envelope fica centralizado na horizontal e ancorado pela base, no respiro
   abaixo da ilustracao. Medido no proprio papel de parede: as meninas ocupam de
   26% a 76% da altura no desktop e de 38% a 59% no celular. Centralizar na
   vertical tambem, como pedia o briefing, jogava o envelope em cima da cara da
   Florzinha e apagava justamente a arte que da identidade a tela. Ancorar pela
   base tambem aguenta janela baixa, que uma porcentagem fixa de topo nao aguenta. */
.envelope-central {
  position: absolute;
  bottom: 18%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2);
  background: none;
  border: 0;
  transform: translateX(-50%);
}

.envelope-central__arte {
  width: 92px;
  height: 92px;
  background-image: url('../assets/sprites/envelope.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  filter: drop-shadow(0 3px 8px rgba(122, 44, 74, 0.45));
  animation: envelope-abre 1.1s steps(1) infinite;
}

@keyframes envelope-abre {
  0%,
  50% {
    background-position: 0 0;
  }
  50.01%,
  100% {
    background-position: 100% 0;
  }
}

/* placa atras do rotulo: sobre o rosa do papel de parede, texto branco com sombra
   sozinho ficava ilegivel */
.envelope-central__rotulo {
  padding: 1px calc(var(--u) * 2);
  background: rgba(64, 32, 47, 0.55);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  letter-spacing: 0.04em;
  color: var(--branco);
}

.envelope-central.chamando {
  animation: envelope-pulsa 1.4s ease-in-out infinite;
}

@keyframes envelope-pulsa {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.12);
  }
}

/* halo redondo e difuso. A primeira versao era uma borda solida com inset, e
   aparecia na tela como um retangulo perdido em volta do envelope. */
.envelope-central.chamando::after {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0) 68%
  );
  animation: envelope-halo 1.4s ease-out infinite;
}

@keyframes envelope-halo {
  0% {
    transform: scale(0.86);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* --- barra de tarefas ----------------------------------------------------- */

.barra-de-tarefas {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  gap: var(--u);
  height: 40px;
  padding: calc(var(--u) * 1.5);
  background: linear-gradient(var(--janela-titulo), var(--janela-borda));
  border-top: var(--u) solid var(--janela-borda-escura);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
}

.iniciar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 4);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-peq);
  font-weight: 700;
  color: var(--acao);
}

.iniciar__flor {
  width: 14px;
  height: 14px;
}

.tarefas {
  display: flex;
  flex: 1;
  gap: var(--u);
  min-width: 0;
  overflow: hidden;
}

.tarefa {
  display: flex;
  align-items: center;
  gap: var(--u);
  min-width: 0;
  max-width: 140px;
  padding: 0 calc(var(--u) * 2);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  color: var(--tinta);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarefa img {
  flex: none;
  width: 14px;
  height: 14px;
}

.tarefa.ativa {
  background: var(--acao-fundo);
}

.relogio,
.som-botao {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 3);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
  color: var(--tinta);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  font-variant-numeric: tabular-nums;
}

/* o emoji do alto-falante nao existe na fonte bitmap e caia num fallback torto */
.som-botao {
  width: 34px;
  padding: 0;
  font-family: system-ui, 'Segoe UI Emoji', sans-serif;
  font-size: 0.875rem;
  line-height: 1;
}

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

/* --- tela de login -------------------------------------------------------- */

.login {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 6);
  background-color: var(--papel-fundo);
  background-image: url('../assets/papel-de-parede-mobile.webp');
  background-position: center;
  background-size: cover;
}

/* Veu leve. A primeira versao usava um radial forte com blur de 3px e apagava as
   Meninas Superpoderosas por completo: a tela de entrada ficava um retangulo rosa
   liso e nao prometia nada do que vinha depois. Agora a ilustracao aparece
   desfocada por tras, como tela de bloqueio de verdade. */
.login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 44%,
    rgba(255, 255, 255, 0.18),
    rgba(122, 44, 74, 0.22) 78%
  );
  backdrop-filter: blur(2px);
}

.login__caixa {
  position: relative;
  width: min(340px, 100%);
  padding: var(--u);
  background: var(--janela-borda);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: var(--sombra-janela);
  text-align: center;
}

.login__miolo {
  display: grid;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 7) calc(var(--u) * 5) calc(var(--u) * 6);
  background: var(--janela-corpo);
  border: var(--u) solid var(--janela-borda-escura);
  border-top: 0;
}

.login__avatar {
  justify-self: center;
  width: 76px;
  height: 76px;
  padding: calc(var(--u) * 1.5);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
}

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

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

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

.login__rotulo {
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-media);
}

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

.login input {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--janela-tinta-clara);
  border: var(--u) solid var(--janela-borda-escura);
  border-radius: var(--raio);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-base);
  color: var(--tinta);
}

/* --tinta-fraca dava 2,96:1 sobre o fundo do campo e reprovava. --tinta-media
   passa em 6,09:1 e continua mais claro que o texto digitado, que e o que o
   placeholder precisa comunicar. */
.login input::placeholder {
  color: var(--tinta-media);
}

/* O briefing pedia um botao "OK" ou "Entrar". A primeira versao tinha so a seta
   rosa da referencia, e um glifo sozinho nao diz a um estranho o que vai acontecer.
   A seta ficou, agora acompanhada da palavra. */
.login__entrar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--u);
  padding: 0 calc(var(--u) * 4);
  background: var(--acao);
  border: var(--u) solid var(--janela-borda-escura);
  color: var(--branco);
  font-family: var(--fonte-pixel);
  font-size: var(--texto-base);
  font-weight: 700;
}

.login__entrar:hover {
  background: var(--acao-viva);
}

.login__erro {
  min-height: 1.2em;
  margin: 0;
  font-size: var(--texto-peq);
  color: var(--acao);
}

/* --- ligando o computador -------------------------------------------------- */

/* A primeira tela de todas: preto, a bandeira girando no lugar e uma linha. Vem
   antes do login porque ligar o computador vem antes de entrar nele. */
.ligando {
  position: absolute;
  inset: 0;
  z-index: 10500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 6);
  background: var(--preto-tela);
  text-align: center;
}

/* Gira em torno do próprio centro, sem sair do lugar, e para sozinha.
   Duas voltas cobrem os 2,6s que a tela vive; deixar em infinite reprovava na
   WCAG 2.2.2, que exige controle de pausa para movimento sem fim, e aqui o fim
   é conhecido. */
.ligando__marca {
  width: 76px;
  height: 76px;
  animation: ligando-gira 1.6s linear 2;
}

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

.ligando__texto {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  color: var(--janela-titulo);
}

.ligando.saindo {
  animation: ligando-some var(--t-lento) ease-in forwards;
}

@keyframes ligando-some {
  to {
    opacity: 0;
  }
}

/* --- boot ----------------------------------------------------------------- */

.boot {
  position: absolute;
  inset: 0;
  z-index: 9900;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 6);
  background: var(--janela-corpo);
  text-align: center;
}

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

/* A barra da referencia: moldura preta grossa, preenchimento magenta em degraus. */
.barra-pixel {
  width: min(340px, 78vw);
  height: 34px;
  padding: 3px;
  background: var(--branco);
  border: 4px solid var(--tinta);
}

.barra-pixel__preenche {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--acao-viva) 0 10px,
    var(--acao) 10px 14px
  );
  transition: width 120ms linear;
}

.boot__rotulo {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-med);
  letter-spacing: 0.12em;
  color: var(--tinta);
}

/* --- notificacao do canto ------------------------------------------------- */

/* O canto acima da barra de tarefas é disputado por duas coisas: o aviso da
   mensagem nova e o mini player. Empilhar as duas aqui, em vez de cada uma se
   ancorar sozinha no mesmo ponto, evita que uma cubra o clique da outra.
   column-reverse deixa o mini player embaixo, colado na barra, e o aviso acima. */
.canto {
  position: absolute;
  right: calc(var(--u) * 3);
  bottom: calc(var(--u) * 23);
  left: calc(var(--u) * 3);
  z-index: 8500;
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--u) * 2);
  pointer-events: none;
}

.canto > * {
  pointer-events: auto;
}

@media (min-width: 700px) {
  .canto {
    left: auto;
    align-items: flex-end;
    bottom: calc(var(--u) * 25);
  }
}

.aviso {
  width: min(260px, 100%);
  padding: var(--u);
  background: var(--janela-borda);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: var(--sombra-janela);
  text-align: left;
  animation: aviso-sobe var(--t-lento) var(--curva) both;
}

@keyframes aviso-sobe {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

.aviso__miolo {
  display: flex;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 3);
  background: var(--janela-corpo);
}

.aviso__arte {
  flex: none;
  width: 40px;
  height: 40px;
  background-image: url('../assets/sprites/envelope.png');
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation: envelope-abre 0.7s steps(1) infinite;
}

/* grid e nao inline: com strong e span soltos o titulo colava na linha de baixo
   e saia "Uma mensagem novaJennifer mandou um recado" */
.aviso__texto {
  display: grid;
  gap: 1px;
  min-width: 0;
}

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

.aviso__linha {
  margin: 0;
  font-size: var(--texto-mini);
  line-height: 1.35;
  color: var(--tinta-media);
}

/* A onomatopeia sai do banner e sobe, uma vez por toque do sino. */
.trim {
  position: absolute;
  z-index: 8600;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-med);
  font-weight: 700;
  color: var(--branco);
  text-shadow: 2px 2px 0 var(--acao);
  pointer-events: none;
  animation: trim-sobe 1.1s ease-out forwards;
}

@keyframes trim-sobe {
  from {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-14px, -46px) scale(1.15);
  }
}

/* --- desligamento de TV --------------------------------------------------- */

.fim {
  position: absolute;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  background: var(--preto-tela);
  color: var(--branco);
  text-align: center;
}

.desligando {
  animation: tv-desliga 900ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes tv-desliga {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
  55% {
    transform: scale(1, 0.014);
    filter: brightness(3.2);
  }
  75% {
    transform: scale(0.28, 0.01);
    filter: brightness(6);
  }
  100% {
    transform: scale(0, 0);
    filter: brightness(9);
  }
}

.fim__miolo {
  display: grid;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8);
  opacity: 0;
  animation: fim-aparece 1s ease-out 700ms forwards;
}

@keyframes fim-aparece {
  to {
    opacity: 1;
  }
}

/* mostra a data: peso 400, senao o 29/08 vira 89/08 */
.fim__marca {
  margin: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-titulo);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--acao-viva);
}

.fim__linha {
  margin: 0;
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-peq);
  letter-spacing: 0.1em;
  color: var(--janela-titulo);
}

.fim__voltar {
  justify-self: center;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  background: none;
  border: var(--u) solid var(--tinta-media);
  font-family: var(--fonte-bitmap);
  font-size: var(--texto-mini);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.fim__voltar:hover {
  color: var(--janela-titulo);
  border-color: var(--janela-titulo);
}

/* --- camada magica: brilhos e borboletas ---------------------------------- */

.magia {
  position: absolute;
  inset: 0;
  z-index: 11000;
  overflow: hidden;
  pointer-events: none;
}

/* Posição em pixel e não em porcentagem, pelo mesmo motivo do caderninho do Tarot:
   steps(15) sobre 0%–100% cai em múltiplos de 1/15, e os quadros de uma tira de 15
   ficam em múltiplos de 1/14. O sprite escorrega em vez de trocar de quadro. */
.brilho {
  --quadros: 15;
  --quadro: 32px;
  position: absolute;
  width: var(--quadro);
  height: 31px;
  background-image: url('../assets/sprites/brilho.png');
  background-repeat: no-repeat;
  background-size: calc(var(--quadro) * var(--quadros)) 100%;
  animation: brilho-quadros 1s steps(15) forwards;
}

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

.borboleta {
  --quadros: 15;
  --quadro: 42px;
  position: absolute;
  width: var(--quadro);
  height: 42px;
  background-image: url('../assets/sprites/borboleta.png');
  background-repeat: no-repeat;
  background-size: calc(var(--quadro) * var(--quadros)) 100%;
  animation: borboleta-asa 0.6s steps(15) infinite;
}

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

/* --- responsivo: a partir daqui vira computador de verdade ---------------- */

@media (min-width: 700px) {
  .area-de-trabalho,
  .login {
    background-image: url('../assets/papel-de-parede-desktop.webp');
  }

  /* os oito numa coluna so: o briefing pede a lateral esquerda, e duas colunas
     desbalanceadas (seis e dois) pareciam sobra em vez de arrumacao */
  .icones {
    grid-template-rows: repeat(8, auto);
    inset: calc(var(--u) * 4) auto calc(var(--u) * 24) calc(var(--u) * 5);
    gap: calc(var(--u) * 3) calc(var(--u) * 4);
  }

  .icone {
    width: 88px;
    font-size: var(--texto-peq);
  }

  .icone__arte {
    width: 48px;
    height: 48px;
  }

  /* no desktop sobra menos respiro entre a arte (acaba em 76%) e a barra de
     tarefas, entao o envelope desce mais e cresce um pouco */
  .envelope-central {
    bottom: 9%;
  }

  .envelope-central__arte {
    width: 116px;
    height: 116px;
  }

  .barra-de-tarefas {
    height: 44px;
  }
}

/* --- movimento reduzido --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Sprite parado num quadro util em vez de piscando no ultimo. */
  .envelope-central__arte,
  .aviso__arte {
    background-position: 0 0;
  }

  .magia {
    display: none;
  }
}

/* --- mini player ----------------------------------------------------------- */

/* Fechar a janela do CD Player não cala a música: ela desce para cá. Fica logo
   acima da barra de tarefas, do lado direito no desktop e ocupando a largura no
   celular, onde não sobra canto para nada. */
.mini-player {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'faixa faixa' 'controles volume';
  gap: var(--u) calc(var(--u) * 2);
  align-items: center;
  padding: calc(var(--u) * 2);
  background: var(--janela-borda);
  border: var(--u) solid var(--janela-borda-escura);
  box-shadow: var(--sombra-janela);
  animation: aviso-sobe var(--t-medio) var(--curva) both;
}

.mini-player__faixa {
  grid-area: faixa;
  min-width: 0;
  padding: var(--u) calc(var(--u) * 2);
  background: var(--janela-corpo);
  border: 0;
  font-family: var(--fonte-pixel);
  font-size: var(--texto-mini);
  font-weight: 700;
  color: var(--acao);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.mini-player__controles {
  grid-area: controles;
  display: flex;
  gap: var(--u);
}

.mini-player__botao {
  padding: var(--u) calc(var(--u) * 2);
  background: var(--janela-corpo);
  border: var(--u) solid var(--janela-borda-escura);
  font-size: var(--texto-mini);
  color: var(--acao);
}

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

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

.mini-player__volume {
  grid-area: volume;
  display: flex;
  gap: var(--u);
  align-items: center;
  min-width: 0;
}

.mini-player__alto-falante {
  font-size: 0.75rem;
  line-height: 1;
}

.mini-player__barra {
  width: 76px;
  height: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.mini-player__barra::-webkit-slider-runnable-track {
  height: 10px;
  background: var(--janela-corpo);
  border: 1px solid var(--janela-borda-escura);
}

.mini-player__barra::-moz-range-track {
  height: 10px;
  background: var(--janela-corpo);
  border: 1px solid var(--janela-borda-escura);
}

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

.mini-player__barra::-webkit-slider-thumb {
  width: 8px;
  height: 16px;
  margin-top: -4px;
  background: var(--acao);
  border: var(--u) solid var(--janela-borda-escura);
  appearance: none;
  -webkit-appearance: none;
}

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

@media (min-width: 700px) {
  /* no desktop ele encolhe para o canto e vira uma linha só */
  .mini-player {
    width: auto;
    grid-template-columns: minmax(0, 220px) auto auto;
    grid-template-areas: 'faixa controles volume';
  }
}