/* Onboarding game and install step. Lives inside the .app shell. */
.ob { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-block: 14px 24px; background: var(--ground); transition: background .25s ease; }
.ob.flash-ok { background: color-mix(in srgb, var(--mint) 16%, var(--ground)); }
.ob.flash-no { background: color-mix(in srgb, var(--danger) 14%, var(--ground)); }
.ob-head { display: flex; align-items: center; gap: 12px; }
.ob-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); display: grid; place-items: center; font-size: 16px; }
.ob-steps { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ob-steps i { height: 8px; border-radius: 4px; background: var(--surface-raised); border: 1.5px solid var(--line); }
.ob-steps i.done { background: var(--mint); border-color: var(--ink); }
.ob-steps i.now { background: var(--volt); border-color: var(--ink); }
.ob-xp { flex: none; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--lemon); color: var(--on-lemon); border: 2px solid var(--ink); font: 700 12px/1 var(--font-mono); }
.ob-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ob-q { margin: 0; font: 800 clamp(28px, 8vw, 36px)/1.04 var(--font-display); letter-spacing: -.02em; text-wrap: balance; animation: fl-rise .35s cubic-bezier(.2, .9, .3, 1) both; }
.ob-sub { margin: 0; font: 500 16px/1.5 var(--font-body); color: var(--ink-muted); }
.ob-sub b { color: var(--ink); overflow-wrap: anywhere; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 92px; padding: 14px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--tone); color: var(--on-tone); box-shadow: var(--shadow-pop); text-align: start; font: 800 17px/1.1 var(--font-display); transition: transform .08s ease, box-shadow .08s ease; animation: pop-in .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.role:nth-child(odd) { --tilt: -2deg; } .role:nth-child(even) { --tilt: 2deg; }
.role:hover { animation: wiggle .4s ease; }
.role:active { transform: translateY(3px); box-shadow: var(--shadow-pop-pressed); }
.role small { font: 600 12px/1.3 var(--font-body); opacity: .85; }
.role.wide { grid-column: span 2; min-height: 0; flex-direction: row; justify-content: space-between; align-items: center; }
@keyframes pop-in { from { transform: scale(.6) rotate(var(--tilt, 0deg)); opacity: .2; } }
@keyframes wiggle { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.skip { align-self: flex-start; border: 0; background: none; color: var(--ink-muted); font: 700 15px/1 var(--font-body); padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.skip:focus-visible, .role:focus-visible, .opt:focus-visible, .ob-x:focus-visible, .dev-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.q-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; }
.combo { padding: 5px 10px; border-radius: var(--radius-pill); background: var(--pop); color: var(--on-pop); border: 2px solid var(--ink); font: 800 13px/1 var(--font-display); transform: rotate(-4deg); animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.5) both; }
.q-timer { height: 10px; border-radius: 5px; border: 2px solid var(--ink); background: var(--surface-raised); overflow: hidden; }
.q-timer i { display: block; height: 100%; width: 100%; background: var(--lemon); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { to { transform: scaleX(0); } }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts.long { grid-template-columns: 1fr; }
.opt { min-height: 72px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); text-align: start; font: 700 18px/1.25 var(--font-body); transition: transform .08s ease, box-shadow .08s ease, opacity .2s; }
.opt.mono { font: 500 14px/1.45 var(--font-mono); }
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-pop-pressed); }
.opt.is-right { background: var(--mint); color: var(--on-mint); animation: fl-bounce .4s ease; }
.opt.is-dim { opacity: .45; }
.opt:disabled { cursor: default; }
.react { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: 2px solid var(--ink); font: 700 15px/1.35 var(--font-body); animation: pop-in .3s cubic-bezier(.2, .9, .3, 1.4) both; }
.react.ok { background: var(--mint); color: var(--on-mint); }
.react.no { background: var(--danger); color: var(--on-danger); animation: fl-shake .35s ease; }
.react b { margin-inline-start: auto; white-space: nowrap; }
.react .fl-ico { flex: none; font-size: 20px; }
.lvl-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 3px solid var(--ink); border-radius: var(--radius-lg); background: var(--cobalt); color: var(--on-cobalt); box-shadow: 0 6px 0 0 var(--ink); transform-origin: center; animation: flip-in .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes flip-in { from { transform: perspective(800px) rotateY(80deg) scale(.8); opacity: .2; } }
.lvl-top { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1 var(--font-mono); }
.lvl-n { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lemon); color: var(--on-lemon); border: 2px solid var(--ink); font: 800 20px/1 var(--font-display); transform: rotate(-6deg); }
.lvl-name { font: 800 32px/1.02 var(--font-display); letter-spacing: -.02em; }
.lvl-habits { display: flex; flex-wrap: wrap; gap: 8px; }
.lvl-h { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); border: 2px solid var(--ink); font: 700 12px/1 var(--font-body); }
.lvl-h i { width: 16px; height: 16px; border-radius: 50%; background: var(--hc); border: 2px solid var(--ink); }
.lvl-h.miss { opacity: .7; }
.lvl-h .fl-ico { font-size: 13px; }
.lvl-quest { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .14); border: 2px dashed var(--on-cobalt); }
.lvl-quest .label { color: var(--on-cobalt); opacity: .85; }
.lvl-quest b { font: 800 18px/1.2 var(--font-display); }
.confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; top: -12px; width: 10px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink); animation: fall 1.6s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 620px) rotate(var(--rot)); opacity: 0; } }
.form-err { font: 600 14px/1.4 var(--font-body); color: var(--danger); }
.mail-ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; background: var(--lemon); color: var(--on-lemon); border: 3px solid var(--ink); box-shadow: var(--shadow-pop); transform: rotate(-6deg); animation: pop-in .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.dev-link { color: var(--volt-text); font-weight: 700; }

