/* ================= Onboarding overlay ================= */
.ob{position:fixed;inset:0;z-index:70;overflow:auto;background:linear-gradient(180deg,#8FC4FF 0%,#C5E2FF 38%,var(--bg) 75%);
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));animation:fade .3s ease both;transition:opacity .25s ease}
html[data-theme="dark"] .ob{background:linear-gradient(180deg,#0B1130 0%,#182252 40%,var(--bg) 80%)}
.ob.out{opacity:0}
.ob-in{max-width:520px;min-height:100%;margin:0 auto;display:flex;flex-direction:column}
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.ob-dots{display:flex;gap:6px}
.ob-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1.5px rgba(20,40,110,.18);transition:.2s}
.ob-dots i.on{background:var(--dot);width:22px;border-radius:6px;box-shadow:none}
.ob-skip{border:0;background:rgba(255,255,255,.85);color:#2F4E86;font:inherit;font-weight:900;font-size:14px;border-radius:999px;padding:10px 16px;cursor:pointer;min-height:44px}
html[data-theme="dark"] .ob-skip{background:rgba(38,50,105,.9);color:#D6DFFF}
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0;text-align:center}
.ob-hero{display:flex;justify-content:center}
.ob-h{font-size:28px;font-weight:900;letter-spacing:-.6px;line-height:1.15;margin:8px 0 8px;color:var(--ink)}
.ob-p{font-size:16px;font-weight:700;line-height:1.55;color:var(--ink2);margin:0 0 10px}
.ob-sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2);margin:14px 0 10px}
.ob-langs{display:grid;gap:10px}
.ob-lang{display:flex;align-items:center;justify-content:center;gap:12px;border:3px solid transparent;background:var(--card);color:var(--ink);
  border-radius:20px;padding:16px;font:inherit;font-size:18px;font-weight:900;cursor:pointer;box-shadow:var(--shadow);min-height:60px}
.ob-lang span{font-size:26px}
.ob-lang[aria-pressed="true"]{border-color:var(--dot)}
.ob-name{text-align:center;font-size:22px;margin:10px 0 0}
.ob-avs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ob-av{border:3px solid transparent;background:var(--card);border-radius:18px;font-size:34px;min-height:66px;cursor:pointer;box-shadow:var(--keyshadow);transition:transform .1s}
.ob-av:active{transform:scale(.92)}
.ob-av[aria-pressed="true"]{border-color:var(--dot);transform:scale(1.05)}
.ob-fig{background:var(--card);margin:6px 0 12px;box-shadow:var(--shadow)}
.ob-fig svg{min-width:0;max-height:250px}
.ob-say{text-align:left}
.ob-say .bubble{background:var(--card);box-shadow:var(--shadow)}
.ob-say .bubble::before{border-right-color:var(--card)}
.ob-listen{border:0;background:var(--card);border-radius:14px;width:44px;height:44px;font-size:18px;cursor:pointer;flex:none;box-shadow:var(--keyshadow)}
.ob-replay{margin-top:10px}
.ob-ladder{font-size:40px;margin-top:-6px}
.ob-nav{display:flex;gap:10px;align-items:center}
.ob-nav .ghostbtn{width:auto;flex:none;margin:0;padding:16px 18px;background:rgba(255,255,255,.7)}
html[data-theme="dark"] .ob-nav .ghostbtn{background:var(--card2)}
.ob-nav .bigtap{flex:1;margin:0}
.sg-board .dot.ob-cnt{fill:var(--gold);r:7}
.ob-num{fill:var(--ink);font-size:13px;font-weight:900;paint-order:stroke;stroke:var(--card);stroke-width:3.5}