/* Green Mission Passport - player pages (index.html). */
/* ---------- Sky (dark top) + Sheet (light content) ---------- */
.sky { --edge: max(20px, calc(50vw - 220px)); position: relative; overflow: hidden; margin-inline: calc(50% - 50vw); padding: 0 max(20px, calc(50vw - 220px)) 52px; color: var(--ink); background: var(--paper-bg); }
.sky::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, oklch(0.69 0.115 80 / .5), transparent); }
.sky > * { position: relative; z-index: 1; }
.sheet { position: relative; z-index: 2; flex: 1; margin-top: -28px; box-shadow: 0 -12px 30px -20px oklch(0.35 0.05 100 / .45); padding: 22px 20px calc(100px + env(safe-area-inset-bottom)); background: var(--bg); border-radius: 28px 28px 0 0; animation: sheet-in .7s var(--ease) both; }
@keyframes sheet-in { from { transform: translateY(36px); opacity: 0; } }
/* ---------- Flying creatures ---------- */
.flyer { position: absolute; z-index: 0; top: var(--y); left: 0; width: var(--w); pointer-events: none; animation: fly var(--d) linear infinite; animation-delay: var(--delay, 0s); }
.flyer > span { display: block; animation: bob 2.6s ease-in-out infinite alternate; }
.flyer img { width: 100%; height: auto; transform-origin: 50% 70%; animation: flap .32s ease-in-out infinite alternate; }
.flyer.rtl { animation-name: fly-rtl; }
@keyframes fly { from { transform: translateX(-120px) scaleX(-1); } to { transform: translateX(calc(100vw + 40px)) scaleX(-1); } }
@keyframes fly-rtl { from { transform: translateX(calc(100vw + 40px)); } to { transform: translateX(-120px); } }
@keyframes bob { from { transform: translateY(-10px) rotate(-4deg); } to { transform: translateY(12px) rotate(5deg); } }
@keyframes flap { to { transform: scaleY(.78); } }
.float { animation: float 3.2s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(-5px) rotate(-3deg); } to { transform: translateY(6px) rotate(3deg); } }

/* ---------- Welcome ---------- */
.welcome-sky { text-align: center; padding-bottom: 28px; }
.corner-flora { position: absolute; z-index: 0; top: -12px; height: auto; pointer-events: none; animation: sway 7s ease-in-out infinite alternate; }
.corner-flora.l { top: -6px; left: -8px; width: 132px; transform-origin: 0 0; }
.corner-flora.r { right: -20px; width: 104px; transform-origin: 100% 0; animation-delay: -3s; }
@keyframes sway { from { rotate: -2deg; } to { rotate: 2.5deg; } }
.welcome-sky .kv-title { width: min(80%, 330px); height: auto; margin: 34px auto 12px; animation: title-in 1.2s var(--ease) both .1s; }
@keyframes title-in { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); } }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; color: var(--gold-deep); background: oklch(1 0 0 / .55); border: 1px solid oklch(0.69 0.115 80 / .45); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.pill svg { width: 14px; height: 14px; }
.welcome h1 { margin-bottom: 20px; font-size: 26px; text-align: center; color: var(--g-800); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; text-align: center; }
.steps::before { content: ""; position: absolute; top: 27px; left: 17%; right: 17%; border-top: 2px dashed oklch(0.8 0.05 150); }
.steps li { position: relative; display: grid; justify-items: center; gap: 2px; font-size: 14px; font-weight: 700; }
.steps small { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.step-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; color: var(--g-700); background: var(--surface); border: 1.5px solid var(--g-100); border-radius: 50%; box-shadow: var(--shadow-sm); }
.step-ico svg { width: 24px; height: 24px; }