/* Install step */
.inst { display: flex; flex-direction: column; gap: 18px; justify-content: center; flex: 1; }
.inst-phone { align-self: center; width: 190px; padding: 18px 16px; border: 3px solid var(--ink); border-radius: 30px; background: var(--surface); box-shadow: 0 6px 0 0 var(--ink); }
.inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.inst-grid i { aspect-ratio: 1; border-radius: 10px; background: var(--surface-raised); border: 1.5px solid var(--line); }
.inst-app { aspect-ratio: 1; border-radius: 10px; background: var(--volt); border: 2px solid var(--ink); display: grid; place-items: center; animation: hover-app 1.6s ease-in-out infinite; }
.inst-app span { font: 800 16px/1 var(--font-display); color: var(--on-volt); }
.inst-app.landed { animation: land .6s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes hover-app { 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes land { from { transform: translateY(-90px) scale(1.4) rotate(-20deg); } }
.inst-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.inst-steps li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 600 16px/1.4 var(--font-body); }
.inst-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--volt); color: var(--on-volt); border: 2px solid var(--ink); font: 800 13px/1 var(--font-display); }
.inst-key { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: var(--surface-raised); border: 2px solid var(--ink); font: 700 14px/1.2 var(--font-body); }
.inst-arrow { align-self: center; font-size: 30px; color: var(--volt-text); animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(8px); } }
.inst-win { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 800 28px/1 var(--font-mono); }
.sticker-win { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--lemon); color: var(--on-lemon); border: 3px solid var(--ink); box-shadow: var(--shadow-pop); font: 800 20px/1 var(--font-display); transform: rotate(-4deg); animation: pop-in .5s cubic-bezier(.2, .9, .3, 1.5) both; }
.app > .ob[role="dialog"] { position: absolute; inset: 0; z-index: 40; }

/* Me tab additions */
.lvl-mini { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--surface); }
.lvl-mini b { font: 800 18px/1.15 var(--font-display); }
.goal-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.goal-pick button { height: 36px; border-radius: var(--radius-pill); border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); font: 700 13px/1 var(--font-body); }
.goal-pick button.is-on { background: var(--lemon); color: var(--on-lemon); }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }