/* Tutorial terpandu: redup + sorotan elemen HUD + kartu penjelasan (ala LifeAfter) */
#tutorial { position: fixed; inset: 0; z-index: 58; pointer-events: auto; }
#tutorial.live { pointer-events: none; }
#tutorial .tut-dim { position: absolute; inset: 0; background: rgba(4, 4, 6, 0.6); transition: opacity .25s; }
#tutorial.spot .tut-dim, #tutorial.live .tut-dim { opacity: 0; }
#tutorial .tut-hole { position: absolute; display: none; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(4, 4, 6, 0.62), 0 0 0 2px rgba(255, 196, 120, 0.95), 0 0 28px rgba(255, 170, 80, 0.55); transition: all .35s cubic-bezier(.2,.7,.3,1); pointer-events: none; animation: tutPulse 1.8s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 9999px rgba(4, 4, 6, 0.62), 0 0 0 2px rgba(255, 210, 150, 1), 0 0 40px rgba(255, 170, 80, 0.8); } }
#tutorial .tut-card { position: absolute; width: 380px; max-width: calc(100vw - 32px); padding: 16px 18px 14px; background: linear-gradient(180deg, rgba(22, 20, 24, 0.97), rgba(12, 11, 14, 0.97)); border: 1px solid rgba(255, 255, 255, 0.12); border-top: 2px solid #ffb15c; border-radius: 6px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); pointer-events: auto; animation: tutIn .3s cubic-bezier(.2,.7,.3,1); }
@keyframes tutIn { from { opacity: 0; margin-top: 10px; } }
#tutorial .tut-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#tutorial .tut-tag { font-family: var(--font-body); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #ffb15c; }
#tutorial .tut-dots { display: flex; gap: 5px; }
#tutorial .tut-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
#tutorial .tut-dots i.on { background: #ffb15c; }
#tutorial h3 { margin: 0 0 6px; font-family: var(--font-body); font-weight: 600; font-size: 19px; color: #fff; }
#tutorial p { margin: 0; font-size: 14px; line-height: 1.55; color: #d8d0c4; }
#tutorial p b { color: #fff; }
#tutorial kbd { min-width: 22px; height: 22px; font-size: 11px; }
#tutorial .tut-hint { margin-top: 10px; font-size: 12px; color: #ffd28a; letter-spacing: .02em; }
#tutorial .tut-ok { margin-top: 12px; float: right; }

/* adegan intro: sembunyikan elemen gameplay */
body.cutscene #objmark, body.cutscene #tipcard, body.cutscene #havenbadge, body.cutscene #lockhint, body.cutscene #bark { display: none !important; }