// ============================================================
// HUNGRY HOLE 3D — new screens: Leaderboard · Profile · Sticker Book
// ============================================================
const { useState: useStateNw, useRef: useRefNw } = React;

// ---- shared player identity (local only — no servers, no login) ----
// Creative cosmic-mascot avatars (no human faces). `img` → cut-out cartoon PNG.
// Collectible mascots: 4 free starters, a coin tier, and a premium diamond tier —
// the first real sink for coins/gems (earned via play + rewarded ads).
const HH_AVATARS = [
  { id: 'hole',    label: 'Hole',    emoji: '', rim: '#21E6FF' },                                          // classic player hole — free
  { id: 'alien',   label: 'Zorbo',   img: 'assets/ui-ai/avatar-alien.webp',   rim: '#36C95B' },             // free
  { id: 'planet',  label: 'Orbit',   img: 'assets/ui-ai/avatar-planet.webp',  rim: '#1FA9C9' },             // free
  { id: 'robot',   label: 'Bolt',    img: 'assets/ui-ai/avatar-robot.webp',   rim: '#4A8CFF' },             // free
  { id: 'star',    label: 'Twinkle', img: 'assets/ui-ai/avatar-star.webp',    rim: '#FFC22E', cost: 300 },
  { id: 'comet',   label: 'Blaze',   img: 'assets/ui-ai/avatar-comet.webp',   rim: '#FF8A2B', cost: 300 },
  { id: 'slime',   label: 'Gloop',   img: 'assets/ui-ai/avatar-slime.webp',   rim: '#20C7A8', cost: 450 },
  { id: 'ufo',     label: 'Saucer',  img: 'assets/ui-ai/avatar-ufo.webp',     rim: '#5FA9C9', cost: 600 },
  { id: 'moon',    label: 'Luna',    img: 'assets/ui-ai/avatar-moon.webp',    rim: '#E9C24A', cost: 800 },
  { id: 'galaxy',  label: 'Spiral',  img: 'assets/ui-ai/avatar-galaxy.webp',  rim: '#8A4DFF', gem: 8 },     // premium (diamonds)
  { id: 'crystal', label: 'Prism',   img: 'assets/ui-ai/avatar-crystal.webp', rim: '#E255C7', gem: 10 },
  { id: 'rocket',  label: 'Comet',   img: 'assets/ui-ai/avatar-rocket.webp',  rim: '#FF5A5A', gem: 12 },
  { id: 'nebula',  label: 'Nova',    img: 'assets/ui-ai/avatar-nebula.webp',  rim: '#FF6FB0', gem: 15 },
];
const AV_FREE = ['hole', 'alien', 'planet', 'robot'];
function loadOwnedAvatars() {
  const owned = new Set(AV_FREE);
  try { (JSON.parse(localStorage.getItem('hh_avatars_owned') || '[]') || []).forEach(id => owned.add(id)); } catch (e) {}
  try { const cur = localStorage.getItem('hh_avatar'); if (cur) owned.add(cur); } catch (e) {} // whatever's equipped is implicitly owned
  return owned;
}
function ownAvatar(id) {
  try { const cur = new Set(JSON.parse(localStorage.getItem('hh_avatars_owned') || '[]')); cur.add(id); localStorage.setItem('hh_avatars_owned', JSON.stringify([...cur])); } catch (e) {}
}
function loadProfile() {
  let name = 'YOU', avatar = 'hole';
  try { name = localStorage.getItem('hh_name') || 'YOU'; avatar = localStorage.getItem('hh_avatar') || 'hole'; } catch (e) {}
  if (!HH_AVATARS.some(a => a.id === avatar)) avatar = 'hole';
  return { name: (name || 'YOU').slice(0, 16), avatar };
}
function saveProfile(name, avatar) {
  const clean = (name || 'YOU').trim().slice(0, 16) || 'YOU';
  try { localStorage.setItem('hh_name', clean); localStorage.setItem('hh_avatar', avatar); } catch (e) {}
  const HH = window.HH;
  if (HH) {
    HH.profile = { name: clean, avatar };
    // reflect the chosen name on the "you" leaderboard row
    if (HH.LEADERS) { const me = HH.LEADERS.find(p => p.you); if (me) me.name = clean; }
  }
  return clean;
}
// a small avatar disc — either the player hole or an original emoji face on a candy disc
function AvatarDisc({ avatar, size = 46, ring = true }) {
  const a = HH_AVATARS.find(x => x.id === avatar) || HH_AVATARS[0];
  if (a.id === 'hole') {
    return <div style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0,
      background: 'radial-gradient(circle at 50% 40%, #2a1a44, #06030c 72%)',
      border: ring ? `${Math.max(2, size * 0.05)}px solid ${a.rim}` : 'none',
      boxShadow: ring ? `0 0 ${size * 0.28}px ${a.rim}88, inset 0 0 ${size * 0.2}px rgba(0,0,0,0.6)` : 'none',
      display: 'grid', placeItems: 'center' }}>
      <div style={{ width: size * 0.34, height: size * 0.34, borderRadius: '50%', background: '#04030a', boxShadow: `inset 0 0 8px #000, 0 0 12px ${a.rim}` }} />
    </div>;
  }
  return <div style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0, overflow: 'hidden', position: 'relative',
    background: `radial-gradient(circle at 50% 32%, ${a.rim}, ${a.rim}cc 70%, ${a.rim}99)`,
    border: ring ? `${Math.max(2, size * 0.05)}px solid #fff` : 'none',
    boxShadow: ring ? `0 4px 12px ${a.rim}55, inset 0 ${-size * 0.08}px 0 rgba(0,0,0,0.14)` : 'none',
    display: 'grid', placeItems: 'center', fontSize: size * 0.5, lineHeight: 1 }}>
    {a.img
      ? <img src={a.img} alt="" style={{ width: '118%', height: '118%', objectFit: 'cover', objectPosition: '50% 46%', display: 'block' }} />
      : <span style={{ filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.18))' }}>{a.emoji}</span>}
  </div>;
}

