/* Leaderboard webview styles. Colours, spacing and radii come from tokens.css (Nudge DS); fonts from fonts/fonts.css. */

/* ---------- components ---------- */
:root{--shadow-card:0 1px 2px rgba(16,24,40,.04),0 12px 32px -18px rgba(62,25,176,.30)}

/* points are shown with a star */
.pt-ic{display:inline-block;flex:none;vertical-align:-2px;margin-right:3px}
.row-p{position:relative;display:inline-flex;align-items:center}

/* ---------- base ---------- */
.nd{font-family:'Host Grotesk',system-ui,sans-serif;color:var(--surface-text-neutral-solid-shade);-webkit-font-smoothing:antialiased;line-height:1.35}
.nd,.nd *{box-sizing:border-box}
:where(.nd) :where(h1,h2,h3,p){margin:0}
:where(.nd) :where(img){display:block}
:where(.nd) :where(a){text-decoration:none;color:inherit}
:where(.nd) :where(button){font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer}
.num{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
.screen{width:390px;background:var(--surface-bg-neutral-subtle);position:relative;overflow:hidden}
.pad{padding-left:var(--spacing-16px);padding-right:var(--spacing-16px)}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:var(--spacing-4px);height:56px;padding:0 var(--spacing-4px)}
.bar-t{flex:1;font-size:18px;line-height:24px;font-weight:600}
.ibtn{flex:none;width:48px;height:48px;border-radius:var(--border-radius-button-pill);display:grid;place-items:center;color:var(--surface-text-neutral-solid-shade);transition:background .2s,transform .12s}
.ibtn:hover{background:var(--interactive-bg-neutral-quaternary)}
.ibtn:active{transform:scale(.94)}

/* ---------- header ---------- */
.lhead{display:flex;align-items:center;gap:var(--spacing-12px);padding-top:var(--spacing-8px);padding-bottom:var(--spacing-8px)}
.lhead-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-8px)}
.lhead-title{font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.02em}
.lhead-sub{font-size:15px;line-height:22px;color:var(--surface-text-neutral-solid)}
.spark{animation:twinkle 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.spark.d2{animation-delay:.8s}.spark.d3{animation-delay:1.6s}
.lh-cup{animation:bob 3.2s ease-in-out infinite}

/* ---------- section heading ---------- */
.sh{display:flex;flex-direction:column;gap:var(--spacing-4px);margin-bottom:var(--spacing-12px)}
.sh-t{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em}
.sh-s{font-size:14px;line-height:20px;color:var(--surface-text-neutral-solid)}

/* ---------- card ---------- */
.card{background:var(--surface-bg-whites-white);border:var(--border-width-1px) solid var(--surface-border-neutral-subtle);border-radius:var(--border-radius-24px);box-shadow:var(--shadow-card);overflow:hidden}
.podtop{background:var(--surface-bg-brand-primary-subtle);padding:var(--spacing-20px) var(--spacing-16px) 0}
.podhead{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8px)}
.h-xl{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.live{display:inline-flex;align-items:center;gap:var(--spacing-6px);height:30px;padding:0 var(--spacing-12px);border-radius:var(--border-radius-button-pill);background:var(--surface-bg-whites-white);font-size:12px;line-height:16px;font-weight:600;color:var(--surface-text-neutral-solid);white-space:nowrap}
.live-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--feedback-bg-positive-solid);animation:pulse 1.8s infinite}
.prize{display:flex;align-items:center;gap:var(--spacing-6px);margin-top:var(--spacing-8px);font-size:14px;line-height:20px;font-weight:600;color:var(--surface-text-brand-primary-solid)}
.prize svg{flex:none;color:var(--raw-yellow-600)}

/* ---------- podium ---------- */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--spacing-10px);margin-top:var(--spacing-20px)}
.pod{display:flex;flex-direction:column;align-items:center;min-width:0}
.pod-crown{width:24px;height:17px;margin-bottom:var(--spacing-4px);animation:crownIn .6s cubic-bezier(.3,1.6,.5,1) both}
.pod--1 .pod-crown{width:30px;height:21px;color:var(--raw-yellow-500);animation-delay:.55s}
.pod--2 .pod-crown{color:var(--raw-gray-modern-400);animation-delay:.4s}
.pod--3 .pod-crown{color:var(--raw-orange-400);animation-delay:.7s}
.pod-av{position:relative;width:56px;height:56px;border-radius:50%;padding:3px;background:var(--surface-bg-whites-white);box-shadow:0 0 0 2px var(--raw-gray-modern-300)}
.pod--1 .pod-av{width:68px;height:68px;box-shadow:0 0 0 3px var(--raw-yellow-500)}
.pod--3 .pod-av{box-shadow:0 0 0 2px var(--raw-orange-200)}
.pod--you .pod-av{box-shadow:0 0 0 3px var(--surface-border-brand-primary-solid)}
.pod-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pod-you{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font-size:10px;line-height:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--surface-bg-brand-primary-solid-shade);color:var(--surface-text-whites-white);border-radius:var(--border-radius-button-pill);padding:2px 7px}
.pod-name{margin-top:var(--spacing-12px);font-size:14px;line-height:20px;font-weight:600;text-align:center;overflow-wrap:anywhere}
.pod--you .pod-name{color:var(--surface-text-brand-primary-solid)}
.pod-pts{font-size:13px;line-height:18px;color:var(--surface-text-neutral-solid)}
.pod-block{width:100%;margin-top:var(--spacing-8px);border-radius:var(--border-radius-12px) var(--border-radius-12px) 0 0;display:grid;place-items:start center;padding-top:var(--spacing-8px);color:var(--surface-text-whites-white);font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.1;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.9,.3,1.15) both}
.pod--1 .pod-block{height:84px;background:var(--brand-primary-600);font-size:30px;color:var(--raw-yellow-300);animation-delay:.25s}
.pod--2 .pod-block{height:64px;background:var(--brand-primary-500);font-size:24px;animation-delay:.1s}
.pod--3 .pod-block{height:48px;background:var(--brand-primary-400);font-size:22px;animation-delay:.4s}

