/* Cartas do Alice is Missing — proporção da carta física (825 x 1425) */
:root {
  --papel: #f3f1ec;
  --papel-bege: #ebe3d5;
  --tinta: #1f1d1c;
  --azul: #3a8ea6;
  --vermelho: #e2452c;
  --rosa: #c9484d;
  --vinho: #8a3e5c;
  --laranja: #ee7125;
  --coral: #e0494a;
  --carta-w: 240px;
}

.carta {
  width: var(--carta-w);
  aspect-ratio: 825 / 1425;
  perspective: 1200px;
  flex: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.carta-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  transform-style: preserve-3d;
}
.carta.virada .carta-inner { transform: rotateY(180deg); }
.carta-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--carta-w) * .045);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.22);
}
.carta-verso { background: #2b6f84 center / cover no-repeat; }
.carta-frente { transform: rotateY(180deg); }
.carta.so-frente { cursor: default; }
.carta.so-frente .carta-inner { transform: rotateY(180deg); transition: none; }
.carta-img { background: #ddd center / cover no-repeat; }

/* Tipografia escala com a largura da carta */
.carta-frente.texto {
  background: var(--papel);
  color: var(--tinta);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: calc(var(--carta-w) * .062);
  line-height: 1.18;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 11% 7% 7%;
  gap: 4%;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px);
}
.c-pre, .c-pos {
  font-style: italic;
  font-weight: 500;
  font-size: .9em;
}
.c-titulo {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.32em;
  line-height: 1.05;
  letter-spacing: -.01em;
  padding-bottom: .18em;
  border-bottom: .14em solid var(--azul);
  align-self: center;
}
.c-faixa {
  margin: 0 -8%;
  padding: 11% 13%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 1.06em;
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: .5em;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 26%;
}
.c-pergunta { font-weight: 700; font-size: 1.04em; }
.c-caixa {
  border: .1em solid var(--tinta);
  padding: .45em .6em;
  font-style: italic;
  font-weight: 500;
  font-size: .82em;
}
.c-moeda { font-size: .86em; font-weight: 600; text-align: left; display: grid; gap: .35em; }
.c-moeda b { font-weight: 800; }

.carta-frente.final .c-titulo { border-color: var(--vermelho); }
.carta-frente.final .c-faixa { background: var(--vermelho); }

/* Busca */
.carta-frente.busca { justify-content: center; }
.carta-frente.busca .c-rotulo {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7em;
  color: #6b655d;
}
.carta-frente.busca .c-faixa { flex: 0 0 auto; min-height: 0; font-size: 1.2em; }

/* Personagem */
.carta-frente.personagem { background-color: var(--papel-bege); padding: 7% 0 4%; gap: 2.2%; }
.carta-frente.personagem .c-nome {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rosa);
  font-size: 1.45em;
  line-height: 1;
  margin: 0 12%;
  padding-bottom: .1em;
  border-bottom: .07em solid var(--rosa);
}
.carta-frente.personagem .c-papel { color: var(--rosa); font-style: italic; font-weight: 700; }
.carta-frente.personagem .c-bloco { padding: 0 8%; font-size: .9em; }
.carta-frente.personagem .c-bloco b { display: block; font-size: 1.15em; }
.carta-frente.personagem .c-faixa { margin: 0 -2%; min-height: 0; flex: 0 0 auto; padding: 5.5% 12%; font-size: .93em; gap: .3em; }
.carta-frente.personagem .c-faixa small {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.5em;
  opacity: .85;
  line-height: 1;
}
.c-faixa.segredo { background: var(--rosa); }
.c-faixa.recado { background: var(--vinho); }

/* Motivação */
.carta-frente.motivacao { background-color: var(--papel-bege); padding: 14% 0; gap: 0; justify-content: center; }
.carta-frente.motivacao .c-faixa { margin: 0 -2%; min-height: 0; flex: 0 0 auto; padding: 8% 12%; }
.c-faixa.motivo { background: var(--laranja); }
.c-faixa.relacoes { background: var(--coral); }
.c-faixa.relacoes hr { border: 0; border-top: .08em solid rgba(255,255,255,.85); margin: .2em 12%; }
.carta-frente.motivacao small {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1;
}

/* Relação (expansão) */
.carta-frente.relacao { background-color: var(--papel-bege); padding: 3% 0 7%; gap: 1.5%; }
.carta-frente.relacao .c-faixa {
  margin: 0 -2%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 5% 12%;
  background: #e2553a;
  font-size: 1.02em;
  gap: .2em;
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
}
.carta-frente.relacao .c-faixa:nth-last-child(2) { padding-bottom: 17%; }
.carta-frente.relacao .c-faixa hr { border: 0; border-top: .08em solid rgba(255,255,255,.85); margin: .15em 6%; }
.carta-frente.relacao .c-rotulo-rel {
  position: absolute;
  right: 8%; bottom: 9%;
  color: #fff;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1;
}

/* Legenda em PT sobre as cartas com arte (Suspeito/Local) */
.c-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28% 7% 6%;
  background: linear-gradient(transparent, rgba(10,10,12,.86) 45%);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: calc(var(--carta-w) * .07);
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}
.c-legenda span { display: block; font-weight: 500; font-style: italic; font-size: .8em; opacity: .9; }

/* Nome traduzido do Local, numa faixa azul por cima do original em inglês */
.c-faixa-local {
  position: absolute;
  left: -2%; right: -2%;
  bottom: 1%;
  height: 24%;
  background: var(--azul);
  clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 11%;
  box-shadow: 0 -2px 10px rgba(0,0,0,.25);
}
.c-faixa-local span {
  color: #fff;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  font-size: calc(var(--carta-w) * .084);
  line-height: 1.08;
  letter-spacing: .01em;
  transform: rotate(-2deg);
}

/* Subtítulo traduzido do Suspeito, por cima do original em inglês */
.c-sub {
  position: absolute;
  left: 8%; right: 8%;
  top: 11.6%; height: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(230, 221, 202);
  box-shadow: 0 0 calc(var(--carta-w) * .025) calc(var(--carta-w) * .02) rgb(230, 221, 202);
  color: #262321;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: calc(var(--carta-w) * .082);
  letter-spacing: .01em;
  line-height: 1;
}
.c-sub.exp {
  background: rgb(225, 213, 190);
  box-shadow: 0 0 calc(var(--carta-w) * .025) calc(var(--carta-w) * .02) rgb(225, 213, 190);
}

/* Marca d'água das cartas de exemplo */
.c-exemplo {
  position: absolute;
  top: 2.2%; left: 4%;
  transform: rotate(-6deg);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: calc(var(--carta-w) * .04);
  letter-spacing: .12em;
  color: var(--vermelho);
  border: .12em solid var(--vermelho);
  border-radius: .2em;
  padding: .05em .35em;
  opacity: .75;
  pointer-events: none;
}
.c-minuto {
  position: absolute;
  top: 3.5%; right: 5%;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: .75em;
  color: var(--azul);
}
.final .c-minuto { color: var(--vermelho); }