/* Tutorial guide speaker and the first-arrival briefing. */
#game-screen .tutorial-guide-speaker {
  margin: 0 0 7px;
  color: #6fe8ff;
  font: 800 9px/1.2 var(--entry-display, monospace);
  letter-spacing: .12em;
}

.tutorial-lobby-guide {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 20px max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(1, 5, 10, .72);
  backdrop-filter: blur(2px);
}

.tutorial-lobby-guide.hidden { display: none; }
.tutorial-lobby-guide__card {
  width: min(100%, 560px);
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid rgba(103, 233, 249, .7);
  border-top: 4px solid #70eaff;
  background: linear-gradient(150deg, rgba(12, 31, 45, .98), rgba(5, 12, 21, .98));
  box-shadow: 0 -14px 48px rgba(0, 0, 0, .45);
  animation: tutorialLobbyGuideIn .38s cubic-bezier(.18,.8,.28,1) both;
}

.tutorial-lobby-guide__kicker { margin: 0; color: #7fefff; font: 700 9px/1.3 var(--entry-display, monospace); letter-spacing: .14em; }
.tutorial-lobby-guide h2 { margin: 8px 0 12px; font-size: clamp(21px, 6vw, 28px); letter-spacing: .04em; }
.tutorial-lobby-guide__card > p:not(.tutorial-lobby-guide__kicker) { margin: 0; color: #c6d5dc; font-size: 14px; line-height: 1.75; }
.tutorial-lobby-guide__steps { display: grid; gap: 8px; margin: 17px 0; }
.tutorial-lobby-guide__steps p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 10px; background: rgba(103, 225, 243, .07); color: #e7faff; font-size: 13px; }
.tutorial-lobby-guide__steps b { color: #ffb670; font: 700 14px/1 var(--entry-display, monospace); }
.tutorial-lobby-guide__card .primary-btn { width: 100%; min-height: 52px; }

@keyframes tutorialLobbyGuideIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .tutorial-lobby-guide__card { animation: none !important; }
}