/* Dẫn nhập người mới (ui/onboard.js). Dùng biến màu của style.css. */
html.ob-lock, html.ob-lock body { overflow: hidden; }

/* mẹo chỉ chỗ */
.ob-coach { position: fixed; inset: 0; z-index: 60; animation: obfade .2s ease; }
.ob-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax #0a0619c4; outline: 2px solid var(--acc); outline-offset: 2px; transition: all .2s ease; pointer-events: none; animation: obglow 1.6s ease-in-out infinite; }
@keyframes obglow { 50% { outline-color: #ffcf5a66; } }
.ob-bubble { position: fixed; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; background: #fff8e6; color: #2a1d00; border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 12px 34px #000a; animation: obpop .25s cubic-bezier(.2,.8,.3,1.3); }
.ob-bubble p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.ob-bubble::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 8px); width: 16px; height: 16px; background: #fff8e6; transform: rotate(45deg); }
.ob-bubble.down::before { top: -7px; } .ob-bubble.up::before { bottom: -7px; } .ob-bubble.pin::before { display: none; }
.ob-brow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ob-ok { min-width: 88px; min-height: 44px; }
.ob-skip { background: none; border: 0; color: #7a6a44; font: inherit; font-size: 13px; padding: 10px 4px; min-height: 44px; cursor: pointer; text-decoration: underline; }
@keyframes obfade { from { opacity: 0; } }
@keyframes obpop { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* màn giới thiệu */
.ob-intro { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); text-align: center; touch-action: pan-y; user-select: none;
  background: radial-gradient(900px 520px at 50% 20%, #4a2f8a 0%, var(--bg) 70%); animation: obfade .3s ease; }
.ob-skipall { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; background: #0003; border: 1px solid var(--line); color: var(--mut); border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600; min-height: 44px; cursor: pointer; }
.ob-slide { max-width: 360px; animation: obslide .35s ease; }
@keyframes obslide { from { opacity: 0; transform: translateX(24px); } }
.ob-big { font-size: 96px; line-height: 1.1; filter: drop-shadow(0 10px 26px #ff6f9166); animation: bob 3s ease-in-out infinite; }
.ob-slide h2 { font-size: 26px; margin: 14px 0 8px; }
.ob-slide p { color: #d8d0f0; font-size: 17px; margin: 0; }
.ob-dots { display: flex; gap: 4px; }
.ob-dots button { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.ob-dots button::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--line); transition: all .2s; }
.ob-dots button.on::after { background: var(--acc); inset: 9px 4px; border-radius: 9px; }
.ob-next { width: 100%; max-width: 360px; }

/* tab vừa mở */
.ob-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acc2); margin-left: 5px; vertical-align: 2px; box-shadow: 0 0 0 0 #ff6f91aa; animation: obping 1.4s infinite; }
@keyframes obping { 70% { box-shadow: 0 0 0 7px #ff6f9100; } }

/* nút ? trên thanh đời */
.ob-help { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--tx); font: inherit; font-weight: 800; cursor: pointer; flex: 0 0 auto; position: relative; }
.ob-help::after { content: ""; position: absolute; inset: -6px; }   /* vùng chạm 46px */

/* nhiệm vụ tân thủ */
.ob-quests { background: var(--bg2); border: 1px solid #ffcf5a55; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ob-qh { display: flex; justify-content: space-between; align-items: baseline; }
.ob-q { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.ob-qi { font-size: 20px; text-align: center; }
.ob-qb { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-qb small { font-size: 11.5px; }
.ob-qbar { height: 6px; background: #0004; border-radius: 9px; overflow: hidden; }
.ob-qbar i { display: block; height: 100%; background: linear-gradient(90deg, #7d6bd6, #b49cff); border-radius: 9px; }
.ob-q.ok .ob-qbar i { background: linear-gradient(90deg, #5ee0a0, var(--acc)); }
.ob-q.ok span { color: var(--acc); font-weight: 700; }
.ob-claim { padding: 8px 14px; min-height: 40px; animation: pulse 1.6s ease-in-out infinite; }
.ob-qf { display: flex; justify-content: space-between; }
.ob-link { background: none; border: 0; color: var(--mut); font: inherit; font-size: 12.5px; padding: 8px 2px; cursor: pointer; text-decoration: underline; }
.lvl-box[data-ob] { cursor: pointer; }
.lvl-box .ob-more { color: var(--acc); font-size: 12px; }

/* hộp thoại */
.ob-sheet-wrap { z-index: 65; animation: obfade .2s ease; }
.ob-gloss { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-gloss > div { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.ob-gloss dt { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ob-gloss dt span { min-width: 30px; text-align: center; color: var(--acc); font-size: 14px; }
.ob-gloss dd { margin: 2px 0 0 38px; color: #d8d0f0; font-size: 13.5px; }
.ob-lvup { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ob-lvup small { letter-spacing: 2px; color: var(--acc); font-weight: 700; }
.ob-lvup h3 { font-size: 30px; margin: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-burst { font-size: 72px; animation: obburst .9s cubic-bezier(.2,.8,.3,1.4) both; filter: drop-shadow(0 0 24px #ffcf5a99); }
@keyframes obburst { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
.ob-gain { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.ob-gain li { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-weight: 600; animation: obslide .4s ease both; }
.ob-gain li:nth-child(2) { animation-delay: .12s; } .ob-gain li:nth-child(3) { animation-delay: .24s; } .ob-gain li:nth-child(4) { animation-delay: .36s; }
.ob-gain li:first-child { border-color: var(--acc); }
.ob-next-lv { margin: 4px 0 0; }
.ob-lvup .actions { width: 100%; }
.ob-road { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; }
.ob-road li { display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: 13.5px; padding: 6px 10px; border-radius: 10px; background: var(--bg2); color: var(--mut); }
.ob-road li.got { color: var(--tx); border: 1px solid #5ee0a055; }
.ob-road li b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ob-coach, .ob-hole, .ob-bubble, .ob-intro, .ob-slide, .ob-big, .ob-dot, .ob-claim, .ob-burst, .ob-gain li { animation: none !important; transition: none !important; }
}

.ob-img { width: min(320px, 80vw); aspect-ratio: 16/10; border-radius: 22px; background-size: cover; background-position: center; margin: 0 auto 14px; display: flex; align-items: flex-end; justify-content: center; box-shadow: 0 14px 40px -14px #000; }
.ob-img span { font-size: 38px; transform: translateY(20px); filter: drop-shadow(0 4px 10px #000a); }