/* ============================================================
   Point Smart Map Terengganu — Splash + Onboarding (v1.2)
   Dark theme #0e0d09 · mobile-first
   ============================================================ */

/* ===== SPLASH SCREEN ===== */
.splash-overlay{position:fixed;inset:0;z-index:99999;background:#0e0d09;display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;animation:splashFadeIn .5s ease forwards}
@keyframes splashFadeIn{from{opacity:0}to{opacity:1}}
.splash-overlay.splash-closing{animation:splashFadeOut .42s ease forwards}
@keyframes splashFadeOut{to{opacity:0;visibility:hidden}}
.splash-inner{max-width:440px;width:100%;text-align:center;margin:auto}
.splash-logo{font-size:46px;line-height:1;margin-bottom:6px}
.splash-headline{font-size:1.5rem;font-weight:800;color:#f2a80b;line-height:1.25;margin:0 0 12px}
.splash-sub{font-size:.9rem;color:#cbb890;line-height:1.55;margin:0 0 22px}
.splash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.splash-vp{display:flex;align-items:center;gap:9px;background:#1d1a13;border:1px solid #3e3722;border-radius:12px;padding:11px 12px;font-size:.76rem;color:#fff;text-align:left;line-height:1.3}
.splash-vp .vp-ic{font-size:1.35rem;flex:none;line-height:1}
.splash-cta{width:100%;padding:14px;border-radius:14px;background:#f2a80b;border:none;color:#1a1400;font-size:1.02rem;font-weight:800;cursor:pointer;box-shadow:0 4px 18px rgba(242,168,11,.35)}
.splash-cta:active{transform:scale(.98)}
.splash-skip{margin-top:14px;background:none;border:none;color:#7a7466;font-size:.82rem;cursor:pointer;text-decoration:underline}
@media(max-width:430px){.splash-headline{font-size:1.32rem}.splash-vp{font-size:.72rem}}
@media(max-height:560px) and (orientation:landscape){.splash-grid{grid-template-columns:1fr 1fr 1fr}.splash-logo{font-size:32px;margin-bottom:2px}.splash-headline{font-size:1.2rem;margin-bottom:6px}.splash-sub{margin-bottom:12px}}

/* ===== ONBOARDING TOUR ===== */
.tour-mask{position:fixed;inset:0;z-index:100000;background:transparent}
.tour-spot{position:fixed;z-index:100001;border:3px solid #f2a80b;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.74);pointer-events:none;transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease}
.tour-tip{position:fixed;z-index:100002;width:300px;max-width:calc(100vw - 28px);background:#1d1a13;border:1px solid #f2a80b;border-radius:14px;padding:14px 15px;box-shadow:0 10px 34px rgba(0,0,0,.6)}
.tour-tip-num{font-size:.66rem;font-weight:800;color:#f2a80b;letter-spacing:.6px}
.tour-tip-title{font-size:.96rem;font-weight:800;color:#fff;margin:4px 0 7px;line-height:1.25}
.tour-tip-text{font-size:.82rem;color:#cbb890;line-height:1.55}
.tour-tip-actions{display:flex;align-items:center;gap:8px;margin-top:13px}
.tour-btn{padding:9px 14px;border-radius:10px;font-size:.8rem;font-weight:800;cursor:pointer;border:none;font-family:inherit}
.tour-next{background:#f2a80b;color:#1a1400;flex:1}
.tour-back{background:#2c2719;color:#cbb890;border:1px solid #3e3722}
.tour-btn:active{transform:scale(.97)}
.tour-skip{display:block;margin:11px auto 0;background:none;border:none;color:#7a7466;font-size:.74rem;text-decoration:underline;cursor:pointer;font-family:inherit}

/* ===== HELP "?" RE-TRIGGER BUTTON ===== */
.help-fab{position:fixed;z-index:2050;right:20px;bottom:20px;width:42px;height:42px;border-radius:50%;background:rgba(14,13,9,.93);border:1px solid #f2a80b;color:#f2a80b;font-size:1.25rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 14px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:inherit}
.help-fab:active{transform:scale(.92)}
@media(max-width:900px){.help-fab{top:110px;right:14px;bottom:auto;width:34px;height:34px;font-size:1rem}}