/* ===== Guide du nouveau joueur (tutorial.js) ===== */
.tutorial-btn { position: fixed; left: 10px; bottom: 86px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--gold); background: #16121fee; color: #fff1ad; font: inherit; font-size: 0.78rem; box-shadow: 0 4px 14px #0008; cursor: pointer; }
.tutorial-btn i { font-style: normal; }
.tutorial-btn b { color: var(--gold); }
.tutorial-btn.complete { border-color: #5fd66888; color: #9be7a0; }
.tutorial-btn.complete b { color: #9be7a0; }
.tutorial-card { width: min(94vw, 460px); max-height: 88dvh; display: flex; flex-direction: column; padding: 12px; text-align: left; }
.tutorial-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; font-size: 0.78rem; }
.tutorial-intro { color: var(--muted); margin: 4px 0 8px; }
.tutorial-step { display: flex; gap: 10px; padding: 8px; margin-bottom: 6px; border-radius: 10px; background: #ffffff08; border: 1px solid transparent; }
.tutorial-step.current { border-color: var(--gold); background: #e8c35a14; }
.tutorial-step.done { opacity: 0.7; }
.tutorial-step.locked { opacity: 0.45; }
.tutorial-step > div { flex: 1; min-width: 0; }
.tutorial-step p { margin: 3px 0 6px; color: #d8d8e1; line-height: 1.35; }
.tutorial-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #0006; border: 1px solid var(--card-edge); }
.tutorial-step.done .tutorial-num { color: #9be7a0; border-color: #5fd66866; }
.tutorial-step.current .tutorial-num { color: var(--gold); border-color: var(--gold); }
.tutorial-hide { display: block; margin-top: 8px; font-size: 0.7rem; color: var(--muted); }
.tutorial-toast { position: fixed; left: 50%; bottom: 140px; transform: translate(-50%, 20px); z-index: 60; padding: 8px 14px; border-radius: 12px; border: 1px solid #5fd66888; background: #10201aee; color: #d8f5da; font-size: 0.78rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; text-align: center; }
.tutorial-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tutorial-toast b { display: block; }
.tutorial-toast small { color: #9be7a0; }