/* ---------- my standing ---------- */
.podbot{padding:var(--spacing-20px) var(--spacing-16px);display:flex;flex-direction:column;gap:var(--spacing-16px)}
.race-top{display:flex;align-items:center;gap:var(--spacing-12px)}
.av40{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface-bg-whites-white),0 0 0 4px var(--surface-border-brand-primary-intense)}
.race-t{flex:1;display:flex;flex-direction:column;gap:var(--spacing-2px);min-width:0}
.race-l{font-size:13px;line-height:18px;font-weight:600;color:var(--surface-text-neutral-solid)}
.race-r{display:flex;align-items:center;gap:var(--spacing-8px)}
.race-rank{font-size:26px;line-height:32px;font-weight:700}
.bump{display:inline-block;animation:bump .45s ease}
.delta{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 var(--spacing-8px);border-radius:var(--border-radius-button-pill);background:var(--feedback-bg-positive-subtle);color:var(--feedback-text-positive-solid-shade);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.ptslink{flex:none;display:inline-flex;align-items:center;gap:var(--spacing-4px);height:44px;padding:0 var(--spacing-12px) 0 var(--spacing-16px);border-radius:var(--border-radius-button-pill);background:var(--interactive-bg-brand-primary-secondary);color:var(--interactive-text-brand-primary-primary) !important;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;transition:background .2s}
.ptslink:hover{background:var(--interactive-bg-brand-primary-secondary-shade)}
.track{position:relative;height:12px;border-radius:var(--border-radius-button-pill);background:var(--surface-bg-neutral-moderate);overflow:hidden}
.fill-cur{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--brand-primary-600);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.track-l{display:flex;justify-content:space-between;font-size:12px;line-height:16px;font-weight:600;color:var(--surface-text-neutral-solid);margin-top:var(--spacing-8px)}
.hint{font-size:14px;line-height:21px;color:var(--surface-text-neutral-solid)}
.hint b{color:var(--surface-text-neutral-solid-shade)}
.win-strip{display:flex;align-items:center;gap:var(--spacing-12px);padding:var(--spacing-12px);border-radius:var(--border-radius-16px);background:var(--raw-yellow-50);border:var(--border-width-1px) solid var(--raw-yellow-200)}
.win-strip-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--raw-yellow-800)}
.win-strip-t b{font-size:15px;line-height:20px;color:var(--surface-text-neutral-solid-shade)}
.win-gift{flex:none;animation:wiggle 2.6s ease-in-out infinite}

/* ---------- buttons (NudgeButton mirrors) ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-8px);height:52px;width:100%;border-radius:var(--border-radius-button-pill);font-size:16px;line-height:20px;font-weight:700;transition:transform .12s,background .2s}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--interactive-bg-brand-primary-primary-shade);color:var(--surface-text-whites-white) !important}
.btn-p:hover{background:var(--interactive-bg-brand-primary-pressed)}
.btn-s{background:var(--interactive-bg-brand-primary-secondary);color:var(--interactive-text-brand-primary-primary) !important}
.btn-s:hover{background:var(--interactive-bg-brand-primary-secondary-shade)}
.btn-shine{position:relative;overflow:hidden}
.btn-shine::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 2.8s ease-in-out infinite}

/* ---------- brands of the day carousel ---------- */
.botd{padding:var(--spacing-16px) 0 var(--spacing-12px)}
.botd-h{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8px);padding:0 var(--spacing-16px)}
.botd-t{display:flex;align-items:center;gap:var(--spacing-8px);font-size:16px;line-height:22px;font-weight:700}
.star{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--raw-yellow-100);color:var(--raw-yellow-600)}
.chip-gold{flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 var(--spacing-12px);border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);font-weight:700;font-size:12px;line-height:16px;white-space:nowrap}
.next{display:flex;align-items:center;gap:var(--spacing-6px);padding:var(--spacing-8px) var(--spacing-16px) 0;font-size:13px;line-height:18px;color:var(--surface-text-neutral-solid)}
.next b{color:var(--surface-text-neutral-solid-shade)}
.car{overflow:hidden;padding:var(--spacing-16px) 0 var(--spacing-8px);touch-action:pan-y}
.car-track{display:flex;gap:12px;padding-left:16px;will-change:transform}
.tile{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-8px);padding:var(--spacing-16px) var(--spacing-6px) var(--spacing-12px);border-radius:var(--border-radius-20px);background:var(--surface-bg-neutral-subtle);border:var(--border-width-1px) solid var(--surface-border-neutral-subtle);text-align:center;transition:transform .25s,border-color .2s,background .2s,box-shadow .25s}
.tile:hover{border-color:var(--surface-border-brand-primary-intense);background:var(--surface-bg-brand-primary-subtle)}
.tile.focus{border-color:var(--raw-yellow-400);background:var(--raw-yellow-50);box-shadow:0 10px 20px -14px rgba(161,97,7,.6);transform:translateY(-3px)}
.tile-logo{position:relative;width:60px;height:60px;border-radius:50%;background:var(--surface-bg-whites-white);box-shadow:0 0 0 1px var(--surface-border-neutral-subtle);display:grid;place-items:center}
.tile-logo img{width:52px;height:52px;border-radius:50%;object-fit:contain}
.tile-x{position:absolute;right:-8px;top:-6px;height:22px;padding:0 6px;border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;line-height:22px;box-shadow:0 0 0 2px var(--surface-bg-whites-white)}
.tile-n{font-size:13px;line-height:17px;font-weight:600;min-height:34px;display:flex;align-items:center}
.dots{display:flex;justify-content:center;gap:2px}
.dot{width:24px;height:24px;display:grid;place-items:center}
.dot i{display:block;width:6px;height:6px;border-radius:6px;background:var(--surface-border-neutral-moderate);transition:width .3s,background .3s}
.dot.on i{width:18px;background:var(--brand-primary-600)}

/* brands strip inside the leaderboard card: logo-only square tiles */
.bstrip{padding-top:var(--spacing-16px);border-top:var(--border-width-1px) dashed var(--surface-border-neutral-moderate)}
.bstrip-h{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8px)}
.bstrip-s{margin-top:var(--spacing-6px);font-size:13px;line-height:19px;color:var(--surface-text-neutral-solid)}
.bstrip-s b{color:var(--surface-text-neutral-solid-shade)}
.bstrip .car{margin:0 calc(-1 * var(--spacing-16px));padding:var(--spacing-16px) 0 var(--spacing-8px)}
.bstrip .car-track{gap:12px;padding-left:var(--spacing-16px)}
.ltile{position:relative;flex:0 0 76px;width:76px;height:76px;border-radius:var(--border-radius-20px);background:var(--surface-bg-whites-white);border:var(--border-width-1px) solid var(--surface-border-neutral-subtle);display:grid;place-items:center;transition:transform .25s,border-color .2s,box-shadow .25s}
.ltile img{width:60px;height:60px;border-radius:var(--border-radius-12px);object-fit:contain}
.ltile:hover{border-color:var(--surface-border-brand-primary-intense)}
.ltile.focus{border-color:var(--raw-yellow-400);box-shadow:0 0 0 3px var(--raw-yellow-100),0 10px 20px -14px rgba(161,97,7,.6);transform:translateY(-2px)}
.ltile-x{position:absolute;right:-6px;top:-6px;height:20px;padding:0 6px;border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;line-height:20px;box-shadow:0 0 0 2px var(--surface-bg-whites-white)}

