/* Tutorial: uma transmissão de campo, não outra janela de menu. A barra de
   sintonia transforma progresso em leitura rápida sem cobrir a ação. */
#tutorialGuia {
  --tg-laranja: var(--ztd-orange, #ff7a1a);
  --tg-areia: var(--ztd-sand, #e8d7b1);
  position: absolute;
  z-index: 34;
  top: max(88px, 12vh);
  left: 50%;
  width: min(440px, calc(100vw - 32px));
  color: #ece8df;
  background: linear-gradient(112deg, rgba(12, 15, 14, .97), rgba(25, 29, 26, .94));
  border: 1px solid #555d55;
  box-shadow: 0 18px 50px #000b, inset 0 1px #ffffff0e;
  transform: translateX(-50%);
  pointer-events: auto;
}

#tutorialGuia::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed #747c6d42;
  pointer-events: none;
}

#tutorialGuia[hidden], #tutorialRetomar[hidden] { display: none; }

.tgTrilho { height: 4px; background: #272c29; overflow: hidden; }
.tgTrilho i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--tg-laranja) 0 15px, #ffac5c 15px 17px, transparent 17px 20px);
  box-shadow: 0 0 14px #ff7a1a99;
  transition: width .28s ease;
}

#tutorialGuia header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 17px 11px;
  border-bottom: 1px solid #464c45;
}

.tgSinal { display: flex; align-items: end; gap: 2px; height: 18px; }
.tgSinal i { display: block; width: 3px; background: var(--tg-laranja); }
.tgSinal i:nth-child(1) { height: 7px; }
.tgSinal i:nth-child(2) { height: 12px; }
.tgSinal i:nth-child(3) { height: 18px; animation: tgSinal 1.2s steps(2) infinite; }
#tutorialGuia header small { display: block; color: #9ca297; font: 600 9px/1.2 Raleway, sans-serif; letter-spacing: .16em; }
#tutorialGuia header b { color: var(--tg-areia); font: 400 18px/1 Bebas Neue, sans-serif; letter-spacing: .08em; }
#tutorialPasso { color: var(--tg-laranja); font: 700 11px/1 Raleway, sans-serif; letter-spacing: .1em; }

.tgCorpo { padding: 18px 22px 17px; }
#tutorialChamada { color: var(--tg-laranja); font: 700 9px/1 Raleway, sans-serif; letter-spacing: .19em; }
#tutorialTitulo { margin: 5px 0 6px; color: #fff; font: 400 30px/.95 Bebas Neue, sans-serif; letter-spacing: .035em; }
#tutorialTexto { margin: 0; color: #c7cbc3; font: 500 13px/1.5 Raleway, sans-serif; }
#tutorialAcao { margin-top: 13px; color: #aeb4a9; font: 700 10px/1.3 Raleway, sans-serif; letter-spacing: .08em; }
#tutorialAcao kbd {
  display: inline-grid;
  min-width: 28px;
  min-height: 25px;
  margin-right: 6px;
  place-items: center;
  color: #151815;
  background: var(--tg-areia);
  border: 0;
  border-bottom: 3px solid #93866c;
  font: 800 11px/1 Raleway, sans-serif;
}

#tutorialGuia footer { display: flex; justify-content: flex-end; padding: 0 17px 12px; }
#tutorialOcultar {
  color: #969c92;
  background: transparent;
  border: 0;
  font: 700 9px/1 Raleway, sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
}
#tutorialOcultar:hover, #tutorialOcultar:focus-visible { color: #fff; }

#tutorialRetomar {
  position: absolute;
  z-index: 34;
  top: max(76px, 10vh);
  left: 50%;
  padding: 9px 13px;
  color: var(--ztd-sand, #e8d7b1);
  background: #111512eb;
  border: 1px solid #5b6259;
  transform: translateX(-50%);
  font: 700 10px/1 Raleway, sans-serif;
  letter-spacing: .11em;
  cursor: pointer;
}
#tutorialRetomar span { color: #ff7a1a; animation: tgPulso 1.1s steps(2) infinite; }

#menu .tutorialBtn {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  color: var(--ztd-sand-light, #e8dec4);
  border: 1px solid var(--ztd-orange, #ff7a1a);
  background: linear-gradient(100deg, #ff7a1a18, transparent 38%), #1b1e19;
  box-shadow: inset 4px 0 #ff7a1a, 0 5px 14px #0005;
}
#menu .tutorialBtn::before { content: '◉'; color: #ff9a42; }
#menu .tutorialBtn > span { justify-self: center; }
#menu .tutorialBtn small { color: #a9afa5; font: 700 9px/1 Raleway, sans-serif; letter-spacing: .11em; }
#menu .tutorialBtn:hover { color: #fff; border-color: #ff9a42; background-color: #282d25; }

@keyframes tgSinal { 50% { height: 9px; opacity: .55; } }
@keyframes tgPulso { 50% { opacity: .35; } }

@media (max-width: 680px) {
  #tutorialGuia { top: max(58px, 7vh); width: calc(100vw - 20px); }
  .tgCorpo { padding: 14px 18px; }
  #tutorialTitulo { font-size: 25px; }
  #tutorialTexto { font-size: 12px; }
  #tutorialRetomar { top: 54px; }
  #menu .tutorialBtn { grid-template-columns: 24px minmax(0, 1fr); }
  #menu .tutorialBtn small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tgSinal i, #tutorialRetomar span { animation: none; }
  .tgTrilho i { transition: none; }
}