/* ══════════════════════════════════════════════════════════════════
   FoodTopia — Design System
   Tokens e componentes da interface. Nada de valor solto: quem precisa
   de cor, espaço, curva ou sombra pega daqui.

   A régua é o docs/11-IDENTIDADE-VISUAL.md, e a regra é a R6 do
   CLAUDE.md: a interface é parte do jogo, não uma camada por cima.
   ══════════════════════════════════════════════════════════════════ */

/* ── fontes ───────────────────────────────────────────────────────
   Servidas pelo próprio servidor (R3): sem CDN, sem dependência de
   terceiro e sem entregar o IP do jogador para fora. As duas são
   variáveis — um arquivo por subconjunto cobre todos os pesos. */

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ══════════════════════════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── cor: a paleta medida nas texturas que já estão em assets/ ── */
  --cor-massa: #f8eee0;
  --cor-massa-2: #eaddc9;
  --cor-massa-3: #dccbb2;
  --cor-madeira: #8a5a38;
  --cor-madeira-clara: #a9733f;
  --cor-madeira-escura: #603a24;
  --cor-tomate: #e05243;
  --cor-tomate-escuro: #b83a2e;
  --cor-manteiga: #f6c445;
  --cor-manteiga-escura: #d19a1c;
  --cor-hortela: #45ab7c;
  --cor-hortela-escura: #2f8560;
  --cor-morango: #e2618f;
  --cor-morango-escura: #bd4570;
  --cor-azulejo: #93cbe0;
  --cor-azulejo-escuro: #5c9cb5;
  --cor-lousa: #2a3b37;
  --cor-lousa-clara: #3a4f4a;

  /* Tons claros e escuros das mesmas famílias — brilho de barra, fundo de
     moeda, aviso de conexão boa, madrugada da tela de carregamento. */
  --cor-manteiga-clara: #ffdc7a;
  --cor-hortela-clara: #a8e9c4;
  --cor-morango-palida: #fdeef4;
  --cor-noite: #241a14;
  --cor-noite-clara: #3b2a20;
  --cor-sombra-madeira: #3c2214;

  /* Tons das variantes de placa. Ficam nomeados para que "acender um botão"
     em qualquer tela seja uma referência, nunca uma cópia. */
  --tom-principal-face: #ef6d5c;
  --tom-principal-borda: #93291f;
  --tom-principal-texto: #fff6f2;
  --tom-sim-face: #5cc494;
  --tom-sim-borda: #216c4c;
  --tom-sim-texto: #f2fff8;
  --tom-cash-face: #f0cf7e;
  --tom-cash-borda: #8d6412;
  --tom-cash-texto: #4a3408;

  /* Os mesmos tons acima em canais separados. Existem porque veio de madeira,
     rejunte de azulejo, nervura de mármore e traço de giz são a cor da própria
     superfície com transparência — e `rgba()` não aceita um token hexadecimal
     dentro. Sem isto, trocar `--cor-madeira` reveste o botão e deixa a bancada
     com a textura da paleta velha: metade da identidade muda, metade não. */
  --madeira-canais: 138 90 56;
  --madeira-escura-canais: 96 58 36;
  --sombra-madeira-canais: 60 34 20;
  --azulejo-canais: 147 203 224;
  --azulejo-escuro-canais: 92 156 181;
  --lousa-canais: 42 59 55;
  --giz-canais: 242 235 224;
  --pedra-canais: 120 120 132;
  --tomate-canais: 224 82 67;
  --manteiga-canais: 246 196 69;
  --noite-canais: 36 26 20;

  /* Texto: nunca preto puro sobre massa, nunca branco puro sobre lousa —
     o contraste total é duro de ler e denuncia interface de site. */
  --cor-tinta: #48372b;
  --cor-tinta-fraca: #7a6553;
  --cor-giz: #f2ebe0;
  --cor-giz-fraco: #b9b0a2;

  /* ── material: gradiente nomeado, não imagem. Nítido em qualquer
        densidade, zero byte de download, e reveste tudo quando o token
        de cor muda. ── */
  --mat-madeira:
    repeating-linear-gradient(94deg,
      rgb(var(--madeira-escura-canais) / 0) 0 7px,
      rgb(var(--madeira-escura-canais) / .13) 7px 8px,
      rgb(var(--madeira-escura-canais) / 0) 8px 19px),
    linear-gradient(168deg, var(--cor-madeira-clara), var(--cor-madeira) 55%, var(--cor-madeira-escura));

  --mat-massa:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 62%),
    linear-gradient(178deg, var(--cor-massa), var(--cor-massa-2));

  --mat-azulejo:
    repeating-linear-gradient(0deg,
      rgb(var(--azulejo-escuro-canais) / .28) 0 1px,
      rgba(255, 255, 255, 0) 1px 26px),
    repeating-linear-gradient(90deg,
      rgb(var(--azulejo-escuro-canais) / .28) 0 1px,
      rgba(255, 255, 255, 0) 1px 26px),
    linear-gradient(180deg, #d6ecf4, #bcdcea);

  --mat-lousa:
    radial-gradient(80% 60% at 22% 18%, rgb(var(--giz-canais) / .10), rgba(0, 0, 0, 0) 70%),
    radial-gradient(70% 55% at 78% 82%, rgb(var(--giz-canais) / .07), rgba(0, 0, 0, 0) 70%),
    linear-gradient(170deg, var(--cor-lousa-clara), var(--cor-lousa));

  --mat-latao:
    linear-gradient(178deg, #f3d999 0%, #c99a3f 22%, #f0d69a 46%, #b8862f 74%, #e6c887 100%);

  --mat-marmore:
    linear-gradient(58deg, rgb(var(--pedra-canais) / .16) 0 2px, rgba(0, 0, 0, 0) 2px 34px),
    linear-gradient(-24deg, rgb(var(--pedra-canais) / .10) 0 3px, rgba(0, 0, 0, 0) 3px 52px),
    linear-gradient(170deg, #fbfaf7, #e7e4dd);

  /* ── tipografia ── */
  --fonte-titulo: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --txt-xs: clamp(.6875rem, .62rem + .2vw, .75rem);
  --txt-sm: clamp(.75rem, .69rem + .22vw, .8125rem);
  --txt-md: clamp(.875rem, .8rem + .3vw, 1rem);
  --txt-lg: clamp(1rem, .9rem + .42vw, 1.1875rem);
  --txt-xl: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --txt-2xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);

  /* ── espaço: múltiplos de 4 ── */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* ── forma ── */
  --raio-sm: 8px;
  --raio-md: 14px;
  --raio-lg: 22px;
  --raio-pill: 999px;
  --traco: 2px;

  /* Alvo mínimo de toque (R1). Não diminua: é dedo, não mouse. */
  --toque: 44px;

  /* ── profundidade ──
     A base sólida é o que faz o elemento parecer um objeto que dá para
     apertar. Sombra difusa sozinha é linguagem de site. */
  --base-3: 0 3px 0;
  --base-4: 0 4px 0;
  --contato: 0 6px 14px rgba(72, 55, 43, .22);
  --contato-forte: 0 14px 34px rgba(48, 34, 24, .34);
  --brilho-topo: inset 0 2px 0 rgba(255, 255, 255, .38);
  --brilho-topo-fraco: inset 0 1px 0 rgba(255, 255, 255, .22);

  /* ── movimento ── */
  --mov-rapido: 120ms cubic-bezier(.2, .8, .3, 1);
  --mov-suave: 240ms cubic-bezier(.3, .7, .3, 1);
  --mov-quique: 420ms cubic-bezier(.34, 1.56, .64, 1);

  /* ── camadas ── */
  --z-mundo: 0;
  --z-hud: 10;
  --z-toque: 12;
  --z-painel: 20;
  --z-conta: 30;
  --z-aviso: 40;
  --z-modal: 60;
  --z-carregando: 80;
}

/* Quem pediu menos movimento recebe menos movimento — sem exceção. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 1ms linear;
    --mov-suave: 1ms linear;
    --mov-quique: 1ms linear;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   CURSOR — no PC o ponteiro também é do jogo (R6).
   Safari não desenha cursor SVG; por isso toda regra termina numa
   palavra-chave de reserva.
   ══════════════════════════════════════════════════════════════════ */

.ds-cursor {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23603a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4c2.8 0 4.6 2 4.6 4.6 0 2.4-1.7 4.2-4.6 4.4-2.9-.2-4.6-2-4.6-4.4C3.4 6 5.2 4 8 4z' fill='%23f8eee0'/%3E%3Cpath d='M8 13v13' stroke='%238a5a38'/%3E%3C/g%3E%3C/svg%3E") 8 3,
    default;
}

.ds-cursor a,
.ds-cursor button,
.ds-cursor summary,
.ds-cursor [role='button'],
.ds-cursor label,
.ds-cursor select {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='%23f8eee0' stroke='%23603a24' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M11 15V6.5a2 2 0 1 1 4 0V13'/%3E%3Cpath d='M15 12.5a1.8 1.8 0 1 1 3.6 0V15'/%3E%3Cpath d='M18.6 13.6a1.8 1.8 0 1 1 3.6 0v6.2c0 3.5-2.6 6.2-6.2 6.2h-2.2c-3 0-4.4-1.4-6-4.2l-2.2-3.9a1.9 1.9 0 0 1 3.2-2l1.8 2.3'/%3E%3C/g%3E%3C/svg%3E") 12 4,
    pointer;
}

.ds-cursor [disabled],
.ds-cursor .esta-bloqueado {
  cursor: not-allowed;
}

.ds-cursor .esta-arrastando,
.ds-cursor .esta-arrastando * {
  cursor: grabbing;
}

/* ══════════════════════════════════════════════════════════════════
   PLACA — o botão do jogo.
   Não é `<button>` com cor: é uma placa de restaurante, com chanfro,
   contorno e base. Ao apertar, ela afunda na própria base — é daí que
   vem a sensação de objeto.
   ══════════════════════════════════════════════════════════════════ */

.placa {
  --placa-face: var(--cor-madeira-clara);
  --placa-face-2: var(--cor-madeira);
  --placa-borda: var(--cor-madeira-escura);
  --placa-base: var(--cor-madeira-escura);
  --placa-texto: var(--cor-massa);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--toque);
  padding: 0 var(--e-4);
  border: var(--traco) solid var(--placa-borda);
  border-radius: var(--raio-md);
  background: linear-gradient(180deg, var(--placa-face), var(--placa-face-2));
  box-shadow: var(--base-4) var(--placa-base), var(--contato), var(--brilho-topo);
  color: var(--placa-texto);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(72, 44, 28, .38);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--mov-rapido), box-shadow var(--mov-rapido), filter var(--mov-rapido);
}

