/* TJ Tracker — hand-tuned, app-first.
   Palette: brick orange, ink violet, cream, plus lemon / lilac / mint for the podium. */
:root{
  --brick:#FF5A2C; --brick-2:#FF7B4F; --brick-d:#E2441A;
  --ink:#22163F; --ink-2:#4A3D6B; --ink-3:#7D7398;
  --cream:#FFF4E8; --paper:#FFFFFF; --peach:#FFE3D1;
  --lemon:#FFD23F; --lilac:#B9A5FF; --mint:#54D3A7; --sky:#7CC6FF; --pink:#FF94BC;
  --r-xl:40px; --r-l:28px; --r-m:22px;
  --bouncy:cubic-bezier(.34,1.56,.64,1);
  --snappy:cubic-bezier(.3,1.3,.5,1);
  --out:cubic-bezier(.2,.9,.25,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{ --bouncy:linear(0,0.051,0.189,0.36,0.563,0.744,0.903,1.042,1.133,1.193,1.216,1.214,1.19,1.156,1.113,1.072,1.035,1.002,0.979,0.962,0.954,0.953,0.956,0.963,0.972,0.981,0.989,0.997,1.003,1.007,1.009,1.01,1.01,1.009,1.007,1.005,1.003,1.001,1,0.999,0.998,0.998,0.998,0.998,0.998,0.999,0.999,1,1); --snappy:linear(0,0.029,0.089,0.183,0.294,0.396,0.513,0.624,0.725,0.803,0.88,0.943,0.987,1.026,1.053,1.069,1.079,1.083,1.082,1.078,1.07,1.062,1.053,1.043,1.034,1.026,1.018,1.012,1.007,1.002,0.999,0.996,0.995,0.994,0.993,0.993,0.993,0.994,0.995,0.995,0.996,0.997,0.998,0.998,0.999,0.999,1,1,1); }
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--cream)}
body{font-family:'Figtree',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:520px;margin:0 auto;position:relative}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hidden{display:none!important}
.page{display:none}
.page.on{display:block}
.wrap{padding:0 16px 48px}

/* ---------- press + ripple (tactile feedback) ---------- */
.press{position:relative;overflow:hidden;transition:transform .5s var(--bouncy);transform-origin:center;touch-action:manipulation}
.press.down{transform:scale(.94);transition:transform .12s var(--out)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);
  animation:ripple .6s var(--out) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--brick);color:var(--cream);border-radius:0 0 var(--r-xl) var(--r-xl);
  padding:calc(18px + env(safe-area-inset-top)) 18px 22px;overflow:hidden;isolation:isolate}
.hero-squiggle{position:absolute;right:-30px;top:96px;width:300px;color:var(--brick-2);z-index:-1;opacity:.9}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:50px;height:50px;position:relative;flex-shrink:0;display:grid;place-items:center}
.brand-mark svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.brand-mark .cookie{fill:var(--lemon)}
.brand-mark span{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.03em}
@keyframes spin{to{transform:rotate(360deg)}}
.title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.subtitle{font-size:12.5px;font-weight:600;opacity:.85;margin-top:3px}
.live-chip{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:rgba(34,22,63,.18);
  font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--lemon);box-shadow:0 0 0 0 rgba(255,210,63,.7);animation:pulse 1.8s ease-out infinite}
.live-chip.snap .live-dot{background:var(--cream);animation:none}
.live-chip.loading .live-dot{animation:blink .5s ease-in-out infinite alternate}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,210,63,0)}100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}}
@keyframes blink{to{opacity:.25}}

.headline{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:46px;line-height:.92;letter-spacing:-.035em;
  margin:26px 0 22px;min-height:84px}
.headline .w{display:inline-block}

.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink);border-radius:26px;padding:5px;height:52px}
.seg button{position:relative;z-index:1;border-radius:21px;font-weight:800;font-size:14.5px;color:rgba(255,244,232,.75);transition:color .3s}
.seg button.on{color:var(--ink)}
.seg-pill{position:absolute;top:5px;bottom:5px;left:0;border-radius:21px;background:var(--lemon);
  transition:transform .7s var(--bouncy),width .7s var(--bouncy)}
.seg-pill.squish{animation:squish .45s var(--out)}
@keyframes squish{40%{scale:1.08 .86}}