/* ---------- how to earn ---------- */
.earn{padding:var(--spacing-20px) var(--spacing-16px);display:flex;flex-direction:column;gap:var(--spacing-16px)}
.earn-h{display:flex;align-items:center;justify-content:space-between}
.earn-t{font-size:18px;line-height:24px;font-weight:700}
.link{height:44px;display:inline-flex;align-items:center;gap:2px;font-size:14px;line-height:20px;font-weight:700;color:var(--surface-text-brand-primary-solid) !important}
.earn-row{display:flex;align-items:center;gap:var(--spacing-12px);font-size:15px;line-height:21px;color:var(--surface-text-neutral-solid)}
.earn-row b{color:var(--surface-text-neutral-solid-shade);font-weight:600}
.chip{flex:none;min-width:48px;height:40px;padding:0 var(--spacing-8px);border-radius:var(--border-radius-12px);display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;line-height:1;background:var(--surface-bg-brand-primary-moderate);color:var(--surface-text-brand-primary-solid)}
.chip.gold{background:var(--raw-yellow-100);color:var(--raw-yellow-800)}
.chip.top{background:var(--surface-bg-brand-primary-solid-shade);color:var(--surface-text-whites-white);font-size:13px}

/* ---------- capture dock ---------- */
.dock{padding:var(--spacing-12px) var(--spacing-16px) var(--spacing-24px);background:var(--surface-bg-whites-intense);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:var(--border-width-1px) solid var(--surface-border-neutral-subtle)}
.cap{position:relative;display:flex;align-items:center;gap:var(--spacing-12px);height:64px;padding:0 var(--spacing-16px) 0 var(--spacing-8px);border-radius:var(--border-radius-button-pill);background:var(--interactive-bg-brand-primary-primary-shade);color:var(--surface-text-whites-white) !important;box-shadow:0 14px 28px -12px rgba(62,25,176,.65);overflow:hidden;transition:transform .12s,background .2s}
.cap:hover{background:var(--interactive-bg-brand-primary-pressed)}
.cap:active{transform:scale(.98)}
.cap::after{content:'';position:absolute;top:0;bottom:0;width:35%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:shine 3.4s ease-in-out infinite}
.cap-ic{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-bg-whites-white);color:var(--surface-text-brand-primary-solid)}
.cap-ic::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--raw-yellow-400);animation:ring 2s ease-out infinite}
.cap-t{flex:1;min-width:0;display:flex;flex-direction:column}
.cap-t b{font-size:17px;line-height:22px}
.cap-t span{font-size:13px;line-height:18px;color:var(--surface-text-whites-intense)}
.cap-pts{flex:none;height:32px;padding:0 var(--spacing-10px);border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;line-height:1}

/* ---------- leaderboard ---------- */
.tabs{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-radius:var(--border-radius-button-pill);background:var(--surface-bg-neutral-moderate)}
.tab-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--border-radius-button-pill);background:var(--interactive-bg-brand-primary-primary-shade);box-shadow:0 6px 14px -6px rgba(78,44,194,.7);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.tab{position:relative;z-index:1;height:44px;border-radius:var(--border-radius-button-pill);font-weight:700;font-size:15px;line-height:20px;text-align:center;color:var(--surface-text-neutral-solid);transition:color .25s}
.tab.on{color:var(--surface-text-whites-white)}
.lb-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-8px);margin-top:var(--spacing-16px)}
.lb-pod{padding:var(--spacing-8px) var(--spacing-16px) 0;margin-top:var(--spacing-16px);background:var(--surface-bg-brand-primary-subtle);border-radius:var(--border-radius-24px) var(--border-radius-24px) 0 0}
.list{background:var(--surface-bg-whites-white);border:var(--border-width-1px) solid var(--surface-border-neutral-subtle);border-top:0;border-radius:0 0 var(--border-radius-24px) var(--border-radius-24px);padding:var(--spacing-4px) 0;overflow:hidden}
.row{display:flex;align-items:center;gap:var(--spacing-12px);min-height:64px;padding:var(--spacing-8px) var(--spacing-16px);animation:fadeUp .4s ease both}
.row + .row{border-top:var(--border-width-1px) solid var(--surface-border-neutral-subtle)}
.row--you{background:var(--surface-bg-brand-primary-subtle);box-shadow:inset 3px 0 0 var(--surface-border-brand-primary-solid)}
.row-r{flex:none;width:30px;font-size:15px;line-height:20px;font-weight:700;color:var(--surface-text-neutral-solid)}
.row-av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.row-n{flex:1;min-width:0;font-size:15px;line-height:20px;font-weight:600}
.row--you .row-n{color:var(--surface-text-brand-primary-solid)}
.row-p{flex:none;font-size:15px;line-height:20px;font-weight:700}
.gap{display:flex;justify-content:center;gap:5px;padding:var(--spacing-12px) 0}
.gap i{width:5px;height:5px;border-radius:50%;background:var(--surface-border-neutral-moderate)}
.youbar{position:absolute;left:12px;right:12px;bottom:16px;display:flex;align-items:center;gap:var(--spacing-12px);padding:var(--spacing-12px);border-radius:var(--border-radius-20px);background:var(--surface-bg-brand-primary-solid-shade);color:var(--surface-text-whites-white) !important;box-shadow:0 14px 28px -10px rgba(49,15,143,.6);z-index:4}
.youbar img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface-bg-whites-white)}
.youbar-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--surface-text-whites-intense)}
.youbar-t b{font-size:16px;line-height:22px;color:var(--surface-text-whites-white)}
.youbar-r{flex:none;font-size:22px;line-height:28px;font-weight:700}

