/* =====================================================================
   1º TUTORIAL — proposta "C" (cinematográfico), escolhida pelo autor em 28/09
   ---------------------------------------------------------------------
   Pedido: "hoje ele está muito amador" — parecer parte oficial do jogo, sem virar
   um sistema novo. Mesmos ids, mesma lógica (abrir, PULAR, fechar, COMEÇAR), a
   arena por baixo continua como está (a regra da Fase 168: congelada enquanto a
   janela está aberta). Tudo aqui vale SÓ dentro de #tutorialModal: nada de HUD,
   arena, escala ou câmera.
   Letra: Cinzel (@font-face em styles/salao.css).
   ===================================================================== */
#tutorialModal{--tut-ouro:#d8a34a;--tut-ouro-claro:#f3d58b;--tut-tinta:#efe3c8;--tut-tinta-2:#b9a987;--tut-titulo:"Cinzel",Georgia,serif;
  align-items:center!important;justify-content:center!important;padding:16px!important;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,14,8,.72),rgba(0,0,0,.93) 75%)!important}
#tutorialModal .tutorial-modal-card{position:relative;box-sizing:border-box;width:min(1180px,100%)!important;max-width:none!important;max-height:94vh!important;overflow:auto!important;
  padding:8px 4px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:center;color:var(--tut-tinta)}
#tutorialModal .tutorial-fechar{position:absolute!important;top:0;right:0;z-index:2}
#tutorialModal .tutorial-cabecalho .dev-overline{display:block;font:600 12px/1 var(--tut-titulo)!important;letter-spacing:6px!important;color:var(--tut-ouro)!important}
#tutorialModal .tutorial-cabecalho h2{font:700 clamp(30px,4vw,56px)/1.05 var(--tut-titulo)!important;color:#fff4dc!important;letter-spacing:1px;margin:10px 0!important;text-shadow:0 3px 22px #000,0 0 40px rgba(216,163,74,.2)}
#tutorialModal .tutorial-cabecalho p{margin:0 auto 26px;max-width:640px;color:var(--tut-tinta-2);font-size:14px;line-height:1.5}
#tutorialModal .tutorial-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;margin:0!important}
#tutorialModal .tutorial-step{position:relative;display:grid!important;justify-items:center;align-content:start;gap:8px;padding:34px 18px 22px!important;margin:0!important;text-align:center;
  border:1px solid rgba(216,163,74,.35)!important;border-radius:10px!important;background:linear-gradient(180deg,rgba(40,28,12,.85),rgba(10,8,7,.92))!important;box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,160,.08)!important}
#tutorialModal .tutorial-medalha{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(216,163,74,.25),rgba(0,0,0,.4) 70%);box-shadow:0 0 0 2px rgba(216,163,74,.5),0 0 30px rgba(216,163,74,.3)}
#tutorialModal .tutorial-medalha img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
#tutorialModal .tutorial-step>i{position:absolute;top:10px;left:14px;font:700 22px/1 var(--tut-titulo);font-style:normal;color:rgba(216,163,74,.55)}
#tutorialModal .tutorial-step strong{display:block;font:700 16px/1.25 var(--tut-titulo)!important;color:var(--tut-ouro-claro)!important}
#tutorialModal .tutorial-step span{display:block;font-size:13px!important;line-height:1.5!important;color:#d9ccb0!important}
#tutorialModal .tutorial-actions{display:flex!important;gap:12px;justify-content:center!important;align-items:center;margin-top:26px!important}
#tutorialModal #skipTutorialButton{min-height:48px;padding:0 18px;background:none!important;border:0!important;box-shadow:none!important;color:var(--tut-tinta-2)!important;font:600 12px/1 var(--font-body)!important;letter-spacing:2px}
#tutorialModal #skipTutorialButton:hover{color:var(--tut-tinta)!important}
#tutorialModal #acceptTutorialButton{min-height:56px;padding:0 42px;border:1px solid #e8bf6a!important;border-radius:8px!important;background:linear-gradient(180deg,#e2b056,#8a5c12)!important;color:#fff5d6!important;
  font:700 17px/1 var(--tut-titulo)!important;letter-spacing:3px!important;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 28px rgba(216,163,74,.35),inset 0 1px 0 rgba(255,236,180,.45)!important;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#tutorialModal #acceptTutorialButton:focus-visible,#tutorialModal #skipTutorialButton:focus-visible{outline:2px solid var(--tut-ouro-claro);outline-offset:3px}
@media (max-width:900px){#tutorialModal .tutorial-steps{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){
  #tutorialModal{align-items:flex-start!important;padding:12px!important}
  #tutorialModal .tutorial-modal-card{max-height:none!important;height:100%;padding-top:4px!important}
  #tutorialModal .tutorial-cabecalho{padding:0 40px}
  #tutorialModal .tutorial-cabecalho .dev-overline{letter-spacing:3px!important;font-size:10px!important;line-height:1.4!important}
  #tutorialModal .tutorial-cabecalho h2{font-size:30px!important}
  #tutorialModal .tutorial-cabecalho p{margin-bottom:14px}
  #tutorialModal .tutorial-steps{grid-template-columns:1fr!important;gap:10px!important}
  #tutorialModal .tutorial-step{grid-template-columns:auto 1fr;justify-items:start;text-align:left;padding:14px!important;gap:4px 12px}
  #tutorialModal .tutorial-medalha{grid-row:1/3;width:52px;height:52px}
  #tutorialModal .tutorial-medalha img{width:34px;height:34px}
  #tutorialModal .tutorial-step>i{display:none}
  #tutorialModal .tutorial-actions{position:sticky;bottom:0;background:rgba(0,0,0,.92);padding:10px 0;margin-top:12px!important}
  #tutorialModal #acceptTutorialButton{padding:0 26px;font-size:15px!important}
}