/* «راهنمای کلی» overlay + the corner «راهنما» button — shared by /play/, /play/leaderboard.html and /v2/ */
/* theme tokens (namespaced: this file is also loaded on /v2/, whose own tokens may differ) — dark via <html data-theme="dark"> or the system setting */
:root{--ob-surface:#fff; --ob-surface2:#f2f4f7; --ob-ink:#1c2433; --ob-ink2:#465064; --ob-muted:#5f6a7d; --ob-line:#e4e8ee; --ob-line2:#d6dce4; --ob-accent:#6a00bd; --ob-accent-strong:#7500cf; --ob-accent-strong-hover:#6400b0; --ob-accent-soft:#f1e6fb; --ob-hover:#f7f0ff; --ob-hover-line:#c9a6ee; --ob-btn-line:rgba(117,0,207,.25); --ob-backdrop:rgba(22,14,40,.55); --ob-shadow:0 6px 18px -8px rgba(40,10,80,.45),0 1px 2px rgba(20,30,50,.08);}
:root[data-theme="dark"]{--ob-surface:#161c28; --ob-surface2:#1d2432; --ob-ink:#e8ecf3; --ob-ink2:#b9c1cf; --ob-muted:#939db0; --ob-line:#283042; --ob-line2:#364056; --ob-accent:#c39bff; --ob-accent-strong:#8b3dea; --ob-accent-strong-hover:#9b55f0; --ob-accent-soft:#2c1f48; --ob-hover:#241a3a; --ob-hover-line:#6d51a0; --ob-btn-line:rgba(195,155,255,.35); --ob-backdrop:rgba(0,0,0,.62); --ob-shadow:0 6px 18px -8px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ob-surface:#161c28; --ob-surface2:#1d2432; --ob-ink:#e8ecf3; --ob-ink2:#b9c1cf; --ob-muted:#939db0; --ob-line:#283042; --ob-line2:#364056; --ob-accent:#c39bff; --ob-accent-strong:#8b3dea; --ob-accent-strong-hover:#9b55f0; --ob-accent-soft:#2c1f48; --ob-hover:#241a3a; --ob-hover-line:#6d51a0; --ob-btn-line:rgba(195,155,255,.35); --ob-backdrop:rgba(0,0,0,.62); --ob-shadow:0 6px 18px -8px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5);}}
.hyob-btn{position:fixed;z-index:60;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--ob-btn-line);background:var(--ob-surface);color:var(--ob-accent);font:700 13px/1 Vazirmatn,Tahoma,sans-serif;box-shadow:var(--ob-shadow);cursor:pointer;direction:rtl}
.hyob-btn:hover{background:var(--ob-hover)}
.hyob-btn:focus-visible{outline:2px solid var(--ob-accent);outline-offset:2px}
.hyob-btn .q{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ob-accent-strong);color:#fff;font-size:13px}
.hyob-btn.bl{left:16px;bottom:16px}.hyob-btn.br{right:16px;bottom:16px}.hyob-btn.tl{left:12px;top:12px}.hyob-btn.tr{right:12px;top:12px}
@supports (bottom:env(safe-area-inset-bottom)){.hyob-btn.bl,.hyob-btn.br{bottom:calc(16px + env(safe-area-inset-bottom))}}
dialog.hyob{border:0;padding:0;border-radius:22px;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 30px 80px -20px rgba(10,20,40,.55);color:var(--ob-ink);background:var(--ob-surface);font:15px/1.8 Vazirmatn,Tahoma,sans-serif;direction:rtl;overflow:hidden}
dialog.hyob::backdrop{background:var(--ob-backdrop);backdrop-filter:blur(2px)}
.hyob-in{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.hyob-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 0}
.hyob-hd .t{font-weight:700;font-size:.8rem;color:var(--ob-accent);background:var(--ob-accent-soft);border-radius:999px;padding:.1rem .7rem}
.hyob-hd .sp{flex:1}
.hyob-count{font-size:.75rem;color:var(--ob-muted)!important} /* beats the inline colour older onboard.js copies still carry */
.hyob-x{border:0;background:none;color:var(--ob-muted);font:700 .8rem Vazirmatn,sans-serif;cursor:pointer;padding:.3rem .5rem;border-radius:8px}
.hyob-x:hover{background:var(--ob-surface2)}
.hyob-x:focus-visible,.hyob-nav button:focus-visible,.hyob a:focus-visible{outline:2px solid var(--ob-accent);outline-offset:2px}
.hyob-track{overflow:hidden;flex:1;min-height:0}
.hyob-slides{display:flex;transition:transform .28s ease;height:100%}
.hyob-slide{flex:0 0 100%;padding:10px 22px 6px;overflow-y:auto;box-sizing:border-box}
.hyob-slide .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#2b1648,var(--ob-accent-strong));color:#fff;font-size:22px;margin:4px 0 8px}
.hyob-slide h3{margin:0 0 .35rem;font-size:1.18rem;line-height:1.5}
.hyob-slide p{margin:.25rem 0;color:var(--ob-ink2);font-size:.92rem}
.hyob-slide ul{margin:.35rem 0 0;padding:0;list-style:none;display:grid;gap:6px}
.hyob-slide li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--ob-ink2)}
.hyob-slide li b.n{flex:none;display:grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:var(--ob-accent-soft);color:var(--ob-accent);font-size:.78rem}
.hyob-slide .ways{display:grid;gap:8px;margin-top:.5rem}
.hyob-slide .ways a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ob-ink);border:1px solid var(--ob-line);border-radius:14px;padding:.55rem .75rem;background:var(--ob-surface2)}
.hyob-slide .ways a:hover{border-color:var(--ob-hover-line);background:var(--ob-hover)}
.hyob-slide .ways a b{display:block;font-size:.9rem}.hyob-slide .ways a small{display:block;color:var(--ob-muted);font-size:.76rem;line-height:1.5}
.hyob-slide .ways .e{font-size:20px;flex:none}
.hyob-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}
.hyob-dots span{width:7px;height:7px;border-radius:50%;background:var(--ob-line2);transition:all .2s}
.hyob-dots span.on{width:20px;border-radius:4px;background:var(--ob-accent)}
.hyob-nav{display:flex;align-items:center;gap:8px;padding:10px 16px 16px}
.hyob-nav .sp{flex:1}
.hyob-nav button,.hyob-nav a{font:700 .86rem Vazirmatn,sans-serif;border-radius:11px;padding:.5rem 1rem;cursor:pointer;border:1px solid var(--ob-line2);background:var(--ob-surface);color:var(--ob-ink);text-decoration:none}
.hyob-nav .go{background:var(--ob-accent-strong);border-color:var(--ob-accent-strong);color:#fff}
.hyob-nav .go:hover{background:var(--ob-accent-strong-hover)}
.hyob-nav .full{border:0;background:none;color:var(--ob-accent);padding:.5rem .4rem;font-size:.8rem}
@media (max-width:480px){.hyob-slide{padding:8px 16px 4px}.hyob-slide h3{font-size:1.06rem}.hyob-nav{padding:8px 12px 12px}.hyob-nav .full{display:none}}
@media (prefers-reduced-motion:reduce){.hyob-slides{transition:none}}
/* ---- the retired welcome card: kept only while cached copies of onboard.js ≤ v6 (which still open it) can be served; delete after 2026-09-26 ---- */
dialog.hywel{width:min(520px,calc(100vw - 24px))}
.hywel-art{position:relative;height:120px;overflow:hidden}.hywel-art svg{position:absolute;inset:0;width:100%;height:100%}
.hywel-tag{position:absolute;top:12px;inset-inline-start:14px;font-size:.72rem;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.08rem .7rem}
.hywel-in{padding:16px 22px 18px}
.hywel-in h2{margin:0 0 .35rem;font-size:1.45rem;line-height:1.45;color:var(--ob-ink)}
.hywel-in .lead{margin:0 0 .8rem;color:var(--ob-ink2);font-size:.95rem;line-height:1.9}
.hywel-steps{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hywel-steps li{display:flex;gap:10px;align-items:center;background:var(--ob-surface2);border:1px solid var(--ob-line);border-radius:12px;padding:.5rem .7rem;font-size:.9rem;color:var(--ob-ink)}
.hywel-steps b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ob-accent-strong);color:#fff;font-size:.9rem}
.hywel-nav{display:flex;align-items:center;gap:8px;margin-top:16px}
.hywel-nav .sp{flex:1}
.hywel-nav .go{font:700 1rem Vazirmatn,sans-serif;background:var(--ob-accent-strong);border:1px solid var(--ob-accent-strong);color:#fff;border-radius:12px;padding:.6rem 1.4rem;cursor:pointer;box-shadow:0 10px 24px -12px rgba(117,0,207,.9)}
.hywel-nav .go:hover{background:var(--ob-accent-strong-hover)}
.hywel-nav .full{font:700 .82rem Vazirmatn,sans-serif;color:var(--ob-accent);text-decoration:none;padding:.4rem}
.hywel-nav .later{font:700 .8rem Vazirmatn,sans-serif;border:0;background:none;color:var(--ob-muted);cursor:pointer;padding:.4rem .5rem;border-radius:8px}
.hywel-nav .later:hover{background:var(--ob-surface2)}
.hywel-nav .go:focus-visible,.hywel-nav .full:focus-visible,.hywel-nav .later:focus-visible{outline:2px solid var(--ob-accent);outline-offset:2px}
@media (max-width:480px){.hywel-in{padding:14px 16px 16px}.hywel-in h2{font-size:1.22rem}.hywel-art{height:96px}}