/* ── Tutorial Slide Overlay (§2) ─────────────────────────── */
.tutorial-overlay {
  position: fixed; inset: 0; z-index: 260;
  background: #0D0F1F;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.tutorial-overlay--hidden { display: none; }
.tutorial-skip {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-main); font-size: 0.4rem;
  color: var(--text-secondary); background: none;
  border: 1px solid var(--panel-border);
  padding: 4px 10px; cursor: pointer; letter-spacing: 0.1em;
}
.tutorial-skip:hover { color: var(--text-primary); }
.tutorial-content {
  text-align: center; padding: 20px 40px; max-width: 600px;
  font-family: var(--font-main);
}
.tutorial-content__eyebrow {
  font-size: 0.4rem; color: var(--text-secondary);
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 16px; min-height: 1.2em;
  font-variant: small-caps;
}
.tutorial-content__body {
  font-size: 1.1rem; color: var(--text-gold);
  line-height: 1.65; font-weight: bold;
}
.tutorial-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.tutorial-progress {
  width: 100%; height: 5px;
  background: rgba(255, 204, 0, 0.2);
}
.tutorial-progress__bar {
  height: 100%; background: var(--text-gold);
  transition: width 0.35s ease;
}
.tutorial-tap {
  font-family: var(--font-main); font-size: 0.36rem;
  color: var(--text-secondary); letter-spacing: 0.2em;
  padding: 8px 0 10px;
  animation: tap-pulse 1.4s ease-in-out infinite;
}
@keyframes tap-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Tutorial End Card ───────────────────────────────────── */
.tutorial-end-card {
  position: fixed; inset: 0; z-index: 265;
  background: #0D0F1F;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
}
.tutorial-end-card--hidden { display: none; }
.tutorial-end-card__text {
  font-family: var(--font-main); font-size: 1.2rem;
  color: var(--text-gold); text-align: center;
  line-height: 1.7;
  text-shadow: 0 0 8px rgba(255,200,0,0.5);
}
.tutorial-end-card__btn {
  font-family: var(--font-main); font-size: 0.65rem;
  background: var(--accent-green); color: #fff;
  padding: 14px 36px; border: none; cursor: pointer;
  box-shadow: 3px 3px 0 #000; letter-spacing: 0.1em;
}
.tutorial-end-card__btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #000; }

/* ── Tutorial Tooltips (in-game contextual tips) ─────────── */
.tutorial-tip-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.55); pointer-events: auto; }
.tutorial-tooltip {
  position: fixed; z-index: 9001; background: var(--panel-bg); border: 2px solid var(--text-gold);
  border-radius: 4px; padding: 12px 16px; max-width: 320px; box-shadow: 4px 4px 0 #000;
  font-family: var(--font-main); font-size: 0.625rem; color: var(--text-primary); line-height: 1.5;
}
.tutorial-tooltip__text { margin-bottom: 10px; }
.tutorial-tooltip__btns { display: flex; gap: 8px; justify-content: flex-end; }
.tutorial-tooltip__btn {
  padding: 6px 14px; border-radius: 2px; font-size: 0.5625rem;
  font-weight: 600; box-shadow: 2px 2px 0 #000; border: 2px solid transparent; cursor: pointer;
}
.tutorial-tooltip__btn--next { background: var(--accent-green); color: #fff; }
.tutorial-tooltip__btn--skip { background: var(--panel-border); color: var(--text-primary); }
.tutorial-tooltip__btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.tutorial-highlight { position: relative; z-index: 9002 !important; box-shadow: 0 0 0 4px var(--text-gold), 0 0 16px rgba(255,215,0,0.4); border-radius: 4px; }
.tutorial-arrow { position: absolute; width: 0; height: 0; border: 8px solid transparent; }
.tutorial-arrow--up { top: -16px; left: 50%; transform: translateX(-50%); border-bottom-color: var(--text-gold); }
.tutorial-arrow--down { bottom: -16px; left: 50%; transform: translateX(-50%); border-top-color: var(--text-gold); }
.tutorial-toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 18px; justify-content: center;
  font-family: var(--font-main); font-size: 0.4rem; color: var(--text-secondary);
}
.tutorial-toggle input { accent-color: var(--text-gold); width: 16px; height: 16px; cursor: pointer; }
.tutorial-toggle label { cursor: pointer; }

/* ── Lobby Tips switch row ───────────────────────────────── */
.skip-tips-row {
  display: flex; align-items: center; gap: 10px;
  justify-content: center; margin-top: 14px;
  font-family: var(--font-main); font-size: 0.6rem;
  color: var(--text-secondary);
}
.skip-tips-row .bc-switch-lbl { color: var(--text-secondary); font-size: 0.6rem; }
.skip-tips-row__audio-btn {
  font-family: var(--font-main); font-size: 0.42rem; font-weight: bold;
  background: #1a1e3a; color: var(--text-gold);
  border: 1px solid #3a3e6a; border-radius: 2px; padding: 5px 9px;
  cursor: pointer; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 2px 2px 0 #000; margin-left: 4px;
}
.skip-tips-row__audio-btn:active { transform: translate(1px,1px); }