/* ---------- podium ---------- */
.podium-wrap{padding:26px 14px 0;min-height:316px}
.skel .step{animation:breathe 1.2s ease-in-out infinite alternate;box-shadow:none}
.skel .r1 .step{background:#FFE9A6}.skel .r2 .step{background:#E2D9FF}.skel .r3 .step{background:#C4F0DF}
.skel .pod .av{background:#EADFD2;border-radius:50%}
.skel .bone{width:60%;height:12px;border-radius:6px;background:#EADFD2;margin:4px 0 12px}
@keyframes breathe{to{opacity:.55}}
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:8px;align-items:end}
.pod.press{overflow:visible}
.pod{display:flex;flex-direction:column;align-items:center;min-width:0;cursor:pointer;border-radius:var(--r-m)}
.pod .who{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%;padding:0 2px}
.av{position:relative;display:grid;place-items:center;flex-shrink:0}
.av svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.av span{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.pod .av{width:62px;height:62px;margin-bottom:8px}
.pod .av span{font-size:21px}
.pod.r1 .av{width:80px;height:80px}
.pod.r1 .av span{font-size:27px}
.pod .av > svg{animation:spin 24s linear infinite}
.pod.r2 .av > svg{animation-direction:reverse}
.crown{position:absolute;top:-22px;left:50%;width:34px;height:26px;margin-left:-17px;z-index:2;color:var(--lemon)}
.crown svg{position:static;animation:none;width:100%;height:100%;filter:drop-shadow(0 2px 0 var(--ink))}
.pod .name{font-weight:800;font-size:14px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pod .pts{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;margin:1px 0 8px;line-height:1.1}
.pod .pts small{font-family:'Figtree',sans-serif;font-size:11px;font-weight:700;color:var(--ink-3);margin-left:2px;letter-spacing:0}
.step{position:relative;overflow:hidden;width:100%;border-radius:24px 24px 10px 10px;display:flex;justify-content:center;padding-top:10px;transform-origin:bottom center;
  box-shadow:inset 0 -6px 0 rgba(34,22,63,.12)}
.step b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:44px;line-height:1;color:rgba(34,22,63,.82);letter-spacing:-.04em}
.pod.r1 .step{height:128px;background:var(--lemon)}
.pod.r2 .step{height:96px;background:var(--lilac)}
.pod.r3 .step{height:72px;background:var(--mint)}
.pod.r3 .step b{font-size:36px}
.floor{height:12px;border-radius:0 0 14px 14px;background:var(--ink);margin:0 -4px}

/* ---------- list ---------- */
.zero-note{margin:16px 2px 0;padding:12px 16px;border-radius:18px;background:var(--peach);font-weight:700;font-size:13.5px;color:var(--ink-2);
  display:flex;gap:10px;align-items:center}
.zero-note::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--brick);flex-shrink:0}
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 4px 12px}
.list-head h3,.history-head{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.list-head span{font-weight:700;font-size:13px;color:var(--ink-3)}
#board{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;background:var(--paper);border-radius:var(--r-l);cursor:pointer;
  box-shadow:0 2px 0 rgba(34,22,63,.07),0 10px 24px -14px rgba(34,22,63,.25)}
.row .rank{width:30px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;color:var(--ink-3);text-align:center;flex-shrink:0}
.row .av{width:46px;height:46px}
.row .av span{font-size:16px}
.row .info{flex:1;min-width:0}
.row .nm{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:7px;border-radius:4px;background:#F1E8DE;margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;width:0;transition:width 1s var(--bouncy)}
.row .val{text-align:right;flex-shrink:0;min-width:52px}
.row .val b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.row .val small{font-size:11px;font-weight:700;color:var(--ink-3)}

.empty{text-align:center;padding:40px 22px;background:var(--paper);border-radius:var(--r-l);color:var(--ink-2);font-weight:600;font-size:14.5px;line-height:1.5}
.empty .em-ic{width:56px;height:56px;margin:0 auto 12px;border-radius:20px;background:var(--peach);display:grid;place-items:center;color:var(--brick)}
.empty .em-ic svg{width:26px;height:26px}

/* ---------- how to earn ---------- */
.how{margin-top:26px;background:var(--lilac);border-radius:var(--r-l);padding:20px 18px 18px;position:relative;overflow:hidden}
.how::after{content:'';position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:44px;background:rgba(255,255,255,.22);transform:rotate(18deg)}
.how-ic{width:44px;height:44px;border-radius:16px;background:var(--ink);color:var(--lemon);display:grid;place-items:center;margin-bottom:12px}
.how-ic svg{width:22px;height:22px}
.how h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.how p{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink-2);position:relative;z-index:1}
.how b{color:var(--ink)}
.email-btn{margin:14px 0 10px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ink);color:var(--cream);border-radius:22px;height:52px;padding:0 8px 0 18px;font-weight:700;font-size:15px}
.email-btn > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-tag{background:var(--lemon);color:var(--ink);border-radius:16px;height:36px;padding:0 14px;display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0;transition:background .3s}
.copy-tag.done{background:var(--mint)}
.how small{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.45}
.foot{text-align:center;color:var(--ink-3);font-size:12px;font-weight:600;margin-top:22px}