/* ---------- Passport code ---------- */
.code-sky { text-align: center; padding-bottom: 52px; }
.code-sky h1 { margin-top: 18px; font-size: 26px; color: var(--g-800); }
.code-sky p { margin-top: 4px; color: var(--muted); }
.code-card { display: grid; justify-items: center; gap: 4px; margin-bottom: 14px; padding: 24px 20px 20px; text-align: center; background: linear-gradient(175deg, var(--surface), var(--gold-50)); border: 2px dashed oklch(0.69 0.115 80 / .55); border-radius: 22px; }
.code-label { color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.code-big { margin: 4px 0; color: var(--g-800); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 42px; font-weight: 800; letter-spacing: .08em; line-height: 1.1; }
.code-name { margin-bottom: 12px; color: var(--muted); font-weight: 600; }
.code-card .btn { width: auto; min-height: 44px; padding: 8px 20px; font-size: 15px; }
.code-help { margin-bottom: 18px; color: var(--muted); font-size: 14px; text-align: center; }
.code-chip { padding: 1px 9px; color: var(--gold-deep); background: oklch(1 0 0 / .6); border: 1px dashed oklch(0.69 0.115 80 / .6); border-radius: 999px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .04em; }

.register + .code-help { margin-top: 14px; }
.restore-link { margin-top: 16px; color: var(--muted); font-size: 14px; text-align: center; }
.link.strong { color: var(--g-700); font-size: 14px; font-weight: 700; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sync-note { margin-top: 10px; padding: 8px 12px; color: var(--gold-deep); background: var(--gold-50); border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.thanks { margin: -4px 0 14px; font-size: 22px; color: var(--g-800); }
.grand-card.used { animation: grand-in 1s var(--ease) both .15s; }
.used-mark { display: inline-grid; justify-items: center; gap: 2px; margin: 6px 0 14px; padding: 12px 26px; color: oklch(0.5 0.17 28); border: 4px solid currentColor; border-radius: 16px; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 4px currentColor; rotate: -8deg; filter: url(#ink); opacity: .9; }
.used-mark strong { font-size: 32px; font-weight: 800; line-height: 1.15; }
.used-mark small { font-size: 13px; font-weight: 700; }
.used-mark.slam { animation: stamp-in .8s var(--ease) both .3s; }

/* ---------- Home ---------- */
.home-sky { text-align: center; }
.hello { margin-top: 4px; color: var(--on-dark-muted); font-size: 15px; font-weight: 600; }
.ring { position: relative; width: var(--size, 150px); aspect-ratio: 1; margin: 10px auto 8px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: oklch(0.4 0.05 110 / .12); stroke-width: 9; }
.ring-fill { fill: none; stroke: url(#ringGold); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease) .25s; filter: drop-shadow(0 0 6px oklch(0.74 0.12 82 / .55)); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label strong { font-size: calc(var(--size, 168px) * .34); font-weight: 800; line-height: 1; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.ring-label span { margin-top: 4px; color: var(--on-dark-muted); font-size: 13px; font-weight: 600; }
.home-sky .lead { font-size: 18px; font-weight: 700; }
.home-sky { padding-bottom: 46px; }
.home .section-title { margin-bottom: 10px; }
.home-sky .lead b { color: var(--gold-deep); }
.home-sky .lead { color: var(--g-700); }
@media (max-height: 760px) { .home-sky .ring { --size: 112px !important; margin-top: 4px; } .home-sky .lead { font-size: 17px; } }
.stamp-page { position: relative; margin-bottom: 14px; padding: 14px 14px 10px; background: linear-gradient(175deg, var(--surface), var(--gold-50)); border: 1px solid var(--line); border-radius: 20px; box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px oklch(0.69 0.115 80 / .32), var(--shadow-sm); }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 6px 6px; }
.sp-head h2 { font-size: 16.5px; font-weight: 800; }
.sp-head span { color: var(--gold-deep); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.spots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px; }
.spot { display: grid; justify-items: center; align-content: start; gap: 0; padding: 4px 2px 2px; text-align: center; }
.spot:nth-child(2) { padding-top: 9px; }
.spot:nth-child(3) { margin-top: -4px; }
.stamp, .empty { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 3px; rotate: var(--r, 0deg); }
.stamp { color: var(--ink-c); }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .88; }
.stamp-art { position: relative; width: 50%; height: auto; }
.empty { color: oklch(0.62 0.03 100); border: 1.8px dashed oklch(0.72 0.05 90 / .8); border-radius: 50%; font-size: 26px; font-weight: 800; }
.empty::after { content: ""; position: absolute; inset: 7px; border: 1px dashed oklch(0.8 0.04 90 / .7); border-radius: 50%; }
.spot strong { font-size: 14px; line-height: 1.35; }
.spot small { color: var(--muted); font-size: 12px; }
.spot.done small { color: var(--g-700); font-weight: 600; }
.seal { position: relative; display: grid; place-items: center; width: 56px; height: 56px; color: var(--muted); background: var(--g-50); border: 2px dashed oklch(0.78 0.04 150); border-radius: 50%; font-size: 20px; font-weight: 800; }
.seal img { width: 72%; height: auto; }
.spot.just .stamp { animation: stamp-in .9s var(--ease) both .45s; }
@media (max-height: 760px) { .stamp, .empty { width: 70px; height: 70px; } .stamp-page { padding-top: 12px; } }
@keyframes stamp-in { from { transform: scale(1.8) rotate(-18deg); opacity: 0; } }
@keyframes glow { 0% { box-shadow: var(--shadow-sm), 0 0 0 0 oklch(0.74 0.12 82 / .55); } 100% { box-shadow: var(--shadow-sm), 0 0 0 16px oklch(0.74 0.12 82 / 0); } }

/* ---------- Bottom nav ---------- */
.nav { position: fixed; z-index: var(--z-nav); left: 50%; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 480px); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: oklch(1 0 0 / .86); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-top: 1px solid var(--line); transform: translateX(-50%); }
.nav-pill { position: absolute; top: 8px; left: 10px; width: calc((100% - 20px) / 3); height: 54px; background: var(--g-100); border-radius: 16px; transition: transform .5s var(--ease); }
.nav-item { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px; min-height: 54px; color: var(--muted); background: none; border: 0; font-size: 12px; font-weight: 700; transition: color .3s; }
.nav-item svg { width: 23px; height: 23px; }
.nav-item[aria-current="page"] { color: var(--g-800); }
@media (min-width: 560px) { .nav { bottom: 16px; width: 420px; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); } }

/* ---------- Zone ---------- */
.zone-sky { padding-bottom: 50px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px -4px; padding: 6px 12px 6px 8px; color: var(--g-700); background: oklch(1 0 0 / .6); border: 1px solid oklch(0.69 0.115 80 / .35); border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.back svg { width: 16px; height: 16px; }
.zone-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zone-kicker { color: var(--gold-deep); font-size: 13.5px; font-weight: 700; }
.zone-hero h1 { margin-top: 2px; font-size: 27px; color: var(--g-800); }
.zone-art { flex: none; width: 96px; height: auto; filter: drop-shadow(0 10px 12px oklch(0.35 0.05 100 / .3)); }
.task { display: flex; gap: 12px; margin-bottom: 20px; padding: 14px 16px; background: var(--gold-50); border: 1px solid oklch(0.88 0.06 86); border-radius: 18px; font-size: 14.5px; line-height: 1.6; }
.task svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold-deep); }
.task strong { display: block; color: var(--gold-deep); font-size: 13px; }
.question { margin: 0 2px 14px; font-size: 19px; font-weight: 700; line-height: 1.5; }
.answers { display: grid; gap: 10px; }
.answer { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; font-weight: 600; line-height: 1.45; box-shadow: var(--shadow-sm); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.answer:active { transform: scale(.985); }
.key { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); background: var(--g-50); border-radius: 50%; font-weight: 800; transition: background .25s, color .25s; }
.key svg { width: 16px; height: 16px; }
.answer.selected { background: var(--g-50); border-color: var(--g-600); }
.answer.selected .key { color: white; background: var(--g-600); }
.answer.right { background: var(--g-100); border-color: var(--g-600); animation: right-pop .5s var(--ease); }
.answer.right .key { color: white; background: var(--g-600); }
.answer.wrong { background: var(--danger-50); border-color: var(--danger); animation: shake .45s var(--ease); }
.answer.wrong .key { color: white; background: var(--danger); }
@keyframes right-pop { 40% { transform: scale(1.03); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.quiz-steps[hidden] { display: none; }
.quiz-steps { display: flex; align-items: center; gap: 6px; margin: 0 2px 12px; }
.quiz-steps span { width: 28px; height: 6px; background: var(--line); border-radius: 999px; transition: background .3s; }
.quiz-steps span.done { background: var(--g-600); }
.quiz-steps span.now { background: var(--gold); }
.quiz-steps b { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.q-in { animation: q-in .45s var(--ease) both; }
@keyframes q-in { from { opacity: 0; transform: translateX(18px); } }
.answer.wrong { cursor: not-allowed; }
.quiz-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 0; color: var(--muted); font-weight: 600; }
.quiz-loading .spinner { border-color: var(--line); border-top-color: var(--g-600); }
.quiz-offline { display: grid; gap: 14px; padding: 18px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.quiz-offline p { color: var(--muted); font-weight: 600; }
.hint { min-height: 24px; margin-top: 14px; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; transition: color .2s; }
.hint.bad { color: var(--danger); }
.hint.good { color: var(--g-700); }
.dock { position: fixed; z-index: var(--z-nav); left: 50%; bottom: 0; width: min(100%, 480px); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: oklch(1 0 0 / .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); transform: translateX(-50%); }
@media (min-width: 560px) { .dock { bottom: 16px; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-md); } }

.trees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.tree { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-sm); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.tree span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--g-600); background: var(--g-50); border-radius: 50%; transition: background .25s, color .25s, transform .4s var(--ease); }
.tree span svg { width: 20px; height: 20px; }
.tree.selected { background: var(--g-50); border-color: var(--g-600); }
.tree.selected span { color: white; background: var(--g-600); transform: rotate(-12deg) scale(1.08); }
.form-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.step-label { margin: 0 2px 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.result { margin-top: 16px; padding: 20px 18px; color: oklch(0.97 0.015 95); background: radial-gradient(90% 70% at 100% 0%, var(--g-700), transparent 60%), var(--g-900); border-radius: 22px; box-shadow: var(--shadow-md); animation: rise .6s var(--ease) both; }
.result h3 { color: var(--gold-hi); font-size: 16px; }
.result > p { margin-top: 2px; color: oklch(0.86 0.03 110); font-size: 13px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.stat { padding: 12px 10px; text-align: center; background: oklch(1 0 0 / .07); border-radius: 16px; }
.stat span { display: block; color: oklch(0.86 0.03 110); font-size: 11.5px; font-weight: 600; }
.stat strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat small { margin-left: 3px; color: var(--gold-hi); font-size: 11px; font-weight: 700; }

.shot { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; color: var(--g-700); background: var(--g-50); border: 2px dashed oklch(0.72 0.06 150); border-radius: 22px; font-weight: 700; transition: border-color .25s, background .25s; }
.shot:hover { background: var(--g-100); }
.shot-ico { display: grid; place-items: center; width: 62px; height: 62px; background: var(--surface); border-radius: 50%; box-shadow: var(--shadow-sm); animation: float 2.4s ease-in-out infinite alternate; }
.shot-ico svg { width: 28px; height: 28px; }
.shot small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.privacy { margin-bottom: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; font-size: 13.5px; line-height: 1.6; }
.privacy strong { display: block; color: var(--g-700); font-size: 14px; }
.privacy p { color: var(--ink); }
.privacy summary { margin-top: 8px; color: var(--g-700); font-weight: 700; cursor: pointer; }
.privacy ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.privacy li + li { margin-top: 4px; }
.consent b { color: var(--g-700); }
.consent small { color: var(--muted); font-size: 12px; }
.consent + .consent { margin-top: 8px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--g-600); }
.upload { height: 8px; margin-top: 14px; overflow: hidden; background: var(--g-100); border-radius: 999px; }
.upload span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--g-600), var(--g-400)); border-radius: inherit; transition: width .12s linear; }