/* Só quem tem mouse recebe hover — no celular o `hover` gruda depois do
   toque e o botão fica aceso para sempre. */
@media (hover: hover) {
  .placa:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--placa-base), var(--contato), var(--brilho-topo);
  }
}

.placa:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--placa-base), 0 2px 5px rgba(72, 55, 43, .3), var(--brilho-topo-fraco);
  filter: brightness(.97);
}

/* Foco de teclado precisa aparecer por cima de qualquer textura. */
.placa:focus-visible {
  outline: 3px solid var(--cor-manteiga);
  outline-offset: 3px;
}

.placa:disabled,
.placa[aria-disabled='true'] {
  filter: grayscale(.55) brightness(.92);
  opacity: .7;
  box-shadow: var(--base-3) var(--placa-base);
  transform: none;
  cursor: not-allowed;
}

.placa__icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* ── variantes ── */

/* Ação principal: o avental do dono da casa. */
.placa--principal {
  --placa-face: var(--tom-principal-face);
  --placa-face-2: var(--cor-tomate);
  --placa-borda: var(--tom-principal-borda);
  --placa-base: var(--cor-tomate-escuro);
  --placa-texto: var(--tom-principal-texto);
}

/* Confirmação. */
.placa--sim {
  --placa-face: var(--tom-sim-face);
  --placa-face-2: var(--cor-hortela);
  --placa-borda: var(--tom-sim-borda);
  --placa-base: var(--cor-hortela-escura);
  --placa-texto: var(--tom-sim-texto);
}