/* ---------- points history ---------- */
.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-12px)}
.pstat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--spacing-2px);padding:var(--spacing-16px);border-radius:var(--border-radius-20px);border:var(--border-width-2px) solid transparent;text-align:left;transition:background .25s,color .25s,transform .15s,box-shadow .25s}
.pstat:active{transform:scale(.97)}
.pstat-l{font-size:13px;line-height:18px;font-weight:600}
.pstat-r{font-size:30px;line-height:36px;font-weight:700}
.pstat-p{font-size:13px;line-height:18px;font-weight:600}
.pstat-ic{position:absolute;right:-6px;bottom:-8px;opacity:.18}
.pstat--wk{background:var(--surface-bg-brand-primary-subtle);border-color:var(--surface-border-brand-primary-moderate);color:var(--surface-text-brand-primary-solid-shade)}
.pstat--wk .pstat-r{color:var(--surface-text-brand-primary-solid)}
.pstat--wk.on{background:var(--surface-bg-brand-primary-solid-shade);border-color:var(--surface-bg-brand-primary-solid-shade);color:var(--surface-text-whites-white);box-shadow:0 10px 22px -10px rgba(62,25,176,.7)}
.pstat--wk.on .pstat-r{color:var(--raw-yellow-300)}
.pstat--mo{background:var(--interactive-bg-info-secondary);border-color:var(--feedback-border-info-subtle);color:var(--interactive-bg-info-pressed)}
.pstat--mo .pstat-r{color:var(--interactive-text-info-primary)}
.pstat--mo.on{background:var(--interactive-bg-info-pressed);border-color:var(--interactive-bg-info-pressed);color:var(--surface-text-whites-white);box-shadow:0 10px 22px -10px rgba(29,99,99,.7)}
.pstat--mo.on .pstat-r{color:var(--surface-text-whites-white)}
.flow-h{font-size:18px;line-height:24px;font-weight:700;margin-bottom:var(--spacing-24px)}
.flow-row{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:start}
.flow-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-10px)}
.flow-node .chip{width:52px;height:52px;border-radius:50%;font-size:18px;animation:popIn .5s cubic-bezier(.3,1.6,.5,1) both}
.flow-node.n1 .chip{animation-delay:.15s;box-shadow:0 0 0 6px var(--surface-bg-brand-primary-moderate)}
.flow-node.n2 .chip{animation-delay:1.25s;box-shadow:0 0 0 6px var(--raw-yellow-50)}
.flow-l{display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--surface-text-neutral-solid);animation:fadeUp .4s ease both}
.flow-l b{font-size:14px;line-height:20px;font-weight:600;color:var(--surface-text-neutral-solid-shade)}
.n1 .flow-l{animation-delay:.35s}.n2 .flow-l{animation-delay:1.45s}
.flow-line{position:relative;height:4px;margin-top:24px;border-radius:4px;background:var(--surface-bg-neutral-moderate)}
.flow-fill{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,var(--brand-primary-500),var(--raw-yellow-500));transform-origin:left;animation:draw .7s cubic-bezier(.6,0,.3,1) .6s both}
.flow-line::after{content:'';position:absolute;right:-2px;top:50%;width:9px;height:9px;border-top:3px solid var(--raw-yellow-500);border-right:3px solid var(--raw-yellow-500);transform:translateY(-50%) rotate(45deg);animation:fade .2s ease 1.25s both}
.flow-x{position:absolute;left:50%;top:-32px;transform:translateX(-50%);height:24px;padding:0 8px;border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;line-height:24px;white-space:nowrap;animation:popX .45s cubic-bezier(.3,1.6,.5,1) .95s both}
.flow-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--raw-yellow-400);box-shadow:0 0 0 3px var(--surface-bg-neutral-subtle),0 0 10px var(--raw-yellow-500);opacity:0;animation:travel 1.8s ease-in-out 2s infinite}
.bills-h{padding:var(--spacing-20px) var(--spacing-16px) var(--spacing-12px)}
.total{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-12px) var(--spacing-16px);background:var(--surface-bg-neutral-subtle);font-size:14px;line-height:20px;font-weight:600;color:var(--surface-text-neutral-solid)}
.total b{font-size:18px;line-height:24px;color:var(--surface-text-neutral-solid-shade)}
.bill{display:flex;align-items:center;gap:var(--spacing-12px);padding:var(--spacing-12px) var(--spacing-16px);animation:fadeUp .35s ease both}
.bill + .bill{border-top:var(--border-width-1px) solid var(--surface-border-neutral-subtle)}
.bill-logo{flex:none;width:44px;height:44px;border-radius:50%;object-fit:contain;background:var(--surface-bg-whites-white);box-shadow:0 0 0 1px var(--surface-border-neutral-subtle)}
.bill-m{flex:1;display:flex;flex-direction:column;gap:var(--spacing-2px);min-width:0}
.bill-n{font-size:15px;line-height:20px;font-weight:600}
.bill-meta{font-size:12px;line-height:17px;color:var(--surface-text-neutral-solid)}
.bill-p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-4px)}
.bill-p b{font-size:17px;line-height:22px}
.tag-x{font-size:11px;font-weight:700;height:22px;line-height:22px;padding:0 7px;border-radius:6px;background:var(--raw-yellow-100);color:var(--raw-yellow-800);white-space:nowrap}

