/* Tutorial (ui/tutorial.js). Carregado depois do style.css.
   Uma luz ilumina a parte do HUD explicada (o resto escurece) e um cartão de
   papel e nanquim explica. Tamanhos em "em": tudo cresce junto em telas grandes. */
#tutorial {
  position: fixed;
  inset: 0;
  z-index: 20;
  cursor: default; /* clicar no escuro NÃO avança (só pisca o "Avançar") */
  font-size: clamp(16px, 0.55vw + 10px, 21px); /* 1280 px → 17 px · 1920 px → 20,5 px */
  animation: tut-fade 0.35s ease-out;
}
@keyframes tut-fade { from { opacity: 0; } }
#tutorial.snap .tut-card, #tutorial.snap .tut-spot { transition: none; }

/* ---------- A luz ---------- */
/* A sombra gigante escurece a tela toda menos o buraco; o brilho fica num
   pseudo-elemento que só muda de opacidade (barato até em PC fraco). Cor de
   papel e pulso lento: vermelho piscando parecia dano. */
.tut-spot {
  position: fixed;
  border: 2px solid rgba(232, 220, 194, 0.85);
  border-radius: 4px;
  box-shadow: 0 0 0 200vmax rgba(4, 3, 3, 0.7);
  pointer-events: none;
  transition: left 0.45s cubic-bezier(.2, .8, .2, 1), top 0.45s cubic-bezier(.2, .8, .2, 1),
    width 0.45s cubic-bezier(.2, .8, .2, 1), height 0.45s cubic-bezier(.2, .8, .2, 1), border-radius 0.45s;
}
.tut-spot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 26px 3px rgba(232, 220, 194, 0.5), inset 0 0 16px rgba(232, 220, 194, 0.28);
  opacity: 0.3;
  animation: tut-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes tut-breathe { to { opacity: 1; } }
/* O herói: luz redonda e sem moldura dura. */
.tut-spot.round { border-radius: 50%; border-color: rgba(232, 220, 194, 0.35); }
.tut-spot.none { border-color: transparent; }
.tut-spot.none::after { display: none; }

/* ---------- O cartão ---------- */
.tut-card {
  position: fixed;
  width: min(calc(100vw - 32px), clamp(340px, 26vw + 110px, 590px));
  padding: 0.75em 1.15em 0.9em;
  color: var(--ink);
  text-align: left;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(255, 250, 236, 0.6), transparent 62%),
    linear-gradient(180deg, #efe5cf, #d6c7a5);
  border: 3px solid var(--ink);
  border-top: 8px solid var(--blood);
  box-shadow: 8px 8px 0 #000, inset 0 0 42px rgba(92, 60, 30, 0.24);
  cursor: default;
  transition: left 0.45s cubic-bezier(.2, .8, .2, 1), top 0.45s cubic-bezier(.2, .8, .2, 1);
}
.tut-card.in { animation: tut-in 0.4s cubic-bezier(.2, .9, .25, 1.15); }
.tut-card.in.back { animation-name: tut-in-back; }
@keyframes tut-in { from { opacity: 0; transform: translateX(16px) rotate(0.8deg) scale(0.97); } }
@keyframes tut-in-back { from { opacity: 0; transform: translateX(-16px) rotate(-0.8deg) scale(0.97); } }

.tut-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tut-count { font: 700 0.68em var(--mono); letter-spacing: 0.14em; color: var(--blood); }
.tut-skip {
  padding: 2px 0;
  font: italic 0.82em var(--text);
  color: #4a4037;
  background: none;
  border: 0;
  cursor: pointer;
}
.tut-skip:hover { color: var(--blood); }
/* 1º Esc/Start: "[Esc] de novo para pular" em sangue, com o tempo (2 s) escorrendo embaixo. */
.tut-skip.armed {
  position: relative;
  padding: 2px 8px 4px;
  font-style: normal;
  color: var(--paper);
  background: var(--blood);
  box-shadow: 2px 2px 0 var(--ink);
  animation: tut-armed 0.32s cubic-bezier(.2, .9, .25, 1.2);
}
.tut-skip.armed:hover { color: var(--paper); background: #c8161f; }
#tutorial .tut-skip.armed kbd { color: var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--blood-dark); }
.tut-skip.armed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--paper);
  transform-origin: left center;
  animation: tut-countdown 2s linear forwards;
}
@keyframes tut-armed { from { transform: scale(1.18); } }
@keyframes tut-countdown { to { transform: scaleX(0); } }

.tut-title { margin: 0.05em 0 0.3em; font: 400 1.85em/1 var(--title); letter-spacing: 0.03em; }
/* Pincelada de sangue embaixo do título. */
.tut-title::after {
  content: '';
  display: block;
  width: 3.4em;
  height: 0.16em;
  margin-top: 0.12em;
  background: linear-gradient(90deg, var(--blood), var(--blood) 62%, rgba(179, 18, 28, 0));
  border-radius: 2px 70% 70% 2px;
}
.tut-text { margin: 0 0 0.55em; font: 1em/1.42 var(--text); text-wrap: pretty; }
.tut-text .em, .tut-tip .em { font-weight: 400; font-style: italic; color: var(--blood-dark); border-bottom: 2px solid rgba(179, 18, 28, 0.45); }
.tut-tip {
  margin: 0 0 0.75em;
  padding: 0.4em 0.7em;
  font: 0.9em/1.42 var(--text);
  color: #33291f;
  background: rgba(13, 10, 9, 0.07);
  border-left: 4px solid var(--blood);
  text-wrap: pretty; /* sem palavra sozinha na última linha */
}