/**
 * Botão aceso: filtro escolhido, corrida ligada, qualidade em uso.
 *
 * Mora aqui e não na tela porque copiar os cinco tons no `style.css` cria duas
 * fontes da verdade — e duas fontes da verdade divergem no dia em que a marca
 * muda de cor.
 */
.placa.esta-ligado {
  --placa-face: var(--tom-sim-face);
  --placa-face-2: var(--cor-hortela);
  --placa-borda: var(--tom-sim-borda);
  --placa-base: var(--cor-hortela-escura);
  --placa-texto: var(--tom-sim-texto);
}

/* Compra com moeda dura. Latão, porque é o que se paga no caixa. */
.placa--cash {
  --placa-face: var(--tom-cash-face);
  --placa-face-2: var(--cor-manteiga);
  --placa-borda: var(--tom-cash-borda);
  --placa-base: var(--cor-manteiga-escura);
  --placa-texto: var(--tom-cash-texto);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* Sobre fundo escuro (lousa): a placa vira giz. */
.placa--giz {
  --placa-face: #4a615b;
  --placa-face-2: #3a4f4a;
  --placa-borda: #1d2a27;
  --placa-base: #1d2a27;
  --placa-texto: var(--cor-giz);
}

/* Botão só de ícone: redondo, como puxador de armário. */
.placa--redonda {
  width: var(--toque);
  min-width: var(--toque);
  height: var(--toque);
  padding: 0;
  border-radius: var(--raio-pill);
}

.placa--pequena {
  min-height: 34px;
  padding: 0 var(--e-3);
  font-size: var(--txt-sm);
  border-radius: var(--raio-sm);
  box-shadow: var(--base-3) var(--placa-base), var(--brilho-topo-fraco);
}

.placa--pequena:active:not(:disabled) {
  transform: translateY(3px);
}

/* O selo pequeno continua pequeno no desenho — mas o dedo ganha os 44 px da
   R1. O retângulo invisível estica só a área de toque; como é absoluto, sai
   do fluxo do flex e não entra na conta do `gap` nem empurra o rótulo.
   (`::after` já é da colher de carregamento.) */
.placa--pequena::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--toque);
  transform: translateY(-50%);
}

/* Redondo e pequeno ao mesmo tempo fica 44 px de verdade: são os botões da
   bancada, o alvo que mais se procura no celular. Aqui "pequena" vale só
   para a letra e a sombra. */
.placa--redonda.placa--pequena {
  min-height: var(--toque);
  height: var(--toque);
}

.placa--larga {
  width: 100%;
}

/* Carregando: o rótulo some e entra a colher girando. */
.placa[data-carregando='true'] {
  color: transparent;
  pointer-events: none;
}

.placa[data-carregando='true']::after {
  content: '';
  position: absolute;
  width: 1.15em;
  height: 1.15em;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: currentcolor;
  border-radius: 50%;
  color: var(--placa-texto);
  animation: ds-girar 700ms linear infinite;
}

@keyframes ds-girar {
  to { transform: rotate(1turn); }
}

/* Recusa: treme, não pisca em vermelho. */
@keyframes ds-negar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.ds-negar {
  animation: ds-negar 320ms cubic-bezier(.36, .07, .19, .97);
}

/* ══════════════════════════════════════════════════════════════════
   PAINEL — a superfície onde a informação mora.
   Moldura de madeira por fora, papel de cardápio por dentro. O texto
   sempre vai no papel, nunca direto na textura da madeira.
   ══════════════════════════════════════════════════════════════════ */