/* ---------- sheets ---------- */
.ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.scrim{position:absolute;inset:0;background:var(--surface-bg-blacks-moderate);animation:fade .25s ease both}
.sheet{position:relative;background:var(--surface-bg-whites-white);border-radius:var(--border-radius-24px) var(--border-radius-24px) 0 0;padding:var(--spacing-12px) var(--spacing-20px) var(--spacing-32px);animation:sheetUp .45s cubic-bezier(.2,.9,.25,1) both;overflow:hidden}
.grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--surface-border-neutral-moderate);margin:0 auto var(--spacing-8px)}
.sheet-x{position:absolute;right:8px;top:8px}
.st{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-10px);padding:var(--spacing-16px) var(--spacing-8px) var(--spacing-24px)}
.st-ic{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--raw-yellow-50);box-shadow:0 0 0 8px var(--raw-yellow-50),0 0 0 9px var(--raw-yellow-200);margin-bottom:var(--spacing-12px);animation:popIn .5s cubic-bezier(.3,1.6,.5,1) .2s both}
.st-title{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.st-sub{font-size:15px;line-height:22px;color:var(--surface-text-neutral-solid)}
.sl{display:flex;flex-direction:column;gap:var(--spacing-8px);margin-bottom:var(--spacing-24px)}
.sl-row{display:flex;align-items:center;gap:var(--spacing-12px);padding:var(--spacing-12px);border-radius:var(--border-radius-16px);background:var(--surface-bg-neutral-subtle);animation:fadeUp .4s ease both}
.sl-row:nth-child(1){animation-delay:.25s}.sl-row:nth-child(2){animation-delay:.35s}.sl-row:nth-child(3){animation-delay:.45s}
.sl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-2px);font-size:15px;line-height:20px;font-weight:600}
.sl-t small{font-size:13px;line-height:18px;font-weight:500;color:var(--surface-text-neutral-solid)}
.brand-big{width:84px;height:84px;border-radius:50%;background:var(--surface-bg-whites-white);box-shadow:0 0 0 1px var(--surface-border-neutral-subtle),0 0 0 8px var(--raw-yellow-50);display:grid;place-items:center;margin-bottom:var(--spacing-8px);animation:popIn .5s cubic-bezier(.3,1.6,.5,1) .2s both}
.brand-big img{width:72px;height:72px;border-radius:50%;object-fit:contain}
.math{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-8px);margin-bottom:var(--spacing-24px)}
.math div{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2px);padding:var(--spacing-16px) var(--spacing-12px);border-radius:var(--border-radius-16px);background:var(--surface-bg-neutral-subtle);font-size:13px;line-height:18px;font-weight:600;color:var(--surface-text-neutral-solid)}
.math div b{font-size:28px;line-height:34px;color:var(--surface-text-neutral-solid-shade)}
.math div.hl{background:var(--raw-yellow-50);box-shadow:inset 0 0 0 1px var(--raw-yellow-200)}
.math div.hl b{color:var(--raw-yellow-800)}
.win-amt{font-size:60px;line-height:68px;font-weight:700;color:var(--surface-text-brand-primary-solid)}
.badge{display:inline-flex;align-items:center;height:30px;padding:0 var(--spacing-12px);border-radius:var(--border-radius-button-pill);background:var(--raw-yellow-400);color:var(--raw-yellow-800);font-size:13px;line-height:18px;font-weight:700}
.conf{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:confetti 2.6s linear infinite}
.ghost{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;gap:16px}
.ghost i{display:block;border-radius:24px;background:var(--surface-bg-whites-white);border:1px solid var(--surface-border-neutral-subtle)}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,178,106,.5)}70%{box-shadow:0 0 0 7px rgba(23,178,106,0)}100%{box-shadow:0 0 0 0 rgba(23,178,106,0)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes crownIn{from{opacity:0;transform:translateY(8px) scale(.4)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(560px) rotate(540deg);opacity:0}}
@keyframes popIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes popX{from{opacity:0;transform:translateX(-50%) scale(.3)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes travel{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@media (prefers-reduced-motion: reduce){.nd *{animation:none !important;transition:none !important}}

/* ---------- sections ---------- */
/* ---- from brands artboard ---- */
.bd-mq{overflow:hidden;padding:14px 0 18px 16px}
.bd-track{display:flex;width:max-content;animation:bdMarquee 18s linear infinite}
.bd-mq:hover .bd-track{animation-play-state:paused}
.bd-tile{position:relative;flex:none;width:96px;height:112px;margin-right:12px;box-sizing:border-box;border-radius:20px;background:#ffffff;border:1px solid #e6eaf0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px;text-decoration:none;color:#1a1f26;transition:transform .2s,border-color .2s}
.bd-tile:hover{transform:translateY(-3px);border-color:#fdd633}
.bd-logo{width:56px;height:56px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#ffffff}
.bd-logo img{display:block;width:52px;height:52px;object-fit:contain}
.bd-n{max-width:100%;font-family:'Host Grotesk',system-ui,sans-serif;font-size:12px;line-height:15px;font-weight:600;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd-x{position:absolute;right:-6px;top:-6px;height:20px;padding:0 6px;border-radius:1000px;background:#fdd633;color:#854d0e;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;line-height:20px;box-shadow:0 0 0 2px #ffffff}
.bh{padding:16px;background:#fefbe8;border-bottom:1px solid #feee95}
.bh-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bh-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#854d0e}
.bh-timer{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:1000px;background:#ffffff;color:#4a5464;font-size:12px;line-height:16px;font-weight:700;box-shadow:inset 0 0 0 1px #feee95}
.bh-hero{display:flex;align-items:center;gap:12px;margin-top:10px}
.bh-big{font-family:'Space Grotesk',sans-serif;font-size:56px;line-height:56px;font-weight:700;letter-spacing:-.03em;color:#4e2cc2;animation:bhPulse 2.4s ease-in-out infinite;transform-origin:left center}
.bh-hero-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.bh-hero-t b{font-size:18px;line-height:24px;font-weight:700;color:#1a1f26}
.bh-hero-t span{font-size:14px;line-height:20px;color:#4a5464}
.bh-eq{display:flex;align-items:center;gap:8px;margin-top:14px}
.bh-pill{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:12px;font-size:13px;line-height:16px;font-weight:600;white-space:nowrap}
.bh-pill b{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:16px;font-weight:700}
.bh-pill.dim{background:#ffffff;color:#4a5464;box-shadow:inset 0 0 0 1px #e6eaf0}
.bh-pill.hot{background:#4e2cc2;color:#ffffff;box-shadow:0 8px 16px -10px rgba(78,44,194,.8)}
.bh-pill.hot b{color:#fde272}
.bh-arrow{flex:none;color:#eea807;animation:bhNudge 1.6s ease-in-out infinite}
@keyframes bhPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bhNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes bdMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.bd-track{animation:none}}

/* ---- from earn artboard ---- */
.eb{position:relative;overflow:hidden;border-radius:24px;background:var(--surface-bg-brand-primary-solid-shade,#3e19b0);color:#ffffff;padding:16px 16px 14px;min-height:176px;box-shadow:0 16px 32px -18px rgba(62,25,176,.8)}
.eb-blob{position:absolute;border-radius:50%;pointer-events:none}
.eb-blob.a{width:180px;height:180px;right:-50px;top:-60px;background:var(--brand-primary-500,#5c4bd6);animation:ebDrift 7s ease-in-out infinite}
.eb-blob.b{width:110px;height:110px;right:70px;bottom:-60px;background:var(--brand-primary-600,#4e2cc2);animation:ebDrift 9s ease-in-out infinite reverse}
.eb-segs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.eb-seg{height:28px;display:flex;align-items:center;border:0;background:none;padding:0;cursor:pointer}
.eb-seg i{position:relative;display:block;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden}
.eb-seg i b{position:absolute;inset:0;background:#ffffff;transform-origin:left;transform:scaleX(0)}
.eb-seg.done i b{transform:scaleX(1)}
.eb-seg.on i b{animation:ebFill var(--eb-dur,3.2s) linear forwards}
.eb-eyebrow{position:relative;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--surface-text-whites-intense,#ffffffcc);margin-top:6px}
.eb-slide{position:relative;display:flex;align-items:center;gap:16px;margin-top:12px;min-height:72px;animation:ebIn .5s cubic-bezier(.2,.9,.3,1) both}
.eb-chip{flex:none;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;line-height:1;background:#ffffff;color:var(--surface-text-brand-primary-solid,#4e2cc2);animation:ebPop .55s cubic-bezier(.3,1.6,.5,1) .1s both}
.eb-chip.gold{background:var(--raw-yellow-400,#fdd633);color:var(--raw-yellow-800,#854d0e)}
.eb-chip.top{background:var(--raw-yellow-100,#fef7c3)}
.eb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eb-t b{font-size:20px;line-height:26px}
.eb-t span{font-size:14px;line-height:20px;color:var(--surface-text-whites-intense,#ffffffcc)}
.eb-foot{position:relative;display:flex;justify-content:flex-end;margin-top:4px}
.eb-link{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 12px;border-radius:1000px;background:rgba(255,255,255,.14);color:#ffffff !important;font-size:13px;line-height:18px;font-weight:700}
.eb-link:hover{background:rgba(255,255,255,.24)}
.eb-spark{position:absolute;animation:twinkle 2.4s ease-in-out infinite}
@keyframes ebFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ebIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes ebPop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes ebDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,10px)}}
@media (prefers-reduced-motion: reduce){.eb *{animation:none !important}.eb-seg.on i b{transform:scaleX(1)}}

/* ---- from leaderboard artboard ---- */
.podium .pod{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.podium .pod > *:not(.pod-rays){position:relative;z-index:1}
.pod-av{transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.pod:hover .pod-av{transform:translateY(-3px)}
.pod:active .pod-av{transform:scale(.92)}
.pod--sel .pod-av{transform:scale(1.08);animation:selRing 1.6s ease-out infinite}
.pod--sel .pod-name{color:var(--surface-text-brand-primary-solid)}
.pod--sel .pod-block{filter:brightness(1.15) saturate(1.1)}
.pod-rays{display:none}
.pod--1 .pod-rays{display:block;position:absolute;z-index:0;top:-14px;left:50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:repeating-conic-gradient(rgba(255,196,0,.28) 0 9deg,transparent 9deg 30deg);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);animation:raysSpin 16s linear infinite, fade .8s ease .6s both}
.pod--1 .pod-crown{animation:crownIn .6s cubic-bezier(.3,1.6,.5,1) .55s both, crownFloat 2.6s ease-in-out 1.3s infinite}
.pod-block{position:relative;overflow:hidden}
.pod-block::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 3.2s ease-in-out 1.4s infinite}
.pod--2 .pod-block::after{animation-delay:1.8s}.pod--3 .pod-block::after{animation-delay:2.2s}
.pd-wrap{padding:var(--spacing-12px) 0 var(--spacing-16px)}
.pd{background:var(--surface-bg-whites-white);border:1px solid var(--surface-border-brand-primary-moderate);border-radius:var(--border-radius-20px);padding:var(--spacing-12px);box-shadow:0 10px 24px -16px rgba(62,25,176,.5)}
.pd-a{animation:pdInA .4s cubic-bezier(.2,.9,.3,1.2) both}.pd-b{animation:pdInB .4s cubic-bezier(.2,.9,.3,1.2) both}
.pd-top{display:flex;align-items:center;gap:var(--spacing-10px)}
.pd-av{width:40px;height:40px;border-radius:50%;object-fit:cover}
.pd-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--surface-text-neutral-solid)}
.pd-t b{font-size:16px;line-height:22px;color:var(--surface-text-neutral-solid-shade)}
.pd-medal{height:28px;min-width:40px;padding:0 8px;border-radius:1000px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;animation:popIn .45s cubic-bezier(.3,1.6,.5,1) .1s both}
.pd-medal.m1{background:var(--raw-yellow-400);color:var(--raw-yellow-800)}
.pd-medal.m2{background:#e6eaf0;color:#2a313d}
.pd-medal.m3{background:var(--raw-orange-200);color:#933719}
.pd-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--surface-text-neutral-solid)}
.pd-x:hover{background:var(--interactive-bg-neutral-quaternary)}
.pd-bar{height:8px;border-radius:8px;background:var(--surface-bg-neutral-moderate);margin-top:var(--spacing-12px);overflow:hidden}
.pd-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand-primary-500),var(--raw-yellow-500));animation:barGrow .7s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}
.pd-note{margin-top:var(--spacing-8px);font-size:13px;line-height:19px;color:var(--surface-text-neutral-solid)}
.pd-note b{color:var(--surface-text-neutral-solid-shade)}
.pd-hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--surface-text-brand-primary-solid);animation:hintBob 2.4s ease-in-out infinite}
@keyframes selRing{0%{box-shadow:0 0 0 3px var(--surface-border-brand-primary-solid),0 0 0 3px rgba(78,44,194,.35)}100%{box-shadow:0 0 0 3px var(--surface-border-brand-primary-solid),0 0 0 14px rgba(78,44,194,0)}}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@keyframes crownFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes pdInA{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pdInB{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ---------- page shell, states, typography ---------- */
/* Prototype shell around the Leaderboard 36 Interactive design: phone-width column, screens, sheets, preview strip */
html, body { margin: 0; background: #e6e8f0; }
.pv { position: sticky; top: 0; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 8px 12px; background: #1a1f26; color: #fff; font: 500 13px/18px 'Host Grotesk', system-ui, sans-serif; }
.pv-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.pv a { color: #d7d7fa; text-decoration: underline; text-underline-offset: 3px; }
.pv a.cur { color: #fdd633; }
.pv-sel select { margin-left: 6px; font: inherit; padding: 2px 6px; border-radius: 6px; }

.proto { position: relative; max-width: 430px; min-height: calc(100vh - 40px); margin: 0 auto; background: var(--surface-bg-neutral-subtle); box-shadow: 0 0 0 1px rgba(16,24,40,.06); overflow-x: hidden; }
.proto a { text-decoration: none; }
.screen { width: auto; display: none; overflow: visible; background: transparent; }
.screen.on { display: block; animation: scrIn .3s ease both; }
@keyframes scrIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* rank state: preview switch */
.proto[data-rank="out"] .in-only, .proto[data-rank="in"] .out-only { display: none; }

/* leaderboard: your standing stays pinned while you scroll */
.youbar { position: fixed; left: 50%; right: auto; transform: translateX(-50%); width: min(406px, calc(100% - 24px)); bottom: 16px; z-index: 20; }
.screen:not(.on) .youbar { display: none; }

/* sheets: one fixed layer over the current screen */
.layer { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; justify-content: flex-end; max-width: 430px; margin: 0 auto; }
.layer.on { display: flex; }
.layer .scrim { position: absolute; inset: 0; }
.layer .sheet { position: relative; max-height: 92vh; overflow-y: auto; }

/* brand marquee tiles come from the brands artboard; local logos fill the tile */
.bd-logo img { width: 56px; height: 56px; object-fit: cover; border-radius: 14px; }
.brand-big img { object-fit: cover; }

/* small toast for actions that would open native screens */
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 999px; background: #1a1f26; color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== type, matched to the live Nudge app (Rewards Tracker, Refer screens) =====
   Host Grotesk for all text and small numbers; Space Grotesk only for big display numerals */
.proto, .proto * { font-family: 'Host Grotesk', system-ui, sans-serif; }
.proto .num { font-family: 'Host Grotesk', system-ui, sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.proto .race-rank, .proto .bh-big, .proto .pod-block, .proto .youbar-r, .proto .pstat-r, .proto .win-amt,
.proto .eb-chip, .proto .math b, .proto .chip, .proto .pd-medal, .proto .lh-num {
  font-family: 'Space Grotesk', sans-serif !important; font-weight: 700; letter-spacing: -.01em;
}
.proto .race-rank { font-size: 28px; line-height: 34px; }
/* headings: semibold like "Bring your friends along"; supporting text regular like "tracked from" */
.proto .lhead-title { font-weight: 600; letter-spacing: -.02em; }
.proto .h-xl, .proto .st-title, .proto .flow-h, .proto .eb-t b, .proto .bh-hero-t b { font-weight: 600; }
.proto .bar-t { font-weight: 500; }
.proto .lhead-sub, .proto .hint, .proto .st-sub, .proto .eb-t span, .proto .bh-hero-t span, .proto .race-l, .proto .youbar-t span, .proto .bill-meta, .proto .sl-t small { font-weight: 400; }


/* ===== heading length + ways-to-earn stepper ===== */
.proto .lhead-title { font-size: 32px; line-height: 38px; }
.es-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.es-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--surface-text-neutral-solid-shade); }
.es-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--surface-text-brand-primary-solid) !important; }
.es { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.es-line { position: absolute; left: 7px; top: 48px; bottom: 48px; width: 2px; background-image: linear-gradient(var(--surface-border-neutral-moderate) 50%, transparent 0); background-size: 2px 6px; }
.es-line i { position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 2px; background: linear-gradient(var(--brand-primary-300, #b4b1f0), var(--surface-bg-brand-primary-solid)); transition: height 1.4s cubic-bezier(.4,0,.2,1) .2s; }
.es.in .es-line i { height: 100%; }
.es-step { position: relative; }
.es-dot { position: absolute; left: -28px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--surface-bg-whites-white); border: 2px solid var(--surface-border-neutral-moderate); box-sizing: border-box; transition: background .3s, border-color .3s, transform .3s; transition-delay: calc(.25s + var(--i) * .55s); }
.es.in .es-dot { border-color: var(--surface-bg-brand-primary-solid); background: var(--surface-bg-brand-primary-solid); box-shadow: 0 0 0 4px var(--surface-bg-brand-primary-subtle); }
.es.in .es-step:nth-child(2) .es-dot { background: var(--brand-primary-400, #8982e1); border-color: var(--brand-primary-400, #8982e1); }
.es.in .es-step:nth-child(3) .es-dot { background: var(--brand-primary-500, #5c4bd6); border-color: var(--brand-primary-500, #5c4bd6); }
.es.in .es-step:nth-child(4) .es-dot { background: var(--surface-bg-brand-primary-solid-shade); border-color: var(--surface-bg-brand-primary-solid-shade); }
.es-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 12px; border-radius: 20px; background: var(--surface-bg-whites-white); border: 1px solid var(--surface-border-neutral-moderate); opacity: .55; transform: translateY(6px); transition: opacity .4s, transform .4s, border-color .4s; transition-delay: calc(.2s + var(--i) * .55s); }
.es.in .es-card { opacity: 1; transform: none; }
.es-step:nth-child(4) .es-card { border-color: var(--raw-yellow-300, #fde272); background: linear-gradient(90deg, var(--raw-yellow-25, #fefdf0), var(--surface-bg-whites-white)); }
.es-art { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-bg-brand-primary-subtle); }
.es-step:nth-child(4) .es-art { background: var(--raw-yellow-50, #fefbe8); }
.es-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.es-n { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--surface-text-brand-primary-solid); }
.es-t b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--surface-text-neutral-solid-shade); }
.es-t > span:last-child { font-size: 13px; line-height: 19px; font-weight: 400; color: var(--surface-text-neutral-solid); }
.es-t > span:last-child b { font-size: inherit; line-height: inherit; color: var(--surface-text-neutral-solid-shade); }
@media (prefers-reduced-motion: reduce) { .es-line i, .es-dot, .es-card { transition: none; } }


/* ===== ways to earn and leaderboard card animations ===== */
/* ways to earn: intro animation (line draws, a light travels down it, dots pop, cards slide in) */
.es-step .es-card { transform: translateX(24px); opacity: 0; transition: opacity .45s, transform .55s cubic-bezier(.2,.9,.3,1.2); transition-delay: calc(.25s + var(--i) * .45s); }
.es.in .es-step .es-card { transform: none; opacity: 1; }
.es-dot { transform: scale(.4); transition: transform .45s cubic-bezier(.3,1.8,.5,1), background .3s, border-color .3s; transition-delay: calc(.2s + var(--i) * .45s); }
.es.in .es-dot { transform: scale(1); }
.es-line i { transition: height 1.3s cubic-bezier(.4,0,.2,1) .2s; }
.es-line em { position: absolute; left: -4px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--surface-bg-brand-primary-solid), 0 0 14px 4px rgba(92,75,214,.55); opacity: 0; }
.es.in .es-line em { animation: esTravel 1.3s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes esTravel { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
.es-art svg { transform: scale(.5) rotate(-12deg); opacity: 0; transition: transform .5s cubic-bezier(.3,1.7,.5,1), opacity .3s; transition-delay: calc(.45s + var(--i) * .45s); }
.es.in .es-art svg { transform: none; opacity: 1; }
.es-step:nth-child(4) .es-card { border-color: var(--raw-yellow-300, #fde272); background: linear-gradient(90deg, var(--raw-yellow-25, #fefdf0), var(--surface-bg-whites-white)); }
.es-pts { flex: none; display: flex; align-items: baseline; gap: 1px; padding: 6px 10px; border-radius: 999px; background: var(--surface-bg-brand-primary-subtle); color: var(--surface-text-brand-primary-solid); }
.es-pts b { font-family: 'Space Grotesk', sans-serif !important; font-size: 16px; line-height: 20px; font-weight: 700; }
.es-pts small { font-size: 11px; font-weight: 600; }
.es-pts--x { background: var(--raw-yellow-400, #fdd633); color: var(--raw-yellow-800, #854d0e); }
.es-card { padding-right: 12px; }

/* home leaderboard card: a lit stage */
[data-screen="home"] .podtop { position: relative; overflow: hidden; background: radial-gradient(110% 70% at 50% 78%, #ffffff 0%, var(--surface-bg-brand-primary-subtle) 48%, #e2defb 100%); }
[data-screen="home"] .podtop::before, [data-screen="home"] .podtop::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 2.5px at 12% 38%, #fdd633 98%, transparent), radial-gradient(circle 2px at 24% 62%, #8982e1 98%, transparent), radial-gradient(circle 3px at 84% 34%, #fdd633 98%, transparent), radial-gradient(circle 2px at 92% 60%, #b4b1f0 98%, transparent), radial-gradient(circle 2px at 68% 22%, #ff8640 98%, transparent), radial-gradient(circle 2.5px at 36% 26%, #b4b1f0 98%, transparent);
  animation: twinkle 2.6s ease-in-out infinite; }
[data-screen="home"] .podtop::after { transform: translate(18px, 24px) scale(.8); animation-delay: 1.3s; }
[data-screen="home"] .podtop > * { position: relative; z-index: 1; }
[data-screen="home"] .pod-av { animation: avPop .55s cubic-bezier(.3,1.7,.5,1) both; }
[data-screen="home"] .pod--2 .pod-av { animation-delay: .5s; } [data-screen="home"] .pod--1 .pod-av { animation-delay: .75s; } [data-screen="home"] .pod--3 .pod-av { animation-delay: .62s; }
[data-screen="home"] .pod-name, [data-screen="home"] .pod-pts { animation: fadeUp .4s ease both; animation-delay: .9s; }
[data-screen="home"] .pod--1 .pod-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 3px var(--raw-yellow-400, #fdd633); animation: goldRing 2.2s ease-out 1.4s infinite; }
[data-screen="home"] .pod--1 .pod-rays { width: 170px; height: 170px; margin-left: -85px; top: -26px; }
@keyframes avPop { from { opacity: 0; transform: translateY(14px) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes goldRing { 0% { box-shadow: 0 0 0 3px rgba(253,214,51,.9); } 100% { box-shadow: 0 0 0 16px rgba(253,214,51,0); } }
[data-screen="home"] .prize { animation: prizeWiggle 4s ease-in-out 2s infinite; transform-origin: left center; }
@keyframes prizeWiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-2deg) scale(1.03); } 96% { transform: rotate(2deg) scale(1.03); } }

/* leaderboard page: your rank runs down the list */
#lb-list { position: relative; }
.row-ghost { position: absolute; left: 0; right: 0; z-index: 5; background: var(--surface-bg-brand-primary-solid) !important; color: #fff; box-shadow: 0 14px 28px -12px rgba(62,25,176,.7) !important; border-radius: 16px; transform-origin: center; animation: none !important; }
.row-ghost .row-n, .row-ghost .row-r, .row-ghost .row-p { color: #fff !important; }
.row-ghost .row-r { font-family: 'Space Grotesk', sans-serif !important; font-size: 18px; }
.row-ghost.row-land { transition: transform .35s, opacity .35s; opacity: 0; }
.row-wait { visibility: hidden; }
.row-arrive { animation: rowArrive .9s ease both !important; }
@keyframes rowArrive { 0% { background: var(--brand-primary-200, #d7d7fa); transform: scale(1.02); } 100% { transform: none; } }


/* ===== paged leaderboard ===== */
.lb-more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 14px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--surface-text-neutral-solid); border-top: 1px solid var(--surface-border-neutral-subtle); }
.lb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface-border-brand-primary-intense, #b4b1f0); border-top-color: var(--surface-bg-brand-primary-solid); display: none; }
.lb-more.busy .lb-spin { display: block; animation: lbSpin .7s linear infinite; }
@keyframes lbSpin { to { transform: rotate(360deg); } }
.lb-end { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 18px 0 16px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--surface-text-brand-primary-solid); border-top: 1px solid var(--surface-border-neutral-subtle); }
.row-new { animation: fadeUp .45s ease both; }
.gap.lb-pin { border-top: 1px solid var(--surface-border-neutral-subtle); }

/* ===== repo: multi-page shell, page states, avatar fallback ===== */
.proto { min-height: 100vh; }
.screen.on { animation: none; }
.av-ini { display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-bg-brand-primary-moderate, #eaeafc); color: var(--surface-text-brand-primary-solid, #4e2cc2); font-weight: 700; font-size: 16px; }
.pod-av .av-ini { width: 100%; height: 100%; font-size: 22px; }
.row-av.av-ini, .av40.av-ini { width: 40px; height: 40px; flex: none; }
.pd-av.av-ini { width: 40px; height: 40px; }
.bill-logo.av-ini { border-radius: 12px; }
.pstate { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 64px 24px; text-align: center; font-size: 14px; line-height: 20px; color: var(--surface-text-neutral-solid); }
.pstate b { font-size: 18px; line-height: 24px; color: var(--surface-text-neutral-solid-shade); }
.pstate .btn { margin-top: 12px; width: auto; padding: 0 24px; }
body[data-state="loading"] .pstate-loading, body[data-state="error"] .pstate-error, body[data-state="auth"] .pstate-auth, body[data-state="empty"] .pstate-empty, body[data-state="unavailable"] .pstate-unavailable { display: flex; }
body[data-state="loading"] .screen, body[data-state="error"] .screen, body[data-state="auth"] .screen, body[data-state="empty"] .screen, body[data-state="unavailable"] .screen { display: none; }
.race-av { flex: none; display: inline-flex; }
.pstate-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: var(--surface-bg-brand-primary-subtle); }
.pstate-ic img { width: 36px; height: 36px; }
.pstate-loading { padding: 16px; align-items: stretch; gap: 16px; }
.pstate-loading i { display: block; height: 140px; border-radius: 24px; background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.pstate-loading i:first-child { height: 90px; } .pstate-loading i:nth-child(2) { height: 360px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- wiring for the real API (data states the prototype never had) ---------- */
[hidden] { display: none !important; }
.pod-empty { margin: 0; padding: 32px 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--surface-text-neutral-solid); }
.me-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-bg-brand-primary-moderate); color: var(--surface-text-brand-primary-solid); }
.av40.me-ic svg { width: 26px; height: 26px; }
.youbar-av { flex: none; display: inline-flex; }
.youbar-av img, .youbar-av .me-ic, .youbar-av .av-ini { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface-bg-whites-white); }
.youbar-av .me-ic svg { width: 26px; height: 26px; }
.youbar-av .av-ini { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-bg-brand-primary-moderate); color: var(--surface-text-brand-primary-solid); font-weight: 700; }

/* capture button: stays pinned to the bottom of the screen while home scrolls */
.cap-dock { position: fixed; left: 50%; bottom: 0; z-index: 30; transform: translateX(-50%); width: min(430px, 100%); box-sizing: border-box; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, transparent, var(--surface-bg-neutral-subtle) 40%); pointer-events: none; }
.cap-dock .cap { pointer-events: auto; }
.screen:not(.on) .cap-dock { display: none; }
[data-screen="home"] { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
.page-home .toast { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }