/* ============================================================
   TUTORIAL — "filme interativo" 100% ISOLADO do jogo.
   Tudo aqui é prefixado com .tut- e vive num overlay próprio (#tutRoot).
   Nada deste arquivo afeta o jogo real; nada do jogo afeta isto.
   ============================================================ */
#tutRoot{
  position:fixed; inset:0; z-index:4000; display:none;
  background:radial-gradient(circle at 50% 30%, #11160f, #070905 70%);
  color:#e8e9df; font-family:inherit; overflow:hidden;
}
#tutRoot.tut-on{ display:block; }

/* palco onde o tabuleiro encenado é desenhado */
.tut-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.tut-board{
  position:relative;
  width:min(92vw, 1100px); height:min(64vh, 620px);
  margin:0 auto;
}
.tut-board svg{ width:100%; height:100%; display:block; }

/* balão de narração (rodapé) */
.tut-narration{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:min(94vw, 820px);
  background:rgba(13,16,11,.96); border:1px solid var(--gold,#c8a24a);
  border-radius:14px; padding:16px 18px 14px; z-index:4030;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  display:flex; gap:16px; align-items:stretch;
}
/* retrato do Comandante Conrad Mercer */
.tut-portrait{
  flex:0 0 auto; width:96px; align-self:stretch; border-radius:12px; overflow:hidden;
  border:1px solid rgba(200,162,74,.45); background:#0a0c07;
  box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 0 24px rgba(0,0,0,.4);
  position:relative;
}
.tut-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;
}
.tut-portrait img.tut-pose-in{ animation:tutPoseIn .35s ease; }
@keyframes tutPoseIn{ from{ opacity:.3; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
.tut-portrait::after{ /* leve vinheta para integrar ao balão */
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -20px 24px rgba(13,16,11,.6);
}
.tut-narration-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.tut-narration .tut-coach{
  display:flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold,#c8a24a); font-weight:800; margin-bottom:6px;
  font-family:var(--font-display,inherit);
}
.tut-narration .tut-text{ font-size:15px; line-height:1.5; color:#e8e9df; min-height:44px; flex:1; }
.tut-narration .tut-text b{ color:#fff; }
.tut-narration .tut-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
}
@media (max-width:560px){
  .tut-portrait{ width:64px; }
  .tut-narration{ gap:12px; padding:14px; }
  .tut-narration .tut-coach{ font-size:11px; }
}
.tut-progress{ font-size:12px; color:var(--muted,#9aa08e); }
.tut-progress i{ display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#3a4232; margin:0 2px; }
.tut-progress i.on{ background:var(--gold,#c8a24a); }
.tut-actions{ display:flex; gap:8px; }
.tut-btn{
  font-size:14px; padding:9px 16px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line,#2a3120); background:rgba(20,24,16,.9); color:#e8e9df;
}
.tut-btn.tut-primary{
  border-color:var(--gold,#c8a24a);
  background:linear-gradient(180deg,#e8c25e,#c8a24a); color:#10130f; font-weight:800;
}
.tut-btn.tut-ghost{ background:transparent; color:var(--muted,#9aa08e); }
.tut-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* botão "pular tutorial" no topo */
.tut-skip{
  position:absolute; top:14px; right:16px; z-index:4040;
  font-size:13px; padding:7px 13px; border-radius:9px; cursor:pointer;
  background:rgba(20,24,16,.85); border:1px solid var(--line,#2a3120); color:var(--muted,#9aa08e);
}

/* holofote: escurece tudo e ilumina um retângulo-alvo (via clip do box-shadow) */
.tut-spot{
  position:absolute; z-index:4020; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,8,5,.78);
  border:2px solid var(--gold,#c8a24a);
  transition:all .35s ease;
}
.tut-spot.tut-hidden{ display:none; }

/* seta apontando o alvo */
.tut-arrow{
  position:absolute; z-index:4025; font-size:30px; color:var(--gold,#c8a24a);
  pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:tutBounce 1s infinite ease-in-out;
}
@keyframes tutBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* título de cena (topo central, opcional) */
.tut-title{
  position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:4030;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  color:var(--gold,#c8a24a); text-align:center;
}

/* ---- CARTAS encenadas ---- */
.tut-cardrow{
  position:absolute; left:50%; bottom:248px; transform:translateX(-50%);
  display:flex; gap:14px; z-index:4022;
}
.tut-card{
  width:104px; height:148px; border-radius:11px; position:relative; cursor:default;
  background:linear-gradient(160deg,#1d2417,#11150d); border:2px solid #3a4633;
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .2s, box-shadow .2s, border-color .2s;
  padding:8px; display:flex; flex-direction:column;
}
.tut-card.tut-attack{ border-color:#c0563a; }
.tut-card.tut-defense{ border-color:#5b8cc0; }
.tut-card.tut-pulse{ transform:translateY(-10px) scale(1.04); box-shadow:0 12px 30px rgba(200,162,74,.4); }
.tut-card .tut-card-kind{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; }
.tut-card.tut-attack .tut-card-kind{ color:#e98368; }
.tut-card.tut-defense .tut-card-kind{ color:#7fb0e8; }
.tut-card .tut-card-terr{ font-size:12px; color:#fff; font-weight:700; margin-top:2px; line-height:1.2; }
.tut-card .tut-card-mid{ flex:1; display:flex; align-items:center; justify-content:center; font-size:34px; }
.tut-card .tut-card-foot{ font-size:10px; color:var(--muted,#9aa08e); text-align:center; }
.tut-card .tut-card-rarity{ position:absolute; top:7px; right:8px; font-size:11px; }

/* ---- DADOS encenados ---- */
.tut-dice{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  display:flex; gap:22px; z-index:4023; align-items:center;
}
.tut-dice .tut-side{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.tut-dice .tut-side-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted,#9aa08e); }
.tut-die{
  width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:900; background:#f0ede3; color:#1a1a1a;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.tut-die.tut-atk{ background:linear-gradient(160deg,#e8a08c,#c0563a); color:#fff; }
.tut-die.tut-def{ background:linear-gradient(160deg,#9cc0e8,#5b8cc0); color:#fff; }
.tut-die.tut-win{ outline:3px solid #6ec38c; }
.tut-die.tut-lose{ opacity:.5; }

/* tela de conclusão */
.tut-finish{
  position:absolute; inset:0; z-index:4050; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,26,15,.97), rgba(6,8,5,.99));
}
.tut-finish.tut-on{ display:flex; }
.tut-finish .tut-fin-trophy{ font-size:64px; line-height:1; animation:tutTrophy 1.6s ease-in-out infinite; }
@keyframes tutTrophy{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-8px) rotate(4deg); } }
.tut-finish .tut-fin-title{ font-size:46px; font-weight:900; letter-spacing:.04em;
  background:linear-gradient(180deg,#f3d987,#c8a24a); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 12px rgba(200,162,74,.3); }
.tut-finish .tut-fin-sub{ font-size:16px; color:#cdd2c4; max-width:480px; line-height:1.5; }
.tut-finish .tut-fin-reward{
  margin-top:4px; font-size:16px; color:#10130f; font-weight:700;
  background:linear-gradient(180deg,#e8c25e,#c8a24a); border-radius:22px; padding:9px 20px;
  box-shadow:0 6px 18px rgba(200,162,74,.4);
}
.tut-finish .tut-fin-reward b{ font-size:18px; }

@media (max-width:760px){
  .tut-card{ width:84px; height:120px; }
  .tut-narration{ bottom:12px; padding:12px 14px; }
  .tut-narration .tut-text{ font-size:14px; }
}

/* ---- MODO TOUR: overlay transparente sobre a interface REAL ----
   No tour, o #tutRoot não escurece tudo (quem escurece é o holofote, via box-shadow).
   Cliques passam para a UI real, EXCETO na narração/skip (que capturam). */
#tutRoot.tut-tour{ background:transparent; pointer-events:none; }
#tutRoot.tut-tour .tut-narration,
#tutRoot.tut-tour .tut-skip{ pointer-events:auto; }
/* o holofote no tour não bloqueia (é só visual); o recorte escuro vem do box-shadow */
#tutRoot.tut-tour .tut-spot{ pointer-events:none; }

/* ---- TRAVA: no fim do tour, bloqueia tudo menos o alvo liberado ----
   O #tutRoot continua "transparente" a cliques (pointer-events:none); quem bloqueia
   é o BLOCKER (div filho com pointer-events:auto). Assim o alvo liberado, elevado
   acima do blocker, continua clicável, e o root nunca rouba o clique. */
#tutRoot.tut-lock{ pointer-events:none; }
/* blocker explícito (div real) — captura cliques de toda a UI por baixo */
.tut-blocker{ position:fixed; inset:0; z-index:4008; pointer-events:auto; background:transparent; }
.tut-blocker.tut-hidden{ display:none; }
#tutRoot.tut-lock .tut-narration,
#tutRoot.tut-lock .tut-skip{ pointer-events:auto; }

/* ---- CARTAS ENCENADAS no palco (usam o desenho real .cf-card lá dentro) ---- */
.tut-realcard{
  width:128px; flex:0 0 auto; transition:transform .2s, box-shadow .2s;
  border-radius:14px;
}
.tut-realcard .cf-card{ min-height:0; height:182px; }
.tut-realcard.tut-card-lift{ transform:translateY(-14px) scale(1.05); }
.tut-realcard.tut-card-lift .cf-card{ box-shadow:0 14px 32px rgba(200,162,74,.5), 0 0 0 2px var(--gold,#c8a24a); }
.cf-mini{ }  /* hook reservado, sem efeito por ora */

/* halo de território no palco já é SVG (.tut-terr-halo), sem CSS extra necessário */

@media (max-width:760px){
  .tut-realcard{ width:96px; }
  .tut-realcard .cf-card{ height:138px; }
}

/* ---- TROPAS-FANTASMA (reforço da carta) sendo consumidas no combate ---- */
.tut-ghostbar{
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:6px; z-index:4024;
  background:rgba(13,16,11,.9); border:1px solid #c0563a; border-radius:10px; padding:6px 10px;
}
.tut-ghost-lbl{ font-size:12px; color:#e98368; font-weight:700; margin-right:4px; }
.tut-ghost{
  width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:17px; background:linear-gradient(160deg,#e8a08c,#c0563a);
  box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform .25s, opacity .25s;
}
.tut-ghost.tut-ghost-dead{ transform:scale(.2) rotate(40deg); opacity:0; }

/* ---- ANIMAÇÃO DE MOEDAS ao conceder o brinde ---- */
.tut-coin{
  position:fixed; z-index:4060; font-size:26px; pointer-events:none;
  will-change:transform,opacity; opacity:0;
}
@keyframes tutCoinFly{
  0%   { opacity:0; transform:translate(0,0) scale(.4) rotate(0deg); }
  12%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--dr)); }
}
.tut-coin.go{ animation:tutCoinFly var(--dur,1.2s) cubic-bezier(.2,.7,.3,1) forwards; }
/* brilho pulsante no selo de recompensa quando as moedas chegam */
@keyframes tutRewardPop{ 0%{ transform:scale(.7); opacity:0; } 55%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
.tut-fin-reward.tut-reward-pop{ animation:tutRewardPop .5s ease-out; }