.painel {
  position: relative;
  border: 3px solid var(--cor-madeira-escura);
  border-radius: var(--raio-lg);
  background: var(--mat-madeira);
  box-shadow: var(--base-4) rgba(60, 34, 20, .85), var(--contato-forte);
  padding: var(--e-2);
  color: var(--cor-tinta);
  font-family: var(--fonte-corpo);
}

.painel__papel {
  border-radius: calc(var(--raio-lg) - 8px);
  background: var(--mat-massa);
  box-shadow: inset 0 2px 6px rgb(var(--madeira-escura-canais) / .22);
  padding: var(--e-3) var(--e-4);
}

.painel__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xl);
  font-weight: 600;
  color: var(--cor-madeira-escura);
}

/* Quadro-negro: para o que é escrito à mão — chat, prato do dia. */
.painel--lousa {
  background: var(--mat-lousa);
  border-color: var(--cor-madeira-escura);
  color: var(--cor-giz);
}

.painel--lousa .painel__titulo {
  color: var(--cor-giz);
  font-weight: 500;
}

/* Azulejo: para o que é de cozinha mesmo (estoque, preparo). */
.painel--azulejo {
  background: var(--mat-azulejo);
  border-color: var(--cor-azulejo-escuro);
}

/* ══════════════════════════════════════════════════════════════════
   ETIQUETA e MOEDA — números que o jogador confere de relance.
   ══════════════════════════════════════════════════════════════════ */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 3px var(--e-2);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: var(--cor-massa);
  color: var(--cor-tinta);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.etiqueta--lousa {
  background: rgb(var(--giz-canais) / .14);
  border-color: rgb(var(--giz-canais) / .3);
  color: var(--cor-giz);
}

.etiqueta--perto {
  background: rgba(246, 196, 69, .22);
  border-color: rgba(246, 196, 69, .55);
  color: var(--cor-manteiga);
}

/* Bolso de moeda: chapa de latão com a moeda em relevo. */
.moeda {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 32px;
  padding: 0 var(--e-3) 0 var(--e-1);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: var(--cor-massa);
  box-shadow: var(--base-3) rgb(var(--madeira-escura-canais) / .55), var(--brilho-topo-fraco);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cor-tinta);
  line-height: 1;
}

.moeda__icone {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Número que subiu: quique curto, sem piscar a tela. */
@keyframes ds-quicar {
  0% { transform: scale(1); }
  38% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.ds-quicar {
  animation: ds-quicar var(--mov-quique);
}

/* ══════════════════════════════════════════════════════════════════
   INTERRUPTOR — o "sim/não" desenhado à mão.
   Checkbox nativo com `accent-color` é o input de formulário que a R6
   proíbe: some com ele e desenhe a caixinha e o tique. O rótulo inteiro
   continua sendo o alvo, com os 44 px da R1.
   ══════════════════════════════════════════════════════════════════ */

.interruptor {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--toque);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.interruptor input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border: var(--traco) solid var(--marca-borda, var(--cor-madeira-escura));
  border-radius: var(--raio-sm);
  background: var(--marca-fundo, var(--cor-massa));
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: background var(--mov-rapido), border-color var(--mov-rapido);
}

/* O tique é um "L" girado — traço de giz, não glifo do sistema. */
.interruptor input::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid var(--marca-tique, var(--cor-massa));
  border-width: 0 3px 3px 0;
  border-radius: 1px;
  transform: rotate(42deg) scale(0);
  opacity: 0;
  transition: transform var(--mov-quique), opacity var(--mov-rapido);
}

.interruptor input:checked {
  border-color: var(--cor-hortela-escura);
  background: var(--cor-hortela);
}

.interruptor input:checked::after {
  transform: rotate(42deg) scale(1);
  opacity: 1;
}

.interruptor input:focus-visible {
  outline: 3px solid var(--cor-manteiga);
  outline-offset: 3px;
}

/* Sobre lousa o giz é claro e a caixa é o próprio quadro. */
.interruptor--giz {
  --marca-borda: rgb(var(--giz-canais) / .45);
  --marca-fundo: rgb(var(--giz-canais) / .08);
  --marca-tique: var(--cor-lousa);
}