// ---------- Leaderboard ----------
function Leaderboard({ go }) {
  const HH = window.HH;
  const W = HH.WORLDS;
  // default to the furthest world the player has reached
  const defW = (() => { let w = 1; for (const lv of HH.LEVELS.flat()) if ((HH.STARS[lv[0]] || 0) > 0) w = Math.ceil(lv[0] / 10); return Math.max(1, Math.min(W.length, w)); })();
  const [world, setWorld] = useStateNw(defW);
  const wd = W.find(x => x.id === world) || W[0];
  const board = HH.worldLeaders ? HH.worldLeaders(world) : HH.LEADERS;
  const myAvatar = (HH.profile && HH.profile.avatar) || loadProfile().avatar;
  const podium = board.slice(0, 3);
  const rest = board.slice(3);
  const medal = ['#FFD24A', '#C9CFD8', '#E0A06F'];
  const dark = window.__hhTheme === 'dark';          // theme-aware surfaces (the global .card !important forces white, so highlighted rows style inline w/o .card)
  const nameOf = (p) => p.name;
  const arrow = (dis) => ({ width: 40, height: 40, borderRadius: '50%', flexShrink: 0, cursor: dis ? 'default' : 'pointer', opacity: dis ? 0.3 : 1, border: '1px solid var(--line)', background: '#fff', color: '#16223C', fontFamily: 'var(--disp)', fontWeight: 800, fontSize: 20, lineHeight: 1, boxShadow: 'var(--shadow)' });
  return (
    <Sheet title="Rank" sub="World standings" onBack={() => go('home')}>
      {/* world switcher — each world has its own board */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, marginBottom: 16 }}>
        <button onClick={() => setWorld(Math.max(1, world - 1))} disabled={world <= 1} style={arrow(world <= 1)}>‹</button>
        <div style={{ flex: 1, maxWidth: 220, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '10px 14px', borderRadius: 16, background: 'linear-gradient(180deg,#243758,#16223C)', color: '#fff', boxShadow: 'var(--shadow)' }}>
          <span style={{ width: 22, height: 22, borderRadius: 7, background: wd.accent || 'var(--sky)', display: 'grid', placeItems: 'center', fontFamily: 'var(--num)', fontWeight: 800, fontSize: 12, color: '#fff' }}>{wd.id}</span>
          <span className="disp" style={{ fontSize: 16, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{wd.name}</span>
        </div>
        <button onClick={() => setWorld(Math.min(W.length, world + 1))} disabled={world >= W.length} style={arrow(world >= W.length)}>›</button>
      </div>
      {/* podium */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 10, margin: '6px 0 18px' }}>
        {[podium[1], podium[0], podium[2]].map((p, i) => {
          const rank = p.rank, h = rank === 1 ? 100 : rank === 2 ? 76 : 62;
          const rimColor = p.you ? '#21E6FF' : medal[rank - 1];
          const disc = rank === 1 ? 62 : 54;
          return <div key={rank} className="fadeup" style={{ animationDelay: `${i * 0.08}s`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flex: 1, maxWidth: 110 }}>
            {rank === 1 && <span style={{ color: 'var(--sun)', marginBottom: -2, animation: 'hh-bob 2.4s ease-in-out infinite' }}><I.crown width={22} /></span>}
            <div style={{ position: 'relative' }}>
              <div style={{ borderRadius: '50%', boxShadow: `0 0 16px ${rimColor}77` }}>
                {p.you ? <AvatarDisc avatar={myAvatar} size={disc} /> :
                  <div style={{ width: disc, height: disc, borderRadius: '50%', background: 'radial-gradient(circle at 50% 38%, #2a1a44, #0c0618 70%)', border: `3px solid ${rimColor}`, display: 'grid', placeItems: 'center' }}>
                    <div style={{ width: 18, height: 18, borderRadius: '50%', background: '#04030a', boxShadow: `inset 0 0 6px #000, 0 0 8px ${rimColor}` }} />
                  </div>}
              </div>
              <span className="num" style={{ position: 'absolute', bottom: -8, left: '50%', transform: 'translateX(-50%)', width: 24, height: 24, borderRadius: '50%',
                background: medal[rank - 1], color: '#1B2740', fontWeight: 700, fontSize: 12.5, display: 'grid', placeItems: 'center', border: '2px solid #fff', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}>{rank}</span>
            </div>
            <div style={{ fontWeight: 800, fontSize: 12, color: p.you ? 'var(--sky)' : 'var(--ink)', marginTop: 6, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: '100%' }}>{nameOf(p)}</div>
            <div style={{ width: '100%', height: h, borderRadius: '16px 16px 0 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 9,
              background: p.you ? 'linear-gradient(180deg,#5BC0FF,var(--sky))' : (dark ? 'linear-gradient(180deg,#2A3654,#1B2438)' : 'linear-gradient(180deg,#fff,#F2F6FC)'),
              border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'var(--line)'}`, borderBottom: 'none', boxShadow: 'var(--shadow)' }}>
              <span className="num disp" style={{ fontSize: 16, color: p.you ? '#fff' : 'var(--ink)' }}>{p.score.toLocaleString()}</span>
            </div>
          </div>;
        })}
      </div>
      {/* rows */}
      {rest.map((p, i) => (
        <div key={p.rank} className={(p.you ? '' : 'card ') + 'fadeup'} style={{ animationDelay: `${0.2 + i * 0.06}s`, display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', marginBottom: 8, borderRadius: 17,
          background: p.you ? 'linear-gradient(180deg,#5BC0FF,var(--sky))' : undefined, color: p.you ? '#fff' : 'var(--ink)',
          border: p.you ? '1px solid rgba(255,255,255,0.35)' : undefined, boxShadow: p.you ? '0 8px 22px rgba(51,169,255,0.45)' : undefined }}>
          <span className="num" style={{ width: 26, fontWeight: 700, textAlign: 'center', opacity: 0.7 }}>{p.rank}</span>
          {p.you ? <AvatarDisc avatar={myAvatar} size={36} /> :
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'radial-gradient(circle at 50% 38%, #2a1a44, #0c0618 70%)',
              border: '2px solid var(--line)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#04030a', boxShadow: '0 0 6px rgba(124,92,252,0.6)' }} /></div>}
          <span style={{ flex: 1, fontWeight: 800, fontSize: 14, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{nameOf(p)}</span>
          <span className="num disp" style={{ fontSize: 16 }}>{p.score.toLocaleString()}</span>
        </div>
      ))}
      <div className="card shimmer" style={{ marginTop: 12, padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 12, background: '#fff', border: '1.5px dashed var(--sun)', boxShadow: 'var(--shadow)' }}>
        <div style={{ width: 38, height: 38, borderRadius: 12, background: 'linear-gradient(160deg,#FFD774,var(--sun))', display: 'grid', placeItems: 'center', flexShrink: 0, color: '#5a3d00' }}><I.ad width={20} /></div>
        <span style={{ fontWeight: 800, fontSize: 13, flex: 1, lineHeight: 1.35 }}>Boost your {wd.name} score <b style={{ color: 'var(--mint)' }}>x1.2</b></span>
      </div>
    </Sheet>
  );
}

// ---------- Profile (cream PopCard: avatar grid + editable name + SAVE) ----------
function Profile({ go, wallet }) {
  const HH = window.HH;
  const init = (HH.profile && HH.profile.name) ? HH.profile : loadProfile();
  const [name, setName] = useStateNw(init.name);
  const [avatar, setAvatar] = useStateNw(init.avatar);
  const [editing, setEditing] = useStateNw(false);
  const [saved, setSaved] = useStateNw(false);
  const [owned, setOwned] = useStateNw(() => loadOwnedAvatars());   // which mascots the player owns
  const [buyT, setBuyT] = useStateNw(null);                          // avatar pending purchase-confirm
  const [, bump] = useStateNw(0);                                    // force re-render after a spend
  const inputRef = useRefNw(null);
  const close = () => go('home');

  const totalStars = Object.values(HH.STARS).reduce((a, b) => a + b, 0);
  const done = Object.keys(HH.STARS).length;
  const stats = [
    { k: 'Objects eaten', v: '12,408', c: 'var(--sky)' },
    { k: 'Best combo', v: '×18', c: 'var(--coral)' },
    { k: 'Biggest size', v: 'SIZE 7', c: 'var(--mint)' },
    { k: 'Ads watched', v: String(14 + (wallet.adsWatched || 0)), c: 'var(--grape)' },
  ];
  const onEdit = () => { setEditing(true); setTimeout(() => inputRef.current && inputRef.current.focus(), 30); };
  const onSave = () => {
    const clean = saveProfile(name, avatar);
    setName(clean); setEditing(false); setSaved(true);
    if (window.HHToast) window.HHToast('Profile saved!');
    setTimeout(() => setSaved(false), 1400);
  };

  return (
    <PopCard title="Profile" accent="#22C9A0" onClose={close}>
      {/* big chosen avatar + editable name */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginBottom: 4 }}>
        <div className="pop" style={{ position: 'relative' }}>
          <AvatarDisc avatar={avatar} size={88} />
        </div>
        {/* name field with edit pencil */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', justifyContent: 'center' }}>
          {editing
            ? <input ref={inputRef} value={name} maxLength={16}
                onChange={e => setName(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') onSave(); }}
                style={{ flex: '0 1 220px', minWidth: 0, textAlign: 'center', fontFamily: 'var(--disp)', fontWeight: 800, fontSize: 21, color: '#7A4E1E',
                  padding: '6px 12px', borderRadius: 14, background: '#FFFDF6', border: '2px solid #EAD7AC', outline: 'none',
                  boxShadow: 'inset 0 2px 5px rgba(122,78,30,0.12)' }} />
            : <button onClick={onEdit} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, cursor: 'pointer',
                padding: '5px 10px 5px 14px', borderRadius: 14, background: 'transparent', border: '2px solid transparent' }}>
                <span className="disp" style={{ fontSize: 23, color: '#7A4E1E', lineHeight: 1, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
                <span aria-label="Edit name" style={{ width: 28, height: 28, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', color: '#A8763A',
                  background: 'linear-gradient(180deg,#FFFDF6,#F6E7C6)', border: '2px solid #EAD7AC', boxShadow: '0 2px 0 #E2CC97' }}>
                  {/* pencil glyph (original SVG) */}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14.5 5.5l4 4M4 20l4.5-1 10-10-3.5-3.5-10 10z" /></svg>
                </span>
              </button>}
        </div>
        <div style={{ display: 'flex', gap: 7 }}>
          <span className="chip" style={{ padding: '5px 12px', fontSize: 12.5, gap: 5, background: '#FFFDF6', border: '1.5px solid #EAD7AC', color: '#7A4E1E', boxShadow: 'none' }}>
            <span style={{ color: 'var(--sun)' }}><I.star width={14} /></span>{totalStars}</span>
          <span className="chip" style={{ padding: '5px 12px', fontSize: 12.5, background: '#FFFDF6', border: '1.5px solid #EAD7AC', color: '#7A4E1E', boxShadow: 'none' }}>LV {done}</span>
        </div>
      </div>

      {/* avatar shop — collect mascots with coins & diamonds (earned by playing + ads) */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '18px 2px 9px' }}>
        <span className="eyebrow" style={{ color: '#A8763A' }}>Mascot shop</span>
        <span style={{ display: 'inline-flex', gap: 6 }}>
          <span className="chip" style={{ padding: '3px 9px', fontSize: 12, gap: 4, background: '#FFFDF6', border: '1.5px solid #EAD7AC', color: '#7A4E1E', boxShadow: 'none' }}><Coin size={15} />{(wallet.coins || 0).toLocaleString()}</span>
          <span className="chip" style={{ padding: '3px 9px', fontSize: 12, gap: 4, background: '#FFFDF6', border: '1.5px solid #EAD7AC', color: '#7A4E1E', boxShadow: 'none' }}><Gem size={14} />{(wallet.gems || 0)}</span>
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 9 }}>
        {HH_AVATARS.map((a, i) => {
          const sel = a.id === avatar;
          const own = owned.has(a.id);
          const price = a.cost ? { k: 'coins', amt: a.cost } : (a.gem ? { k: 'gems', amt: a.gem } : null);
          return <button key={a.id} onClick={() => { if (own) { setAvatar(a.id); saveProfile(name, a.id); if (window.HHSound) window.HHSound.tap && window.HHSound.tap(); } else { setBuyT(a); if (window.HHSound) window.HHSound.tap && window.HHSound.tap(); } }} className="fadeup" style={{ animationDelay: `${i * 0.02}s`,
            position: 'relative', aspectRatio: '1', display: 'grid', placeItems: 'center', cursor: 'pointer', borderRadius: 16,
            background: sel ? 'linear-gradient(180deg,#FFFDF6,#FBEFD2)' : '#FFFDF6',
            border: sel ? '2.5px solid #22C9A0' : '2px solid #EFE0BD',
            boxShadow: sel ? '0 4px 0 #1FB98F, 0 6px 14px rgba(34,201,160,0.3)' : '0 2px 0 #EAD7AC',
            transition: 'all .15s cubic-bezier(.34,1.56,.64,1)' }}>
            <div style={{ filter: own ? 'none' : 'grayscale(0.5) opacity(0.7)' }}><AvatarDisc avatar={a.id} size={42} ring={false} /></div>
            {sel && <span style={{ position: 'absolute', top: -6, right: -6, width: 22, height: 22, borderRadius: '50%', background: 'var(--mint)', border: '2px solid #fff',
              display: 'grid', placeItems: 'center', color: '#fff', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}><I.check width={12} /></span>}
            {!own && price && <span style={{ position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)', display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 7px', borderRadius: 100, whiteSpace: 'nowrap',
              background: price.k === 'gems' ? 'linear-gradient(180deg,#9B7BFF,#7C5CFC)' : 'linear-gradient(180deg,#FFD36A,#E8A516)', color: '#fff', fontFamily: 'var(--num)', fontWeight: 800, fontSize: 11, border: '1.5px solid #fff', boxShadow: '0 2px 5px rgba(0,0,0,0.25)' }}>
              {price.k === 'gems' ? <Gem size={11} /> : <Coin size={11} />}{price.amt}</span>}
          </button>;
        })}
      </div>

      {/* career stats — compact 2×2 inside the card */}
      <div className="eyebrow" style={{ margin: '18px 2px 9px', color: '#A8763A' }}>Career stats</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {stats.map((s, i) => (
          <div key={s.k} style={{ padding: '11px 13px', borderRadius: 14, background: '#FFFDF6', border: '1.5px solid #EFE0BD', position: 'relative', overflow: 'hidden' }}>
            <span style={{ position: 'absolute', top: 0, left: 0, width: 4, height: '100%', background: s.c }} />
            <div className="num disp" style={{ fontSize: 20, color: s.c, lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 10, fontWeight: 800, color: '#A8763A', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 4 }}>{s.k}</div>
          </div>
        ))}
      </div>

      {/* SAVE */}
      <button className="btn mint block" onClick={onSave} style={{ marginTop: 18, fontSize: 17 }}>
        {saved ? <><I.check width={19} /> Saved!</> : 'SAVE'}</button>

      {/* purchase-confirm — spend coins/diamonds to unlock a mascot (or earn more via ad) */}
      {buyT && (() => {
        const price = buyT.cost ? { k: 'coins', amt: buyT.cost, label: 'coins' } : { k: 'gems', amt: buyT.gem, label: 'diamonds' };
        const can = (wallet[price.k] || 0) >= price.amt;
        const buy = () => {
          if (HH.spend(price.k, price.amt)) {
            ownAvatar(buyT.id); const no = new Set(owned); no.add(buyT.id); setOwned(no);
            setAvatar(buyT.id); saveProfile(name, buyT.id); bump(x => x + 1);
            if (window.HHToast) window.HHToast(buyT.label + ' unlocked!', 'linear-gradient(180deg,#34d29b,#22C9A0)');
            if (window.HHSound) window.HHSound.coin && window.HHSound.coin();
          }
          setBuyT(null);
        };
        return <div onClick={() => setBuyT(null)} style={{ position: 'fixed', inset: 0, zIndex: 120, background: 'rgba(8,12,24,0.55)', display: 'grid', placeItems: 'center', padding: 24 }}>
          <div onClick={e => e.stopPropagation()} className="pop" style={{ width: '100%', maxWidth: 300, background: 'linear-gradient(180deg,#fff,#F4F8FE)', borderRadius: 22, padding: '22px 20px', textAlign: 'center', boxShadow: '0 22px 54px rgba(0,0,0,0.45)' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}><AvatarDisc avatar={buyT.id} size={74} /></div>
            <div className="disp" style={{ fontSize: 22, color: '#16223C' }}>{buyT.label}</div>
            <div style={{ fontWeight: 700, fontSize: 12.5, color: '#6B7689', margin: '2px 0 14px' }}>Unlock this mascot</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 16px', borderRadius: 100, marginBottom: 16,
              background: price.k === 'gems' ? 'linear-gradient(180deg,#9B7BFF,#7C5CFC)' : 'linear-gradient(180deg,#FFD36A,#E8A516)', color: '#fff', fontFamily: 'var(--num)', fontWeight: 800, fontSize: 18 }}>
              {price.k === 'gems' ? <Gem size={18} /> : <Coin size={18} />}{price.amt}</div>
            {can
              ? <button className="btn mint block" onClick={buy} style={{ fontSize: 16 }}>Unlock</button>
              : <>
                  <div style={{ fontSize: 12.5, fontWeight: 800, color: '#D24A4A', marginBottom: 10 }}>Not enough {price.label}</div>
                  <button className="btn sun block" onClick={() => { setBuyT(null); go('rewards'); }} style={{ fontSize: 15, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}><I.ad /> Earn more</button>
                </>}
            <button className="btn ghost block" onClick={() => setBuyT(null)} style={{ marginTop: 10 }}>Cancel</button>
          </div>
        </div>;
      })()}
    </PopCard>
  );
}

// ---------- Sticker Book (collection / assets) ----------
function Collection({ go }) {
  const HH = window.HH;
  const [wi, setWi] = useStateNw(0);
  const W = HH.WORLDS[wi];
  const owned = wi === 0 ? 12 : wi === 1 ? 5 : 0; // demo progress
  const got = Math.min(owned, W.props.length);
  return (
    <Sheet title="Collection" sub="Props collected" onBack={() => go('home')}>
      <div className="pf-scroll" style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 6, marginBottom: 12 }}>
        {HH.WORLDS.slice(0, 8).map((w, i) => (
          <button key={w.id} onClick={() => setWi(i)} className="chip" style={{ cursor: 'pointer', flexShrink: 0, padding: '8px 15px', fontSize: 13.5,
            background: wi === i ? 'linear-gradient(180deg,#243758,#16223C)' : '#fff', color: wi === i ? '#fff' : 'var(--ink)', border: wi === i ? 'none' : '1px solid var(--line)' }}>{w.name}</button>
        ))}
      </div>
      {/* progress header card */}
      <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 15px', marginBottom: 14, background: '#fff', boxShadow: 'var(--shadow)' }}>
        <div style={{ width: 46, height: 46, borderRadius: 14, background: `linear-gradient(160deg, ${W.sky ? W.sky[0] : W.accent}, ${W.ground || W.accent})`, border: '1px solid var(--line)', boxShadow: 'inset 0 -3px 0 rgba(0,0,0,0.1)', flexShrink: 0, display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 900, fontSize: 18 }} className="num">{got}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 800, fontSize: 14, marginBottom: 6 }}>{W.name} collection</div>
          <Bar v={got / W.props.length} color={W.accent} h={9} />
        </div>
        <span style={{ fontWeight: 800, fontSize: 13, color: 'var(--slate)', flexShrink: 0 }} className="num">{got}/{W.props.length}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {W.props.map((p, i) => {
          const has = i < owned;
          return <div key={p} className="card pop" style={{ animationDelay: `${i * 0.03}s`, aspectRatio: '1', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4,
            background: has ? '#fff' : 'var(--card)', border: has ? `1.5px solid ${W.accent}55` : '1px dashed var(--line)', position: 'relative', overflow: 'hidden',
            boxShadow: has ? 'var(--shadow)' : 'none' }}>
            <div style={{ filter: has ? 'none' : 'grayscale(1) opacity(0.32)', transform: 'scale(0.9)', transition: 'filter .2s' }}><Prop type={p} size={40} /></div>
            <span style={{ fontSize: 9, fontWeight: 800, color: has ? 'var(--slate)' : 'var(--line)', textTransform: 'capitalize' }}>{p}</span>
            {has
              ? <span style={{ position: 'absolute', top: 5, right: 5, width: 17, height: 17, borderRadius: '50%', background: 'var(--mint)', color: '#fff', display: 'grid', placeItems: 'center', boxShadow: '0 2px 5px rgba(0,0,0,0.18)' }}><I.check width={11} /></span>
              : <span style={{ position: 'absolute', top: 5, right: 5, color: 'var(--line)' }}><I.lock width={12} /></span>}
          </div>;
        })}
      </div>
      <div className="card shimmer" style={{ marginTop: 14, padding: '13px 15px', display: 'flex', alignItems: 'center', gap: 12, background: '#fff', border: '1.5px dashed var(--grape)', boxShadow: 'var(--shadow)' }}>
        <div style={{ width: 38, height: 38, borderRadius: 12, background: 'linear-gradient(160deg,#9C82FF,var(--grape))', display: 'grid', placeItems: 'center', flexShrink: 0, color: '#fff' }}><I.star width={20} /></div>
        <span style={{ fontWeight: 800, fontSize: 13, flex: 1, lineHeight: 1.35 }}>Complete the set for <b className="num" style={{ color: 'var(--sun)' }}>300</b> coins</span>
      </div>
    </Sheet>
  );
}

Object.assign(window, { Leaderboard, Profile, Collection, HH_AVATARS, loadProfile, saveProfile, AvatarDisc });