/* ============================================================================
   TEMA MADEIRA — Design System do puzzle.k14.uk
   Onda 1: tokens + componentes base. Aplicado por tela nas ondas seguintes.

   Regra do kit: o que vem SEM texto embutido na folha (ícones, molduras,
   banners, barras) é asset recortado de verdade, em `img/ui/*.webp`; o que
   viria com rótulo gravado (botões, badges, painéis) é reconstruído aqui em
   CSS — em 170px de origem, apagar a letra destruía a textura.
   ========================================================================= */

:root {
  /* ---- madeira ---------------------------------------------------------- */
  --w-esc: #3a2214;      /* sombra / contorno */
  --w-med: #6b3f21;      /* tábua */
  --w-cla: #8b5a2f;      /* tábua iluminada */
  --w-topo: #a06a37;     /* filete de luz superior */
  --w-borda: #24140b;

  /* ---- cores de ação (do kit) ------------------------------------------- */
  --v-cla: #8fc93a;  --v-med: #5a9e18;  --v-esc: #2f6b0c;   /* verde  */
  --r-cla: #e8503f;  --r-med: #c8281c;  --r-esc: #8c1410;   /* vermelho */
  --a-cla: #f7c33e;  --a-med: #e29517;  --a-esc: #a3600a;   /* amarelo */
  --b-cla: #4aa8e0;  --b-med: #1f77bd;  --b-esc: #11507f;   /* azul */

  /* ---- tinta ------------------------------------------------------------ */
  --t-ouro: #ffd452;
  --t-creme: #fdf3dc;
  --t-sombra: #2a1408;
  --t-mut: #cba97e;

  --raio-btn: 14px;
  --raio-painel: 18px;

  /* fatias do 9-slice dos assets (medidas nos PNGs 2×) */
  --slice-moldura: 42;
  --slice-barra: 26;

  --sombra-peca: 0 4px 0 rgba(36, 20, 11, 0.55), 0 8px 18px rgba(0, 0, 0, 0.42);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------- superfícies */
.madeira {
  background:
    linear-gradient(180deg, rgba(255, 226, 176, 0.18), rgba(0, 0, 0, 0.14) 42%, rgba(0, 0, 0, 0.30)),
    url('../img/ui/madeira_tile.webp') repeat;
  background-size: auto, 96px 96px;
  background-blend-mode: overlay, normal;
}

/* painel com moldura de madeira real (9-slice do kit).
   `stretch` (padrão), não `round`: repetir a fatia desenhava travessas de
   madeira atravessando o miolo do painel. */
.painel-ds {
  position: relative;
  border: 26px solid transparent;
  border-image: url('../img/ui/moldura_foto.webp') 46 fill;
  padding: 14px 16px 16px;
  color: var(--t-creme);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
/* o miolo do 9-slice é escuro: sobre ele vai o conteúdo, nunca texto na cor do fundo */
.painel-ds > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ botões */
.btn-ds {
  --c-cla: var(--w-cla);
  --c-med: var(--w-med);
  --c-esc: var(--w-esc);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px 12px;
  border: 0;
  border-radius: var(--raio-btn);
  font-family: "Lilita One", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(15px, 3.6vw, 19px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--t-creme);
  cursor: pointer;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-cla) 92%, #fff) 0%, var(--c-med) 46%, var(--c-esc) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.38),
    inset 0 -3px 0 rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(0, 0, 0, 0.30),
    0 5px 0 var(--c-esc),
    0 9px 16px rgba(0, 0, 0, 0.38);
  text-shadow: 0 2px 0 rgba(42, 20, 8, 0.65);
  transition: transform 90ms var(--ease-pop), box-shadow 90ms ease, filter 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-ds::after {              /* brilho de verniz na metade de cima */
  content: '';
  position: absolute;
  inset: 3px 4px auto;
  height: 42%;
  border-radius: calc(var(--raio-btn) - 4px) calc(var(--raio-btn) - 4px) 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn-ds:hover { filter: brightness(1.06); }
.btn-ds:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.32),
    0 1px 0 var(--c-esc),
    0 3px 8px rgba(0, 0, 0, 0.35);
}
.btn-ds:focus-visible { outline: 3px solid var(--t-ouro); outline-offset: 3px; }
.btn-ds[disabled] { filter: grayscale(0.7) brightness(0.8); pointer-events: none; }

.btn-ds.verde    { --c-cla: var(--v-cla); --c-med: var(--v-med); --c-esc: var(--v-esc); }
.btn-ds.vermelho { --c-cla: var(--r-cla); --c-med: var(--r-med); --c-esc: var(--r-esc); }
.btn-ds.amarelo  { --c-cla: var(--a-cla); --c-med: var(--a-med); --c-esc: var(--a-esc); color: #4a2a05; text-shadow: 0 2px 0 rgba(255, 236, 190, 0.5); }
.btn-ds.azul     { --c-cla: var(--b-cla); --c-med: var(--b-med); --c-esc: var(--b-esc); }
.btn-ds.ouro     { color: var(--t-ouro); }

/* botão de tábua: usa a textura real do kit por cima do relevo */
.btn-ds.tabua {
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.22), rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.34)),
    url('../img/ui/madeira_tile.webp') repeat;
  background-size: auto, 96px 96px;
  color: var(--t-ouro);
}
.btn-ds.grande { min-height: 58px; padding: 14px 30px 16px; font-size: clamp(17px, 4.4vw, 23px); }
.btn-ds.bloco  { width: 100%; }

/* botão redondo do HUD (moldura de pedra do kit) */
.btn-redondo {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 0; cursor: pointer; padding: 0;
  background: url('../img/ui/moldura_redonda.webp') center/100% 100% no-repeat;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform 90ms var(--ease-pop);
}
.btn-redondo:active { transform: translateY(3px) scale(0.97); }
.btn-redondo img, .btn-redondo .ico { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ badges */
.badge-ds {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 7px;
  border-radius: 10px;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--t-creme);
  background: linear-gradient(180deg, var(--v-cla), var(--v-med) 60%, var(--v-esc));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 2px rgba(0, 0, 0, 0.28),
    0 3px 0 rgba(0, 0, 0, 0.30);
  text-shadow: 0 1px 0 rgba(42, 20, 8, 0.6);
}
.badge-ds.medio   { background: linear-gradient(180deg, var(--a-cla), var(--a-med) 60%, var(--a-esc)); color: #4a2a05; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); }
.badge-ds.dificil { background: linear-gradient(180deg, var(--r-cla), var(--r-med) 60%, var(--r-esc)); }
.badge-ds.mestre  { background: linear-gradient(180deg, #b06ce0, #7d3ec2 60%, #4d1f80); }

/* estrelas de dificuldade, desenhadas com o ícone de coroa/estrela do kit */
.badge-ds .estrelas { display: inline-flex; gap: 2px; font-size: 11px; color: var(--t-ouro); }

/* ------------------------------------------------------------------ banners */
.banner-ds {
  display: inline-block;
  min-width: 180px;
  padding: 12px 26px 20px;
  text-align: center;
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  font-size: clamp(15px, 4vw, 20px);
  color: var(--t-creme);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  border-style: solid;
  border-color: transparent;
  border-width: 16px 44px 30px;
  border-image: url('../img/ui/banner_vermelho.webp') 22 46 40 fill;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
}
/* cada banner tem proporção própria: a fatia acompanha, senão sobra fundo
   branco na ponta ou a costura aparece no meio */
.banner-ds.azul {
  border-image: url('../img/ui/banner_azul.webp') 20 38 34 fill;
  border-width: 14px 36px 26px;
}
.banner-ds.verde {
  border-image: url('../img/ui/banner_verde.webp') 18 26 32 fill;
  border-width: 13px 24px 25px;
}

/* ------------------------------------------------------- barra de progresso */
.barra-ds {
  position: relative;
  height: 38px;
  display: flex; align-items: center;
  border-style: solid;
  border-color: transparent;
  border-width: 17px 30px;
  border-image: url('../img/ui/barra_fundo.webp') 34 56 fill;
}
.barra-ds > i {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--v-cla), var(--v-med) 70%, var(--v-esc));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: width 260ms ease;
}

/* ------------------------------------------------------------------ ícones */
.ico {
  display: inline-block;
  width: 28px; height: 28px;
  background: center/contain no-repeat;
  vertical-align: -6px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.ico.coroa     { background-image: url('../img/ui/ico_coroa.webp'); }
.ico.coracao   { background-image: url('../img/ui/ico_coracao.webp'); }
.ico.raio      { background-image: url('../img/ui/ico_raio.webp'); }
.ico.moeda     { background-image: url('../img/ui/ico_moeda.webp'); }
.ico.peca      { background-image: url('../img/ui/ico_peca.webp'); }
.ico.lupa      { background-image: url('../img/ui/ico_lupa.webp'); }
.ico.livro     { background-image: url('../img/ui/ico_livro.webp'); }
.ico.mochila   { background-image: url('../img/ui/ico_mochila.webp'); }
.ico.config    { background-image: url('../img/ui/ico_config.webp'); }
.ico.ouro      { background-image: url('../img/ui/ico_trofeu_ouro.webp'); }
.ico.prata     { background-image: url('../img/ui/ico_trofeu_prata.webp'); }
.ico.bronze    { background-image: url('../img/ui/ico_trofeu_bronze.webp'); }
.ico.cadeado   { background-image: url('../img/ui/cadeado_fechado.webp'); }
.ico.aberto    { background-image: url('../img/ui/cadeado_aberto.webp'); }
.ico.esq       { background-image: url('../img/ui/seta_esq.webp'); }
.ico.dir       { background-image: url('../img/ui/seta_dir.webp'); }
.ico.cima      { background-image: url('../img/ui/seta_cima.webp'); }
.ico.baixo     { background-image: url('../img/ui/seta_baixo.webp'); }
.ico.check     { background-image: url('../img/ui/chk_verde.webp'); }
.ico.recusa    { background-image: url('../img/ui/chk_vermelho.webp'); }
.ico.g { width: 40px; height: 40px; }
.ico.p { width: 20px; height: 20px; }

/* --------------------------------------------------------- moldura de foto */
.moldura-ds {
  border: 22px solid transparent;
  border-image: url('../img/ui/moldura_foto.webp') 46 fill;
  line-height: 0;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
.moldura-ds img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------- tipografia */
.titulo-ds {
  font-family: "Lilita One", "Trebuchet MS", sans-serif;
  color: var(--t-ouro);
  letter-spacing: 0.02em;
  text-shadow:
    0 2px 0 var(--t-sombra),
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 8px 16px rgba(0, 0, 0, 0.4);
}
.subtitulo-ds { font-family: "Nunito", system-ui, sans-serif; color: var(--t-mut); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .btn-ds, .btn-redondo, .barra-ds > i { transition: none; }
}