/* ══════════════════════════════════════════════════════════════════
   MEDIDOR — a barra de experiência é uma panela enchendo.
   ══════════════════════════════════════════════════════════════════ */

.medidor {
  position: relative;
  height: 14px;
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-pill);
  background: rgb(var(--madeira-escura-canais) / .3);
  box-shadow: inset 0 2px 4px rgba(60, 34, 20, .45);
  overflow: hidden;
}

.medidor__cheio {
  height: 100%;
  border-radius: var(--raio-pill);
  background: linear-gradient(180deg, #ffdc7a, var(--cor-manteiga) 60%, var(--cor-manteiga-escura));
  box-shadow: var(--brilho-topo);
  transform-origin: left center;
  transition: width var(--mov-suave);
}

/* ══════════════════════════════════════════════════════════════════
   CAMPO — entrada de texto como linha escrita no cardápio.
   ══════════════════════════════════════════════════════════════════ */

.campo-ds {
  width: 100%;
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border: var(--traco) solid var(--cor-madeira);
  border-radius: var(--raio-sm);
  background: var(--cor-massa);
  box-shadow: inset 0 2px 5px rgb(var(--madeira-escura-canais) / .2);
  color: var(--cor-tinta);
  font-family: var(--fonte-corpo);
  /* 16 px trava o zoom automático do Safari no iOS ao focar (armadilha 12). */
  font-size: 16px;
  font-weight: 600;
}

.campo-ds::placeholder {
  color: var(--cor-tinta-fraca);
  font-weight: 400;
}

.campo-ds:focus-visible {
  outline: 3px solid var(--cor-manteiga);
  outline-offset: 1px;
  border-color: var(--cor-madeira-escura);
}

.campo-ds--lousa {
  background: rgb(var(--giz-canais) / .1);
  border-color: rgb(var(--giz-canais) / .28);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25);
  color: var(--cor-giz);
}

.campo-ds--lousa::placeholder {
  color: var(--cor-giz-fraco);
}

/* ══════════════════════════════════════════════════════════════════
   ENTRADA DE PAINEL — abre como quem põe o prato na mesa.
   ══════════════════════════════════════════════════════════════════ */

@keyframes ds-entrar {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.ds-entra {
  animation: ds-entrar var(--mov-quique);
}

@keyframes ds-subir-rodape {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

.ds-sobe {
  animation: ds-subir-rodape var(--mov-suave);
}

/* ── ícone genérico do sprite ── */
.ic {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════════
   ETIQUETA DE PEÇA — a plaquinha pendurada no cabide.
   O botão de escolher roupa não podia ser um cartão de site: tem furo,
   barbante e cor de papel-cartão, e afunda quando o dedo encosta (R6).
   ══════════════════════════════════════════════════════════════════ */

.etiqueta-peca {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--toque);
  padding: var(--e-3) var(--e-2) var(--e-2);
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: var(--raio-md);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .5), transparent 46%),
    var(--cor-massa);
  box-shadow: var(--base-3) rgb(var(--madeira-escura-canais) / .5), var(--brilho-topo-fraco);
  color: var(--cor-tinta);
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: inherit;
  transition: transform var(--mov-rapido), background var(--mov-rapido),
    border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}

/* O furo do barbante. Meio pixel de detalhe que muda a leitura da peça. */
.etiqueta-peca__furo {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border: 2px solid var(--cor-madeira-escura);
  border-radius: 50%;
  background: rgb(var(--sombra-madeira-canais) / .35);
}

.etiqueta-peca__icone {
  width: 26px;
  height: 26px;
  flex: none;
}

.etiqueta-peca__nome {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.etiqueta-peca:hover:not(.esta-bloqueada) {
  background: var(--cor-massa-2);
}

.etiqueta-peca:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgb(var(--madeira-escura-canais) / .5), var(--brilho-topo-fraco);
}

.etiqueta-peca:focus-visible {
  outline: 3px solid var(--cor-manteiga);
  outline-offset: 2px;
}