/* ---------- Celebration ---------- */
.celebrate { --edge: max(20px, calc(50vw - 220px)); position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; margin-inline: calc(50% - 50vw); padding: 24px max(20px, calc(50vw - 220px)) calc(28px + env(safe-area-inset-bottom)); overflow: hidden; color: var(--ink); text-align: center; background: radial-gradient(55% 40% at 50% 34%, oklch(0.9 0.09 88 / .7), transparent 70%), var(--paper-bg); }
.celebrate h1 { color: var(--g-800); }
.celebrate > * { position: relative; z-index: 1; }
.celebrate > .top-space { margin-top: -24px; margin-bottom: auto; }
.celebrate .actions { margin-bottom: auto; }
.medal-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto 18px; }
.rays { position: absolute; inset: -40px; background: repeating-conic-gradient(from 0deg, oklch(0.74 0.12 82 / .3) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 28s linear infinite, fade 1s var(--ease) .3s both; }
.medal { position: absolute; inset: 26px; display: grid; place-items: center; background: radial-gradient(circle at 50% 36%, var(--surface), var(--gold-50)); border-radius: 50%; box-shadow: 0 0 0 5px var(--gold), 0 0 0 9px oklch(1 0 0 / .7), 0 20px 40px -12px oklch(0.4 0.07 85 / .55); animation: medal-in 1s var(--ease) both .15s; }
.medal img { width: 68%; height: auto; animation: pop .7s var(--ease) both .55s; }
.medal .tick { position: absolute; right: 2px; bottom: 6px; display: grid; place-items: center; width: 38px; height: 38px; color: white; background: var(--g-600); border: 3px solid var(--surface); border-radius: 50%; animation: pop .6s var(--ease) both 1s; }
.medal .tick svg { width: 20px; height: 20px; }
.ring-draw { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transform: rotate(-90deg); }
.ring-draw circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 509; stroke-dashoffset: 509; animation: draw 1.4s var(--ease) forwards .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes medal-in { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.celebrate h1 { font-size: 32px; }
.celebrate .sub { margin-top: 4px; color: var(--on-dark-muted); font-weight: 600; }
.dots { display: inline-flex; justify-content: center; gap: 4px; margin: 22px 0 6px; }
.dot { width: 34px; height: 8px; background: oklch(0.4 0.05 110 / .14); border-radius: 999px; }
.dot.on { background: var(--gold); }
.dot.new { background: var(--gold-deep); box-shadow: 0 0 12px var(--gold); animation: dot-in .8s var(--ease) both 1.2s; transform-origin: left; }
@keyframes dot-in { from { transform: scaleX(0); } }
.count { color: var(--on-dark-muted); font-size: 14.5px; }
.count b { color: var(--gold-deep); }
.actions { display: grid; gap: 10px; margin-top: 26px; }
.fx { position: fixed; z-index: var(--z-fx); inset: 0; overflow: hidden; pointer-events: none; }
.petal { position: absolute; top: -24px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.4); background: var(--c); border-radius: 60% 0 60% 0; opacity: .95; animation: fall var(--d) cubic-bezier(.3, .2, .6, 1) var(--delay) forwards; }
@keyframes fall { to { transform: translate3d(var(--sway), 110dvh, 0) rotate(var(--rot)); opacity: .9; } }

/* ---------- Reward ---------- */
.reward-sky { text-align: center; }
.gift { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 10px; color: var(--g-800); background: linear-gradient(160deg, var(--gold-hi), var(--gold)); border-radius: 28px; box-shadow: 0 16px 34px -12px oklch(0.74 0.12 82 / .6); animation: float 3s ease-in-out infinite alternate; }
.gift svg { width: 30px; height: 30px; }
.gift { border-radius: 22px; }
.reward-sky h1 { font-size: 26px; color: var(--g-800); }
.reward-sky p { margin-top: 6px; color: var(--on-dark-muted); font-size: 14.5px; }
.bar { height: 10px; margin-top: 16px; overflow: hidden; background: oklch(0.4 0.05 110 / .12); border-radius: 999px; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g-600), var(--gold)); border-radius: inherit; transition: width 1.2s var(--ease) .3s; }
.rows { display: grid; gap: 10px; margin-bottom: 18px; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.row .seal { width: 48px; height: 48px; font-size: 17px; }
.row strong { display: block; font-size: 15.5px; }
.row small { color: var(--muted); font-size: 12.5px; }

.voucher { position: relative; padding: 3px; border-radius: 28px; background: conic-gradient(from var(--angle), var(--gold-deep), var(--gold-hi), var(--gold), oklch(0.95 0.06 92), var(--gold-deep)); box-shadow: var(--shadow-md), 0 30px 60px -30px oklch(0.5 0.1 80 / .6); animation: border-spin 5s linear infinite, rise .8s var(--ease) both; }
@keyframes border-spin { to { --angle: 360deg; } }
.voucher-in { position: relative; overflow: hidden; padding: 22px 20px 20px; text-align: center; background: var(--surface); border-radius: 25px; }
.voucher-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, oklch(0.95 0.08 90 / .55) 45%, oklch(0.92 0.06 150 / .45) 52%, transparent 66%); background-size: 260% 100%; animation: sheen 3.2s ease-in-out infinite; mix-blend-mode: multiply; }
@keyframes sheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.voucher.locked { background: oklch(0.86 0.035 85); box-shadow: var(--shadow-sm); animation: rise .8s var(--ease) both; margin-bottom: 18px; }
.voucher.locked .voucher-in { padding: 16px 18px; }
.voucher.locked .v-seals { margin: 12px 0 14px; }
.voucher.locked .voucher-in::after { display: none; }
.voucher.locked .v-name { color: var(--muted); }
.v-seals .seal.empty-seal { color: oklch(0.62 0.03 100); background: var(--g-50); border: 1.8px dashed oklch(0.72 0.05 90 / .8); box-shadow: none; font-size: 18px; }
.lock-note { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; color: var(--gold-deep); background: var(--gold-50); border-radius: 999px; font-size: 13px; font-weight: 700; }
.lock-note svg { width: 16px; height: 16px; }
.todo { margin: 0 0 20px; padding: 0 4px; list-style: none; }
.todo li { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1.5px dashed var(--line); }
.todo li:first-child { border-top: 1.5px dashed var(--line); }
.todo-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--gold-deep); border: 1.5px dashed oklch(0.69 0.115 80 / .6); border-radius: 50%; font-size: 14px; font-weight: 800; }
.todo strong { flex: 1; font-size: 15.5px; }
.todo small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.v-kicker { color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.v-name { margin-top: 4px; font-size: 22px; font-weight: 800; }
.v-seals { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.v-seals .seal { width: 54px; height: 54px; background: radial-gradient(circle at 50% 38%, var(--surface), var(--gold-50)); border: 0; box-shadow: 0 0 0 2px var(--gold), 0 6px 14px -6px oklch(0.5 0.1 80 / .5); animation: pop .6s var(--ease) both; animation-delay: calc(var(--i) * 110ms + .4s); }
.clock { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 18px; color: var(--g-800); background: var(--g-50); border: 1px solid var(--g-100); border-radius: 16px; }
.clock strong { font-size: 30px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.clock .live { width: 9px; height: 9px; background: oklch(0.62 0.18 145); border-radius: 50%; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.v-date { margin-top: 6px; color: var(--muted); font-size: 13px; }
.v-code { margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--line); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.v-help { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }


/* ---------- KV decorations ---------- */
.deco { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; }
.deco.sway { animation: deco-in 1.1s var(--ease) both .15s, sway 7s ease-in-out 1.2s infinite alternate; }
.deco.still { animation: deco-in 1.1s var(--ease) both .15s; }
@keyframes deco-in { from { opacity: 0; translate: var(--from, 0 24px); } }
.edge-l { left: 0; }
.edge-r { right: 0; }
.fade-b { -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 30%); mask-image: linear-gradient(to top, transparent 2%, #000 30%); }
.fade-br { -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 30%), linear-gradient(to left, transparent 2%, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 2%, #000 30%), linear-gradient(to left, transparent 2%, #000 22%); mask-composite: intersect; }
.fade-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.home-sky { padding-bottom: 58px; }
.home-sky .d-longan { bottom: 18px; width: 104px; margin-left: 10px; transform-origin: 30% 100%; --from: 0 30px; }
.home-sky .d-leaves { bottom: 16px; width: 104px; transform-origin: 90% 100%; --from: 0 30px; }
.zone-sky .d-flora { top: -18px; width: 92px; margin-right: -14px; transform-origin: 100% 0; --from: 20px -20px; opacity: .95; }
.reward-sky .d-durian { bottom: 14px; width: 112px; transform-origin: 90% 100%; --from: 0 30px; }
.reward-sky .d-longan { bottom: 18px; width: 100px; margin-left: 10px; transform-origin: 30% 100%; --from: 0 30px; }
.reward-sky .bar { max-width: 56%; margin-inline: auto; }
.reward-sky:has(.d-durian) { padding-bottom: 62px; }
.reward-sky .d-flora-l { top: -6px; width: 96px; margin-left: -6px; transform-origin: 0 0; --from: -20px -20px; }
.reward-sky .d-flora-r { top: -16px; width: 80px; margin-right: -14px; transform-origin: 100% 0; --from: 20px -20px; }
.celebrate .d-flora-l { top: -6px; width: 150px; margin-left: -8px; transform-origin: 0 0; --from: -40px -30px; }
.celebrate .d-flora-r { top: -14px; width: 118px; margin-right: -22px; transform-origin: 100% 0; --from: 40px -30px; }
.celebrate .d-jasmine { bottom: -8px; left: 50%; width: min(128%, 620px); margin-left: calc(min(128%, 620px) / -2); --from: 0 40px; }
.celebrate .actions { position: relative; z-index: 2; }
.scene { position: relative; z-index: 0; height: 150px; margin: 0 -20px -46px; }
.scene .deco { left: 50%; }
.s-building { bottom: 38px; width: 210px; margin-left: -105px; --from: 0 30px; -webkit-mask-image: linear-gradient(to top, transparent 4%, #000 30%), linear-gradient(90deg, transparent 2%, #000 16%, #000 84%, transparent 98%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 4%, #000 30%), linear-gradient(90deg, transparent 2%, #000 16%, #000 84%, transparent 98%); mask-composite: intersect; }
.s-hill { bottom: 20px; width: 118%; max-width: 620px; translate: -50% 0; }
.s-hill.still { animation: none; translate: -50% 0; }
.s-jasmine { bottom: 0; width: 112%; max-width: 600px; margin-left: -56%; --from: 0 40px; transform-origin: 50% 100%; }
@media (min-width: 560px) { .s-jasmine { margin-left: -300px; } }
@media (max-height: 760px) { .home-sky .d-longan, .home-sky .d-leaves { width: 92px; } }
/* ---------- Grand voucher ---------- */
.grand { --edge: max(20px, calc(50vw - 220px)); position: relative; flex: 1; overflow: hidden; margin-inline: calc(50% - 50vw); padding: 0 max(20px, calc(50vw - 220px)) calc(110px + env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(60% 38% at 50% 40%, oklch(0.92 0.09 88 / .85), transparent 70%), var(--paper-bg); }
.grand > :not(.deco):not(.grand-rays):not(.spark) { position: relative; z-index: 1; }
.grand-rays { position: absolute; z-index: 0; left: 50%; top: 250px; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: repeating-conic-gradient(from 0deg, oklch(0.74 0.12 82 / .22) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 62%); mask-image: radial-gradient(circle, #000 12%, transparent 62%); animation: spin 40s linear infinite, fade 1.2s var(--ease) both; pointer-events: none; }
.grand-title { width: min(64%, 260px); height: auto; margin: 2px auto 14px; animation: title-in 1.2s var(--ease) both .1s; }
.grand .d-flora-l { top: -6px; width: 150px; margin-left: -8px; transform-origin: 0 0; --from: -40px -30px; }
.grand .d-flora-r { top: -6px; width: 118px; margin-right: -20px; transform-origin: 100% 0; --from: 40px -30px; }
.grand .d-jasmine { bottom: 58px; left: 50%; width: min(130%, 640px); margin-left: calc(min(130%, 640px) / -2); --from: 0 40px; }
.grand-card { text-align: center; animation: border-spin 5s linear infinite, grand-in 1s var(--ease) both .15s; }
@keyframes grand-in { from { opacity: 0; transform: translateY(40px) scale(.92); } }
.grand-card .voucher-in { padding: 26px 20px 20px; background: radial-gradient(90% 40% at 50% 0%, var(--gold-50), var(--surface) 70%); }
.ribbon { position: relative; display: inline-block; margin-top: -4px; padding: 8px 30px; color: oklch(0.3 0.06 75); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%, 13px 50%); font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.v-sub { margin-top: 12px; color: var(--gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.grand-card .v-name { margin-top: 2px; font-size: 28px; color: var(--g-800); }
.v-stamps { display: flex; justify-content: center; gap: 4px; margin: 12px 0 4px; }
.v-stamps .stamp { width: 66px; height: 66px; margin: 0; animation: stamp-in .8s var(--ease) both; animation-delay: calc(var(--n) * 140ms + .6s); }
.v-tear { position: relative; height: 22px; margin: 12px -20px 14px; }
.v-tear::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 2px dashed oklch(0.8 0.06 86); }
.v-tear::after { content: ""; position: absolute; inset: 0 -12px; background: radial-gradient(circle at 0 50%, var(--paper) 11px, transparent 12px), radial-gradient(circle at 100% 50%, var(--paper) 11px, transparent 12px); }
.v-qr { position: relative; width: 196px; margin: 0 auto; padding: 12px; background: white; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px oklch(0.4 0.06 90 / .5); }
.v-qr canvas { display: block; width: 100%; height: auto; }
.v-qr .qc { position: absolute; width: 22px; height: 22px; border: 3px solid var(--gold); }
.v-qr .qc.a { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.v-qr .qc.b { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.v-qr .qc.c { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.v-qr .qc.d { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.qr-note { position: absolute; inset: 12px; display: grid; place-items: center; margin: 0; padding: 12px; color: var(--muted); background: oklch(1 0 0 / .94); border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: center; }
.qr-note[hidden] { display: none; }
.v-life { width: 196px; height: 4px; margin: 10px auto 0; overflow: hidden; background: var(--g-100); border-radius: 999px; }
.v-life span { display: block; height: 100%; background: var(--g-600); border-radius: inherit; transition: width 1s linear; }
.v-qr-label { margin-top: 8px; color: var(--g-700); font-size: 14px; font-weight: 700; }
.grand-card .clock { margin-top: 14px; }
.spark { position: absolute; z-index: 2; width: var(--s, 12px); height: var(--s, 12px); background: var(--gold-hi); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.6s ease-in-out infinite; animation-delay: var(--d); pointer-events: none; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Device gates ---------- */
.desk-gate { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100dvh; padding: 32px 20px; text-align: center; }
.desk-gate .kv-title { width: min(80%, 320px); height: auto; margin-bottom: 8px; }
.desk-gate h1 { font-size: 26px; color: var(--g-800); }
.desk-gate p { max-width: 36ch; color: var(--muted); }
.gate-qr { margin-top: 8px; }
.gate-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
body:has(.desk-gate) { background: var(--paper) url("../kv/bg.webp") center / cover; }
.rotate-lock { position: fixed; z-index: 90; inset: 0; display: none; place-content: center; justify-items: center; gap: 10px; padding: 24px; color: var(--g-800); text-align: center; background: var(--paper) url("../kv/bg.webp") center / cover; }
.rotate-lock svg { width: 72px; height: 72px; animation: tilt 1.8s var(--ease) infinite alternate; }
.rotate-lock strong { font-size: 22px; }
.rotate-lock p { color: var(--muted); }
@keyframes tilt { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }
@media (orientation: landscape) and (pointer: coarse) {
  body .rotate-lock { display: grid; }
  body { overflow: hidden; }
}

/* ---------- UI polish: one family of surfaces and controls ----------
   Radius: 14px for controls, 20px for cards, pills fully round. Cards are white on the KV paper with a
   hairline and one soft shadow tinted to the paper; no double borders, no dashed frames, no sweeping shine. */
:root {
  --r-control: 14px;
  --r-card: 20px;
  --hair: oklch(0.88 0.02 88);
  --lift: 0 1px 2px oklch(0.4 0.04 90 / .07), 0 12px 28px -18px oklch(0.4 0.05 90 / .35);
}

/* Buttons */
.btn { min-height: 54px; border-radius: 16px; font-size: 16.5px; letter-spacing: .005em; transition: transform .18s var(--ease), box-shadow .2s, background-color .2s, color .2s; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: var(--g-700); box-shadow: inset 0 1px 0 oklch(1 0 0 / .14), 0 1px 2px oklch(0.3 0.06 160 / .25), 0 10px 22px -12px oklch(0.3 0.08 160 / .75); }
.btn-primary:hover { background: var(--g-800); }
.btn-gold { color: oklch(0.25 0.05 75); background: oklch(0.8 0.11 84); box-shadow: inset 0 1px 0 oklch(1 0 0 / .45), 0 1px 2px oklch(0.45 0.08 80 / .3), 0 10px 22px -12px oklch(0.5 0.1 80 / .7); }
.btn-gold:hover { background: oklch(0.77 0.115 82); }
.btn-ghost { color: var(--g-700); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair), 0 1px 2px oklch(0.4 0.04 90 / .06); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px oklch(0.8 0.04 150), 0 1px 2px oklch(0.4 0.04 90 / .06); }
.btn-ghost.on-dark { background: oklch(1 0 0 / .72); box-shadow: inset 0 0 0 1px oklch(0.69 0.115 80 / .35); }
.btn[disabled] { opacity: 1; color: oklch(0.6 0.02 120); background: oklch(0.92 0.012 100); box-shadow: none; }
.btn.shine::after { content: none; }

/* Cards and form fields */
.card { border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.register { display: grid; gap: 14px; padding: 20px; }
.register .field { margin: 0; }
.register .fine { margin: 0; }
.field { gap: 8px; font-size: 14.5px; }
.input { min-height: 54px; background: var(--surface); border: 1.5px solid var(--hair); border-radius: var(--r-control); transition: border-color .2s, box-shadow .2s; }
.input:focus { background: var(--surface); border-color: var(--g-600); box-shadow: 0 0 0 4px oklch(0.48 0.08 158 / .12); }

/* Steps: icons sit in quiet tinted circles; the connector is a hairline, not a dashed rule. */
.step-ico { border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 6px 14px -10px oklch(0.4 0.05 90 / .45); }
.steps::before { border-top: 1.5px solid var(--hair); }

/* Passport code */
.code-card { gap: 6px; padding: 24px 20px 20px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.code-big { margin: 2px 0 2px; font-size: 40px; }
.code-name { margin-bottom: 14px; }
.code-chip { padding: 2px 10px; background: oklch(1 0 0 / .75); border: 1px solid oklch(0.69 0.115 80 / .35); }

/* Stamp page: one card, one header rule. */
.stamp-page { padding: 6px 12px 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.sp-head { margin: 0 -12px 8px; padding: 12px 18px 10px; border-bottom: 1px solid var(--hair); }

/* Zone task + quiz */
.task { align-items: flex-start; padding: 14px 16px; background: oklch(0.96 0.035 86); border: 0; border-radius: 16px; }
.task svg { width: 22px; height: 22px; }
.answers { gap: 10px; }
.answer { min-height: 58px; padding: 12px 14px; border: 1.5px solid var(--hair); border-radius: 16px; box-shadow: 0 1px 2px oklch(0.4 0.04 90 / .05); }
.answer:hover { border-color: oklch(0.8 0.04 150); }
.answer.selected { background: oklch(0.97 0.02 150); border-color: var(--g-600); box-shadow: 0 0 0 3px oklch(0.48 0.08 158 / .1); }
.key { width: 32px; height: 32px; background: oklch(0.96 0.012 100); border: 1px solid var(--hair); }
.answer.selected .key, .answer.right .key { border-color: transparent; }
.quiz-offline { border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.back { background: oklch(1 0 0 / .78); border-color: var(--hair); box-shadow: 0 1px 2px oklch(0.4 0.04 90 / .06); }

/* Photo zone */
.shot { background: oklch(0.975 0.012 120); border: 1.5px dashed oklch(0.75 0.05 150); border-radius: var(--r-card); }
.shot-ico { box-shadow: 0 0 0 1px var(--hair), 0 6px 14px -10px oklch(0.4 0.05 90 / .45); }
.privacy, .consent { border-color: var(--hair); border-radius: 16px; box-shadow: 0 1px 2px oklch(0.4 0.04 90 / .05); }
.consent input { accent-color: var(--g-700); }

/* Reward page */
.voucher.locked { background: none; padding: 0; box-shadow: none; }
.voucher.locked .voucher-in { border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.lock-note { background: oklch(0.96 0.035 86); }
.todo { margin-bottom: 20px; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--lift); }
.todo li { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.todo li:first-child { border-top: 0; }
.todo li:last-child { border-bottom: 0; }
.todo-num { border: 0; background: oklch(0.96 0.035 86); }

/* Tab bar */
.nav { border-top: 1px solid var(--hair); }
.nav-pill { background: oklch(0.93 0.04 145); border-radius: 14px; }

.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.register .form-error { min-height: 0; margin: -6px 2px 0; }
.register .form-error:empty { display: none; }

/* ---------- Something went wrong: the stamp stage, waiting instead of celebrating ---------- */
.celebrate.oops { background: radial-gradient(55% 40% at 50% 34%, oklch(0.92 0.07 86 / .65), transparent 70%), var(--paper-bg); }
.oops-art { position: relative; width: 210px; height: 190px; margin: 0 auto 14px; }
.oops .halo { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.97 0.04 88 / .9), transparent 72%); }
.oops .critter { position: absolute; inset: 28px 40px 34px; display: grid; place-items: center; animation: pop .7s var(--ease) both .3s; }
.oops .critter img { width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px oklch(0.4 0.06 90 / .28)); animation: float 3.2s ease-in-out .9s infinite alternate; }
.oops .shadow { position: absolute; left: 50%; bottom: 10px; width: 92px; height: 12px; margin-left: -46px; background: radial-gradient(closest-side, oklch(0.45 0.05 90 / .22), transparent); border-radius: 50%; animation: breathe 3.2s ease-in-out .9s infinite alternate; }
@keyframes breathe { to { transform: scaleX(.8); opacity: .6; } }
/* Camera viewfinder: "go scan the booth" */
.oops .aim { position: absolute; inset: 6px 22px 18px; animation: fade .5s var(--ease) both .2s; }
.oops .aim i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--gold-deep); animation: aim 2.4s ease-in-out infinite; }
.oops .aim i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; --dx: 6px; --dy: 6px; }
.oops .aim i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; --dx: -6px; --dy: 6px; }
.oops .aim i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; --dx: 6px; --dy: -6px; }
.oops .aim i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; --dx: -6px; --dy: -6px; }
@keyframes aim { 50% { transform: translate(var(--dx), var(--dy)); } }
/* Speech bubble: "something is off" */
.oops .bubble { position: absolute; top: 4px; right: 18px; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; color: white; background: oklch(0.68 0.14 62); border: 3px solid var(--surface); border-radius: 50% 50% 50% 8px; box-shadow: 0 8px 16px -8px oklch(0.45 0.12 60 / .8); font-size: 24px; font-weight: 800; line-height: 1; animation: pop .6s var(--ease) both .7s, nudge 2.8s ease-in-out 1.6s infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-10deg) scale(1.08); } 86% { transform: rotate(8deg) scale(1.08); } }
.oops-zone { margin-bottom: 4px; color: var(--gold-deep); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.oops h1 { font-size: 28px; line-height: 1.3; }
.oops-msg { max-width: 30ch; margin: 8px auto 26px; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.6; text-wrap: balance; }
.oops .actions { display: grid; gap: 10px; width: 100%; max-width: 340px; margin-inline: auto; }

.quiz-offline .qo-art { width: 84px; height: auto; margin: 4px auto 0; animation: float 3.4s ease-in-out infinite alternate; }
.quiz-offline p strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 17px; }

/* ---------- Popup sheet: privacy notices and the photo consent question ---------- */
.register .fine .link { padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Consent choice: two equal options, nothing preselected, then one clear send button. */

/* ---------- Fixed header (stays on top while scrolling) ---------- */
.top-space { height: calc(58px + env(safe-area-inset-top)); margin-bottom: 14px; }
.top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; margin: 0; padding-inline: max(20px, calc(50vw - 220px)); background: oklch(0.982 0.012 88 / .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* ---------- Tab bar: raised scan button, glowing reward when ready ---------- */
.nav { overflow: visible; }
.nav-scan { color: var(--g-800); }
.nav-scan-btn { display: grid; place-items: center; width: 56px; height: 56px; margin: -30px auto 0; color: #fff; background: linear-gradient(160deg, var(--g-600, #3f8160), var(--g-800)); border: 4px solid var(--bg); border-radius: 50%; box-shadow: 0 10px 22px -8px oklch(0.35 0.08 155 / .7); transition: transform .25s var(--ease); }
.nav-scan-btn svg { width: 26px; height: 26px; }
.nav-scan:active .nav-scan-btn { transform: scale(.92); }
.nav-scan[aria-current="page"] .nav-scan-btn { box-shadow: 0 0 0 4px oklch(0.85 0.06 150), 0 10px 22px -8px oklch(0.35 0.08 155 / .7); }
.nav-ready { color: var(--gold-deep); }
.nav-ready svg { animation: gift-bob 1.8s ease-in-out infinite; }
.nav-ready::after { content: ""; position: absolute; top: 8px; right: calc(50% - 18px); width: 9px; height: 9px; background: oklch(0.65 0.2 30); border: 2px solid #fff; border-radius: 50%; }
@keyframes gift-bob { 0%, 100% { transform: none; } 30% { transform: translateY(-3px) rotate(-8deg); } 60% { transform: translateY(0) rotate(6deg); } }

/* ---------- Popup sheet: fits the screen, buttons always visible ---------- */
.psheet { width: min(100%, 460px); max-width: 100%; height: auto; max-height: calc(100dvh - 12px); margin: auto auto 0; padding: 0; overflow: hidden; color: var(--ink); background: var(--bg); border: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px -24px oklch(0.3 0.05 100 / .55); font-family: inherit; animation: ps-up .45s var(--ease) both; }
.psheet::backdrop { background: oklch(0.2 0.03 110 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .3s both; }
.psheet.closing { animation: ps-down .22s ease-in both; }
.psheet.closing::backdrop { opacity: 0; transition: opacity .22s; }
@keyframes ps-up { from { transform: translateY(100%); } }
@keyframes ps-down { to { transform: translateY(100%); } }
@media (min-width: 600px) { .psheet { margin: auto; border-radius: 26px; } }
.ps-in { position: relative; max-height: inherit; }
.ps-main, .ps-terms { display: flex; flex-direction: column; max-height: calc(100dvh - 12px); }
.ps-terms { display: none; }
.psheet.show-terms .ps-main { display: none; }
.psheet.show-terms .ps-terms { display: flex; animation: panel-in .3s var(--ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateX(24px); } }
.ps-body { display: grid; gap: 10px; min-height: 0; padding: 14px 20px 6px; overflow-y: auto; overscroll-behavior: contain; }
.ps-body::before { content: ""; justify-self: center; width: 38px; height: 5px; margin-bottom: 2px; background: oklch(0.82 0.02 100); border-radius: 999px; }
.ps-foot { display: grid; gap: 4px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--hair, var(--line)); }
.ps-foot .btn { min-height: 52px; }
.ps-head { display: flex; align-items: center; gap: 14px; text-align: left; }
.ps-photo { flex: none; width: 64px; height: 80px; object-fit: cover; border: 3px solid var(--surface); border-radius: 14px; box-shadow: 0 10px 20px -12px oklch(0.35 0.06 100 / .7); rotate: -3deg; }
.psheet h2 { margin: 0; color: var(--g-800); font-size: 20px; line-height: 1.3; text-align: center; }
.ps-head h2 { text-align: left; }
.ps-text { color: var(--muted); font-size: 14.5px; line-height: 1.5; text-align: center; }
.ps-head + .ps-text { text-align: left; }
.ps-small { color: var(--muted); font-size: 13.5px; text-align: center; }
.ps-close { justify-self: center; min-height: 40px; padding: 6px 18px; color: var(--muted); background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ps-terms-link { justify-self: center; padding: 2px 8px; color: var(--g-700, var(--g-800)); background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ps-back { justify-self: start; padding: 4px 8px 4px 0; color: var(--g-700, var(--g-800)); background: none; border: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ps-list { display: grid; gap: 10px; margin: 0; padding: 14px 16px; list-style: none; background: var(--surface); border-radius: 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ps-list b { display: block; color: var(--ink); font-size: 15px; }
.ps-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ps-pick legend { margin-bottom: 8px; padding: 10px 14px; color: var(--ink); background: var(--gold-50); border-radius: 14px; font-size: 15px; font-weight: 700; line-height: 1.45; text-align: center; }
.ps-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.ps-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ps-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--muted); background: var(--surface); border: 2px solid var(--line); border-radius: 50%; transition: background .2s, border-color .2s, color .2s, transform .25s var(--ease); }
.ps-mark svg { width: 15px; height: 15px; opacity: .35; }
.ps-opt:has(input:checked) { border-color: var(--g-700, var(--g-800)); background: oklch(0.97 0.025 155); box-shadow: 0 0 0 3px oklch(0.6 0.08 155 / .18); }
.ps-opt:has(input:checked) .ps-mark { color: white; background: var(--g-700, var(--g-800)); border-color: transparent; transform: scale(1.06); }
.ps-opt:has(input:checked) .ps-mark svg { opacity: 1; }
.ps-opt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.ps-foot .btn-primary[disabled] { opacity: .45; box-shadow: none; }
@media (max-height: 700px) { .ps-pick legend { padding: 8px 12px; font-size: 14.5px; } .ps-opt { min-height: 46px; } .ps-body { gap: 8px; } }
.psheet { inset: auto 0 0; height: auto; margin: 0 auto; }
@media (min-width: 600px) { .psheet { inset: 0; margin: auto; } }
/* Small phones (iPhone SE and similar): the passport page fits above the tab bar without scrolling */
@media (max-height: 700px) {
  .top-space { margin-bottom: 6px; }
  .home-sky { padding-bottom: 40px; }
  .home-sky .hello { margin-top: 0; font-size: 14px; }
  .home-sky .ring { --size: 92px !important; margin: 4px auto 2px; }
  .home-sky .ring-label span { font-size: 11.5px; margin-top: 2px; }
  .home-sky .lead { font-size: 16px; }
  .home-sky .d-longan, .home-sky .d-leaves { width: 78px; }
  .home .stamp-page { margin-bottom: 8px; padding-top: 4px; }
  .home .stamp, .home .empty { width: 60px; height: 60px; }
}