/* Tecla + pontuação grudada nela ficam na mesma linha. */
.tut-card .nw { white-space: nowrap; }

/* Botões do teclado/controle desenhados como teclas de nanquim. */
#tutorial kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 0 0.42em;
  margin: 0 0.06em;
  font: 700 0.7em/1.65 var(--mono);
  text-align: center;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ink);
  border-radius: 4px;
  box-shadow: 0 2px 0 var(--blood-dark);
  vertical-align: 0.14em;
}

/* ---------- Voltar · bolinhas · Avançar ---------- */
.tut-nav { display: flex; align-items: center; gap: 0.5em; }
.tut-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.34em 0.75em;
  font: 0.95em var(--text);
  white-space: nowrap;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
#tutorial .tut-btn kbd { vertical-align: 0; }
#tutorial .tut-tip kbd { font-size: 0.74em; }
.tut-btn:hover { background: rgba(13, 10, 9, 0.1); }
.tut-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tut-btn:disabled { opacity: 0.3; cursor: default; box-shadow: none; background: none; }
.tut-btn.nope { animation: tut-nope 0.32s; }
@keyframes tut-nope { 20% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
.tut-next { color: var(--paper); background: var(--ink); box-shadow: 3px 3px 0 var(--blood-dark); }
.tut-next:hover { background: #2a1e19; }
#tutorial .tut-next kbd { color: var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--blood); }
/* Último passo: "Começar" em sangue, chamando. */
.tut-next.go { background: var(--blood); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); animation: tut-call 1.6s ease-in-out infinite; }
.tut-next.go:hover { background: #c8161f; }
@keyframes tut-call { 50% { transform: translateY(-2px); box-shadow: 3px 5px 0 var(--ink); } }
/* Tecla de jogo (WASD, Espaço...) ou clique no escuro: o "Avançar" pula mostrando por onde seguir. */
.tut-next.nudge { animation: tut-nudge 0.55s cubic-bezier(.2, .9, .25, 1.3); }
@keyframes tut-nudge {
  30% { transform: translate(-1px, -4px) scale(1.06); box-shadow: 4px 7px 0 var(--blood), 0 0 0 3px rgba(179, 18, 28, 0.35); }
  60% { transform: translateY(1px); }
}

/* Bolinhas: nunca quebram linha. Apertado (janela de 1024 px): menores; se nem
   assim couber, somem e fica o "3 / 6" do alto do cartão (ui/tutorial.js fitDots). */
.tut-dots { flex: 1; min-width: 0; display: flex; justify-content: center; flex-wrap: nowrap; }
.tut-dots .tut-dot { flex: none; } /* não espremem: se não cabem, o fitDots percebe */
.tut-card.tight .tut-dot { width: 0.74em; }
.tut-card.tight .tut-dot::before { width: 0.4em; height: 0.4em; border-width: 1.5px; }
.tut-card.tight .tut-dot.on::before { transform: scale(1.25); }
.tut-card.tiny .tut-dots { display: none; }
.tut-card.tiny .tut-next { margin-left: auto; }
.tut-dot {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.5em;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.tut-dot::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.tut-dot.done::before { background: var(--ink); }
.tut-dot.on::before { background: var(--blood); border-color: var(--blood); transform: scale(1.4); }
.tut-dot:hover::before { transform: scale(1.4); }

/* ---------- Rabicho de balão apontando para a luz ---------- */
/* Em cima: triângulo de sangue (continua a tarja do cartão). Nos outros lados:
   papel com contorno de nanquim (::before = contorno, ::after = papel que
   cobre a borda), senão um triângulo preto sumiria no escuro. */
.tut-card::before, .tut-card::after { content: ''; position: absolute; display: none; border: 0 solid transparent; }
.tut-card.below::before { display: block; border-width: 11px; left: calc(var(--arrow-x, 50%) - 11px); top: -30px; border-bottom-color: var(--blood); }
.tut-card.above::before, .tut-card.above::after, .tut-card.right::before,
.tut-card.right::after, .tut-card.left::before, .tut-card.left::after { display: block; }
.tut-card.above::before { border-width: 12px; left: calc(var(--arrow-x, 50%) - 12px); bottom: -27px; border-top-color: var(--ink); }
.tut-card.above::after { border-width: 11px; left: calc(var(--arrow-x, 50%) - 11px); bottom: -22px; border-top-color: #cdbd9c; }
.tut-card.right::before { border-width: 12px; top: calc(var(--arrow-y, 50%) - 12px); left: -27px; border-right-color: var(--ink); }
.tut-card.right::after { border-width: 11px; top: calc(var(--arrow-y, 50%) - 11px); left: -22px; border-right-color: #d6c8aa; }
.tut-card.left::before { border-width: 12px; top: calc(var(--arrow-y, 50%) - 12px); right: -27px; border-left-color: var(--ink); }
.tut-card.left::after { border-width: 11px; top: calc(var(--arrow-y, 50%) - 11px); right: -22px; border-left-color: #d6c8aa; }

/* ---------- Parte do HUD em foco ---------- */
/* Um brilho de papel passa devagar pela barra: chama o olho sem parecer dano. */
.bar.tut-focus::after, .xp.tut-focus::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 222, 0.42) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  animation: tut-sheen 2.8s ease-in-out infinite;
}
@keyframes tut-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.bar.tut-focus span, .xp.tut-focus span { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #tutorial, #tutorial *, #tutorial *::before, #tutorial *::after, .tut-focus::after { animation: none !important; transition: none !important; }
}