/* Tutorial jogável: faixa de instruções, destaques e telas cheias (só carregado em jogo.html, ativo com ?tutorial=1) */
.tut #timer { display: none !important; }

.coach { position: sticky; top: 57px; z-index: 29; display: flex; align-items: center; gap: 14px; width: calc(100% - 24px); max-width: 1156px; margin: 8px auto 0; padding: 11px 16px;
  background: linear-gradient(135deg, #3a2a0c, #12203a 70%); border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.55); font: 1.02rem/1.45 var(--serif); }
.coach-ic { flex: none; width: 34px; height: 34px; }
.coach-t { flex: 1; min-width: 0; }
.coach-t b { color: var(--gold2); }
.coach .btn { flex: none; white-space: nowrap; }
.coach.chg { animation: coachin .45s ease-out; }
@keyframes coachin { from { transform: translateY(-8px); opacity: .3; } to { transform: none; opacity: 1; } }

.trings { position: fixed; inset: 0; z-index: 85; pointer-events: none; }
.tring { position: fixed; display: none; border: 3px solid var(--teal); border-radius: 14px; box-shadow: 0 0 0 4px rgba(111,224,212,.22), 0 0 22px rgba(111,224,212,.55); animation: ringp 1.1s ease-in-out infinite; }
@keyframes ringp { 50% { box-shadow: 0 0 0 9px rgba(111,224,212,.12), 0 0 30px rgba(111,224,212,.8); } }

/* com a faixa no topo sobra menos altura: o painel de ações acompanha a página em vez de cobrir a mesa */
.tut .dock { position: static; }

.tdim { opacity: .3 !important; pointer-events: none !important; filter: grayscale(.6); }

.tsheet { position: fixed; inset: 0; z-index: 250; background: rgba(5,10,22,.9); overflow: auto; display: grid; place-items: center; padding: 18px; }
.tsheet[hidden] { display: none; }
.tcard { width: min(780px, 100%); background: var(--panel); border: 1px solid var(--gold); border-radius: 18px; padding: 22px 26px; box-shadow: 0 24px 70px #000; }
.tcard h2 { margin: 0 0 8px; color: var(--gold2); font-size: 1.6rem; }
.tcard .lead { margin: 8px 0 14px; color: #dbe6f5; font-size: 1rem; }
.tcard b { color: var(--gold2); }
.roles { display: grid; gap: 10px; margin: 10px 0 14px; }
.role { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.role img { width: 64px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.role b { display: block; font-size: 1.05rem; }
.role span { display: block; font: .92rem/1.4 var(--ui); color: #dbe6f5; }
.role span b { display: inline; font: 700 .92rem var(--ui); }
.recap { margin: 0 0 6px; padding-left: 20px; color: #dbe6f5; font: .98rem/1.5 var(--ui); }
.recap li { margin: 6px 0; }
.tbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.tbtns a.btn { text-decoration: none; display: inline-block; }

@media (max-width: 860px) {
  .coach { font-size: .92rem; padding: 9px 12px; gap: 10px; }
  .coach-ic { display: none; }
  .tcard { padding: 16px 16px; }
  .role { grid-template-columns: 52px 1fr; }
  .role img { width: 52px; }
}
@media (max-width: 560px) { .coach { flex-wrap: wrap; } .coach .btn { width: 100%; } .tut #roomChip { display: none !important; } }