/* Vestida agora: a etiqueta vira de papel bom e ganha o carimbo da casa. */
.etiqueta-peca.esta-ligado {
  border-color: var(--tom-principal-borda);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .45), transparent 46%),
    var(--tom-principal-face);
  box-shadow: var(--base-3) var(--tom-principal-borda), var(--brilho-topo);
  color: var(--tom-principal-texto);
}

.etiqueta-peca.esta-ligado .etiqueta-peca__furo {
  border-color: var(--tom-principal-borda);
}

/* Bloqueada continua legível: é informação de jogo ("suba de nível"), não
   um botão morto. Só perde a cor e ganha o cadeado. */
.etiqueta-peca.esta-bloqueada {
  background: var(--cor-massa-3);
  border-style: dashed;
  color: var(--cor-tinta-fraca);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   AMOSTRA DE COR — potinho de tinta, não quadradinho de seletor.
   ══════════════════════════════════════════════════════════════════ */

.amostra {
  position: relative;
  width: var(--toque);
  height: var(--toque);
  flex: none;
  padding: 0;
  border: var(--traco) solid var(--cor-madeira-escura);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / .55), transparent 42%),
    var(--amostra, var(--cor-massa));
  box-shadow: var(--base-3) rgb(var(--madeira-escura-canais) / .45);
  cursor: inherit;
  transition: transform var(--mov-rapido), box-shadow var(--mov-rapido);
}

.amostra:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgb(var(--madeira-escura-canais) / .45);
}

.amostra:focus-visible {
  outline: 3px solid var(--cor-manteiga);
  outline-offset: 3px;
}

/* Escolhida: anel de tinta em volta, como um pincel deixando marca. */
.amostra.esta-ligado::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 3px solid var(--cor-manteiga);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(var(--madeira-escura-canais) / .35);
}

/* ══════════════════════════════════════════════════════════════════
   RODA DE EMOTES — menu radial, o gesto de jogo para escolher rápido.
   ══════════════════════════════════════════════════════════════════ */

.roda {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgb(var(--noite-canais) / .42);
  padding: max(var(--e-4), env(safe-area-inset-top))
           max(var(--e-4), env(safe-area-inset-right))
           max(var(--e-4), env(safe-area-inset-bottom))
           max(var(--e-4), env(safe-area-inset-left));
}

.roda__miolo {
  position: relative;
  display: grid;
  place-items: center;
  width: min(84vw, 340px);
  aspect-ratio: 1;
}

.roda__anel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  --roda-raio: 116px;
}

/* Cada botão sai do centro na sua direção. O segundo `rotate` desgira o
   conteúdo: sem ele o ícone e o nome ficariam deitados. */
.roda__item {
  position: absolute;
  width: 64px;
  height: 64px;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  /* A vaga no anel E um transform. Qualquer regra de estado da `.placa` que
     escreva `transform` (hover, active, disabled) apaga a vaga junto e joga o
     botao para o meio da roda; com a transicao da `.placa`, o mouse entra, o
     botao foge, o hover cai, ele volta — e o que se ve e o botao correndo do
     cursor. Por isso a vaga vira variavel e cada estado RECOMPOE a cadeia em
     vez de substitui-la. */
  --roda-vaga: rotate(var(--ang)) translate(var(--roda-raio)) rotate(calc(-1 * var(--ang)));
  transform: var(--roda-vaga);
}

/* Mesma especificidade das regras de `.placa`, declaradas depois — e a vaga
   sobrevive ao estado. */
@media (hover: hover) {
  .roda__item:hover:not(:disabled) {
    transform: var(--roda-vaga) translateY(-1px);
  }
}

.roda__item:active:not(:disabled) {
  transform: var(--roda-vaga) translateY(4px);
}

.roda__item:disabled,
.roda__item[aria-disabled='true'] {
  transform: var(--roda-vaga);
}

.roda__nome {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roda__centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
}

.roda__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--cor-giz);
  text-shadow: 0 2px 0 rgb(var(--noite-canais) / .6);
}

.roda__parar {
  width: 54px;
  height: 54px;
}