/* ---------- profile ---------- */
.p-hero{--c:var(--lemon);background:var(--c);border-radius:0 0 var(--r-xl) var(--r-xl);padding:calc(14px + env(safe-area-inset-top)) 18px 28px;
  text-align:center;position:relative;overflow:hidden;isolation:isolate}
.p-hero::before{content:'';position:absolute;width:260px;height:260px;border-radius:90px;background:rgba(255,255,255,.25);left:-90px;bottom:-150px;transform:rotate(24deg);z-index:-1}
.p-top{display:flex;align-items:center;gap:12px}
.back-btn{width:46px;height:46px;border-radius:18px;background:var(--ink);color:var(--cream);display:grid;place-items:center}
.back-btn svg{width:22px;height:22px}
.p-eyebrow{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.p-avatar{width:118px;height:118px;margin:4px auto 14px;position:relative;display:grid;place-items:center}
.p-avatar svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 20s linear infinite}
.p-avatar .cookie{fill:var(--ink)}
.p-avatar span{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;color:var(--c);letter-spacing:-.03em}
.p-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.02;word-break:break-word}
.p-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.p-rank,.p-sub{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:16px;font-weight:800;font-size:13px}
.p-rank{background:var(--ink);color:var(--cream)}
.p-rank svg{width:14px;height:14px;color:var(--lemon)}
.p-sub{background:rgba(255,255,255,.55)}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 24px}
.stat{border-radius:var(--r-m);padding:16px 8px 14px;text-align:center}
.stat.s1{background:var(--lemon)}.stat.s2{background:var(--lilac)}.stat.s3{background:var(--mint)}
.stat .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
.stat .l{font-size:11.5px;font-weight:800;margin-top:6px;color:var(--ink-2)}
.history-head{margin:0 4px 12px}
#history{display:flex;flex-direction:column;gap:10px}
.hist{background:var(--paper);border-radius:var(--r-l);padding:14px 16px;display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 0 rgba(34,22,63,.07),0 10px 24px -14px rgba(34,22,63,.25)}
.hist .body{flex:1;min-width:0}
.hist .range{font-weight:800;font-size:15.5px}
.hist .sub{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-top:2px}
.days{display:flex;align-items:flex-end;gap:4px;height:30px;margin-top:9px}
.days i{flex:1;max-width:16px;border-radius:5px;background:var(--brick);min-height:4px;transform-origin:bottom;opacity:.9}
.days i.z{background:#F1E8DE}
.plus{background:var(--brick);color:var(--cream);border-radius:16px;padding:8px 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;flex-shrink:0;letter-spacing:-.02em}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:50;background:var(--ink);color:var(--cream);
  padding:14px 20px;border-radius:20px;font-weight:700;font-size:14.5px;max-width:88%;text-align:center;
  transform:translate(-50%,140px) scale(.8);transition:transform .7s var(--bouncy),visibility 0s linear .7s;visibility:hidden;box-shadow:0 18px 40px -12px rgba(34,22,63,.5)}
#toast.show{transform:translate(-50%,0) scale(1);visibility:visible;transition:transform .7s var(--bouncy),visibility 0s}

@media (min-width:521px){body{box-shadow:0 0 0 1px rgba(34,22,63,.06)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}