/* A peça do Double Game: o material, igual na mesa e na página do Founder do
   site (que carrega este arquivo direto do jogo, /jogos/double-game/peca.css).
   Só o material: tamanho, número e estados de clique ficam no styles.css do
   jogo. Tokens de fora: --u (escala), --font-brand (Cinzel) e --mg-ease, que
   têm padrão aqui para o arquivo valer sozinho. */

/*
  A peça: a mesma em toda a mesa (sua mão, a do adversário, as 12 do centro e
  o duelo), tirada da logo. Aro de estanho chanfrado, face de couro e, virada,
  o emblema dos quatro quadrados. Tudo CSS e SVG gerado, sem imagem. A
  proporção é 0,9, a quase quadrada da logo.

  A peça é o próprio container (container-type): aro, chanfro e número são
  medidos em cqw e acompanham qualquer largura, do celular ao duelo.
    ::before  o aro        ::after  a face        filhos  número, emblema, cravos
  O realce de "pode clicar" e de "selecionada" acende o metal (--acende): o
  ouro no aro é só do Founder, e o destaque do jogo também é dourado.
*/
@property --acende { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  --estanho-1: #e9e1d2;
  --estanho-2: #968c7d;
  --estanho-3: #4d473f;
  --estanho-4: #1f1c18;
  /* o ouro do selo Founder do site (#e2c48d), em degradê de ouro velho */
  --ouro-1: #fff3cf;
  --ouro-2: #e2c48d;
  --ouro-3: #a47c3c;
  --ouro-4: #4e3713;
  --face-vermelha: linear-gradient(150deg, #cf2d3b 0%, #9a1824 45%, #5a0b14 82%, #3a060c 100%);
  --face-preta: linear-gradient(150deg, #3b3936 0%, #1d1c1a 45%, #0c0b0b 82%, #050505 100%);
  --grao-fino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grao-grosso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.6 .38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --emblema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Crect x='1' y='1' width='8' height='8' rx='.7'/%3E%3Crect x='11' y='1' width='8' height='8' rx='.7'/%3E%3Crect x='1' y='11' width='8' height='8' rx='.7'/%3E%3Crect x='11' y='11' width='8' height='8' rx='.7'/%3E%3C/g%3E%3C/svg%3E");
  --losango: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 0 10 8 5 16 0 8z'/%3E%3C/svg%3E");
}

.tile, .back-card, .slot, .duel-card:not(.empty) {
  --m1: var(--estanho-1);
  --m2: var(--estanho-2);
  --m3: var(--estanho-3);
  --m4: var(--estanho-4);
  --face: var(--face-preta);
  --c: 8.5cqw;
  --aro: max(2px, 3.4cqw);
  --bisel:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 18% 82%, rgb(0 0 0 / 0.35)),
    conic-gradient(from 215deg at 50% 50%,
      var(--m3), var(--m1) 6%, var(--m2) 11%, var(--m3) 24%, var(--m4) 40%, var(--m3) 52%,
      var(--m4) 64%, var(--m3) 76%, var(--m2) 86%, var(--m1) 92%, var(--m3));
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  flex: none;
  aspect-ratio: 0.9;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-0);
  /* a sombra é do objeto recortado, não da caixa */
  filter: drop-shadow(0 calc(9 * var(--u, 1px)) calc(8 * var(--u, 1px)) rgb(0 0 0 / 0.6)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.5));
  transition: translate .18s ease, --acende .18s ease;
}

:is(.tile, .back-card, .slot, .duel-card:not(.empty)).red { --face: var(--face-vermelha); }

:is(.tile, .back-card, .slot, .duel-card:not(.empty))::before,
:is(.tile, .back-card, .slot, .duel-card:not(.empty))::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* o aro: o bisel acende no alto à esquerda e apaga embaixo à direita */
:is(.tile, .back-card, .slot, .duel-card:not(.empty))::before {
  inset: 0;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  background: var(--bisel);
  filter: brightness(var(--acende));
}

/* a face: couro (dois grãos), reflexo do canto e bisel interno */
:is(.tile, .back-card, .slot, .duel-card:not(.empty))::after {
  --ci: max(1px, calc(var(--c) - var(--aro) * 0.4));
  inset: var(--aro);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
  background:
    radial-gradient(120% 70% at 18% 8%, rgb(255 255 255 / 0.16), transparent 55%),
    var(--grao-fino),
    var(--grao-grosso),
    var(--face);
  background-blend-mode: normal, overlay, soft-light, normal;
  box-shadow: var(--bisel-interno);
}

.tile, .back-card, .slot, .duel-card:not(.empty) {
  --bisel-interno:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 0 0 1px rgb(0 0 0 / 0.35),
    inset 0 -7cqw 12cqw rgb(0 0 0 / 0.45);
}

/* virada: o emblema da logo, no metal do aro */
.peca-emblema {
  width: 28%;
  aspect-ratio: 1;
  background: linear-gradient(140deg, var(--m1) 10%, var(--m2) 45%, var(--m3) 75%, var(--m4));
  -webkit-mask: var(--emblema) center / contain no-repeat;
          mask: var(--emblema) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.7)) drop-shadow(0 0 3cqw rgb(0 0 0 / 0.5));
}

/* ---- Founder: o metal vira ouro, os losangos do eixo da logo viram cravos */
.verso-founder {
  --m1: var(--ouro-1);
  --m2: var(--ouro-2);
  --m3: var(--ouro-3);
  --m4: var(--ouro-4);
}

.peca-cravos::before,
.peca-cravos::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7.5cqw;
  aspect-ratio: 10 / 16;
  translate: -50% 0;
  background: linear-gradient(160deg, var(--ouro-1), var(--ouro-2) 45%, var(--ouro-3) 80%);
  -webkit-mask: var(--losango) center / contain no-repeat;
          mask: var(--losango) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.6));
}
.peca-cravos::before { top: calc(var(--aro) * -0.2 - 3cqw); }
.peca-cravos::after  { bottom: calc(var(--aro) * -0.2 - 3cqw); }

/* o número do Founder gravado em ouro abaixo do emblema, só onde cabe */
.peca-founder {
  margin-top: 7.5cqw;
  font-family: var(--font-brand, "Cinzel", Georgia, serif);
  font-weight: 600;
  font-size: 12cqw;
  line-height: 1;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(180deg, var(--ouro-1), var(--ouro-2) 55%, var(--ouro-3));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.7));
}
@container (max-width: 63px) { .peca-founder { display: none; } }

/* a entrada: um reflexo de luz atravessa o ouro uma vez */
.verso-founder::before {
  background:
    linear-gradient(115deg, transparent 38%, rgb(255 248 225 / 0.85) 50%, transparent 62%) 150% 0 / 260% 100% no-repeat,
    var(--bisel);
  animation: reflexoFounder 1.5s var(--mg-ease, cubic-bezier(.22, .61, .36, 1)) .35s 1 both;
}
@keyframes reflexoFounder { from { background-position: 150% 0, 0 0, 0 0; } to { background-position: -60% 0, 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .verso-founder::before { animation: none; } }