# Worldcup Tipping Game — Brain On BNB AI
# A full tournament game that paid out on-chain.
#
# This is the complete worldcup-tipgame bundle as a single file, so it can be read in
# one fetch. 45 files, 11114 lines.
# Download as a zip: https://brainonbnb.com/code/worldcup-tipgame.zip
# Everything else:   https://brainonbnb.com/code/index.txt
#
# No secrets are present: they are supplied at runtime through the environment.
# MIT licensed.


==============================================================================
=== FILE: dashboard/worldcup/app/assets/auth.js
==============================================================================

// BOBAI Worldcup '26 — Auth helpers
// Real-email auth: users sign up with their own email; login accepts
// username OR email; password reset via email link.

(function(){
  const cfg = window.WC_CONFIG;
  const sb = window.supabase.createClient(cfg.SUPABASE_URL, cfg.SUPABASE_ANON_KEY, {
    auth: { persistSession: true, autoRefreshToken: true, storage: window.localStorage },
  });
  window.WC_SB = sb;

  // Username: 3–20 chars, letters/numbers/underscore (also enforced by DB CHECK)
  const USERNAME_RE = /^[a-zA-Z0-9_]{3,20}$/;
  // Basic email format (Supabase does the deep validation)
  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  async function register({ username, email, password, passwordConfirm, country }){
    username = (username || '').trim();
    email = (email || '').trim().toLowerCase();

    if (!USERNAME_RE.test(username)) {
      return { error: 'Username must be 3–20 chars, letters/numbers/underscore only.' };
    }
    if (!EMAIL_RE.test(email)) {
      return { error: 'Please enter a valid email address.' };
    }
    if (!password || password.length < 6) {
      return { error: 'Password must be at least 6 characters.' };
    }
    if (password !== passwordConfirm) {
      return { error: 'Passwords do not match.' };
    }

    // Create auth user with real email. The DB trigger wc_handle_new_user()
    // creates the matching wc_users profile row server-side, so we never have
    // to do a client-side insert (which would fail when "Confirm email" is on,
    // since there's no session yet). Username uniqueness is enforced by the
    // unique index on wc_users.username_lc → trigger raises → signUp fails.
    const { data: signUp, error: signUpErr } = await sb.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: window.location.origin + '/worldcup/app/',
        data: {
          username,
          country: country || null,
        },
      },
    });
    if (signUpErr) {
      const m = (signUpErr.message || '').toLowerCase();
      if (m.includes('already registered') || m.includes('already in use')) {
        return { error: 'Email already registered. Try signing in or use password reset.' };
      }
      // Trigger failed on unique-username collision → Supabase returns a
      // generic "Database error saving new user" message.
      if (m.includes('database error') || m.includes('saving new user') || m.includes('duplicate') || m.includes('unique')) {
        return { error: 'Username already taken. Please pick another.' };
      }
      return { error: signUpErr.message };
    }
    // Confirm Email is on → no immediate session, user must click the email
    // link. Supabase's anti-enumeration may also return a null/empty user
    // even on successful signup; since signUpErr would have fired on a real
    // failure, treat "no error" as success and tell the user to check mail.
    const { data: s } = await sb.auth.getSession();
    if (!s.session) {
      return { ok: true, needsConfirmation: true };
    }
    return { ok: true, user: signUp.user };
  }

  async function login({ identifier, password }){
    identifier = (identifier || '').trim();
    if (!identifier) return { error: 'Enter your username or email.' };
    if (!password) return { error: 'Enter your password.' };

    let email = null;
    if (identifier.includes('@')) {
      email = identifier.toLowerCase();
    } else {
      if (!USERNAME_RE.test(identifier)) {
        return { error: 'Invalid username format.' };
      }
      // Resolve username → email via RPC
      const { data, error } = await sb.rpc('wc_username_to_email', { p_username: identifier });
      if (error || !data) {
        return { error: 'Wrong username or password.' };
      }
      email = data;
    }

    const { data, error } = await sb.auth.signInWithPassword({ email, password });
    if (error) {
      const m = (error.message || '').toLowerCase();
      if (m.includes('email not confirmed')) {
        return { error: 'Please confirm your email first — check your inbox.' };
      }
      return { error: 'Wrong username/email or password.' };
    }

    // Make sure the profile row exists (for users whose sign-up insert was deferred
    // due to email-confirmation flow).
    await ensureProfile(data.user);

    return { ok: true, user: data.user };
  }

  // Reset request — sends a password-reset email with a link back to reset.html.
  async function resetPasswordRequest(email){
    email = (email || '').trim().toLowerCase();
    if (!EMAIL_RE.test(email)) {
      return { error: 'Please enter a valid email address.' };
    }
    const { error } = await sb.auth.resetPasswordForEmail(email, {
      redirectTo: window.location.origin + '/worldcup/app/reset.html',
    });
    if (error) return { error: error.message };
    return { ok: true };
  }

  // Called on reset.html after the user clicks the email link.
  async function updatePassword(newPassword, confirmPassword){
    if (!newPassword || newPassword.length < 6) {
      return { error: 'Password must be at least 6 characters.' };
    }
    if (newPassword !== confirmPassword) {
      return { error: 'Passwords do not match.' };
    }
    const { error } = await sb.auth.updateUser({ password: newPassword });
    if (error) return { error: error.message };
    return { ok: true };
  }

  async function logout(){
    await sb.auth.signOut();
  }

  // Lazily create the wc_users row if it's missing (handles the email-confirm
  // race where signUp insert was blocked by RLS pre-session).
  async function ensureProfile(authUser){
    if (!authUser) return null;
    const { data: existing } = await sb
      .from('wc_users')
      .select('id, username, avatar_country, wallet')
      .eq('auth_id', authUser.id)
      .maybeSingle();
    if (existing) return existing;

    const meta = authUser.user_metadata || {};
    const username = meta.username;
    if (!username || !USERNAME_RE.test(username)) return null;

    const { data: row, error } = await sb
      .from('wc_users')
      .insert({
        auth_id: authUser.id,
        username,
        avatar_country: meta.country || null,
      })
      .select('id, username, avatar_country, wallet')
      .single();
    if (error) return null;
    return row;
  }

  async function currentProfile(){
    const { data: s } = await sb.auth.getSession();
    if (!s.session) return null;
    const { data, error } = await sb
      .from('wc_users')
      .select('id, username, avatar_country, wallet')
      .eq('auth_id', s.session.user.id)
      .maybeSingle();
    if (error) return null;
    if (data) return data;
    // Profile missing → try to backfill (post email-confirmation case)
    return await ensureProfile(s.session.user);
  }

  window.WC_AUTH = {
    register, login, logout, currentProfile,
    resetPasswordRequest, updatePassword,
  };
})();

==============================================================================
=== FILE: dashboard/worldcup/app/assets/avatar.js
==============================================================================

// BOBAI Worldcup '26 — Shared avatar / illustration helper.
//
// Single source of truth for every illustration slot in the app. The
// designer drops a file into the right path, and this helper picks it up
// everywhere without any further code changes.
//
// Files the designer is expected to deliver:
//   /worldcup/app/illus/avatars/avatar-<CODE>.webp   (48 country avatars)
//   /worldcup/app/illus/pool-trophy.webp             (pool-card flourish)
//   /worldcup/app/illus/bonus-hero.webp              (bonus banner, optional)
//   /worldcup/app/illus/coin-btc.webp
//   /worldcup/app/illus/coin-bnb.webp
//   /worldcup/app/illus/coin-bobai.webp
//
// Two render modes:
//   - Production: if the file exists, the WebP is shown; otherwise a
//     fallback (flag emoji / unicode glyph) keeps the UI working.
//   - Designer (`?design=1` on any URL OR window.WC_DESIGN === true):
//     missing files are highlighted with a dashed magenta box that
//     prints the expected filename — so the designer can see at a
//     glance what's still missing.
//
// Avatar size presets:
//   xs = 24 (leaderboard rows)
//   sm = 32
//   md = 56 (small profile chips)
//   lg = 72 (profile headers)
//   xl = 96 (champion picker cards)

(function(){
  const BASE = '/worldcup/app/illus/';
  const AVATAR_BASE = BASE + 'avatars/';

  // Formats we try, in priority order. The designer just drops *any* of these
  // into the right folder and the app picks it up.
  const FORMATS = ['webp', 'png', 'jpg', 'jpeg', 'svg'];

  // Designer mode toggle: ?design=1 OR localStorage('wc_design') OR window.WC_DESIGN
  const params = new URLSearchParams(window.location.search);
  const designOn = params.has('design') ||
                   localStorage.getItem('wc_design') === '1' ||
                   window.WC_DESIGN === true;
  if (params.has('design')) localStorage.setItem('wc_design', '1');
  if (params.get('design') === '0') localStorage.removeItem('wc_design');

  const SIZES = { xs: 24, sm: 32, md: 56, lg: 72, xl: 96 };

  // Inline-onerror chain: when the current src 404s, jump to the next format.
  // After the last format, swap the <img> for the fallback flag span.
  // Exposed on window so onerror="WC_AVATAR.imgError(this)" works.
  function imgError(img){
    const base = img.dataset.fBase;
    const fmts = (img.dataset.fFmts || FORMATS.join(',')).split(',');
    let idx = parseInt(img.dataset.fIdx || '0', 10);
    idx++;
    if (idx < fmts.length) {
      img.dataset.fIdx = idx;
      img.src = base + '.' + fmts[idx];
      return;
    }
    // All formats failed — show fallback inside the parent .wc-ava
    img.onerror = null;
    const flag = img.dataset.fFlag || '⚪';
    const wrap = img.parentElement;
    img.remove();
    if (wrap && wrap.classList.contains('wc-ava')) {
      // Use existing .wc-ava-fallback if present (designer mode), else add one
      let fb = wrap.querySelector('.wc-ava-fallback');
      if (!fb) {
        fb = document.createElement('span');
        fb.className = 'wc-ava-fallback';
        const size = parseInt(wrap.style.width || '72', 10);
        fb.style.cssText = `display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:${Math.round(size*0.55)}px;line-height:1`;
        fb.textContent = flag;
        wrap.appendChild(fb);
      }
    }
  }

  function findCountry(code){
    if (!window.WC_COUNTRIES) return null;
    return window.WC_COUNTRIES.find(c => c.code === code) || null;
  }

  function avatarBase(code){
    if (!code) return null;
    return AVATAR_BASE + 'avatar-' + code;        // extension-less
  }
  function avatarUrl(code, ext){
    if (!code) return null;
    return avatarBase(code) + '.' + (ext || FORMATS[0]);
  }

  // Inline HTML snippet for a single country avatar.
  // Renders an <img> that walks through webp → png → jpg → jpeg → svg via
  // onerror. After the last format also 404s, it gets replaced with a flag
  // emoji span. In designer mode a magenta dashed wrap shows the filename.
  function avatarHtml(code, sizeKey = 'lg'){
    const px = SIZES[sizeKey] || SIZES.lg;
    const c = findCountry(code);
    const flag = c ? c.flag : '⚪';
    if (!code) {
      return `<span class="wc-ava wc-ava-${sizeKey}" data-empty style="width:${px}px;height:${px}px;font-size:${Math.round(px*0.55)}px">⚪</span>`;
    }
    const base = avatarBase(code);
    const fmts = FORMATS.join(',');
    const designCls = designOn ? ' wc-ava-design' : '';
    const designTag = designOn
      ? `<span class="wc-ava-fallback" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:${Math.round(px*0.55)}px;line-height:1">${flag}</span>
         <span class="wc-ava-tag">avatar-${code}.{webp|png|jpg}</span>`
      : '';
    return `<span class="wc-ava wc-ava-${sizeKey}${designCls}" style="width:${px}px;height:${px}px">
      <img class="wc-ava-img" alt="BOBAI ${c?c.name:code}"
           src="${base}.${FORMATS[0]}"
           data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0" data-f-flag="${flag}"
           onload="this.parentElement.classList.add('wc-has-art')"
           onerror="window.WC_AVATAR.imgError(this)">
      ${designTag}
    </span>`;
  }

  // Generic illustration slot for non-avatar art (trophy, hero, coin icons).
  // `filename` is the WebP filename — same fallback chain to png/jpg/etc.
  function illusUrl(filename){ return BASE + filename; }
  function illusHtml(filename, opts){
    opts = opts || {};
    const w = opts.w || 200;
    const h = opts.h || 200;
    const alt = opts.alt || '';
    // strip extension so we can swap through the chain
    const base = BASE + filename.replace(/\.[a-z0-9]+$/i, '');
    const fmts = FORMATS.join(',');
    if (designOn) {
      return `<span class="wc-illus wc-illus-design" style="width:${w}px;height:${h}px;display:inline-flex">
        <img alt="${alt}" style="max-width:100%;max-height:100%"
             src="${base}.${FORMATS[0]}"
             data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
             onload="this.parentElement.classList.add('wc-has-art')"
             onerror="this.style.display='none'">
        <span class="wc-illus-tag">${filename}</span>
      </span>`;
    }
    return `<img alt="${alt}" style="max-width:${w}px;max-height:${h}px"
                 src="${base}.${FORMATS[0]}"
                 data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
                 onerror="this.style.display='none'">`;
  }

  // Hero banner helper — emits a full-width landscape illustration for the
  // top of a tab page. `slot` is the filename stem (e.g. 'dashboard-hero').
  // If the file doesn't exist (and we're not in designer mode), the wrapper
  // collapses silently so the page just shows its normal heading.
  function heroHtml(slot){
    const base = BASE + slot;
    const fmts = FORMATS.join(',');
    if (designOn) {
      return `<div class="wc-hero wc-hero-design">
        <img alt="" style="max-width:100%;max-height:240px;display:inline-block"
             src="${base}.${FORMATS[0]}"
             data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
             onload="this.parentElement.classList.add('wc-has-art')"
             onerror="window.WC_AVATAR.heroError(this)">
        <span class="wc-hero-tag">${slot}.{webp|png|jpg}</span>
      </div>`;
    }
    return `<div class="wc-hero">
      <img alt="" src="${base}.${FORMATS[0]}"
           data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
           onload="this.parentElement.classList.add('wc-has-art')"
           onerror="window.WC_AVATAR.heroError(this)">
    </div>`;
  }
  // Fallback chain for hero images. Walks through formats, then hides the
  // wrapper entirely so missing art doesn't leave a broken-image gap.
  function heroError(img){
    const base = img.dataset.fBase;
    const fmts = (img.dataset.fFmts || FORMATS.join(',')).split(',');
    let idx = parseInt(img.dataset.fIdx || '0', 10);
    idx++;
    if (idx < fmts.length) {
      img.dataset.fIdx = idx;
      img.src = base + '.' + fmts[idx];
      return;
    }
    img.onerror = null;
    const wrap = img.parentElement;
    if (wrap && wrap.classList.contains('wc-hero') && !wrap.classList.contains('wc-hero-design')) {
      wrap.style.display = 'none';
    } else {
      img.style.display = 'none';
    }
  }

  // Same idea as heroHtml but for the small pool-card corner trophy accent.
  function poolTrophyHtml(){
    const base = BASE + 'pool-trophy';
    const fmts = FORMATS.join(',');
    return `<div class="wc-pool-trophy">
      <img alt="" src="${base}.${FORMATS[0]}"
           data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
           onerror="window.WC_AVATAR.heroError(this)">
    </div>`;
  }

  // Generic card-corner accent (e.g. bonus-crystal, tips-ball). Same fallback
  // chain as heroHtml; positioned absolute top-right of the parent .card.
  function cardAccentHtml(slot){
    const base = BASE + slot;
    const fmts = FORMATS.join(',');
    return `<div class="wc-card-accent" data-slot="${slot}">
      <img alt="" src="${base}.${FORMATS[0]}"
           data-f-base="${base}" data-f-fmts="${fmts}" data-f-idx="0"
           onerror="window.WC_AVATAR.heroError(this)">
    </div>`;
  }

  // Programmatic single-URL check — returns Promise<boolean>.
  // We can't just trust `response.ok`: CF Pages may serve the project's 404
  // HTML page with a 200 status for missing static files. So we also verify
  // the response is actually an image by checking Content-Type.
  function exists(path){
    return fetch(path, { method: 'HEAD', cache: 'no-store' })
      .then(r => {
        if (!r.ok) return false;
        const ct = (r.headers.get('content-type') || '').toLowerCase();
        return ct.startsWith('image/');
      })
      .catch(() => false);
  }

  // Multi-format probe — returns the extension that exists, or null.
  // basePath = full URL without extension (e.g. ".../avatar-BR").
  // Runs all format probes in parallel and returns the first hit (in FORMATS
  // priority order). This keeps for-designer.html responsive: with N slots
  // and the sequential version it would do up to 5×N HEAD requests serially.
  async function findFormat(basePath){
    const probes = FORMATS.map(ext =>
      exists(basePath + '.' + ext).then(ok => ok ? ext : null)
    );
    const results = await Promise.all(probes);
    return results.find(Boolean) || null;
  }

  // Master inventory of every illustration slot. Used by for-designer.html.
  // basePath = URL without extension; the checker tries webp/png/jpg/jpeg/svg.
  function inventory(){
    const items = [];
    // 48 country avatars
    (window.WC_COUNTRIES || []).forEach(c => {
      items.push({
        kind: 'avatar',
        code: c.code,
        name: c.name,
        flag: c.flag,
        filename: 'avatars/avatar-' + c.code,
        basePath: AVATAR_BASE + 'avatar-' + c.code,
        specs: '512×512 transparent. BOBAI in the ' + c.name + ' national kit. Any format (WebP / PNG / JPG / SVG).',
        usedOn: 'Dashboard · Leaderboard · Public profile · Champion pick',
        required: true,
      });
    });
    // Page hero banners — one per tab. Landscape format, transparent.
    const HEROES = [
      { name: 'Dashboard hero',    filename: 'dashboard-hero',  usedOn: 'Dashboard page (top banner)' },
      { name: 'Tips hero',         filename: 'tips-hero',       usedOn: 'Tips page (top banner)' },
      { name: 'Bonus-questions hero banner', filename: 'bonus-hero', usedOn: 'Bonus page (above questions)' },
      { name: 'Crypto hero',       filename: 'crypto-hero',     usedOn: 'Crypto predictions page (top banner)' },
      { name: 'Leaderboard hero',  filename: 'leaderboard-hero',usedOn: 'Leaderboard page (top banner)' },
      { name: 'Prize Pool hero',   filename: 'prize-pool-hero', usedOn: 'Prize Pool page (top banner)' },
      { name: 'Rules hero',        filename: 'rules-hero',      usedOn: 'Rules page (top banner)' },
    ];
    HEROES.forEach(h => items.push({
      kind: 'illus',
      name: h.name,
      filename: h.filename,
      basePath: BASE + h.filename,
      specs: '~1500×1000, transparent, dark-mode compatible. BOBAI mascot themed for the section. Any format.',
      usedOn: h.usedOn,
      required: false,
    }));

    // Decorative accents
    items.push({
      kind: 'illus',
      name: 'Pool-card trophy flourish',
      filename: 'pool-trophy',
      basePath: BASE + 'pool-trophy',
      specs: '~512×512, transparent. BOBAI lifting a small trophy, coins/sparkles. Any format.',
      usedOn: 'Leaderboard + Prize Pool pool-card corner accent',
      required: false,
    });
    items.push({
      kind: 'illus',
      name: 'Bonus crystal-ball accent',
      filename: 'bonus-crystal',
      basePath: BASE + 'bonus-crystal',
      specs: '~512×512, transparent. BOBAI peering into a glowing crystal ball. Any format.',
      usedOn: 'Bonus Questions card (top-right corner)',
      required: false,
    });
    items.push({
      kind: 'illus',
      name: 'Tips ball-kick accent',
      filename: 'tips-ball',
      basePath: BASE + 'tips-ball',
      specs: '~512×512, transparent. BOBAI kicking a small football. Any format.',
      usedOn: 'Tips card (top-right corner)',
      required: false,
    });

    // BOBAI-style coin icons (re-skin of BTC / BNB / BOBAI marks)
    items.push({
      kind: 'illus',
      name: 'BTC coin icon (BOBAI style)',
      filename: 'coin-btc',
      basePath: BASE + 'coin-btc',
      specs: '~512×512, transparent. BOBAI-style Bitcoin icon. Any format.',
      usedOn: 'Crypto predictions page · Leaderboard crypto view',
      required: false,
    });
    items.push({
      kind: 'illus',
      name: 'BNB coin icon (BOBAI style)',
      filename: 'coin-bnb',
      basePath: BASE + 'coin-bnb',
      specs: '~512×512, transparent. BOBAI-style BNB icon. Any format.',
      usedOn: 'Crypto predictions page · Leaderboard crypto view',
      required: false,
    });
    items.push({
      kind: 'illus',
      name: 'BOBAI coin icon (mark)',
      filename: 'coin-bobai',
      basePath: BASE + 'coin-bobai',
      specs: '~512×512, transparent. The brain icon, mark-style. Any format.',
      usedOn: 'Crypto predictions page · Leaderboard crypto view',
      required: false,
    });
    return items;
  }

  // Click-to-zoom on any delivered avatar (wrapper has .wc-has-art once the img
  // actually loaded). Also catches plain .item.done .preview img on for-designer.
  // Lightbox markup is injected lazily on first open.
  function ensureLightbox(){
    if (document.getElementById('wc-lightbox')) return;
    const lb = document.createElement('div');
    lb.id = 'wc-lightbox';
    lb.setAttribute('aria-hidden', 'true');
    lb.innerHTML = '<button class="lb-close" aria-label="Close">&times;</button><div class="lb-cap"></div><img alt="">';
    document.body.appendChild(lb);
    lb.addEventListener('click', e => {
      if (e.target === lb || e.target.classList.contains('lb-close')) closeLightbox();
    });
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape' && lb.classList.contains('open')) closeLightbox();
    });
  }
  function openLightbox(src, caption){
    ensureLightbox();
    const lb = document.getElementById('wc-lightbox');
    lb.querySelector('img').src = src;
    lb.querySelector('.lb-cap').textContent = caption || '';
    lb.classList.add('open');
    lb.setAttribute('aria-hidden', 'false');
  }
  function closeLightbox(){
    const lb = document.getElementById('wc-lightbox');
    if (!lb) return;
    lb.classList.remove('open');
    lb.setAttribute('aria-hidden', 'true');
    lb.querySelector('img').src = '';
  }
  document.addEventListener('click', e => {
    const img = e.target.closest('.wc-ava.wc-has-art .wc-ava-img, .item.done .preview img, .illus-card img');
    if (!img) return;
    e.preventDefault();
    e.stopPropagation();
    let caption = img.alt || '';
    // Try to enrich caption with the username if inside a leaderboard row
    const row = img.closest('a.row, .item');
    if (row) {
      const uname = row.querySelector('.uname-text, .uname, .name, .info .name');
      if (uname && uname.textContent.trim()) caption = uname.textContent.trim();
    }
    openLightbox(img.src, caption);
  });

  // Auto-wire any declarative markup so each page only needs one line.
  //   <div data-hero="dashboard-hero"></div>   → renders dashboard-hero banner
  //   <div data-pool-trophy></div>             → renders the pool-card trophy accent
  function autoWire(){
    document.querySelectorAll('[data-hero]').forEach(el => {
      if (el.dataset.wired) return;
      el.dataset.wired = '1';
      el.outerHTML = heroHtml(el.dataset.hero);
    });
    document.querySelectorAll('[data-pool-trophy]').forEach(el => {
      if (el.dataset.wired) return;
      el.dataset.wired = '1';
      el.outerHTML = poolTrophyHtml();
    });
    document.querySelectorAll('[data-card-accent]').forEach(el => {
      if (el.dataset.wired) return;
      el.dataset.wired = '1';
      el.outerHTML = cardAccentHtml(el.dataset.cardAccent);
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', autoWire);
  } else {
    autoWire();
  }

  window.WC_AVATAR = {
    designOn, formats: FORMATS,
    avatarUrl, avatarHtml,
    illusUrl, illusHtml,
    heroHtml, heroError, poolTrophyHtml, cardAccentHtml,
    exists, findFormat, inventory,
    imgError,
    openLightbox, closeLightbox,
  };
})();

==============================================================================
=== FILE: dashboard/worldcup/app/assets/config.js
==============================================================================

// BOBAI Worldcup '26 — App Config (public-safe values only)
window.WC_CONFIG = {
  SUPABASE_URL: 'https://aerffjhdsbxpvuulkryr.supabase.co',
  SUPABASE_ANON_KEY: 'sb_publishable_ne0MFzyCQb6MvFWur2X-Vw_vG9JH76_',
  // Auth uses the user's real email (required for password reset).
  // Login accepts username OR email; see auth.js for the username→email resolver.
  // Kickoff & registration windows (UTC)
  REG_OPEN_UTC:  '2026-06-04T12:00:00Z',
  KICKOFF_UTC:   '2026-06-11T19:00:00Z',
  // Bonus + Crypto edit deadline — one-time extension after MD1 to give late joiners a fair chance.
  // Locks 15 min before the first MD2 match (CZ–ZA, 2026-06-18 16:00 UTC). Crypto scoring snapshot still happens at Final kickoff.
  BONUS_CRYPTO_LOCK_UTC: '2026-06-18T15:45:00Z',
  // BOBAI token (BSC)
  BOBAI_TOKEN: '0x245c386dcfed896f5c346107596141e5edcbffff',
  // Prize wallet (Phase H) — public BSC address, receives BNB/USDT donations + 26% creator tax post-04.06
  PRIZE_WALLET: '0x5E4102520A71B2AA18a1208330d4848dea4BD105',
  // USDT (BEP-20) contract on BSC — for donation address copy + future integration
  USDT_BSC: '0x55d398326f99059fF775485246999027B3197955',
  // Pool fill starts at kickoff (matches KICKOFF_UTC). Display gating only — actual on-chain flow handled by worker.
  POOL_FILL_START_UTC: '2026-06-11T19:00:00Z',
};

==============================================================================
=== FILE: dashboard/worldcup/app/assets/countries.js
==============================================================================

// BOBAI Worldcup '26 — Qualified Teams (FIFA WC 2026)
// 48 teams, alphabetical. Source: FIFA / UEFA / CONMEBOL official qualification (as of 2026-05).
window.WC_COUNTRIES = [
  // CAF (10)
  { code: 'DZ',  name: 'Algeria',          flag: '🇩🇿' },
  // CONMEBOL (6)
  { code: 'AR',  name: 'Argentina',        flag: '🇦🇷' },
  // AFC (9)
  { code: 'AU',  name: 'Australia',        flag: '🇦🇺' },
  // UEFA (16)
  { code: 'AT',  name: 'Austria',          flag: '🇦🇹' },
  { code: 'BE',  name: 'Belgium',          flag: '🇧🇪' },
  { code: 'BA',  name: 'Bosnia & Herz.',   flag: '🇧🇦' },
  { code: 'BR',  name: 'Brazil',           flag: '🇧🇷' },
  // CONCACAF (6, incl. hosts)
  { code: 'CA',  name: 'Canada',           flag: '🇨🇦' },
  { code: 'CV',  name: 'Cape Verde',       flag: '🇨🇻' },
  { code: 'CO',  name: 'Colombia',         flag: '🇨🇴' },
  { code: 'HR',  name: 'Croatia',          flag: '🇭🇷' },
  { code: 'CW',  name: 'Curaçao',          flag: '🇨🇼' },
  { code: 'CZ',  name: 'Czechia',          flag: '🇨🇿' },
  { code: 'CD',  name: 'DR Congo',         flag: '🇨🇩' },
  { code: 'EC',  name: 'Ecuador',          flag: '🇪🇨' },
  { code: 'EG',  name: 'Egypt',            flag: '🇪🇬' },
  { code: 'ENG', name: 'England',          flag: '🏴󠁧󠁢󠁥󠁮󠁧󠁿' },
  { code: 'FR',  name: 'France',           flag: '🇫🇷' },
  { code: 'DE',  name: 'Germany',          flag: '🇩🇪' },
  { code: 'GH',  name: 'Ghana',            flag: '🇬🇭' },
  { code: 'HT',  name: 'Haiti',            flag: '🇭🇹' },
  { code: 'IR',  name: 'Iran',             flag: '🇮🇷' },
  { code: 'IQ',  name: 'Iraq',             flag: '🇮🇶' },
  { code: 'CI',  name: 'Ivory Coast',      flag: '🇨🇮' },
  { code: 'JP',  name: 'Japan',            flag: '🇯🇵' },
  { code: 'JO',  name: 'Jordan',           flag: '🇯🇴' },
  { code: 'MX',  name: 'Mexico',           flag: '🇲🇽' },
  { code: 'MA',  name: 'Morocco',          flag: '🇲🇦' },
  { code: 'NL',  name: 'Netherlands',      flag: '🇳🇱' },
  // OFC (1)
  { code: 'NZ',  name: 'New Zealand',      flag: '🇳🇿' },
  { code: 'NO',  name: 'Norway',           flag: '🇳🇴' },
  { code: 'PA',  name: 'Panama',           flag: '🇵🇦' },
  { code: 'PY',  name: 'Paraguay',         flag: '🇵🇾' },
  { code: 'PT',  name: 'Portugal',         flag: '🇵🇹' },
  { code: 'QA',  name: 'Qatar',            flag: '🇶🇦' },
  { code: 'SA',  name: 'Saudi Arabia',     flag: '🇸🇦' },
  { code: 'SCO', name: 'Scotland',         flag: '🏴󠁧󠁢󠁳󠁣󠁴󠁿' },
  { code: 'SN',  name: 'Senegal',          flag: '🇸🇳' },
  { code: 'ZA',  name: 'South Africa',     flag: '🇿🇦' },
  { code: 'KR',  name: 'South Korea',      flag: '🇰🇷' },
  { code: 'ES',  name: 'Spain',            flag: '🇪🇸' },
  { code: 'SE',  name: 'Sweden',           flag: '🇸🇪' },
  { code: 'CH',  name: 'Switzerland',      flag: '🇨🇭' },
  { code: 'TN',  name: 'Tunisia',          flag: '🇹🇳' },
  { code: 'TR',  name: 'Türkiye',          flag: '🇹🇷' },
  { code: 'UY',  name: 'Uruguay',          flag: '🇺🇾' },
  { code: 'US',  name: 'USA',              flag: '🇺🇸' },
  { code: 'UZ',  name: 'Uzbekistan',       flag: '🇺🇿' },
];
// Sort alphabetically by display name (the section comments above are just for traceability)
window.WC_COUNTRIES.sort((a,b) => a.name.localeCompare(b.name));

==============================================================================
=== FILE: dashboard/worldcup/app/assets/nav.js
==============================================================================

// BOBAI Worldcup '26 — Shared nav behavior
// Activates the current tab, wires logout, and fills the "Hi <user>" slot.
// Pages that include this script just need the <nav> markup with `.tabbar a[data-tab]`
// items plus optional #me-name + #logout elements.

(function(){
  // Determine current tab from filename (dashboard.html → dashboard).
  const file = (window.location.pathname.split('/').pop() || 'dashboard.html')
    .replace('.html','') || 'dashboard';

  // Mark active tab
  document.querySelectorAll('.tabbar a').forEach(a => {
    if (a.dataset.tab === file) a.classList.add('active');
  });

  // Inject an inline "← back" row between the sticky nav and main content.
  // Skipped when the user has no in-app history (deep-link entry, refresh on
  // first page), since history.back() would otherwise leave the app.
  (function injectBackRow(){
    const nav = document.querySelector('nav');
    if (!nav) return;
    const ref = document.referrer || '';
    const sameOrigin = ref && ref.indexOf(window.location.origin) === 0;
    const hasInAppHistory = sameOrigin && ref !== window.location.href;
    if (!hasInAppHistory) return;
    const row = document.createElement('div');
    row.className = 'back-row';
    row.innerHTML = '<button type="button" id="nav-back"><span class="ic">←</span> back</button>';
    nav.insertAdjacentElement('afterend', row);
    row.querySelector('#nav-back').addEventListener('click', () => {
      if (window.history.length > 1) window.history.back();
      else window.location.href = './dashboard.html';
    });
  })();

  // Wire logout (anywhere on the page)
  const lo = document.getElementById('logout');
  if (lo) {
    lo.addEventListener('click', async (e) => {
      e.preventDefault();
      if (window.WC_AUTH) await window.WC_AUTH.logout();
      window.location.href = '/worldcup/';
    });
  }

  // Populate #me-name with the current username (and redirect to landing if not signed in).
  // Pages that have their own auth-gate (e.g. dashboard.html) can ignore the redirect —
  // we only redirect when the page actually carries a #me-name placeholder, i.e. it
  // expects an authenticated user. Pages marked <body data-public="true"> (rules,
  // prize-pool) stay viewable for anonymous visitors — the .user widget swaps to
  // "Sign in · Register" links instead of bouncing.
  const me = document.getElementById('me-name');
  const isPublic = document.body && document.body.dataset.public === 'true';
  if (me && window.WC_AUTH) {
    (async () => {
      try {
        const p = await window.WC_AUTH.currentProfile();
        if (!p) {
          if (isPublic) {
            const userEl = me.closest('.user');
            if (userEl) {
              userEl.innerHTML = '<a href="/worldcup/">Sign in</a> · <a href="/worldcup/">Register</a>';
            }
            // Anonymous visitor: gold-frame the tabs that are actually open to the
            // public (archive pages) so it's obvious they're clickable.
            const st = document.createElement('style');
            st.textContent = '.tabbar a.pub-open{border:1px solid rgba(240,185,11,.55);border-radius:8px;box-shadow:0 0 6px rgba(240,185,11,.15)}';
            document.head.appendChild(st);
            ['leaderboard','prize-pool','rules'].forEach(t => {
              document.querySelectorAll('.tabbar a[data-tab="' + t + '"]').forEach(a => a.classList.add('pub-open'));
            });
            return;
          }
          window.location.href = '/worldcup/';
          return;
        }
        // Username doubles as the "my profile" link → personal dashboard
        // (usernames are validated [a-zA-Z0-9_], safe to inline).
        me.innerHTML = '<a href="/worldcup/app/dashboard.html" title="Your dashboard" style="color:inherit;text-decoration:none">' + p.username + '</a>';
      } catch (e) { /* swallow — page-local auth code will handle errors */ }
    })();
  }
})();

==============================================================================
=== FILE: dashboard/worldcup/app/assets/profile.js
==============================================================================

// BOBAI Worldcup '26 — Profile + Wallet helpers
(function(){
  const sb = window.WC_SB;

  async function updateAvatar(country){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const { error } = await sb
      .from('wc_users')
      .update({ avatar_country: country || null })
      .eq('id', p.id);
    if (error) return { error: error.message };
    return { ok: true };
  }

  // Link a BEP-20 wallet to the current account.
  // Server enforces: (a) wallet is UNIQUE across all accounts; (b) once set,
  // it cannot be changed. So this call is effectively a one-shot — UI must
  // confirm the address with the user before invoking it.
  async function saveWallet(address){
    const addr = (address || '').trim().toLowerCase();
    if (!/^0x[a-f0-9]{40}$/.test(addr)) {
      return { error: 'Invalid BEP-20 address. It must start with 0x and contain 40 hex characters.' };
    }
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    if (p.wallet) {
      return { error: 'Your account already has a wallet linked. The wallet is permanent.' };
    }
    const { error } = await sb
      .from('wc_users')
      .update({ wallet: addr })
      .eq('id', p.id);
    if (error) {
      // Surface the UNIQUE-violation as a friendly message — Postgres returns
      // 23505 with a constraint name we don't want to leak to the user.
      if ((error.code === '23505') || /duplicate|unique/i.test(error.message)) {
        return { error: 'This wallet is already linked to another account. Each wallet can only be used once.' };
      }
      // Server immutability trigger fires if someone tries a second update.
      if (/permanent once linked/i.test(error.message)) {
        return { error: 'Wallet is permanent once linked — contact support to correct it.' };
      }
      return { error: error.message };
    }
    return { ok: true };
  }

  // ============== BONUS QUESTIONS ==============

  async function getBonus(){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const { data, error } = await sb
      .from('wc_bonus')
      .select('champion, most_goals_team, fewest_goals_team, red_cards_bracket, topscorer_country, points, resolved')
      .eq('user_id', p.id)
      .maybeSingle();
    if (error) return { error: error.message };
    return { ok: true, bonus: data || null, userId: p.id };
  }

  async function saveBonus(fields){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const payload = {
      user_id: p.id,
      champion:          fields.champion          || null,
      most_goals_team:   fields.most_goals_team   || null,
      fewest_goals_team: fields.fewest_goals_team || null,
      red_cards_bracket: fields.red_cards_bracket || null,
      topscorer_country: fields.topscorer_country || null,
      updated_at: new Date().toISOString(),
    };
    // Upsert on PK user_id
    const { error } = await sb.from('wc_bonus').upsert(payload, { onConflict: 'user_id' });
    if (error) return { error: error.message };
    return { ok: true };
  }

  // ============== MATCHES & TIPS ==============

  async function loadMatches(){
    const { data, error } = await sb
      .from('wc_matches')
      .select('id, phase, group_letter, team_home, team_away, kickoff_utc, goals_home, goals_away, final_home, final_away, decided_by, played, multiplier')
      .order('kickoff_utc', { ascending: true });
    if (error) return { error: error.message };
    return { ok: true, matches: data || [] };
  }

  async function loadMyTips(){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const { data, error } = await sb
      .from('wc_tips')
      .select('match_id, tip_home, tip_away, points_final, resolved')
      .eq('user_id', p.id);
    if (error) return { error: error.message };
    const byMatch = {};
    (data || []).forEach(t => { byMatch[t.match_id] = t; });
    return { ok: true, tips: byMatch, userId: p.id };
  }

  async function saveTip(matchId, tipHome, tipAway){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    if (!Number.isInteger(tipHome) || tipHome < 0 || tipHome > 30) return { error: 'Home score must be 0–30.' };
    if (!Number.isInteger(tipAway) || tipAway < 0 || tipAway > 30) return { error: 'Away score must be 0–30.' };
    const payload = {
      user_id: p.id,
      match_id: matchId,
      tip_home: tipHome,
      tip_away: tipAway,
      updated_at: new Date().toISOString(),
    };
    const { error } = await sb.from('wc_tips').upsert(payload, { onConflict: 'user_id,match_id' });
    if (error) return { error: error.message };
    return { ok: true };
  }

  // ============== CRYPTO PREDICTIONS ==============

  async function getCrypto(){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const { data, error } = await sb
      .from('wc_crypto')
      .select('btc_price, bnb_price, bobai_price, btc_diff, bnb_diff, bobai_diff, resolved')
      .eq('user_id', p.id)
      .maybeSingle();
    if (error) return { error: error.message };
    return { ok: true, crypto: data || null };
  }

  async function saveCrypto({ btc, bnb, bobai }){
    const p = await window.WC_AUTH.currentProfile();
    if (!p) return { error: 'Not signed in.' };
    const payload = {
      user_id: p.id,
      btc_price:   btc   != null ? btc   : null,
      bnb_price:   bnb   != null ? bnb   : null,
      bobai_price: bobai != null ? bobai : null,
      updated_at: new Date().toISOString(),
    };
    const { error } = await sb.from('wc_crypto').upsert(payload, { onConflict: 'user_id' });
    if (error) return { error: error.message };
    return { ok: true };
  }

  // ============== LIVE PRICE FEEDS ==============
  // BTC + BNB → Binance public API (no auth)
  // BOBAI    → GeckoTerminal (existing)
  const BOBAI_POOL = '0x6eadd4cb786898b34929444988380ed0cc6fd9a6';

  async function fetchLivePrices(){
    const out = { btc: null, bnb: null, bobai: null, ts: Date.now() };
    try {
      const [btcR, bnbR, geckoR] = await Promise.allSettled([
        fetch('https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT').then(r => r.json()),
        fetch('https://api.binance.com/api/v3/ticker/price?symbol=BNBUSDT').then(r => r.json()),
        fetch(`https://api.geckoterminal.com/api/v2/networks/bsc/pools/${BOBAI_POOL}`).then(r => r.json()),
      ]);
      if (btcR.status === 'fulfilled' && btcR.value?.price)  out.btc  = parseFloat(btcR.value.price);
      if (bnbR.status === 'fulfilled' && bnbR.value?.price)  out.bnb  = parseFloat(bnbR.value.price);
      if (geckoR.status === 'fulfilled') {
        const px = geckoR.value?.data?.attributes?.base_token_price_usd;
        if (px) out.bobai = parseFloat(px);
      }
    } catch (e) { /* swallow — partial results ok */ }
    return out;
  }

  // ============== LEADERBOARDS + POOL ==============

  // Overall + group leaderboards go through SECURITY DEFINER RPCs so the
  // BOBAI-balance tie-breaker (rules.html §7) can be applied server-side WITHOUT
  // exposing actual balances. Returned rows include `rank` + `tied_above`/
  // `tied_below` flags the UI uses for the "holds more $BOBAI" badge.
  async function loadOverallLeaderboard(){
    const { data, error } = await sb.rpc('wc_overall_leaderboard_ranked');
    if (error) return { error: error.message };
    return { ok: true, rows: data || [] };
  }

  async function loadGroupLeaderboard(letter){
    const { data, error } = await sb.rpc('wc_group_leaderboard_ranked', { p_letter: letter });
    if (error) return { error: error.message };
    return { ok: true, rows: data || [] };
  }

  async function loadCryptoLeaderboard(coin){
    // coin = 'btc' | 'bnb' | 'bobai'
    const diffCol = coin + '_diff';
    const { data, error } = await sb
      .from('wc_leaderboard_crypto')
      .select('*')
      .order(diffCol, { ascending: true, nullsFirst: false })
      .limit(500);
    if (error) return { error: error.message };
    return { ok: true, rows: data || [] };
  }

  // WC26 is settled — wc_pool is a frozen archive snapshot (BOBAI amounts fixed
  // forever), but the USD display should keep tracking the market. Overlay the
  // stored snapshot price with the live GeckoTerminal pool price; fall back to
  // the snapshot if the feed is down. Cached 60s so the 30s page intervals and
  // multiple callers per page don't hammer the API.
  let livePxCache = { px: 0, ts: 0 };
  async function liveBobaiPrice(){
    if (Date.now() - livePxCache.ts < 60_000) return livePxCache.px;
    try {
      const r = await fetch(`https://api.geckoterminal.com/api/v2/networks/bsc/pools/${BOBAI_POOL}`);
      const j = await r.json();
      const px = parseFloat(j?.data?.attributes?.base_token_price_usd) || 0;
      if (px > 0) livePxCache = { px, ts: Date.now() };
    } catch (e) { /* keep last good value */ }
    return livePxCache.px;
  }

  async function loadPool(){
    const { data, error } = await sb
      .from('wc_pool')
      .select('total_bobai, group_pot, endpool, crypto_pot, bobai_price_usd, updated_at, group_paid_at')
      .eq('id', 1)
      .maybeSingle();
    if (error) return { error: error.message };
    if (data) {
      const live = await liveBobaiPrice();
      if (live > 0) data.bobai_price_usd = live;
    }
    return { ok: true, pool: data || null };
  }

  // Payout receipt rows — used by the "Group Pot Receipt" modal + paid-state
  // styling. Optional pot filter (e.g. 'group' for group-stage receipt).
  async function loadPayouts(pot){
    let q = sb
      .from('wc_payouts')
      .select('id, pot, group_letter, position, user_id, username, country_code, wallet, bobai_amount, usd_at_payout, tx_hash, paid_at')
      .order('group_letter', { ascending: true })
      .order('position', { ascending: true });
    if (pot) q = q.eq('pot', pot);
    const { data, error } = await q;
    if (error) return { error: error.message };
    return { ok: true, rows: data || [] };
  }

  // ============== BONUS LEADERBOARD INPUTS ==============
  // Three small reads, used together by the leaderboard "Bonus" tab.

  async function loadAllBonusAnswers(){
    // Two separate reads + a client-side join: PostgREST relationship
    // embedding via !inner has been flaky across env upgrades, and we only
    // need username/avatar/wallet per user — small enough to merge in JS.
    const [bonusRes, usersRes] = await Promise.all([
      sb.from('wc_bonus')
        .select('user_id, champion, most_goals_team, fewest_goals_team, topscorer_country, red_cards_bracket, points, resolved')
        .limit(2000),
      sb.from('wc_users')
        .select('id, username, avatar_country, wallet')
        .limit(2000),
    ]);
    if (bonusRes.error) {
      console.error('[bonus] wc_bonus read failed:', bonusRes.error);
      return { error: bonusRes.error.message };
    }
    if (usersRes.error) {
      console.error('[bonus] wc_users read failed:', usersRes.error);
      // Keep going — we can still render bonus cards with user-N fallback.
    }
    const byId = new Map();
    (usersRes.data || []).forEach(u => byId.set(u.id, u));
    const rows = (bonusRes.data || []).map(b => {
      const u = byId.get(b.user_id) || {};
      return {
        user_id:           b.user_id,
        username:          u.username || ('user-' + b.user_id),
        avatar_country:    u.avatar_country || null,
        has_wallet:        !!u.wallet,
        champion:          b.champion,
        most_goals_team:   b.most_goals_team,
        fewest_goals_team: b.fewest_goals_team,
        topscorer_country: b.topscorer_country,
        red_cards_bracket: b.red_cards_bracket,
        points:            b.points,
        resolved:          b.resolved,
      };
    });
    console.log('[bonus] loaded', rows.length, 'answers,', byId.size, 'users');
    if (typeof window !== 'undefined') window.__bonusDebug = { rows, byId: Array.from(byId.entries()), bonusRes, usersRes };
    return { ok: true, rows };
  }

  async function loadScorers(){
    const { data, error } = await sb
      .from('wc_scorers')
      .select('rank, player_name, country_code, goals, assists, updated_at')
      .order('rank', { ascending: true })
      .limit(20);
    if (error) return { error: error.message };
    return { ok: true, scorers: data || [] };
  }

  async function loadTournamentStats(){
    const { data, error } = await sb
      .from('wc_tournament_stats')
      .select('red_cards_total, updated_at')
      .eq('id', 1)
      .maybeSingle();
    if (error) return { error: error.message };
    return { ok: true, stats: data || { red_cards_total: 0 } };
  }

  window.WC_PROFILE = {
    updateAvatar,
    saveWallet,
    getBonus, saveBonus,
    loadMatches, loadMyTips, saveTip,
    getCrypto, saveCrypto, fetchLivePrices,
    loadOverallLeaderboard, loadGroupLeaderboard, loadCryptoLeaderboard, loadPool, loadPayouts,
    loadAllBonusAnswers, loadScorers, loadTournamentStats,
  };
})();

==============================================================================
=== FILE: dashboard/worldcup/app/assets/projection.js
==============================================================================

// BOBAI Worldcup '26 — Projected payout helper
// Mirrors the prize math in leaderboard.html (End-Pool / Group brackets / Crypto)
// and computes a per-user projection that lines up exactly with the leaderboard.
//
// Public API:
//   WC_PROJECTION.loadAll()                       → { pool, overall, allGroups, allCrypto, live }
//   WC_PROJECTION.compute(data, userId, opts)     → { end, groups, crypto, totalBobai, totalUsd }
//   WC_PROJECTION.loadAndCompute(userId, wallet)  → load + compute (simulateEligible=true), for own/profile cards
//   WC_PROJECTION.computeAll(data)                → array of projections for every wallet-linked user,
//                                                    sorted by totalBobai DESC. For the leaderboard payouts view.
//   WC_PROJECTION.renderHtml(proj)                → HTML for the dashboard/profile card
//   WC_PROJECTION.injectStyles()                  → adds the shared CSS once
(function(){
  const POOL_SPLIT = {
    groupTop1:  0.55,
    groupTop2:  0.30,
    groupBest3: 0.15,
    endTiers:   [0.50, 0.25, 0.15, 0.10],
  };
  const GROUP_SLOTS_TOP1  = 12;
  const GROUP_SLOTS_TOP2  = 12;
  const GROUP_SLOTS_BEST3 = 8;
  const END_TOP_N = POOL_SPLIT.endTiers.length;
  const GROUP_LETTERS = ['A','B','C','D','E','F','G','H','I','J','K','L'];
  const COINS = ['btc','bnb','bobai'];

  function withSelfAsEligible(rows, userId){
    return rows.map(r => r.user_id === userId ? { ...r, has_wallet: true } : r);
  }
  function isEligible(r){ return !!(r && r.has_wallet); }

  // ============== PRIZE MATH ==============
  function projectEnd(overallRows, pool, userId, simulateEligible, finalPayouts){
    const overallRank = (overallRows.findIndex(r => r.user_id === userId) + 1) || null;
    // Once the Final payout ran (wc_payouts pot=end rows exist), those
    // post-cascade amounts are the only truth — incl. 26x cap forfeits (0)
    // and the proportional redistribution to the uncapped winners.
    const endRows = (finalPayouts || []).filter(r => r.pot === 'end');
    if (endRows.length) {
      const mine = endRows.find(r => r.user_id === userId);
      if (!mine) return { overallRank, tierRank: null, prize: 0, settled: true };
      const prize = Number(mine.bobai_amount) || 0;
      return {
        overallRank,
        tierRank: Number(String(mine.position).split('_')[1]) || null,
        prize, settled: true, paid: !!mine.tx_hash, forfeit: prize === 0,
      };
    }
    const rows = simulateEligible ? withSelfAsEligible(overallRows, userId) : overallRows;
    const eligible = rows.filter(isEligible);
    const idx = eligible.findIndex(r => r.user_id === userId);
    if (idx < 0 || idx >= END_TOP_N) {
      return { overallRank, tierRank: null, prize: 0 };
    }
    return { overallRank, tierRank: idx + 1, prize: POOL_SPLIT.endTiers[idx] * (pool.end || 0) };
  }

  function projectGroups(allGroups, pool, userId, simulateEligible, groupPayouts){
    if (pool.group <= 0 && !pool.groupPaidAt) {
      return GROUP_LETTERS.map(letter => ({ letter, rank: null, prize: 0, bracket: null }));
    }
    const snapshots = allGroups.map(g => {
      const rows = simulateEligible ? withSelfAsEligible(g.rows, userId) : g.rows;
      return { letter: g.letter, rows, eligible: rows.filter(isEligible) };
    });
    // Best-3rd pool across all 12 groups — only the top 8 by group_points qualify.
    const best3Pool = [];
    snapshots.forEach(g => {
      if (g.eligible[2]) {
        best3Pool.push({ user_id: g.eligible[2].user_id, group_points: g.eligible[2].group_points || 0, letter: g.letter });
      }
    });
    const best3Keys = new Set(
      best3Pool.slice()
        .sort((a,b) => (b.group_points||0) - (a.group_points||0))
        .slice(0, GROUP_SLOTS_BEST3)
        .map(c => c.user_id + '|' + c.letter)
    );
    // Once group_paid_at is set, the post-cascade per-row amounts in
    // wc_payouts are the source of truth — they include 26x cap forfeits
    // (amount=0) and proportional redistribution bonuses to uncapped winners.
    const payoutByKey = new Map();
    (groupPayouts || []).forEach(r => {
      payoutByKey.set(`${r.user_id}|${r.group_letter}`, r);
    });
    const lookupPaid = (uid, letter) => payoutByKey.get(`${uid}|${letter}`);

    const settled = !!pool.groupPaidAt;
    return snapshots.map(g => {
      const idx = g.eligible.findIndex(r => r.user_id === userId);
      const paidRow = lookupPaid(userId, g.letter);

      // Once the group pot is settled, the ONLY truth is wc_payouts. A wallet
      // that drifted into a top-3 live slot after the freeze (daily $BOBAI
      // tie-breaker shuffle) must NOT show a phantom share it never received —
      // and a paid winner who drifted DOWN keeps their real amount.
      if (settled) {
        if (!paidRow) return { letter: g.letter, rank: null, prize: 0, bracket: null };
        const prize  = Number(paidRow.bobai_amount) || 0;
        const rank   = paidRow.position === '1st' ? 1 : paidRow.position === '2nd' ? 2 : 3;
        const bracket = paidRow.position === '1st' ? 'top1' : paidRow.position === '2nd' ? 'top2' : 'best3';
        return { letter: g.letter, rank, prize, bracket,
                 paid: true, forfeit: prize === 0, txHash: paidRow.tx_hash || null };
      }

      // Pre-settlement: live projection from current standings.
      if (idx < 0) return { letter: g.letter, rank: null, prize: 0, bracket: null };
      if (idx === 0) {
        return { letter: g.letter, rank: 1, prize: (pool.group * POOL_SPLIT.groupTop1) / GROUP_SLOTS_TOP1, bracket: 'top1' };
      }
      if (idx === 1) {
        return { letter: g.letter, rank: 2, prize: (pool.group * POOL_SPLIT.groupTop2) / GROUP_SLOTS_TOP2, bracket: 'top2' };
      }
      if (idx === 2) {
        const inBest8 = best3Keys.has(userId + '|' + g.letter);
        const rawShare = inBest8 ? (pool.group * POOL_SPLIT.groupBest3) / GROUP_SLOTS_BEST3 : 0;
        return { letter: g.letter, rank: 3, prize: rawShare, bracket: inBest8 ? 'best3' : '3rd-outside' };
      }
      return { letter: g.letter, rank: idx + 1, prize: 0, bracket: null };
    });
  }

  function projectCrypto(allCrypto, pool, livePrices, userId, simulateEligible, finalPayouts){
    const winnerPrize = (pool.crypto || 0) / 3;
    // Settled: wc_payouts pot=crypto rows carry the actual winner + amount per coin
    // (closest wallet-linked guess WITH BOBAI holdings — cap 0 → next closest).
    const cRows = (finalPayouts || []).filter(r => r.pot === 'crypto');
    if (cRows.length) {
      return COINS.map(coin => {
        const row = cRows.find(r => r.position === 'crypto_' + coin);
        const picked = (allCrypto[coin] || []).some(r => r.user_id === userId && r[coin + '_price'] != null);
        const isWinner = !!(row && row.user_id === userId);
        return {
          coin, picked, rank: null,
          totalPicks: (allCrypto[coin] || []).filter(r => r[coin + '_price'] != null).length,
          livePxAvailable: true, isWinner,
          prize: isWinner ? (Number(row.bobai_amount) || 0) : 0,
          settled: true, paid: isWinner && !!row.tx_hash,
        };
      });
    }
    return COINS.map(coin => {
      const priceKey = coin + '_price';
      const livePx = livePrices ? livePrices[coin] : null;
      const valid = (allCrypto[coin] || [])
        .filter(r => r[priceKey] != null)
        .map(r => ({ ...r, _tip: parseFloat(r[priceKey]) }))
        .filter(r => isFinite(r._tip));
      const adj = simulateEligible ? withSelfAsEligible(valid, userId) : valid;
      const sortedByTip = adj.slice().sort((a,b) => a._tip - b._tip);
      const eligibleAll = sortedByTip.filter(isEligible);
      let payoutWinnerId = null;
      if (eligibleAll.length) {
        if (livePx != null && isFinite(livePx)) {
          let bestDiff = Infinity;
          eligibleAll.forEach(row => {
            const d = Math.abs(row._tip - livePx);
            if (d < bestDiff) { bestDiff = d; payoutWinnerId = row.user_id; }
          });
        } else {
          payoutWinnerId = eligibleAll[0].user_id;
        }
      }
      const targetRow = sortedByTip.find(r => r.user_id === userId);
      let rank = null;
      if (targetRow) {
        if (livePx != null && isFinite(livePx)) {
          const ranked = sortedByTip.slice()
            .map(r => ({ r, dist: Math.abs(r._tip - livePx) }))
            .sort((a,b) => a.dist - b.dist);
          rank = ranked.findIndex(x => x.r.user_id === userId) + 1;
        } else {
          rank = sortedByTip.findIndex(r => r.user_id === userId) + 1;
        }
      }
      const isWinner = !!(targetRow && payoutWinnerId === userId);
      return {
        coin,
        picked: !!targetRow,
        rank,
        totalPicks: sortedByTip.length,
        livePxAvailable: livePx != null && isFinite(livePx),
        isWinner,
        prize: isWinner ? winnerPrize : 0,
      };
    });
  }

  // ============== DATA LOADING ==============
  async function loadAll(){
    const P = window.WC_PROFILE;
    const [poolR, overallR, allGroupsArr, allCryptoArr, live] = await Promise.all([
      P.loadPool(),
      P.loadOverallLeaderboard(),
      Promise.all(GROUP_LETTERS.map(L => P.loadGroupLeaderboard(L).then(r => ({ letter: L, rows: r.rows || [] })))),
      Promise.all(COINS.map(coin => P.loadCryptoLeaderboard(coin).then(r => ({ coin, rows: r.rows || [] })))),
      P.fetchLivePrices(),
    ]);
    if (poolR.error)    return { error: poolR.error };
    if (overallR.error) return { error: overallR.error };
    const p = poolR.pool || {};
    const pool = {
      total:        parseFloat(p.total_bobai)     || 0,
      group:        parseFloat(p.group_pot)       || 0,
      end:          parseFloat(p.endpool)         || 0,
      crypto:       parseFloat(p.crypto_pot)      || 0,
      price:        parseFloat(p.bobai_price_usd) || 0,
      groupPaidAt:  p.group_paid_at || null,
    };
    // Once a pot is paid, the actual per-row post-cascade amounts live in
    // wc_payouts. We overlay those over the raw shares so the page reflects
    // what each wallet really received (0 for 0-BOBAI forfeits, +redistributed
    // bonus for everyone else). One read covers group AND end/crypto (Final).
    let groupPayouts = [];
    let finalPayouts = [];
    {
      const r = await P.loadPayouts();
      if (!r.error) {
        const all = r.rows || [];
        groupPayouts = all.filter(x => x.pot === 'group');
        finalPayouts = all.filter(x => x.pot === 'end' || x.pot === 'crypto');
      }
    }
    pool.finalPaidAt = finalPayouts.some(x => x.tx_hash) ? (finalPayouts.find(x => x.paid_at)?.paid_at || null) : null;
    const allCrypto = {};
    allCryptoArr.forEach(c => { allCrypto[c.coin] = c.rows; });
    return {
      ok: true,
      pool,
      overall: overallR.rows || [],
      allGroups: allGroupsArr,
      allCrypto,
      live,
      groupPayouts,
      finalPayouts,
    };
  }

  function compute(data, userId, opts){
    opts = opts || {};
    const simulate = opts.simulateEligible !== false;  // default true
    const { pool, overall, allGroups, allCrypto, live, groupPayouts, finalPayouts } = data;
    const end    = projectEnd(overall, pool, userId, simulate, finalPayouts);
    const groups = projectGroups(allGroups, pool, userId, simulate, groupPayouts);
    const crypto = projectCrypto(allCrypto, pool, live, userId, simulate, finalPayouts);
    const totalBobai = end.prize
      + groups.reduce((a, g) => a + g.prize, 0)
      + crypto.reduce((a, c) => a + c.prize, 0);
    return {
      ok: true,
      pool, end, groups, crypto,
      totalBobai,
      totalUsd: pool.price > 0 ? totalBobai * pool.price : null,
    };
  }

  async function loadAndCompute(userId, userWallet){
    const data = await loadAll();
    if (data.error) return { error: data.error };
    const proj = compute(data, userId, { simulateEligible: true });
    return { ...proj, hasWallet: !!userWallet };
  }

  // Returns one projection per wallet-linked user, sorted by totalBobai DESC.
  // Each entry carries the user's display data so the leaderboard can render rows directly.
  function computeAll(data){
    const eligible = (data.overall || []).filter(isEligible);
    const list = eligible.map(u => {
      const proj = compute(data, u.user_id, { simulateEligible: false });
      return {
        user_id: u.user_id,
        username: u.username,
        avatar_country: u.avatar_country,
        has_wallet: true,
        end: proj.end,
        groups: proj.groups,
        crypto: proj.crypto,
        totalBobai: proj.totalBobai,
        totalUsd: proj.totalUsd,
      };
    });
    list.sort((a,b) => b.totalBobai - a.totalBobai);
    return list;
  }

  // ============== FORMATTERS ==============
  function fmtBobai(n){
    if (n == null) return '0';
    const v = Number(n);
    if (v >= 1_000_000) return (v/1_000_000).toFixed(2) + 'M';
    if (v >= 1_000)     return (v/1_000).toFixed(1) + 'K';
    return v.toFixed(0);
  }
  function fmtUsd(n){
    if (n == null || !isFinite(n)) return '—';
    if (n >= 1_000_000) return '$' + (n/1_000_000).toFixed(2) + 'M';
    if (n >= 1_000)     return '$' + (n/1_000).toFixed(1) + 'K';
    return '$' + n.toFixed(2);
  }
  function fmtPct(p){
    if (p == null || !isFinite(p)) return '—';
    if (p === 0)    return '0%';
    if (p < 0.01)   return '<0.01%';
    if (p < 0.1)    return p.toFixed(2) + '%';
    if (p < 10)     return p.toFixed(1)  + '%';
    return p.toFixed(0) + '%';
  }
  function tierIcon(rank){
    return rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : ('#'+rank);
  }
  function coinName(coin){ return coin === 'bobai' ? 'BOBAI' : coin.toUpperCase(); }

  // ============== UI: SINGLE-USER CARD ==============
  function renderHtml(proj){
    if (!proj || proj.error) {
      return `<div class="proj-empty">Projection unavailable${proj && proj.error ? ': ' + proj.error : ''}.</div>`;
    }
    const { pool, end, groups, crypto, totalBobai, totalUsd, hasWallet } = proj;
    const usd  = b => pool.price > 0 ? fmtUsd(b * pool.price) : 'n/a';
    const line = (cls, icon, label, bobai, paid) => {
      const won = bobai > 0;
      const cls2 = (cls || '') + (won ? '' : ' muted') + (paid ? ' paid' : '');
      const paidPill = paid ? '<span class="proj-paid-pill">✓ paid</span>' : '';
      return `<div class="proj-line ${cls2.trim()}">
        <div class="pl-left"><span class="pl-icon">${icon}</span><span class="pl-label">${label}${paidPill}</span></div>
        <div class="pl-right">
          <div class="pl-prize">${won ? fmtBobai(bobai) + ' BOBAI' : '—'}</div>
          <div class="pl-usd">${won ? usd(bobai) : '$0'}</div>
        </div>
      </div>`;
    };

    // Overall row
    const ord = n => n === 1 ? '1st' : n === 2 ? '2nd' : n === 3 ? '3rd' : (n + 'th');
    let overallHtml;
    if (end.settled && end.tierRank && end.forfeit) {
      overallHtml = `<div class="proj-line forfeit">
        <div class="pl-left"><span class="pl-icon">${tierIcon(end.tierRank)}</span><span class="pl-label">Overall · End-Pool ${ord(end.tierRank)} of 4 <span class="proj-forfeit-pill">holds 0 $BOBAI · forfeited</span></span></div>
        <div class="pl-right"><div class="pl-prize">0 BOBAI</div><div class="pl-usd">$0</div></div>
      </div>`;
    } else if (end.tierRank) {
      overallHtml = line('', tierIcon(end.tierRank), `Overall · End-Pool ${ord(end.tierRank)} of 4`, end.prize, !!end.paid);
    } else if (end.overallRank) {
      overallHtml = `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">#${end.overallRank}</span><span class="pl-label">Overall · outside top 4</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
    } else {
      overallHtml = `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">—</span><span class="pl-label">Overall · no rank yet</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
    }

    // Groups: show groups where user is currently top-3 OR has a wc_payouts row
    // (so 0-amount forfeits also surface with the "holds 0 $BOBAI" tag instead
    // of silently disappearing).
    const winningGroups = groups.filter(g => (g.rank && g.rank <= 3) || g.paid);
    const groupPaid = !!pool.groupPaidAt;
    let groupsHtml;
    if (!winningGroups.length) {
      groupsHtml = `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">—</span><span class="pl-label">Groups · outside top 3 in all 12 groups</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
    } else {
      groupsHtml = winningGroups.map(g => {
        const lbl = g.bracket === 'top1' ? '1st' : g.bracket === 'top2' ? '2nd' : g.bracket === 'best3' ? 'best 3rd' : '3rd (outside best 8)';
        if (g.forfeit) {
          // Wallet linked but holds 0 $BOBAI → 26× cap = 0 → share cascades to others.
          return `<div class="proj-line forfeit">
            <div class="pl-left"><span class="pl-icon">${tierIcon(g.rank)}</span><span class="pl-label">Group ${g.letter} · ${lbl} <span class="proj-forfeit-pill">holds 0 $BOBAI · forfeited</span></span></div>
            <div class="pl-right">
              <div class="pl-prize">0 BOBAI</div>
              <div class="pl-usd">$0</div>
            </div>
          </div>`;
        }
        return line('', tierIcon(g.rank), `Group ${g.letter} · ${lbl}`, g.prize, groupPaid && g.prize > 0);
      }).join('');
    }
    const groupsSectionHeader = groupPaid
      ? `Groups · 12 brackets <span class="proj-paid-pill">✓ paid</span>`
      : `Groups · 12 brackets (55 / 30 / 15 % split)`;

    // Crypto: list all 3 coins
    const cryptoSettled = crypto.some(c => c.settled);
    const cryptoHtml = crypto.map(c => {
      const name = coinName(c.coin);
      if (!c.picked) {
        return `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">—</span><span class="pl-label">${name} · no pick</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
      }
      if (c.settled) {
        if (c.isWinner) return line('', '🥇', `${name} · closest guess — pot won`, c.prize, !!c.paid);
        return `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">—</span><span class="pl-label">${name} · pot settled — not the winner</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
      }
      if (!c.livePxAvailable) {
        return `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">#${c.rank}</span><span class="pl-label">${name} · live price unavailable</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
      }
      if (c.isWinner) return line('', '🥇', `${name} · currently closest`, c.prize);
      return `<div class="proj-line muted"><div class="pl-left"><span class="pl-icon">#${c.rank}</span><span class="pl-label">${name} · not closest</span></div><div class="pl-right"><div class="pl-prize">—</div><div class="pl-usd">$0</div></div></div>`;
    }).join('');

    const totalPct = pool.total > 0 ? (totalBobai / pool.total * 100) : 0;
    const totalHtml = `<div class="proj-total">
      <div class="pl-left"><span class="pl-label">Total projected payout</span><span class="pl-sub">${fmtPct(totalPct)} of full pool</span></div>
      <div class="pl-right">
        <div class="pl-prize">${fmtBobai(totalBobai)} BOBAI</div>
        <div class="pl-usd">${pool.price > 0 ? fmtUsd(totalUsd) : 'n/a'}</div>
      </div>
    </div>`;

    const walletWarn = (!hasWallet && !(end.settled && crypto.some(c => c.settled)))
      ? `<div class="proj-warn">⚠ No wallet linked — at current standings the actual payout is <b>$0</b>. <a href="./dashboard.html">Link a wallet</a> to qualify (skip+promote rule).</div>`
      : '';

    const endSettled = !!end.settled;
    const allSettled = endSettled && cryptoSettled && !!pool.groupPaidAt;
    const endHeader = endSettled
      ? `Overall · End-Pool (top 4 · 50 / 25 / 15 / 10 %) <span class="proj-paid-pill">✓ paid</span>`
      : `Overall · End-Pool (top 4 · 50 / 25 / 15 / 10 %)`;
    const cryptoHeader = cryptoSettled
      ? `Crypto · 3 coins (winner-take-all) <span class="proj-paid-pill">✓ paid</span>`
      : `Crypto · 3 coins (winner-take-all)`;
    const foot = allSettled
      ? `Final — all pots settled &amp; paid on-chain. Amounts are the actual on-chain transfers (26× cap cascade applied).`
      : `Live · standings refresh after each match · this projection assumes current ranks hold to settlement.`;
    const totalLabel = allSettled ? 'Total payout received' : 'Total projected payout';
    return `
      <div class="proj-section"><div class="proj-sh">${endHeader}</div>${overallHtml}</div>
      <div class="proj-section"><div class="proj-sh">${groupsSectionHeader}</div>${groupsHtml}</div>
      <div class="proj-section"><div class="proj-sh">${cryptoHeader}</div>${cryptoHtml}</div>
      ${totalHtml.replace('Total projected payout', totalLabel)}
      ${walletWarn}
      <div class="proj-foot">${foot}</div>
    `;
  }

  // ============== UI: LEADERBOARD PAYOUTS LIST ==============
  // Returns a flat row for each wallet-linked user with their summed payout.
  // `me` may be null when viewing as anon (won't happen, but defensive).
  function renderPayoutListRowHtml(entry, rank, pool, opts){
    opts = opts || {};
    const usd  = b => pool.price > 0 ? fmtUsd(b * pool.price) : 'n/a';
    const pct  = pool.total > 0 ? (entry.totalBobai / pool.total * 100) : 0;
    const ava  = window.WC_AVATAR
      ? window.WC_AVATAR.avatarHtml(entry.avatar_country, 'sm')
      : '<span style="font-size:22px">⚪</span>';
    const country = (window.WC_COUNTRIES && window.WC_COUNTRIES.find(c => c.code === entry.avatar_country)) || null;
    const countryName = country ? country.name : '—';
    const rankLbl = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : '#' + rank;
    const isMe = opts.meId && entry.user_id === opts.meId;
    const href = './user.html?u=' + encodeURIComponent(entry.username);
    // Tiny breakdown chip line: which pots contribute. Group-chips flip
    // to green once the group pot has been paid out (pool.groupPaidAt set).
    // Forfeit groups (had a top-3 slot but the 26× cap wiped the share) get
    // their own amber chip + a tooltip explaining the cascade.
    const groupPaid = !!pool.groupPaidAt;
    const contribs = [];
    const forfeitGroups = [];
    if (entry.end && entry.end.prize > 0)        contribs.push({ text: `End ${tierIcon(entry.end.tierRank)}`, paid: !!entry.end.paid });
    (entry.groups || []).forEach(g => {
      if (g.prize > 0)        contribs.push({ text: `G${g.letter}`, paid: groupPaid });
      else if (g.forfeit)     forfeitGroups.push(g.letter);
    });
    (entry.crypto || []).forEach(c => { if (c.prize > 0) contribs.push({ text: coinName(c.coin), paid: !!c.paid }); });
    // Append forfeit chips (amber) after winning chips so they read as exceptions
    forfeitGroups.forEach(letter => contribs.push({ text: `G${letter}`, forfeit: true }));
    if (entry.end && entry.end.settled && entry.end.forfeit && entry.end.tierRank) {
      contribs.push({ text: `End ${tierIcon(entry.end.tierRank)}`, forfeit: true });
    }
    let chipLine;
    if (contribs.length) {
      chipLine = `<div class="payout-chips">${contribs.map(x => {
        const cls = x.forfeit ? ' forfeit' : (x.paid ? ' paid' : '');
        const title = x.forfeit ? ' title="Top-3 in this group but 26x cap not reached — share cascaded to other winners."' : '';
        return `<span class="payout-chip${cls}"${title}>${x.text}</span>`;
      }).join('')}</div>`;
    } else if (forfeitGroups.length) {
      chipLine = `<div class="payout-chips muted">26× cap not reached in ${forfeitGroups.length} group${forfeitGroups.length > 1 ? 's' : ''} — share cascaded</div>`;
    } else {
      chipLine = '<div class="payout-chips muted">no pot won — wallet linked but currently outside payout positions</div>';
    }
    const rowCls = 'row payout-row' + (rank === 1 ? ' top1' : rank === 2 ? ' top2' : rank === 3 ? ' top3' : '') + (isMe ? ' me' : '');
    return `<a href="${href}" class="${rowCls}" style="text-decoration:none;color:inherit">
      <div class="rank">${rankLbl}</div>
      <div class="ava-sm">${ava}</div>
      <div class="uinfo">
        <div class="uname"><span class="uname-text">${escapeHtml(entry.username)}</span><span class="ball">⚽</span></div>
        <div class="umeta">${countryName}</div>
        ${chipLine}
      </div>
      <div class="prize-cell">
        <div class="pz-pct">${fmtPct(pct)}</div>
        <div class="pz-bobai">${fmtBobai(entry.totalBobai)} BOBAI</div>
        <div class="pz-usd">${pool.price > 0 ? fmtUsd(entry.totalUsd) : 'n/a'}</div>
      </div>
    </a>`;
  }
  function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[m]); }

  // ============== STYLES ==============
  const STYLES = `
    .proj-section{margin-bottom:14px}
    .proj-sh{font-family:'Space Grotesk';font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;opacity:.85}
    .proj-line{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;gap:10px}
    .proj-line .pl-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
    .proj-line .pl-icon{font-size:18px;line-height:1;width:24px;text-align:center;flex-shrink:0}
    .proj-line .pl-label{font-size:13px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .proj-line .pl-right{text-align:right;flex-shrink:0}
    .proj-line .pl-prize{font-family:'Space Grotesk';font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.3px;line-height:1.1}
    .proj-line .pl-usd{font-size:11px;color:var(--muted);margin-top:2px}
    .proj-line.muted{opacity:.55}
    .proj-line.muted .pl-prize{color:var(--muted);font-weight:600}
    .proj-total{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;background:var(--gold-glow);border:1px solid var(--gold);border-radius:10px;margin-top:14px;gap:10px}
    .proj-total .pl-left{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
    .proj-total .pl-label{font-family:'Space Grotesk';font-weight:700;font-size:13px;color:var(--gold);letter-spacing:.5px;text-transform:uppercase}
    .proj-total .pl-sub{font-size:11px;color:var(--muted)}
    .proj-total .pl-right{text-align:right;flex-shrink:0}
    .proj-total .pl-prize{font-family:'Space Grotesk';font-weight:800;font-size:18px;color:var(--gold);line-height:1.1}
    .proj-total .pl-usd{font-size:12px;color:var(--text);margin-top:2px;font-weight:600}
    .proj-warn{margin-top:12px;padding:10px 12px;background:rgba(255,180,0,.06);border:1px solid rgba(255,180,0,.25);border-radius:8px;color:#ffc066;font-size:12px;line-height:1.5}
    .proj-warn a{color:#ffd58a;font-weight:700}
    .proj-foot{margin-top:10px;font-size:11px;color:var(--muted);text-align:center;line-height:1.5}
    .proj-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}

    /* Leaderboard payouts list */
    .payout-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
    .payout-chips.muted{font-size:10.5px;color:var(--muted);opacity:.7;margin-top:5px}
    .payout-chip{display:inline-block;padding:2px 7px;background:rgba(240,185,11,.07);border:1px solid rgba(240,185,11,.22);border-radius:999px;font-size:9.5px;font-weight:600;color:var(--gold);letter-spacing:.3px;line-height:1.4}
    .payout-chip.paid{background:rgba(0,230,118,.08);border-color:rgba(0,230,118,.32);color:#7fffb0}
    .payout-chip.forfeit{background:rgba(255,180,0,.08);border-color:rgba(255,180,0,.32);color:#ffc066;cursor:help}
    /* Paid badge on the per-group projection line + section header */
    .proj-line.paid{background:linear-gradient(90deg,rgba(0,230,118,.08),rgba(0,0,0,.3));border-color:rgba(0,230,118,.32)}
    .proj-line.paid .pl-prize{color:#7fffb0}
    .proj-paid-pill{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 7px;border-radius:5px;background:rgba(0,230,118,.14);border:1px solid rgba(0,230,118,.32);color:#7fffb0;font-family:'Space Grotesk';font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle}
    /* Forfeit (cap-hit at 0 BOBAI balance): share cascades to other winners */
    .proj-line.forfeit{background:linear-gradient(90deg,rgba(255,180,0,.07),rgba(0,0,0,.3));border-color:rgba(255,180,0,.25);opacity:.8}
    .proj-line.forfeit .pl-prize{color:#ffc066}
    .proj-line.forfeit .pl-usd{color:rgba(255,192,102,.6)}
    .proj-forfeit-pill{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 7px;border-radius:5px;background:rgba(255,180,0,.12);border:1px solid rgba(255,180,0,.32);color:#ffc066;font-family:'Space Grotesk';font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle}
  `;
  let stylesInjected = false;
  function injectStyles(){
    if (stylesInjected) return;
    stylesInjected = true;
    const s = document.createElement('style');
    s.textContent = STYLES;
    document.head.appendChild(s);
  }

  window.WC_PROJECTION = {
    loadAll,
    compute,
    loadAndCompute,
    computeAll,
    renderHtml,
    renderPayoutListRowHtml,
    injectStyles,
    GROUP_LETTERS,
    COINS,
  };
})();

==============================================================================
=== FILE: dashboard/worldcup/app/assets/style.css
==============================================================================

/* BOBAI Worldcup '26 — Beta App shared styles */
/* The typefaces, served from this origin. This used to be an @import from
   Google, which the site's Content-Security-Policy (style-src 'self') blocked —
   so the app loaded no webfont at all and rendered in the system font while the
   rest of the site did not. Measured: document.fonts was empty here.
   Both are variable fonts, one file per family, and both are already in cache
   for anyone who came via the homepage. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/spacegrotesk-var.woff2') format('woff2');
}

:root{
  --gold:#F0B90B;--gold2:#ffd54f;--gold-glow:rgba(240,185,11,.12);
  --red:#ff3028;--green:#00e676;--blue:#4040ff;--purple:#a040ff;
  --bg:#050510;--card:rgba(12,12,28,.85);--border:rgba(240,185,11,.08);
  --text:#e4e5f1;--muted:#7b7d9e;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}

.bg-grad{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(240,185,11,.10), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(64,64,255,.10), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,48,40,.05), transparent 60%)}

.page{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

nav{position:sticky;top:0;z-index:100;background:rgba(5,5,16,.88);backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid var(--border)}
.nav{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}
.back-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:rgba(240,185,11,.08);border:1px solid rgba(240,185,11,.2);color:var(--gold);font-size:12px;font-weight:600;text-decoration:none;letter-spacing:.3px;transition:transform .2s ease,background .2s,border-color .2s;white-space:nowrap}
.back-btn:hover{transform:translateX(-2px);background:rgba(240,185,11,.15);border-color:rgba(240,185,11,.4)}
.back-btn span{font-size:14px;line-height:1}
.nav .brand{font-family:'Space Grotesk';font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--gold);white-space:nowrap}
.brand-link{font-family:'Space Grotesk';font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--gold);white-space:nowrap;text-decoration:none}
.brand-link:hover{opacity:.85}
.nav .user{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.nav .user b{color:var(--text)}
.nav .user a{color:var(--gold);text-decoration:none}
.nav .user a:hover{text-decoration:underline}

/* Tab navigation under the top bar */
.tabbar{max-width:1200px;margin:0 auto;display:flex;gap:0;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar a{padding:11px 14px;font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s, border-color .15s;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.tabbar a:hover{color:var(--text)}
.tabbar a.active{color:var(--gold);border-bottom-color:var(--gold)}
.tabbar a .ic{font-size:13px;line-height:1}

@media(max-width:560px){
  .nav{padding:0 14px;height:50px}
  .nav .brand,.brand-link{font-size:12px}
  .nav .user{font-size:11px}
  .tabbar{padding:0 8px}
  .tabbar a{padding:10px 10px;font-size:10.5px;letter-spacing:.3px}
  .tabbar a .ic{font-size:12px}
}

main{flex:1;padding:48px 24px}
.container{max-width:520px;margin:0 auto}

/* Inline back row injected by nav.js. Sits between tabbar and main content. */
.back-row{max-width:1200px;margin:0 auto;padding:10px 24px 0}
.back-row button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:transform .15s ease,color .15s,border-color .15s,background .15s}
.back-row button:hover{color:var(--gold);border-color:rgba(240,185,11,.3);background:rgba(240,185,11,.06);transform:translateX(-2px)}
.back-row button .ic{font-size:13px;line-height:1}
@media(max-width:560px){
  .back-row{padding:8px 14px 0}
  .back-row button{font-size:11px;padding:5px 9px}
}

/* CARD */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px}

/* HEADINGS */
h1{font-family:'Space Grotesk';font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.02em;margin-bottom:8px;text-align:center}
h1 .accent{background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 60%,#fff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:28px}

/* TABS */
.tabs{display:flex;gap:8px;margin-bottom:24px;background:rgba(0,0,0,.3);padding:4px;border-radius:10px}
.tab{flex:1;padding:10px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;transition:all .2s}
.tab.active{background:var(--gold-glow);color:var(--gold)}

/* FORMS */
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 14px;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .2s}
.field input:focus,.field select:focus{outline:none;border-color:rgba(240,185,11,.4)}
.field .hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}

/* BUTTON */
.btn{display:block;width:100%;padding:14px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#050510;font-size:14px;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(240,185,11,.25)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

/* ALERTS */
.alert{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px}
.alert.error{background:rgba(255,48,40,.1);border:1px solid rgba(255,48,40,.3);color:#ff8580}
.alert.ok{background:rgba(0,230,118,.08);border:1px solid rgba(0,230,118,.25);color:#5fffa0}
.alert.info{background:rgba(64,64,255,.08);border:1px solid rgba(64,64,255,.25);color:#9090ff}

/* HIDDEN */
.hidden{display:none !important}

/* TWEMOJI — keep Twitter SVG flags + emojis at glyph-size instead of natural pixel size */
img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-.125em;display:inline-block}

/* SHARED AVATAR / ILLUSTRATION SLOTS (assets/avatar.js)
   .wc-ava wraps a country avatar in a circle. The <img> shows the BOBAI
   illustration when delivered; on 404 it auto-fallbacks to a flag emoji span.
   .wc-illus is for non-avatar illustrations (trophy, hero banner, coin icons). */
.wc-ava{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(240,185,11,.06);border:2px solid var(--gold);overflow:hidden;line-height:1;flex-shrink:0;position:relative}
.wc-ava-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.wc-ava[data-empty]{border-style:dashed;border-color:rgba(123,125,158,.4);background:rgba(0,0,0,.2);color:var(--muted)}
.wc-ava-xs{border-width:1px}
.wc-ava-sm{border-width:1.5px}

/* Designer mode (?design=1) — show missing-illustration placeholders explicitly */
.wc-ava-design{border-style:dashed !important;border-color:#ff40b4 !important;background:rgba(255,64,180,.06) !important}
.wc-ava-design.wc-has-art{border-style:solid !important;border-color:var(--gold) !important;background:rgba(240,185,11,.06) !important}
.wc-ava-design .wc-ava-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:.6}
.wc-ava-design.wc-has-art .wc-ava-fallback{display:none}
.wc-ava-design .wc-ava-tag{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;color:#ff40b4;font-family:'Space Grotesk',monospace;letter-spacing:.3px;white-space:nowrap;background:rgba(0,0,0,.85);padding:2px 6px;border-radius:4px;pointer-events:none}
.wc-ava-design.wc-has-art .wc-ava-tag{display:none}

/* Click-to-zoom on delivered BOBAI avatars — applies everywhere avatar.js runs */
.wc-ava.wc-has-art{cursor:zoom-in}
.wc-ava.wc-has-art .wc-ava-img{transition:transform .15s}
.wc-ava.wc-has-art:hover .wc-ava-img{transform:scale(1.06)}
#wc-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(6px);cursor:zoom-out;padding:24px}
#wc-lightbox.open{display:flex}
#wc-lightbox img{max-width:min(640px,90vw);max-height:85vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:rgba(255,255,255,.02)}
#wc-lightbox .lb-cap{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-family:'Space Grotesk';font-weight:700;color:var(--gold);font-size:14px;letter-spacing:.5px;text-align:center;pointer-events:none}
#wc-lightbox .lb-close{position:absolute;top:14px;right:18px;background:transparent;border:none;color:#fff;font-size:32px;cursor:pointer;line-height:1;opacity:.7;padding:6px 12px}
#wc-lightbox .lb-close:hover{opacity:1}

.wc-illus{position:relative;display:inline-flex;align-items:center;justify-content:center}
.wc-illus-design{border:2px dashed #ff40b4;background:repeating-linear-gradient(45deg,rgba(255,64,180,.04),rgba(255,64,180,.04) 8px,rgba(255,64,180,.08) 8px,rgba(255,64,180,.08) 16px);border-radius:10px;min-height:80px}
.wc-illus-design.wc-has-art{border:none;background:none}
.wc-illus-design .wc-illus-tag{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;color:#ff40b4;font-family:'Space Grotesk',monospace;background:rgba(0,0,0,.85);padding:3px 8px;border-radius:4px;pointer-events:none}
.wc-illus-design.wc-has-art .wc-illus-tag{display:none}

/* Hero banner — full-width landscape illustration above page heading.
   Shown when /illus/<slot>.{webp|png|jpg} exists. In designer mode the
   slot shows a magenta dashed placeholder with the expected filename. */
.wc-hero{display:block;width:100%;margin:0 0 18px;position:relative;text-align:center}
.wc-hero img{max-width:100%;height:auto;max-height:240px;display:inline-block;object-fit:contain}
.wc-hero-design{min-height:120px;border:2px dashed #ff40b4;background:repeating-linear-gradient(45deg,rgba(255,64,180,.05),rgba(255,64,180,.05) 10px,rgba(255,64,180,.10) 10px,rgba(255,64,180,.10) 20px);border-radius:12px;padding:14px}
.wc-hero-design.wc-has-art{border:none;background:none;padding:0}
.wc-hero-design .wc-hero-tag{position:absolute;top:8px;left:10px;font-size:10px;font-weight:700;color:#ff40b4;font-family:'Space Grotesk',monospace;background:rgba(0,0,0,.85);padding:3px 8px;border-radius:4px;pointer-events:none}
.wc-hero-design.wc-has-art .wc-hero-tag{display:none}
@media (max-width: 600px){
  .wc-hero img{max-height:160px}
}

/* Pool-card corner trophy accent (positioned absolutely in .pool top-right). */
.pool{position:relative}
.pool .wc-pool-trophy{position:absolute;top:-18px;right:-10px;width:96px;height:96px;pointer-events:none;z-index:1}
.pool .wc-pool-trophy img{width:100%;height:100%;object-fit:contain}
@media (max-width: 600px){
  .pool .wc-pool-trophy{width:64px;height:64px;top:-12px;right:-6px}
}

/* Generic card corner accent — small BOBAI decoration in top-right of a .card.
   Same positioning recipe as .wc-pool-trophy. Use <div data-card-accent="slot"></div>
   placed directly inside a .card to wire it up. */
.card{position:relative}
.wc-card-accent{position:absolute;top:-18px;right:-10px;width:88px;height:88px;pointer-events:none;z-index:1}
.wc-card-accent img{width:100%;height:100%;object-fit:contain}
@media (max-width: 600px){
  .wc-card-accent{width:60px;height:60px;top:-12px;right:-6px}
}

/* DESIGNER PLACEHOLDER — hot pink callout so the illustrator can spot
   every spot that needs art at a glance. Remove this whole block once
   all illustrations have landed in /worldcup/app/illus/. */
.dp{position:relative;padding:14px 16px;margin:8px 0 14px;background:repeating-linear-gradient(45deg,rgba(255,64,180,.06),rgba(255,64,180,.06) 10px,rgba(255,64,180,.10) 10px,rgba(255,64,180,.10) 20px);border:2px dashed #ff40b4;border-radius:10px}
.dp .dp-badge{position:absolute;top:-10px;left:14px;background:#ff40b4;color:#050510;font-size:10px;font-weight:800;letter-spacing:1.5px;padding:3px 10px;border-radius:6px;text-transform:uppercase;font-family:'Space Grotesk'}
.dp .dp-title{color:#ff40b4;font-family:'Space Grotesk';font-weight:700;font-size:13px;margin-bottom:4px;letter-spacing:.3px}
.dp .dp-body{color:var(--text);font-size:12px;line-height:1.5;opacity:.85}
.dp .dp-body code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:4px;font-size:11px;color:#ffb1de;font-family:'Space Grotesk'}
.dp .dp-body a{color:#ff8fd0;text-decoration:underline}
.dp.dp-inline{display:inline-block;margin:4px 6px;padding:8px 12px}
.dp.dp-inline .dp-title{margin-bottom:0}

@media (max-width: 600px){
  main{padding:24px 16px}
  .card{padding:24px 20px}
}

==============================================================================
=== FILE: dashboard/worldcup/app/assets/twemojify.js
==============================================================================

// BOBAI Worldcup '26 — Twemoji parser
// Windows browsers don't ship a flag-emoji font (and most don't ship any
// color-emoji font at all), so flag glyphs render as black squares with
// country codes. Twemoji replaces emoji text nodes with Twitter's SVG
// emoji images so every desktop sees the same flags as mobile.
//
// Re-parses a few times after initial load to catch async-rendered
// content (country grids, leaderboard rows) without needing every page
// to call this manually.

(function(){
  const BASE = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
  function parse(){
    if (!window.twemoji || !document.body) return;
    try {
      window.twemoji.parse(document.body, { folder: 'svg', ext: '.svg', base: BASE });
    } catch (e) { /* swallow — partial parse is harmless */ }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', parse);
  } else {
    parse();
  }
  // Catch async content that renders after auth/fetch completes.
  [150, 600, 1500, 3000].forEach(ms => setTimeout(parse, ms));
})();

==============================================================================
=== FILE: dashboard/worldcup/app/bonus.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Auth gate — hide page + redirect anonymous visitors before first paint -->
  <style>html.wc-gate{visibility:hidden!important}</style>
  <script>
    (function(){
      document.documentElement.classList.add('wc-gate');
      function hasSession(){
        try {
          return Object.keys(localStorage).some(function(k){
            return k.indexOf('sb-')===0 && k.lastIndexOf('-auth-token')===k.length-11 && !!localStorage.getItem(k);
          });
        } catch(e){ return true; }
      }
      if (!hasSession()){ window.location.replace('/worldcup/'); return; }
      document.documentElement.classList.remove('wc-gate');
      window.addEventListener('pageshow', function(e){
        if (e.persisted && !hasSession()) window.location.replace('/worldcup/');
      });
    })();
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Bonus Questions</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:780px}
    .q{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border)}
    .q:last-of-type{border-bottom:none}
    .q .q-num{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
    .q .q-title{font-family:'Space Grotesk';font-size:18px;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.3}
    .q .q-hint{font-size:12px;color:var(--muted);margin-bottom:14px}
    .q .q-points{color:var(--gold);font-weight:600}

    .country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;max-height:260px;overflow-y:auto;padding:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px}
    .country-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;color:var(--text)}
    .country-cell:hover{background:rgba(240,185,11,.06);border-color:rgba(240,185,11,.15)}
    .country-cell.sel{background:var(--gold-glow);border-color:var(--gold)}
    .country-cell .fl{font-size:24px;line-height:1}
    .country-cell .nm{font-size:10px;color:var(--muted);text-align:center;line-height:1.2}
    .country-cell.sel .nm{color:var(--gold)}

    /* Champion picker — uses BOBAI-in-jersey avatars (flag fallback until art lands) */
    .champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-height:520px;overflow-y:auto;padding:12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:12px}
    .champ-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border-radius:12px;background:rgba(0,0,0,.25);border:1.5px solid transparent;cursor:pointer;transition:all .15s;color:var(--text);position:relative}
    .champ-cell:hover{background:rgba(240,185,11,.05);border-color:rgba(240,185,11,.25);transform:translateY(-1px)}
    .champ-cell.sel{background:linear-gradient(135deg,rgba(240,185,11,.12),rgba(240,185,11,.04));border-color:var(--gold);box-shadow:0 4px 16px rgba(240,185,11,.18)}
    .champ-cell.sel::after{content:'✓ Your champion';position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#050510;font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 8px;border-radius:6px;font-family:'Space Grotesk';text-transform:uppercase;white-space:nowrap}
    .champ-cell .champ-ava-wrap{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:2px}
    .champ-cell .nm{font-size:12px;color:var(--text);text-align:center;line-height:1.2;font-weight:500}
    .champ-cell.sel .nm{color:var(--gold);font-weight:700}
    /* Avatar inside champion picker grows to fill its 80×80 wrap */
    .champ-ava-wrap .wc-ava{width:80px !important;height:80px !important}
    .champ-cell:disabled,.champ-cell.locked{opacity:.5;cursor:not-allowed}

    .bracket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
    .br-btn{padding:14px;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
    .br-btn:hover{background:rgba(240,185,11,.06);border-color:rgba(240,185,11,.2)}
    .br-btn.sel{background:var(--gold-glow);border-color:var(--gold);color:var(--gold)}

    .summary{padding:14px;background:rgba(64,64,255,.06);border:1px solid rgba(64,64,255,.2);border-radius:10px;color:#9090ff;font-size:12px;line-height:1.5;margin-bottom:24px}
    .save-bar{position:sticky;bottom:16px;padding:14px;background:var(--bg);border:1px solid var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(8px)}
    .save-bar .info{font-size:12px;color:var(--muted)}
    .save-bar .info b{color:var(--text)}

    .locked-banner{padding:16px;background:rgba(255,180,0,.08);border:1px solid rgba(255,180,0,.3);border-radius:10px;color:#ffc066;font-size:13px;text-align:center;margin-bottom:20px}
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="bonus-hero"></div>
        <div class="card">
          <h1><span class="accent">Bonus Questions</span></h1>
          <p class="sub">5 predictions · 20 points each · final lock 18 June 2026, 15:45 UTC</p>

          <div id="locked" class="locked-banner hidden">
            🔒 Bonus questions are locked — final lock has passed.
          </div>

          <div class="summary">
            Each correct prediction is worth <b>20 points</b> and counts toward your overall leaderboard score.
            <b>One-time extension:</b> you can still edit your answers until <b>18 June 2026, 15:45 UTC</b> — 15 min before the first matchday-2 match.
          </div>

          <div id="alert"></div>

          <!-- Q1: Champion -->
          <div class="q" data-field="champion">
            <div class="q-num">Question 1 · <span class="q-points">20 pts</span></div>
            <div class="q-title">🏆 Who wins the World Cup?</div>
            <div class="q-hint">Pick the country you think will lift the trophy. The card shows <b>BOBAI in that team's kit</b>.</div>
            <div class="champ-grid" data-grid="champion"></div>
          </div>

          <!-- Q2: Most goals -->
          <div class="q" data-field="most_goals_team">
            <div class="q-num">Question 2 · <span class="q-points">20 pts</span></div>
            <div class="q-title">⚽ Team with the most goals scored</div>
            <div class="q-hint">Total goals across all of their matches.</div>
            <div class="country-grid" data-grid="most_goals_team"></div>
          </div>

          <!-- Q3: Fewest goals -->
          <div class="q" data-field="fewest_goals_team">
            <div class="q-num">Question 3 · <span class="q-points">20 pts</span></div>
            <div class="q-title">🥅 Team with the fewest goals scored</div>
            <div class="q-hint">Lowest total goals scored across their matches.</div>
            <div class="country-grid" data-grid="fewest_goals_team"></div>
          </div>

          <!-- Q4: Top scorer country -->
          <div class="q" data-field="topscorer_country">
            <div class="q-num">Question 4 · <span class="q-points">20 pts</span></div>
            <div class="q-title">👑 Top scorer's country</div>
            <div class="q-hint">Which nation's player ends up with the most goals (Golden Boot)?</div>
            <div class="country-grid" data-grid="topscorer_country"></div>
          </div>

          <!-- Q5: Red cards -->
          <div class="q" data-field="red_cards_bracket">
            <div class="q-num">Question 5 · <span class="q-points">20 pts</span></div>
            <div class="q-title">🟥 Total red cards in the tournament</div>
            <div class="q-hint">Pick the bracket that the final total will fall into.</div>
            <div class="bracket-grid">
              <button class="br-btn" data-val="<5">&lt; 5</button>
              <button class="br-btn" data-val="5-9">5 – 9</button>
              <button class="br-btn" data-val="10-14">10 – 14</button>
              <button class="br-btn" data-val="15-19">15 – 19</button>
              <button class="br-btn" data-val=">19">&gt; 19</button>
            </div>
          </div>

          <!-- Save bar -->
          <div class="save-bar">
            <div class="info">
              <div><b id="answered-count">0/5</b> answered</div>
              <div id="save-status">Unsaved changes — pick at least one option to enable Save.</div>
            </div>
            <button id="btn-save" class="btn" style="width:auto;padding:12px 22px" disabled>Save answers</button>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    // State: pending answers (in-memory until Save)
    const FIELDS = ['champion','most_goals_team','fewest_goals_team','red_cards_bracket','topscorer_country'];
    const VALID_BRACKETS = new Set(['<5','5-9','10-14','15-19','>19']);
    let pending = {};   // {field: value}
    let saved   = {};   // last-saved snapshot
    let locked = false;

    // A field counts as "answered" only if its value is still valid.
    // Red-card brackets changed mid-beta; old DB values like '<20' no longer match a button.
    function isAnswered(field, val) {
      if (!val) return false;
      if (field === 'red_cards_bracket') return VALID_BRACKETS.has(val);
      return true;
    }

    function isLocked(){
      const cfgK = new Date(window.WC_CONFIG.BONUS_CRYPTO_LOCK_UTC).getTime();
      return Date.now() >= cfgK;
    }

    function renderCountryGrid(field){
      const grid = document.querySelector(`[data-grid="${field}"]`);
      grid.innerHTML = '';
      const isChampion = field === 'champion';
      window.WC_COUNTRIES.forEach(c => {
        const b = document.createElement('button');
        b.type = 'button';
        b.dataset.code = c.code;
        if (isChampion) {
          b.className = 'champ-cell' + (pending[field] === c.code ? ' sel' : '');
          const avaHtml = window.WC_AVATAR
            ? window.WC_AVATAR.avatarHtml(c.code, 'xl')
            : `<span style="font-size:48px">${c.flag}</span>`;
          b.innerHTML = `<div class="champ-ava-wrap">${avaHtml}</div><span class="nm">${c.name}</span>`;
        } else {
          b.className = 'country-cell' + (pending[field] === c.code ? ' sel' : '');
          b.innerHTML = `<span class="fl">${c.flag}</span><span class="nm">${c.name}</span>`;
        }
        if (locked) b.disabled = true;
        b.addEventListener('click', ()=>{
          if (locked) return;
          [...grid.children].forEach(x=>x.classList.remove('sel'));
          b.classList.add('sel');
          pending[field] = c.code;
          updateSaveBar();
        });
        grid.appendChild(b);
      });
    }

    function renderBracket(){
      $$('.br-btn').forEach(btn => {
        btn.classList.toggle('sel', pending.red_cards_bracket === btn.dataset.val);
        if (locked) btn.disabled = true;
        btn.addEventListener('click', ()=>{
          if (locked) return;
          $$('.br-btn').forEach(x=>x.classList.remove('sel'));
          btn.classList.add('sel');
          pending.red_cards_bracket = btn.dataset.val;
          updateSaveBar();
        }, { once: false });
      });
    }

    function updateSaveBar(){
      const answered = FIELDS.filter(f => isAnswered(f, pending[f])).length;
      $('#answered-count').textContent = `${answered}/5`;
      const dirty = FIELDS.some(f => (pending[f] || null) !== (saved[f] || null));
      $('#btn-save').disabled = !dirty || locked;
      $('#save-status').textContent =
        locked ? '🔒 Locked — final lock has passed.'
        : dirty ? 'Unsaved changes.'
        : answered === 0 ? 'Pick at least one option.'
        : answered < 5  ? 'Pick the remaining answers.'
        : '✅ All up to date.';
    }

    $('#btn-save').addEventListener('click', async ()=>{
      const btn = $('#btn-save');
      btn.disabled = true; btn.textContent = 'Saving…';
      const r = await window.WC_PROFILE.saveBonus(pending);
      btn.textContent = 'Save answers';
      if (r.error) {
        showAlert('error', r.error);
        btn.disabled = false;
        return;
      }
      saved = { ...pending };
      showAlert('ok', 'Answers saved.');
      updateSaveBar();
      setTimeout(()=>showAlert(), 2500);
    });

    (async ()=>{
      const me = await window.WC_AUTH.currentProfile();
      if (!me) { window.location.href = '/worldcup/'; return; }

      locked = isLocked();
      if (locked) $('#locked').classList.remove('hidden');

      const r = await window.WC_PROFILE.getBonus();
      if (r.bonus) {
        saved = { ...r.bonus };
        FIELDS.forEach(f => { if (r.bonus[f]) pending[f] = r.bonus[f]; });
      }
      // Render
      renderCountryGrid('champion');
      renderCountryGrid('most_goals_team');
      renderCountryGrid('fewest_goals_team');
      renderCountryGrid('topscorer_country');
      renderBracket();
      updateSaveBar();
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/crypto.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Auth gate — hide page + redirect anonymous visitors before first paint -->
  <style>html.wc-gate{visibility:hidden!important}</style>
  <script>
    (function(){
      document.documentElement.classList.add('wc-gate');
      function hasSession(){
        try {
          return Object.keys(localStorage).some(function(k){
            return k.indexOf('sb-')===0 && k.lastIndexOf('-auth-token')===k.length-11 && !!localStorage.getItem(k);
          });
        } catch(e){ return true; }
      }
      if (!hasSession()){ window.location.replace('/worldcup/'); return; }
      document.documentElement.classList.remove('wc-gate');
      window.addEventListener('pageshow', function(e){
        if (e.persisted && !hasSession()) window.location.replace('/worldcup/');
      });
    })();
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Crypto Predictions</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:680px}
    .ck{margin-bottom:22px;padding:18px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:12px}
    .ck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
    .ck-asset{display:flex;align-items:center;gap:10px}
    .ck-asset .icon{width:34px;height:34px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
    .ck-asset .icon img{width:100%;height:100%;object-fit:cover;display:block}
    .ck-asset .icon.bobai img{transform:scale(1.08)} /* BOBAI has ~4% internal padding around the brain — zoom to match BTC/BNB optical size */
    .ck-asset .nm{font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--text)}
    .ck-asset .sym{font-size:11px;color:var(--muted);letter-spacing:.5px}

    .ck-live{text-align:right}
    .ck-live .lbl{font-size:9.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
    .ck-live .px{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--gold);line-height:1.1}
    .ck-live .px.pulse{animation:pulse 1s ease}
    @keyframes pulse{0%{opacity:.5}100%{opacity:1}}

    .ck-input-wrap{display:flex;align-items:center;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:10px;padding:0 14px;transition:border-color .15s}
    .ck-input-wrap:focus-within{border-color:var(--gold)}
    .ck-input-wrap .pfx{color:var(--muted);font-family:'Space Grotesk';font-weight:600;font-size:15px}
    .ck-input-wrap input{flex:1;padding:14px 8px;background:transparent;border:none;color:var(--text);font-family:'Space Grotesk';font-weight:700;font-size:16px;outline:none}
    .ck-input-wrap input::placeholder{color:var(--muted);font-weight:400}

    .ck-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
    .ck-presets .preset-btn{padding:7px 11px;font-size:11px;font-weight:700;color:var(--gold);background:transparent;border:1px solid rgba(240,185,11,.3);border-radius:8px;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;font-family:inherit;transition:all .12s}
    .ck-presets .preset-btn:hover{background:rgba(240,185,11,.08);border-color:rgba(240,185,11,.55)}
    .ck-presets .preset-btn.live{border-color:var(--gold);background:rgba(240,185,11,.08)}
    .ck-presets .preset-btn.down{color:#ff8580;border-color:rgba(255,80,80,.3)}
    .ck-presets .preset-btn.down:hover{background:rgba(255,80,80,.08);border-color:rgba(255,80,80,.55)}
    .ck-presets .preset-btn.up{color:#5fffa0;border-color:rgba(0,230,118,.3)}
    .ck-presets .preset-btn.up:hover{background:rgba(0,230,118,.08);border-color:rgba(0,230,118,.55)}
    .ck-presets .preset-btn:disabled{opacity:.4;cursor:not-allowed}

    .save-bar{position:sticky;bottom:16px;padding:14px;background:var(--bg);border:1px solid var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(8px);margin-top:24px}
    .save-bar .info{font-size:12px;color:var(--muted)}
    .save-bar .info b{color:var(--text)}

    .locked-banner{padding:16px;background:rgba(255,180,0,.08);border:1px solid rgba(255,180,0,.3);border-radius:10px;color:#ffc066;font-size:13px;text-align:center;margin-bottom:20px}
    .info-banner{padding:14px;background:rgba(64,64,255,.06);border:1px solid rgba(64,64,255,.2);border-radius:10px;color:#9090ff;font-size:12px;line-height:1.6;margin-bottom:20px}
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="crypto-hero"></div>
        <div class="card">
          <div data-card-accent="bonus-crystal"></div>
          <h1><span class="accent">Crypto Predictions</span></h1>
          <p class="sub">BTC · BNB · BOBAI · prices at final kickoff</p>

          <div id="locked" class="locked-banner hidden">
            🔒 Locked — final lock has passed.
          </div>

          <div class="info-banner">
            <b>How it works:</b> Predict the USD price of BTC, BNB and BOBAI <b>at the exact moment of the World Cup Final kickoff</b> (estimated 19 July 2026, 19:00 UTC). <b>One-time extension:</b> submit or edit any time until <b>18 June 2026, 15:45 UTC</b> — 15 min before the first matchday-2 match. After that, predictions lock. The closest guess on each coin wins <b>3.3% of the total prize pool</b> (10% total — split BTC/BNB/BOBAI evenly).
          </div>

          <div id="alert"></div>

          <!-- BTC -->
          <div class="ck" data-coin="btc">
            <div class="ck-head">
              <div class="ck-asset"><div class="icon btc"><img src="./illus/coin-btc.webp" alt="BTC"></div><div><div class="nm">Bitcoin</div><div class="sym">BTC</div></div></div>
              <div class="ck-live"><div class="lbl">Live</div><div class="px" data-live="btc">…</div></div>
            </div>
            <div class="ck-input-wrap">
              <span class="pfx">$</span>
              <input type="number" step="0.01" min="0" placeholder="your prediction" data-input="btc">
            </div>
            <div class="ck-presets">
              <button type="button" class="preset-btn live" data-preset="btc" data-pct="0">use live</button>
              <button type="button" class="preset-btn down" data-preset="btc" data-pct="-50">-50%</button>
              <button type="button" class="preset-btn down" data-preset="btc" data-pct="-25">-25%</button>
              <button type="button" class="preset-btn up"   data-preset="btc" data-pct="25">+25%</button>
              <button type="button" class="preset-btn up"   data-preset="btc" data-pct="50">+50%</button>
              <button type="button" class="preset-btn up"   data-preset="btc" data-pct="100">+100%</button>
              <button type="button" class="preset-btn up"   data-preset="btc" data-pct="200">+200%</button>
            </div>
          </div>

          <!-- BNB -->
          <div class="ck" data-coin="bnb">
            <div class="ck-head">
              <div class="ck-asset"><div class="icon bnb"><img src="./illus/coin-bnb.webp" alt="BNB"></div><div><div class="nm">BNB</div><div class="sym">BNB</div></div></div>
              <div class="ck-live"><div class="lbl">Live</div><div class="px" data-live="bnb">…</div></div>
            </div>
            <div class="ck-input-wrap">
              <span class="pfx">$</span>
              <input type="number" step="0.0001" min="0" placeholder="your prediction" data-input="bnb">
            </div>
            <div class="ck-presets">
              <button type="button" class="preset-btn live" data-preset="bnb" data-pct="0">use live</button>
              <button type="button" class="preset-btn down" data-preset="bnb" data-pct="-50">-50%</button>
              <button type="button" class="preset-btn down" data-preset="bnb" data-pct="-25">-25%</button>
              <button type="button" class="preset-btn up"   data-preset="bnb" data-pct="25">+25%</button>
              <button type="button" class="preset-btn up"   data-preset="bnb" data-pct="50">+50%</button>
              <button type="button" class="preset-btn up"   data-preset="bnb" data-pct="100">+100%</button>
              <button type="button" class="preset-btn up"   data-preset="bnb" data-pct="200">+200%</button>
            </div>
          </div>

          <!-- BOBAI -->
          <div class="ck" data-coin="bobai">
            <div class="ck-head">
              <div class="ck-asset"><div class="icon bobai"><img src="./illus/coin-bobai.webp" alt="BOBAI"></div><div><div class="nm">Brain On BNB AI</div><div class="sym">BOBAI</div></div></div>
              <div class="ck-live"><div class="lbl">Live</div><div class="px" data-live="bobai">…</div></div>
            </div>
            <div class="ck-input-wrap">
              <span class="pfx">$</span>
              <input type="number" step="0.0000000001" min="0" placeholder="your prediction" data-input="bobai">
            </div>
            <div class="ck-presets">
              <button type="button" class="preset-btn live" data-preset="bobai" data-pct="0">use live</button>
              <button type="button" class="preset-btn down" data-preset="bobai" data-pct="-50">-50%</button>
              <button type="button" class="preset-btn down" data-preset="bobai" data-pct="-25">-25%</button>
              <button type="button" class="preset-btn up"   data-preset="bobai" data-pct="25">+25%</button>
              <button type="button" class="preset-btn up"   data-preset="bobai" data-pct="50">+50%</button>
              <button type="button" class="preset-btn up"   data-preset="bobai" data-pct="100">+100%</button>
              <button type="button" class="preset-btn up"   data-preset="bobai" data-pct="200">+200%</button>
            </div>
          </div>

          <div class="save-bar">
            <div class="info">
              <div><b id="answered-count">0/3</b> predictions set</div>
              <div id="save-status">Pick at least one.</div>
            </div>
            <button id="btn-save" class="btn" style="width:auto;padding:12px 22px" disabled>Save predictions</button>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    function fmtPrice(coin, n){
      if (n == null || !isFinite(n)) return '–';
      if (coin === 'bobai') return '$' + n.toFixed(10).replace(/0+$/,'').replace(/\.$/,'');
      if (coin === 'btc')   return '$' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      return '$' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 });
    }

    let saved = { btc: null, bnb: null, bobai: null };
    let pending = { btc: null, bnb: null, bobai: null };
    let live = { btc: null, bnb: null, bobai: null };
    let locked = false;

    function isLocked(){
      // One-time MD2 extension — picks editable until 15 min before the first
      // matchday-2 match (CZ–ZA, 2026-06-18 16:00 UTC). DB-enforced via the
      // hardcoded timestamp in wc_crypto policies. Picks reveal at that moment.
      const lockMs = new Date(window.WC_CONFIG.BONUS_CRYPTO_LOCK_UTC).getTime();
      return Date.now() >= lockMs;
    }

    function updateSaveBar(){
      const filled = ['btc','bnb','bobai'].filter(k => pending[k] != null).length;
      $('#answered-count').textContent = `${filled}/3`;
      const dirty = ['btc','bnb','bobai'].some(k => (pending[k] || null) !== (saved[k] || null));
      $('#btn-save').disabled = !dirty || locked;
      $('#save-status').textContent =
        locked ? '🔒 Locked — final lock has passed.'
        : dirty ? 'Unsaved changes.'
        : filled === 0 ? 'Pick at least one.'
        : '✅ Up to date.';
    }

    function readInputs(){
      ['btc','bnb','bobai'].forEach(k => {
        const el = $(`[data-input="${k}"]`);
        const v = el.value.trim();
        if (v === '') { pending[k] = null; return; }
        const n = parseFloat(v);
        pending[k] = isFinite(n) && n >= 0 ? n : null;
      });
    }

    async function refreshLive(){
      const r = await window.WC_PROFILE.fetchLivePrices();
      live = r;
      ['btc','bnb','bobai'].forEach(k => {
        const el = $(`[data-live="${k}"]`);
        const next = fmtPrice(k, live[k]);
        if (el.textContent !== next) {
          el.textContent = next;
          el.classList.remove('pulse'); void el.offsetWidth; el.classList.add('pulse');
        }
      });
    }

    // Helper: format a numeric price for the input field at coin-appropriate precision
    function formatForInput(coin, n){
      if (coin === 'bobai') return n.toFixed(10).replace(/0+$/,'').replace(/\.$/,'');
      return n.toFixed(coin === 'btc' ? 2 : 4);
    }

    // wire preset buttons (use live + ±% deltas)
    $$('[data-preset]').forEach(btn => btn.addEventListener('click', () => {
      const k = btn.dataset.preset;
      const pct = parseFloat(btn.dataset.pct);
      if (live[k] == null) return;
      const target = live[k] * (1 + pct / 100);
      if (!isFinite(target) || target < 0) return;
      const inp = $(`[data-input="${k}"]`);
      inp.value = formatForInput(k, target);
      readInputs(); updateSaveBar();
    }));

    // input listeners
    $$('[data-input]').forEach(inp => inp.addEventListener('input', () => { readInputs(); updateSaveBar(); }));

    $('#btn-save').addEventListener('click', async () => {
      const btn = $('#btn-save');
      btn.disabled = true; btn.textContent = 'Saving…';
      const r = await window.WC_PROFILE.saveCrypto(pending);
      btn.textContent = 'Save predictions';
      if (r.error) { showAlert('error', r.error); btn.disabled = false; return; }
      saved = { ...pending };
      showAlert('ok', 'Predictions saved.');
      updateSaveBar();
      setTimeout(() => showAlert(), 2500);
    });

    (async () => {
      const me = await window.WC_AUTH.currentProfile();
      if (!me) { window.location.href = '/worldcup/'; return; }

      locked = isLocked();
      if (locked) $('#locked').classList.remove('hidden');
      if (locked) $$('[data-input], [data-preset]').forEach(el => el.disabled = true);

      const r = await window.WC_PROFILE.getCrypto();
      if (r.crypto) {
        ['btc','bnb','bobai'].forEach(k => {
          const dbKey = k + '_price';
          if (r.crypto[dbKey] != null) {
            saved[k] = parseFloat(r.crypto[dbKey]);
            pending[k] = saved[k];
            $(`[data-input="${k}"]`).value = saved[k];
          }
        });
      }
      updateSaveBar();
      await refreshLive();
      setInterval(refreshLive, 20000); // refresh live every 20s
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/dashboard.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Auth gate — hide page + redirect anonymous visitors before first paint -->
  <style>html.wc-gate{visibility:hidden!important}</style>
  <script>
    (function(){
      document.documentElement.classList.add('wc-gate');
      function hasSession(){
        try {
          return Object.keys(localStorage).some(function(k){
            return k.indexOf('sb-')===0 && k.lastIndexOf('-auth-token')===k.length-11 && !!localStorage.getItem(k);
          });
        } catch(e){ return true; }
      }
      if (!hasSession()){ window.location.replace('/worldcup/'); return; }
      document.documentElement.classList.remove('wc-gate');
      window.addEventListener('pageshow', function(e){
        if (e.persisted && !hasSession()) window.location.replace('/worldcup/');
      });
    })();
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Dashboard</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:780px}
    .card + .card{margin-top:14px}
    .profile-card{display:flex;align-items:center;gap:16px}
    .profile-meta{flex:1;min-width:0}
    .profile-meta .uname{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--text);margin-bottom:2px}
    .profile-meta .country{font-size:12.5px;color:var(--muted);margin-bottom:8px}
    .profile-actions{display:flex;gap:8px;flex-wrap:wrap}
    .profile-actions a, .profile-actions button{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:7px;background:rgba(240,185,11,.06);border:1px solid rgba(240,185,11,.2);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.3px;text-decoration:none;cursor:pointer;font-family:inherit}
    .profile-actions a:hover, .profile-actions button:hover{background:rgba(240,185,11,.14)}
    .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
    .badge.gold{background:var(--gold-glow);color:var(--gold);border:1px solid rgba(240,185,11,.3)}
    .badge.warn{background:rgba(255,180,0,.1);color:#ffc066;border:1px solid rgba(255,180,0,.3)}
    .badge.muted{background:rgba(123,125,158,.1);color:var(--muted);border:1px solid rgba(123,125,158,.2)}

    /* Stats grid */
    .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
    .stat{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:14px}
    .stat .lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
    .stat .val{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--gold);line-height:1.1}
    .stat .sub{font-size:11px;color:var(--muted);margin-top:4px}

    .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
    .card-h h3{font-family:'Space Grotesk';font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0}
    .card-h .right{font-size:11.5px;color:var(--muted)}

    .section{margin-bottom:24px}
    .section h3{font-family:'Space Grotesk';font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}

    .country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:220px;overflow-y:auto;padding:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px}
    .country-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;color:var(--text)}
    .country-cell:hover{background:rgba(240,185,11,.06);border-color:rgba(240,185,11,.15)}
    .country-cell.sel{background:var(--gold-glow);border-color:var(--gold)}
    .country-cell .fl{font-size:22px;line-height:1}
    .country-cell .nm{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.2}
    .country-cell.sel .nm{color:var(--gold)}

    .wallet-box{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:14px}
    .wallet-addr{font-family:'Space Grotesk';font-size:13px;color:var(--text);word-break:break-all;margin-bottom:8px}
    .btn.sm{padding:8px 14px;font-size:12px;width:auto;display:inline-flex}

    .lock-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:rgba(255,180,0,.06);border:1px solid rgba(255,180,0,.2);border-radius:8px;color:#ffc066;font-size:12px;line-height:1.5;margin-top:10px}
    .lock-note .ic{flex-shrink:0;font-size:14px;line-height:1.2}

    /* Confirm modal */
    .modal-back{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
    .modal-back.open{display:flex}
    .modal{max-width:440px;width:100%;background:var(--bg);border:1px solid var(--gold);border-radius:14px;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
    .modal h4{font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin:0 0 12px}
    .modal .confirm-addr{font-family:'Space Grotesk','Courier New',monospace;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:13px;color:var(--text);word-break:break-all;margin:10px 0 14px}
    .modal .check-row{display:flex;align-items:flex-start;gap:9px;margin:8px 0;font-size:12.5px;color:var(--text);line-height:1.5;cursor:pointer}
    .modal .check-row input{margin-top:2px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}
    .modal .actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="dashboard-hero"></div>

        <!-- 1. PROFILE -->
        <div class="card">
          <div class="profile-card">
            <div id="ava-icon"></div>
            <div class="profile-meta">
              <div class="uname" id="p-username">…</div>
              <div class="country" id="p-country">no country picked yet</div>
              <div class="profile-actions">
                <button id="btn-edit-avatar" type="button">🎨 Edit avatar</button>
                <a id="link-pub-profile" href="#">🔗 View public profile</a>
              </div>
            </div>
          </div>
          <div id="alert" style="margin-top:14px"></div>

          <!-- Avatar picker (hidden until "Edit avatar" is clicked) -->
          <div id="avatar-edit" class="hidden" style="margin-top:18px;padding-top:18px;border-top:1px solid var(--border)">
            <p class="sub" style="text-align:left;margin-bottom:10px">Pick the team you'll represent on the leaderboard. You can change this anytime.</p>
            <div id="country-grid" class="country-grid"></div>
            <div style="display:flex;gap:8px;margin-top:12px">
              <button id="save-country" class="btn sm" disabled>Save avatar</button>
              <button id="btn-cancel-avatar" class="btn sm ghost" type="button">Cancel</button>
            </div>
          </div>
        </div>

        <!-- 2. STATS -->
        <div class="card">
          <div class="card-h"><h3>Your stats</h3><span class="right" id="stats-meta">live · auto-updates after each match</span></div>
          <div class="stats-grid">
            <div class="stat"><div class="lbl">Total points</div><div class="val" id="s-total">0</div><div class="sub" id="s-total-sub">— match + bonus</div></div>
            <div class="stat"><div class="lbl">Rank</div><div class="val" id="s-rank">—</div><div class="sub" id="s-rank-sub">of — players</div></div>
            <div class="stat"><div class="lbl">Match tips</div><div class="val" id="s-tips">0</div><div class="sub" id="s-tips-sub">of 104 placed</div></div>
            <div class="stat"><div class="lbl">Bonus answered</div><div class="val" id="s-bonus">0</div><div class="sub" id="s-bonus-sub">of 5 questions</div></div>
            <div class="stat"><div class="lbl">Crypto picks</div><div class="val" id="s-crypto">0</div><div class="sub" id="s-crypto-sub">of 3 coins</div></div>
            <div class="stat"><div class="lbl">Wallet</div><div class="val" id="s-wallet" style="font-size:14px">—</div><div class="sub" id="s-wallet-sub">required for payouts</div></div>
          </div>
        </div>

        <!-- 3. PROJECTED PAYOUT -->
        <div class="card">
          <div class="card-h"><h3>Projected payout</h3><span class="right">live · if standings hold</span></div>
          <p class="sub" style="text-align:left;margin:0 0 12px">
            What you'd win <b>right now</b> across all 3 pots — End-Pool (top 4 overall), Group brackets (top 3 in each of 12 groups), Crypto (closest to live BTC / BNB / BOBAI price). Updates after every match.
          </p>
          <div id="proj-content"><div class="proj-empty">Loading projection…</div></div>
        </div>

        <!-- 4. WALLET -->
        <div class="card">
          <div class="card-h"><h3>Wallet (for payouts)</h3><span class="right" id="p-wallet-badge"><span class="badge muted">no wallet</span></span></div>
          <p class="sub" style="text-align:left;margin-bottom:10px">
            To be eligible for prize-pool payouts, link a BNB Smart Chain (BEP-20) wallet. Each wallet can be used only once across all accounts, and a linked wallet is <b>permanent</b> — it cannot be changed or removed afterwards. Without a wallet you can still play for fun.
          </p>
          <div id="wallet-box" class="wallet-box">

            <!-- NOT LINKED YET -->
            <div id="wallet-empty">
              <label for="w-addr-in" style="display:block;font-size:12px;color:var(--muted);letter-spacing:.5px;margin-bottom:6px">Your BNB Smart Chain (BEP-20) address</label>
              <input id="w-addr-in" type="text" placeholder="0x…" autocomplete="off" spellcheck="false" style="width:100%;padding:12px 14px;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;font-family:'Space Grotesk','Courier New',monospace">
              <button id="w-link" type="button" class="btn sm" style="margin-top:10px" disabled>Link wallet…</button>
              <div class="lock-note">
                <span class="ic">⚠</span>
                <span>Double-check the address before confirming. Once linked it cannot be changed or removed — only the owner of this account can use this wallet for payouts.</span>
              </div>
            </div>

            <!-- LINKED -->
            <div id="wallet-set" class="hidden">
              <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
                <span style="color:var(--green);font-size:16px">✓</span>
                <strong style="font-size:14px">Wallet linked</strong>
              </div>
              <div class="wallet-addr" id="w-addr">—</div>
              <p class="hint" style="margin:4px 0 0">Permanent link — this wallet now belongs to your account for all payouts.</p>
            </div>
          </div>
        </div>

        <!-- Confirm modal -->
        <div id="confirm-modal" class="modal-back" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
          <div class="modal">
            <h4 id="confirm-title">Confirm wallet link</h4>
            <p style="font-size:13px;color:var(--text);line-height:1.5;margin:0 0 4px">You're about to permanently link this address to your account:</p>
            <div class="confirm-addr" id="confirm-addr">—</div>
            <label class="check-row"><input type="checkbox" id="confirm-c1"><span>The address above is correct and I control this wallet.</span></label>
            <label class="check-row"><input type="checkbox" id="confirm-c2"><span>I understand the link is <b>permanent</b> — I cannot switch or remove this wallet later.</span></label>
            <label class="check-row"><input type="checkbox" id="confirm-c3"><span>I am not using this wallet on another BOBAI Worldcup account.</span></label>
            <div class="actions">
              <button id="confirm-cancel" type="button" class="btn sm ghost">Cancel</button>
              <button id="confirm-go" type="button" class="btn sm" disabled>Link wallet permanently</button>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/projection.js?v=5"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    function fmtPts(p){
      if (p == null) return '0';
      const n = Number(p);
      if (!Number.isFinite(n)) return '0';
      return Number.isInteger(n) ? String(n) : (+n.toFixed(2)).toString();
    }

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }
    function clearAlertSoon(){ setTimeout(()=>showAlert(), 2500); }

    function findCountry(code){
      return window.WC_COUNTRIES.find(c => c.code === code) || null;
    }

    let me = null;
    let pendingCountry = null;

    function renderProfile(){
      $('#me-name').textContent = me.username;
      $('#p-username').textContent = me.username;
      const c = findCountry(me.avatar_country);
      $('#ava-icon').innerHTML = window.WC_AVATAR.avatarHtml(me.avatar_country, 'lg');
      $('#p-country').textContent = c ? c.name : 'no country picked yet';
      $('#link-pub-profile').href = './user.html?u=' + encodeURIComponent(me.username);

      // Wallet badge (top-right of wallet card)
      const wb = $('#p-wallet-badge');
      if (me.wallet) {
        $('#wallet-empty').classList.add('hidden');
        $('#wallet-set').classList.remove('hidden');
        $('#w-addr').textContent = me.wallet;
        wb.innerHTML = '<span class="badge gold">⚽ linked</span>';
      } else {
        $('#wallet-empty').classList.remove('hidden');
        $('#wallet-set').classList.add('hidden');
        if ($('#w-addr-in')) $('#w-addr-in').value = '';
        if ($('#w-link')) $('#w-link').disabled = true;
        wb.innerHTML = '<span class="badge muted">not linked</span>';
      }

      // Stats card — wallet cell
      const sw = $('#s-wallet');
      const sws = $('#s-wallet-sub');
      if (me.wallet) {
        sw.textContent = '✓ linked';
        sw.style.color = 'var(--green)';
        sws.textContent = me.wallet.slice(0,6) + '…' + me.wallet.slice(-4);
      } else {
        sw.textContent = '— missing';
        sw.style.color = 'var(--muted)';
        sws.textContent = 'required for payouts';
      }
    }

    async function loadMyStats(){
      if (!me) return;
      const sb = window.WC_SB;
      try {
        // Leaderboard row + total players
        const [{ data: lb }, { count: totalUsers }, { count: tipCount }, { data: bonusRow }, { data: cryptoRow }] = await Promise.all([
          sb.from('wc_leaderboard').select('user_id,total_points').order('total_points', { ascending: false }).limit(500),
          sb.from('wc_users').select('id', { count: 'exact', head: true }),
          sb.from('wc_tips').select('id', { count: 'exact', head: true }).eq('user_id', me.id),
          sb.from('wc_bonus').select('champion,most_goals_team,fewest_goals_team,red_cards_bracket,topscorer_country').eq('user_id', me.id).maybeSingle(),
          sb.from('wc_crypto').select('btc_price,bnb_price,bobai_price').eq('user_id', me.id).maybeSingle(),
        ]);
        let myPoints = 0, myRank = '—';
        if (lb && lb.length) {
          const idx = lb.findIndex(r => r.user_id === me.id);
          if (idx >= 0) {
            myPoints = lb[idx].total_points || 0;
            myRank = idx + 1;
          }
        }
        $('#s-total').textContent = fmtPts(myPoints);
        $('#s-rank').textContent = myRank;
        $('#s-rank-sub').textContent = 'of ' + (totalUsers || 1) + ' player' + ((totalUsers || 1) === 1 ? '' : 's');

        const tipsPlaced = tipCount || 0;
        const tipsMissing = 104 - tipsPlaced;
        $('#s-tips').textContent = tipsPlaced;
        $('#s-tips-sub').innerHTML = tipsMissing > 0
          ? `${tipsMissing} missing — <a href="./tips.html" style="color:var(--gold);font-weight:600">place your tips →</a>`
          : 'All 104 placed ✓';

        const VALID_BRACKETS = new Set(['<5','5-9','10-14','15-19','>19']);
        const isValidBonus = (k, v) => v && (k !== 'red_cards_bracket' || VALID_BRACKETS.has(v));
        const bonusFilled = bonusRow
          ? ['champion','most_goals_team','fewest_goals_team','red_cards_bracket','topscorer_country']
              .filter(k => isValidBonus(k, bonusRow[k])).length
          : 0;
        const bonusMissing = 5 - bonusFilled;
        $('#s-bonus').textContent = bonusFilled;
        $('#s-bonus-sub').innerHTML = bonusMissing > 0
          ? `${bonusMissing} missing — <a href="./bonus.html" style="color:var(--gold);font-weight:600">answer them →</a>`
          : 'All 5 answered ✓';

        const cryptoFilled = cryptoRow ? ['btc_price','bnb_price','bobai_price'].filter(k => cryptoRow[k] != null).length : 0;
        const cryptoMissing = 3 - cryptoFilled;
        $('#s-crypto').textContent = cryptoFilled;
        $('#s-crypto-sub').innerHTML = cryptoMissing > 0
          ? `${cryptoMissing} missing — <a href="./crypto.html" style="color:var(--gold);font-weight:600">predict prices →</a>`
          : 'All 3 set ✓';
      } catch (e) {
        $('#stats-meta').textContent = 'stats unavailable';
      }
    }

    async function loadMyProjection(){
      if (!me || !window.WC_PROJECTION) return;
      window.WC_PROJECTION.injectStyles();
      const box = $('#proj-content');
      try {
        const proj = await window.WC_PROJECTION.loadAndCompute(me.id, me.wallet);
        box.innerHTML = window.WC_PROJECTION.renderHtml(proj);
      } catch (e) {
        box.innerHTML = '<div class="proj-empty">Projection unavailable.</div>';
      }
    }

    function renderGrid(){
      const grid = $('#country-grid');
      grid.innerHTML = '';
      window.WC_COUNTRIES.forEach(c => {
        const b = document.createElement('button');
        b.type = 'button';
        b.className = 'country-cell' + (me.avatar_country === c.code ? ' sel' : '');
        b.dataset.code = c.code;
        b.innerHTML = `<span class="fl">${c.flag}</span><span class="nm">${c.name}</span>`;
        b.addEventListener('click', ()=>{
          $$('.country-cell').forEach(x=>x.classList.remove('sel'));
          b.classList.add('sel');
          pendingCountry = c.code;
          $('#save-country').disabled = (pendingCountry === me.avatar_country);
        });
        grid.appendChild(b);
      });
    }

    /* Avatar-edit toggle */
    $('#btn-edit-avatar').addEventListener('click', ()=>{
      const block = $('#avatar-edit');
      const opening = block.classList.contains('hidden');
      block.classList.toggle('hidden');
      if (opening) {
        pendingCountry = me.avatar_country;
        renderGrid();
        $('#save-country').disabled = true;
        block.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
    $('#btn-cancel-avatar').addEventListener('click', ()=>{
      $('#avatar-edit').classList.add('hidden');
      pendingCountry = me.avatar_country;
    });

    $('#save-country').addEventListener('click', async ()=>{
      if (pendingCountry === me.avatar_country) return;
      const btn = $('#save-country');
      btn.disabled = true; btn.textContent = 'Saving…';
      const r = await window.WC_PROFILE.updateAvatar(pendingCountry);
      btn.textContent = 'Save avatar';
      if (r.error) { showAlert('error', r.error); btn.disabled = false; return; }
      me.avatar_country = pendingCountry;
      renderProfile();
      $('#avatar-edit').classList.add('hidden');
      showAlert('ok', 'Avatar updated.');
      clearAlertSoon();
    });

    /* Wallet link: enter address → confirm-modal with 3 acknowledgements → save */
    const ADDR_RE = /^0x[a-fA-F0-9]{40}$/;
    let pendingAddr = null;

    function validateAddrInput(){
      const raw = ($('#w-addr-in').value || '').trim();
      $('#w-link').disabled = !ADDR_RE.test(raw);
    }
    $('#w-addr-in').addEventListener('input', validateAddrInput);

    function openConfirm(addr){
      pendingAddr = addr.toLowerCase();
      $('#confirm-addr').textContent = pendingAddr;
      ['confirm-c1','confirm-c2','confirm-c3'].forEach(id => { $('#'+id).checked = false; });
      $('#confirm-go').disabled = true;
      $('#confirm-modal').classList.add('open');
    }
    function closeConfirm(){
      $('#confirm-modal').classList.remove('open');
      pendingAddr = null;
    }

    $('#w-link').addEventListener('click', ()=>{
      const raw = ($('#w-addr-in').value || '').trim();
      if (!ADDR_RE.test(raw)) {
        showAlert('error', 'Enter a valid BEP-20 address (0x + 40 hex characters).');
        return;
      }
      showAlert();
      openConfirm(raw);
    });

    ['confirm-c1','confirm-c2','confirm-c3'].forEach(id => {
      $('#'+id).addEventListener('change', ()=>{
        $('#confirm-go').disabled = !($('#confirm-c1').checked && $('#confirm-c2').checked && $('#confirm-c3').checked);
      });
    });

    $('#confirm-cancel').addEventListener('click', closeConfirm);
    // Close on backdrop click (but not when clicking inside the modal)
    $('#confirm-modal').addEventListener('click', (e)=>{ if (e.target === $('#confirm-modal')) closeConfirm(); });

    $('#confirm-go').addEventListener('click', async ()=>{
      if (!pendingAddr) return;
      const btn = $('#confirm-go');
      btn.disabled = true; btn.textContent = 'Linking…';
      const r = await window.WC_PROFILE.saveWallet(pendingAddr);
      btn.textContent = 'Link wallet permanently';
      if (r.error) {
        showAlert('error', r.error);
        closeConfirm();
        return;
      }
      closeConfirm();
      me = await window.WC_AUTH.currentProfile();
      renderProfile();
      loadMyProjection();  // refresh projection so wallet-warning disappears
      showAlert('ok', 'Wallet linked. This wallet is now permanently tied to your account.');
      clearAlertSoon();
    });

    /* logout handler is wired by nav.js */

    (async ()=>{
      me = await window.WC_AUTH.currentProfile();
      if (!me) { window.location.href = '/worldcup/'; return; }
      renderProfile();
      loadMyStats();         // async, populates the stats card
      loadMyProjection();    // async, populates the projected-payout card
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/for-designer.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Illustrator Checklist</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:980px}
    h2{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--gold);margin:32px 0 12px;letter-spacing:-.01em}
    h2:first-of-type{margin-top:0}
    p, li{color:var(--muted);font-size:13.5px;line-height:1.65}
    code{background:rgba(0,0,0,.5);padding:1px 6px;border-radius:4px;font-size:12px;color:#ffb1de;font-family:'Space Grotesk','Courier New',monospace}

    .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
    .stat-card{background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:10px;padding:14px}
    .stat-card .lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
    .stat-card .val{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--gold);line-height:1.1}
    .stat-card.ok .val{color:var(--green)}
    .stat-card.warn .val{color:#ffc066}

    .filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;background:rgba(0,0,0,.3);padding:5px;border-radius:10px}
    .filter-bar button{flex:1;min-width:90px;padding:8px;font-size:11.5px;font-weight:600;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;font-family:inherit;letter-spacing:.4px}
    .filter-bar button.active{background:var(--gold-glow);color:var(--gold)}

    .checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
    .item{position:relative;padding:14px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:12px;transition:all .15s}
    .item.done{background:rgba(0,230,118,.05);border-color:rgba(0,230,118,.3)}
    .item.missing{background:rgba(255,180,0,.04);border-color:rgba(255,180,0,.2)}
    .item.pending{opacity:.55}
    .item .preview{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
    .item .preview img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:rgba(0,0,0,.4)}
    .item .preview .ph{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:30px;background:rgba(0,0,0,.4);border-radius:8px;line-height:1}
    .item .info{min-width:0;flex:1}
    .item .info .name{font-family:'Space Grotesk';font-weight:600;font-size:13px;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .item .info .file{font-family:'Space Grotesk','Courier New',monospace;font-size:11px;color:#ffb1de;background:rgba(0,0,0,.4);padding:1px 6px;border-radius:4px;display:inline-block}
    .item .info .status{font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
    .item.done .status{color:var(--green)}
    .item.missing .status{color:#ffc066}
    .copy-btn{position:absolute;top:8px;right:8px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;font-family:inherit;letter-spacing:.5px;text-transform:uppercase}
    .copy-btn:hover{border-color:var(--gold);color:var(--gold)}

    /* Other illustrations — larger cards */
    .illus-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
    .illus-card{padding:18px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:12px}
    .illus-card.done{border-color:rgba(0,230,118,.3);background:rgba(0,230,118,.04)}
    .illus-card .badge-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .illus-card .ttl{font-family:'Space Grotesk';font-weight:700;font-size:14.5px;color:var(--text);margin-bottom:6px}
    .illus-card .lbl{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:var(--gold)}
    .illus-card .specs{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:10px}
    .illus-card .file{font-family:'Space Grotesk','Courier New',monospace;font-size:11.5px;color:#ffb1de;background:rgba(0,0,0,.4);padding:5px 10px;border-radius:6px;display:inline-block;margin-bottom:8px;word-break:break-all}
    .illus-card .used{font-size:11px;color:var(--muted)}
    .illus-card.done .lbl{color:var(--green)}

    .stage-block{background:rgba(64,64,255,.05);border:1px solid rgba(64,64,255,.2);border-radius:10px;padding:14px 18px;color:#9090ff;font-size:12.5px;line-height:1.65;margin-bottom:24px}
    .stage-block b{color:#b0b0ff}

    .design-toggle{position:fixed;bottom:18px;right:18px;padding:12px 18px;background:rgba(255,64,180,.15);border:1px solid #ff40b4;color:#ff40b4;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:10px;cursor:pointer;font-family:'Space Grotesk';z-index:50;backdrop-filter:blur(8px)}
    .design-toggle:hover{background:rgba(255,64,180,.25)}
    .item.done .preview img{cursor:zoom-in;transition:transform .15s}
    .item.done:hover .preview img{transform:scale(1.06)}
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="./dashboard.html"><span>←</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <span style="width:80px"></span>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div class="card">
          <h1><span class="accent">Illustrator Checklist</span></h1>
          <p class="sub">Live status of every illustration slot. Drop files into the right folder — page auto-detects them on reload.</p>

          <!-- LIVE STATS -->
          <div class="stats-row">
            <div class="stat-card ok"><div class="lbl">Done</div><div class="val" id="st-done">0</div></div>
            <div class="stat-card warn"><div class="lbl">Missing</div><div class="val" id="st-missing">0</div></div>
            <div class="stat-card"><div class="lbl">Total slots</div><div class="val" id="st-total">0</div></div>
            <div class="stat-card"><div class="lbl">% complete</div><div class="val" id="st-pct">0%</div></div>
          </div>

          <!-- HOW IT WORKS -->
          <div class="stage-block">
            <b>How this works:</b><br>
            1. Each card below points to a file. Deliver as <b>WebP</b> (preferred) or <b>transparent PNG</b>.<br>
            2. Drop the file into <code>dashboard/worldcup/app/illus/</code> (avatars go in the <code>avatars/</code> subfolder).<br>
            3. Reload this page → the card flips to <b style="color:var(--green)">✓ DELIVERED</b> and the new art shows up automatically across the whole app.<br>
            4. No code changes needed on our side.<br>
            <span style="display:inline-block;margin-top:8px">Want to preview where the art will land?</span>
            <a href="?design=1" style="color:#ff40b4">→ enable Designer Mode</a> (highlights every slot across the app in magenta with filenames).
          </div>

          <!-- AVATARS -->
          <h2>1. National-team BOBAI avatars (48 files · required)</h2>
          <p>One illustration per qualified country. <b>BOBAI character wearing that team's national kit.</b> 512×512 WebP, transparent background. Same character + proportions across all 48 — only the kit changes. No realistic human faces.</p>
          <p>Used on: <b>Dashboard profile · Leaderboard rows · Public profile · Bonus → Champion picker</b>. Until each avatar is delivered, the slot shows the country flag emoji as a fallback.</p>

          <div class="filter-bar">
            <button data-filter="all" class="active">All 48</button>
            <button data-filter="missing">Missing only</button>
            <button data-filter="done">Delivered only</button>
          </div>
          <div id="avatar-list" class="checklist"></div>

          <!-- OTHER ILLUSTRATIONS -->
          <h2>2. Decorative illustrations (nice-to-have)</h2>
          <div id="illus-list" class="illus-list"></div>

          <!-- WORKFLOW -->
          <h2>3. Quick links</h2>
          <ul>
            <li>Live preview of every slot in <b>Designer Mode</b>: <a href="?design=1" style="color:var(--gold)">enable here</a> · <a href="?design=0" style="color:var(--gold)">disable</a> (also affects all other pages in this session)</li>
            <li>See where avatars land in production:
              <a href="./index.html" style="color:var(--gold)">Register</a> ·
              <a href="./dashboard.html" style="color:var(--gold)">Dashboard</a> ·
              <a href="./bonus.html" style="color:var(--gold)">Bonus / Champion</a> ·
              <a href="./leaderboard.html" style="color:var(--gold)">Leaderboard</a> ·
              <a href="./user.html?u=mmx_QQ" style="color:var(--gold)">Public profile</a>
            </li>
            <li>Specs reminder: WebP preferred (smaller), PNG fine. Always <b>transparent background</b>. Square unless specified.</li>
          </ul>

          <p style="font-size:11.5px;color:var(--muted);margin-top:24px;padding-top:18px;border-top:1px solid var(--border)">
            Questions / hand-off? <a href="https://t.me/bobai_official" style="color:var(--gold)">@bobai_official</a> on Telegram.
          </p>
        </div>
      </div>
    </main>
  </div>

  <button class="design-toggle" onclick="toggleDesign()">🎨 Designer Mode: <span id="dm-state">OFF</span></button>

  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    // Designer mode toggle button
    $('#dm-state').textContent = window.WC_AVATAR.designOn ? 'ON' : 'OFF';
    function toggleDesign(){
      const nowOn = !window.WC_AVATAR.designOn;
      if (nowOn) localStorage.setItem('wc_design', '1');
      else       localStorage.removeItem('wc_design');
      window.location.href = window.location.pathname + (nowOn ? '?design=1' : '');
    }

    // Inventory all illustration slots, then HEAD-check each in parallel
    const inv = window.WC_AVATAR.inventory();
    const avatars = inv.filter(x => x.kind === 'avatar');
    const illus   = inv.filter(x => x.kind === 'illus');

    function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[m]); }
    async function copyToClipboard(text, btn){
      try {
        await navigator.clipboard.writeText(text);
        const orig = btn.textContent;
        btn.textContent = '✓ Copied';
        setTimeout(()=>{ btn.textContent = orig; }, 1200);
      } catch (e) { /* noop */ }
    }

    function renderAvatars(filter){
      const list = $('#avatar-list');
      const rows = avatars
        .filter(a => filter === 'all' || a._state === filter)
        .map(a => {
          const stateCls = a._state || 'pending';
          const stateLabel = stateCls === 'done' ? `✓ delivered (.${a._ext})`
                          : stateCls === 'missing' ? 'pending'
                          : 'checking…';
          const preview = stateCls === 'done'
            ? `<img src="${a.basePath}.${a._ext}" alt="">`
            : `<div class="ph">${a.flag}</div>`;
          const justFile = a.filename.split('/').pop();
          const fileLabel = stateCls === 'done'
            ? `${justFile}.${a._ext}`
            : `${justFile}.{webp | png | jpg}`;
          return `<div class="item ${stateCls}">
            <button class="copy-btn" data-copy="${justFile}.webp">📋</button>
            <div class="preview">${preview}</div>
            <div class="info">
              <div class="name">${escapeHtml(a.name)}</div>
              <div class="file">${fileLabel}</div>
              <div class="status">${stateLabel}</div>
            </div>
          </div>`;
        })
        .join('');
      list.innerHTML = rows || '<p style="grid-column:1/-1;text-align:center;padding:30px">No avatars match this filter.</p>';
      $$('#avatar-list .copy-btn').forEach(b => {
        b.addEventListener('click', e => {
          e.stopPropagation();
          copyToClipboard(b.dataset.copy, b);
        });
      });
    }

    function renderIllus(){
      const list = $('#illus-list');
      list.innerHTML = illus.map(i => {
        const cls = i._state === 'done' ? 'done' : '';
        const stateLabel = i._state === 'done' ? `✓ DELIVERED (.${i._ext})`
                        : i._state === 'missing' ? 'PENDING'
                        : 'checking…';
        const justFile = i.filename.split('/').pop();
        const fileLabel = i._state === 'done'
          ? `${i.filename}.${i._ext}`
          : `${i.filename}.{webp | png | jpg}`;
        return `<div class="illus-card ${cls}" data-file="${i.filename}">
          <div class="badge-row">
            <span class="lbl">${stateLabel}</span>
            <button class="copy-btn" data-copy="${justFile}.webp" style="position:static">📋 Copy filename</button>
          </div>
          <div class="ttl">${escapeHtml(i.name)}</div>
          <div class="file">${fileLabel}</div>
          <div class="specs">${escapeHtml(i.specs)}</div>
          <div class="used">Used on: ${escapeHtml(i.usedOn)}</div>
        </div>`;
      }).join('');
      $$('#illus-list .copy-btn').forEach(b => {
        b.addEventListener('click', e => {
          e.stopPropagation();
          copyToClipboard(b.dataset.copy, b);
        });
      });
    }

    function updateStats(){
      const all = inv.filter(x => x._state); // only counted once HEAD-checked
      const done = all.filter(x => x._state === 'done').length;
      const miss = all.filter(x => x._state === 'missing').length;
      $('#st-done').textContent = done;
      $('#st-missing').textContent = miss;
      $('#st-total').textContent = inv.length;
      const pct = inv.length ? Math.round((done / inv.length) * 100) : 0;
      $('#st-pct').textContent = pct + '%';
    }

    // Run HEAD checks. findFormat() probes all formats in parallel per slot,
    // so each slot only takes one round-trip. We still limit concurrency so we
    // don't open hundreds of sockets at once.
    async function checkAll(){
      const queue = [...inv];
      const CONC = 16;
      const workers = Array.from({ length: CONC }, async () => {
        while (queue.length) {
          const it = queue.shift();
          const ext = await window.WC_AVATAR.findFormat(it.basePath);
          if (ext) { it._state = 'done'; it._ext = ext; }
          else     { it._state = 'missing'; it._ext = null; }
        }
      });
      const renderInterval = setInterval(()=>{
        renderAvatars(currentFilter);
        renderIllus();
        updateStats();
      }, 250);
      await Promise.all(workers);
      clearInterval(renderInterval);
      renderAvatars(currentFilter);
      renderIllus();
      updateStats();
    }

    let currentFilter = 'all';
    $$('.filter-bar button').forEach(b => b.addEventListener('click', ()=>{
      $$('.filter-bar button').forEach(x => x.classList.toggle('active', x === b));
      currentFilter = b.dataset.filter;
      renderAvatars(currentFilter);
    }));

    // Initial render (all pending) then start checking
    renderAvatars(currentFilter);
    renderIllus();
    updateStats();
    checkAll();
    // Click-to-zoom handled centrally by avatar.js (matches .item.done .preview img + .wc-ava-img)
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/index.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>BOBAI Worldcup '26</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:240px;overflow-y:auto;padding:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px}
    .country-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;color:var(--text)}
    .country-cell:hover{background:rgba(240,185,11,.06);border-color:rgba(240,185,11,.15)}
    .country-cell.sel{background:var(--gold-glow);border-color:var(--gold)}
    .country-cell .fl{font-size:22px;line-height:1}
    .country-cell .nm{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.2}
    .country-cell.sel .nm{color:var(--gold)}
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/worldcup/" aria-label="Back to Worldcup">
          <span>←</span> Worldcup
        </a>
        <div class="brand">BOBAI Worldcup <span style="opacity:.55;margin:0 4px">·</span> '26</div>
        <span style="width:80px"></span>
      </div>
    </nav>

    <main>
      <div class="container">
        <div class="card">
          <h1><span class="accent">Welcome</span></h1>
          <p class="sub">Sign in to place tips, or create a new account.</p>

          <div class="tabs">
            <button class="tab active" data-tab="login">Sign in</button>
            <button class="tab" data-tab="register">Register</button>
          </div>

          <div id="alert"></div>

          <!-- LOGIN -->
          <form id="form-login" class="tab-pane">
            <div class="field">
              <label>Username or Email</label>
              <input type="text" name="identifier" autocomplete="username" required>
            </div>
            <div class="field">
              <label>Password</label>
              <input type="password" name="password" autocomplete="current-password" required>
            </div>
            <button type="submit" class="btn">Sign in</button>
            <p class="sub" style="margin-top:14px;margin-bottom:0;font-size:12px">
              <a href="#" id="link-forgot" style="color:var(--gold)">Forgot password?</a>
            </p>
          </form>

          <!-- REGISTER -->
          <form id="form-register" class="tab-pane hidden">
            <div class="field">
              <label>Username</label>
              <input type="text" name="username" autocomplete="username" required>
              <div class="hint">3–20 chars, letters/numbers/underscore. Shown on the leaderboard.</div>
            </div>
            <div class="field">
              <label>Email</label>
              <input type="email" name="email" autocomplete="email" required>
              <div class="hint">Used only for password reset. Never shown publicly, never spammed.</div>
            </div>
            <div class="field">
              <label>Password</label>
              <input type="password" name="password" autocomplete="new-password" minlength="6" required>
              <div class="hint">Min 6 characters.</div>
            </div>
            <div class="field">
              <label>Confirm password</label>
              <input type="password" name="password_confirm" autocomplete="new-password" minlength="6" required>
              <div class="hint">Re-enter the same password.</div>
            </div>
            <div class="field">
              <label>Pick your country (avatar)</label>
              <div id="country-grid" class="country-grid"></div>
              <input type="hidden" name="country" id="country-input">
              <div class="hint">You can change this later. Picker shows team flags; your <b>avatar</b> on the dashboard + leaderboard will be rendered as <b>BOBAI in that country's national jersey</b> (illustration brief in progress).</div>
            </div>
            <button type="submit" class="btn">Create account</button>
          </form>

          <!-- FORGOT PASSWORD -->
          <form id="form-forgot" class="tab-pane hidden">
            <div class="field">
              <label>Email</label>
              <input type="email" name="email" autocomplete="email" required>
              <div class="hint">We'll send you a reset link.</div>
            </div>
            <button type="submit" class="btn">Send reset link</button>
            <p class="sub" style="margin-top:14px;margin-bottom:0;font-size:12px">
              <a href="#" id="link-back-login" style="color:var(--gold)">← Back to sign in</a>
            </p>
          </form>

          <p class="sub" style="margin-top:24px;margin-bottom:0">
            Registration is open · Kickoff <b>11 June 2026</b>
          </p>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    // Render country grid
    const grid = $('#country-grid');
    const cInput = $('#country-input');
    window.WC_COUNTRIES.forEach(c => {
      const b = document.createElement('button');
      b.type = 'button';
      b.className = 'country-cell';
      b.dataset.code = c.code;
      b.innerHTML = `<span class="fl">${c.flag}</span><span class="nm">${c.name}</span>`;
      b.addEventListener('click', ()=>{
        $$('.country-cell').forEach(x=>x.classList.remove('sel'));
        b.classList.add('sel');
        cInput.value = c.code;
      });
      grid.appendChild(b);
    });

    // Tab switching (login/register only; forgot is a separate pane)
    function showPane(which){
      $$('.tab').forEach(x=>x.classList.toggle('active', x.dataset.tab===which));
      $('#form-login').classList.toggle('hidden', which!=='login');
      $('#form-register').classList.toggle('hidden', which!=='register');
      $('#form-forgot').classList.toggle('hidden', which!=='forgot');
      showAlert();
    }
    $$('.tab').forEach(t=>t.addEventListener('click',()=>showPane(t.dataset.tab)));
    $('#link-forgot').addEventListener('click', (e)=>{ e.preventDefault(); showPane('forgot'); });
    $('#link-back-login').addEventListener('click', (e)=>{ e.preventDefault(); showPane('login'); });

    // Login
    $('#form-login').addEventListener('submit', async (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Signing in…';
      const r = await window.WC_AUTH.login({
        identifier: fd.get('identifier'),
        password: fd.get('password'),
      });
      btn.disabled = false; btn.textContent = 'Sign in';
      if (r.error) { showAlert('error', r.error); return; }
      window.location.href = './dashboard.html';
    });

    // Register
    $('#form-register').addEventListener('submit', async (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      if (!fd.get('country')) {
        showAlert('error', 'Please pick your country flag below.');
        document.getElementById('country-grid').scrollIntoView({ behavior:'smooth', block:'center' });
        return;
      }
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Creating…';
      const r = await window.WC_AUTH.register({
        username: fd.get('username'),
        email: fd.get('email'),
        password: fd.get('password'),
        passwordConfirm: fd.get('password_confirm'),
        country: fd.get('country'),
      });
      btn.disabled = false; btn.textContent = 'Create account';
      if (r.error) { showAlert('error', r.error); return; }
      if (r.needsConfirmation) {
        const email = fd.get('email') || '';
        const safeEmail = email.replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
        showAlert('ok', `📧 <b>Check your email</b> — we sent a confirmation link to <b style="word-break:break-all">${safeEmail}</b>. Click the link to activate your account, then sign in below.<br><br>⚠ <b>Don't see it?</b> Check your <b>spam / junk</b> folder — confirmation mails sometimes land there.`);
        // Scroll alert just under the top nav with minimal gap.
        // requestAnimationFrame waits for the alert HTML to render so we
        // compute its real position, not the empty-div position.
        requestAnimationFrame(() => {
          const alertEl = document.getElementById('alert');
          if (!alertEl) return;
          // Measure entire <nav> in case it has additional rows (.tabbar etc.)
          const navEl = document.querySelector('nav');
          const navH = navEl ? navEl.offsetHeight : 58;
          const top = alertEl.getBoundingClientRect().top + window.pageYOffset - navH - 16;
          window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
        });
        return;
      }
      showAlert('ok', 'Account created — redirecting…');
      setTimeout(()=>{ window.location.href = './dashboard.html'; }, 700);
    });

    // Forgot password
    $('#form-forgot').addEventListener('submit', async (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Sending…';
      const r = await window.WC_AUTH.resetPasswordRequest(fd.get('email'));
      btn.disabled = false; btn.textContent = 'Send reset link';
      if (r.error) { showAlert('error', r.error); return; }
      showAlert('ok', 'If an account exists for that email, a reset link has been sent. Check your inbox.');
    });

    // If already logged in, jump to dashboard
    (async ()=>{
      const p = await window.WC_AUTH.currentProfile();
      if (p) window.location.href = './dashboard.html';
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/leaderboard.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Public archive page since 2026-07-20 (like prize-pool + rules) — auth gate removed -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Leaderboard</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:920px}

    /* TABS */
    .lbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;background:rgba(0,0,0,.3);padding:5px;border-radius:10px}
    .lbar button{flex:1;min-width:80px;padding:9px 8px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit}
    .lbar button.active{background:var(--gold-glow);color:var(--gold)}

    /* WALLET FILTER (skip+promote payout view toggle) */
    .wallet-filter{display:flex;gap:5px;flex-wrap:wrap;margin:-4px 0 14px}
    .wallet-filter button{padding:6px 11px;font-size:11px;font-weight:600;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.3px}
    .wallet-filter button:hover{border-color:rgba(240,185,11,.3)}
    .wallet-filter button.active{background:var(--gold-glow);color:var(--gold);border-color:var(--gold)}

    /* GROUP/COIN SELECTOR */
    .sub-selector{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px}
    .sub-selector button{padding:7px 12px;font-size:11px;font-weight:600;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.5px;display:inline-flex;align-items:center;gap:6px}
    .sub-selector button:hover{border-color:rgba(240,185,11,.3)}
    .sub-selector button.active{background:var(--gold-glow);color:var(--gold);border-color:var(--gold)}
    .sub-selector button .coin-ic{width:16px;height:16px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;overflow:hidden}
    .coin-badge{width:18px;height:18px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:-4px;margin-right:6px;overflow:hidden}
    .coin-ic.bobai,.coin-badge.bobai{transform:scale(1.08)} /* match BTC/BNB optical size — see crypto.html note */

    /* LIST */
    .list{display:flex;flex-direction:column;gap:6px}
    .list.scroll-cap{max-height:600px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(240,185,11,.3) transparent}
    .list.scroll-cap::-webkit-scrollbar{width:6px}
    .list.scroll-cap::-webkit-scrollbar-thumb{background:rgba(240,185,11,.25);border-radius:3px}
    .row{display:grid;grid-template-columns:38px 30px 1fr minmax(82px,108px) auto;gap:10px;align-items:center;padding:12px 14px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;transition:all .15s}
    .row.me{border-color:var(--gold);background:rgba(240,185,11,.07)}
    .row.top1{background:linear-gradient(90deg,rgba(240,185,11,.15),rgba(0,0,0,.25));border-color:rgba(240,185,11,.4)}
    .row.top2{background:linear-gradient(90deg,rgba(192,192,192,.08),rgba(0,0,0,.25));border-color:rgba(192,192,192,.25)}
    .row.top3{background:linear-gradient(90deg,rgba(205,127,50,.08),rgba(0,0,0,.25));border-color:rgba(205,127,50,.25)}
    .row.closest{background:linear-gradient(90deg,rgba(240,185,11,.18),rgba(240,185,11,.06));border-color:var(--gold);box-shadow:0 0 24px rgba(240,185,11,.12)}
    /* Paid-out group winner — green tint overrides medal styling so the row
       reads as "money already left the pool" rather than "currently leading". */
    .row.paid{background:linear-gradient(90deg,rgba(0,230,118,.10),rgba(0,230,118,.03));border-color:rgba(0,230,118,.42);position:relative}
    .row.paid::after{content:'✓ paid';position:absolute;top:6px;right:8px;font-family:'Space Grotesk';font-size:9px;letter-spacing:.8px;color:#7fffb0;background:rgba(0,230,118,.14);border:1px solid rgba(0,230,118,.3);padding:1px 6px;border-radius:4px;font-weight:700;text-transform:uppercase;pointer-events:none}
    .row.paid.me{border-color:rgba(0,230,118,.55);background:linear-gradient(90deg,rgba(0,230,118,.16),rgba(240,185,11,.04))}
    /* Forfeit (cap-hit at 0 BOBAI balance): share cascaded to others */
    .row.forfeit{background:linear-gradient(90deg,rgba(255,180,0,.07),rgba(0,0,0,.25));border-color:rgba(255,180,0,.32);opacity:.85}
    .row.forfeit::after{content:'26× cap';position:absolute;top:6px;right:8px;font-family:'Space Grotesk';font-size:9px;letter-spacing:.8px;color:#ffc066;background:rgba(255,180,0,.14);border:1px solid rgba(255,180,0,.32);padding:1px 6px;border-radius:4px;font-weight:700;text-transform:uppercase;pointer-events:none}
    .row.forfeit .prize-cell .pz-pct,.row.forfeit .prize-cell .pz-bobai,.row.forfeit .prize-cell .pz-usd{color:rgba(255,192,102,.7)}
    .forfeit-pill{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:5px;background:rgba(255,180,0,.12);border:1px solid rgba(255,180,0,.32);color:#ffc066;font-family:'Space Grotesk';font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;cursor:help}
    /* paid-inline: same green settled look as .row.paid but WITHOUT the absolute
       top-right ::after badge — used on crypto rows where that badge would sit
       behind the tip-price column. The ✓ paid pill renders inline next to the name. */
    .row.paid-inline{background:linear-gradient(90deg,rgba(0,230,118,.10),rgba(0,230,118,.03));border-color:rgba(0,230,118,.42)}
    .row.forfeit-inline{background:linear-gradient(90deg,rgba(255,180,0,.07),rgba(0,0,0,.25));border-color:rgba(255,180,0,.32);opacity:.85}
    .row.paid-inline.me{border-color:rgba(0,230,118,.55);background:linear-gradient(90deg,rgba(0,230,118,.16),rgba(240,185,11,.04))}
    .paid-pill-inline{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:5px;background:rgba(0,230,118,.14);border:1px solid rgba(0,230,118,.3);color:#7fffb0;font-family:'Space Grotesk';font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}

    .rank{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--muted);text-align:center}
    .row.top1 .rank{color:var(--gold);font-size:18px}
    .row.top2 .rank{color:#cccccc;font-size:16px}
    .row.top3 .rank{color:#cd7f32;font-size:16px}
    .row.closest .rank{color:var(--gold);font-size:18px}
    .ava-sm{display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
    .uinfo{min-width:0}
    .uname{font-weight:600;color:var(--text);font-size:14px;display:flex;align-items:center;gap:4px;min-width:0}
    .uname .uname-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .uname .ball{font-size:13px;flex-shrink:0}
    .umeta{font-size:11px;color:var(--muted)}
    /* Tie-breaker pill — shown when this row beat its tied-on-points neighbor on BOBAI balance.
       Actual amounts are NEVER exposed; the server returns just a `bobai_beats_below` flag. */
    .tie-pill{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 7px;background:rgba(240,185,11,.12);border:1px solid rgba(240,185,11,.32);color:var(--gold);font-family:'Space Grotesk';font-weight:600;font-size:9.5px;letter-spacing:.4px;border-radius:99px;text-transform:none;white-space:nowrap;vertical-align:1px}
    .pts{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--gold);white-space:nowrap;text-align:right}
    .pts .lbl{font-size:9.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-left:4px;font-weight:500}
    .pts.diff{font-size:14px;color:var(--text)}

    /* Prize cell — between username and pts */
    .prize-cell{text-align:right;font-family:'Space Grotesk';line-height:1.1;min-width:0}
    .prize-cell .pz-pct{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.3px}
    .prize-cell .pz-bobai{font-size:10.5px;color:var(--text);font-weight:600;margin-top:1px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .prize-cell .pz-usd{font-size:10px;color:var(--muted);font-weight:500;margin-top:1px}
    .prize-cell.zero .pz-pct{color:var(--muted);font-weight:600}
    .prize-cell.zero .pz-bobai,.prize-cell.zero .pz-usd{color:rgba(123,125,158,.55)}

    /* Rank gap (between top-N and "your row") */
    .rank-gap{text-align:center;color:var(--muted);padding:6px;letter-spacing:6px;font-weight:700;opacity:.5}

    /* "Your rank" footer */
    .me-footer{margin-top:14px;padding:12px 16px;background:linear-gradient(90deg,rgba(240,185,11,.08),rgba(240,185,11,.02));border:1px solid rgba(240,185,11,.3);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px}
    .me-footer .mf-left{display:flex;align-items:center;gap:10px;color:var(--text)}
    .me-footer .mf-rank{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--gold)}
    .me-footer .mf-status{color:var(--muted)}
    .me-footer .mf-status.qualified{color:#5fffa0;font-weight:600}
    .me-footer .mf-status.need{color:#ffc066;font-weight:600}

    /* Bracket-as-list (one phase shown at a time) */
    .br-list{display:flex;flex-direction:column;gap:8px}
    .br-list .br-match{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:12px 16px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px}
    .br-list .br-match.played{border-color:rgba(240,185,11,.25)}
    .br-list .br-match.final{border-color:var(--gold);background:rgba(240,185,11,.06)}
    .br-list .br-team{display:flex;align-items:center;gap:8px;min-width:0}
    .br-list .br-team.away{justify-content:flex-end}
    .br-list .br-team .fl{font-size:20px;flex-shrink:0}
    .br-list .br-team .nm{color:var(--text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .br-list .br-team.tbd .nm{color:var(--muted)}
    .br-list .br-team.win .nm{font-weight:700;color:var(--gold)}
    .br-list .br-center{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px}
    .br-list .br-score{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--text)}
    .br-list .br-score.played{color:var(--gold)}
    .br-list .br-pens{font-family:'Space Grotesk';font-weight:600;font-size:11px;color:var(--muted);white-space:nowrap}
    .br-list .br-vs{font-size:11px;color:var(--muted);letter-spacing:1px}
    .br-list .br-time{font-size:10px;color:var(--muted);margin-top:2px}

    /* Crypto stack — closest in middle */
    .crypto-divider{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--muted);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600}
    .crypto-divider::before,.crypto-divider::after{content:'';flex:1;height:1px;background:var(--border)}
    .crypto-divider.up{color:#5fffa0}
    .crypto-divider.up::before,.crypto-divider.up::after{background:rgba(0,230,118,.2)}
    .crypto-divider.down{color:#ff8580}
    .crypto-divider.down::before,.crypto-divider.down::after{background:rgba(255,80,80,.2)}

    .empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:13px;background:rgba(0,0,0,.2);border:1px dashed var(--border);border-radius:10px}

    /* FIFA STANDINGS TABLE */
    .section-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 4px 8px;font-family:'Space Grotesk';font-weight:600;font-size:11.5px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase}
    .section-h .right{color:var(--muted);font-weight:500;letter-spacing:.5px;text-transform:none;font-size:11px}
    /* Settled (group pot paid & frozen) explainer + receipt-order divider */
    .settled-pill{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:5px;background:rgba(0,230,118,.14);border:1px solid rgba(0,230,118,.32);color:#7fffb0;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:1px}
    .settled-note{margin:0 4px 12px;padding:10px 13px;background:rgba(0,230,118,.05);border:1px solid rgba(0,230,118,.18);border-radius:9px;color:var(--muted);font-size:11.5px;line-height:1.55}
    .settled-note b{color:#7fffb0;font-weight:700}
    .settled-divider{text-align:center;font-size:9.5px;letter-spacing:.6px;color:var(--muted);opacity:.65;margin:8px 0 4px;text-transform:uppercase;font-family:'Space Grotesk';font-weight:600}
    .standings{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:6px}
    .standings table{width:100%;border-collapse:collapse;font-size:13px}
    .standings th,.standings td{padding:9px 6px;text-align:center;border-bottom:1px solid rgba(255,255,255,.04)}
    .standings th{font-family:'Space Grotesk';font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;background:rgba(0,0,0,.4)}
    .standings tbody tr:last-child td{border-bottom:none}
    .standings .team-cell{text-align:left;padding-left:10px;display:flex;align-items:center;gap:8px;min-width:0}
    .standings .team-cell .fl{font-size:18px;line-height:1;flex-shrink:0}
    .standings .team-cell .nm{color:var(--text);font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .standings .pos{font-weight:700;color:var(--muted);width:24px}
    .standings .pts{color:var(--gold);font-weight:700;font-family:'Space Grotesk'}
    .standings .gd-pos{color:#5fffa0}
    .standings .gd-neg{color:#ff7a7a}
    .standings tr.q1,.standings tr.q2{background:rgba(240,185,11,.04)}
    .standings tr.q1 .pos,.standings tr.q2 .pos{color:var(--gold)}
    .standings tr.q3{background:rgba(123,125,158,.04)}
    .standings .q-note{font-size:10px;color:var(--muted);padding:8px 12px;background:rgba(0,0,0,.4);text-align:left;border-top:1px solid rgba(255,255,255,.04)}

    /* BONUS VIEW */
    .bonus-intro{padding:11px 14px;background:rgba(240,185,11,.04);border:1px solid rgba(240,185,11,.18);border-radius:10px;color:var(--text);font-size:12px;line-height:1.55;margin-bottom:14px}
    .bonus-intro b{color:var(--gold)}
    .bonus-status{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 4px 8px}
    .bonus-status .left{font-family:'Space Grotesk';font-size:11.5px;color:var(--gold);font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
    .bonus-status .right{font-size:11px;color:var(--muted);font-weight:500}
    .bonus-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-family:'Space Grotesk';font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
    .bonus-pill.pending{background:rgba(123,125,158,.12);color:var(--muted)}
    .bonus-pill.live{background:rgba(64,160,255,.12);color:#80b8ff}
    .bonus-pill.locked{background:rgba(240,185,11,.16);color:var(--gold)}

    .bonus-card{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px}
    .bonus-card.eliminated{opacity:.45}
    .bonus-card.winner{border-color:var(--gold);background:linear-gradient(135deg,rgba(240,185,11,.06),rgba(0,0,0,.3))}
    .bonus-card .bc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
    .bonus-card .bc-ava{font-size:30px;line-height:1;flex-shrink:0}
    .bonus-card .bc-info{flex:1;min-width:0}
    .bonus-card .bc-name{font-weight:600;color:var(--text);font-size:14px;line-height:1.2}
    .bonus-card .bc-name .country{color:var(--muted);font-weight:500;font-size:12px;margin-left:5px}
    .bonus-card .bc-meta{font-size:11px;color:var(--muted);margin-top:2px}
    .bonus-card .bc-meta b{color:var(--gold);font-family:'Space Grotesk';font-weight:700}
    .bonus-card .bc-meta .elim{color:#ff9080}
    .bonus-card .bc-tippers{display:flex;flex-wrap:wrap;gap:5px}
    .bonus-card .bc-tippers .empty{padding:6px 10px;font-size:11.5px;color:var(--muted);font-style:italic;background:transparent;border:1px dashed var(--border);border-radius:6px}
    .bonus-card .tip-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:99px;font-size:11.5px;color:var(--text);text-decoration:none;transition:all .12s}
    .bonus-card .tip-chip:hover{border-color:var(--gold);color:var(--gold)}
    .bonus-card .tip-chip.me{border-color:var(--gold);background:rgba(240,185,11,.1);color:var(--gold);font-weight:700}
    .bonus-card .tip-chip .pts-tag{font-family:'Space Grotesk';font-weight:700;font-size:10px;padding:1px 5px;border-radius:99px;letter-spacing:.5px}
    .bonus-card .tip-chip .pts-tag.pending{background:rgba(123,125,158,.18);color:var(--muted)}
    .bonus-card .tip-chip .pts-tag.awarded{background:rgba(95,255,160,.18);color:#5fffa0}
    .bonus-card .ball{font-size:11px}

    .bonus-empty{padding:18px;text-align:center;color:var(--muted);font-size:12.5px;background:rgba(0,0,0,.18);border:1px dashed var(--border);border-radius:10px}

    /* KO BRACKET */
    .bracket-wrap{overflow-x:auto;padding:6px 2px 12px;-webkit-overflow-scrolling:touch}
    .bracket{display:flex;gap:14px;min-width:max-content}
    .br-col{display:flex;flex-direction:column;gap:10px;min-width:170px}
    .br-col-h{font-family:'Space Grotesk';font-weight:600;font-size:11px;color:var(--gold);letter-spacing:1.2px;text-transform:uppercase;text-align:center;padding-bottom:4px;border-bottom:1px solid var(--border)}
    .br-match{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:11.5px;line-height:1.4;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:62px}
    .br-match.played{border-color:rgba(240,185,11,.25)}
    .br-match.final{border-color:var(--gold);background:rgba(240,185,11,.06)}
    .br-team{display:flex;align-items:center;gap:6px;min-width:0}
    .br-team .fl{font-size:14px;flex-shrink:0}
    .br-team .nm{flex:1;min-width:0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .br-team.tbd .nm{color:var(--muted)}
    .br-team.win .nm{font-weight:700;color:var(--gold)}
    .br-team .sc{font-family:'Space Grotesk';font-weight:700;color:var(--text);font-size:12.5px;min-width:14px;text-align:right}
    .br-team.win .sc{color:var(--gold)}
    .br-meta{font-size:9.5px;color:var(--muted);letter-spacing:.4px;margin-top:5px;text-align:right}

    @media (max-width: 560px){
      .row{grid-template-columns:28px 26px 1fr minmax(70px,84px) auto;gap:7px;padding:10px 10px}
      .uname{font-size:13px}
      .pts{font-size:15px}
      .prize-cell .pz-pct{font-size:12px}
      .prize-cell .pz-bobai{font-size:9.5px}
      .prize-cell .pz-usd{font-size:9px}
      .standings th,.standings td{padding:7px 4px;font-size:12px}
      .standings .team-cell .nm{font-size:11.5px}
      .standings .team-cell{padding-left:6px;gap:5px}
      .standings .team-cell .fl{font-size:15px}
      .br-col{min-width:150px}
      .br-list .br-match{grid-template-columns:1fr auto 1fr;padding:10px 12px;gap:8px}
      .br-list .br-team .nm{font-size:12px}
      .br-list .br-center{min-width:54px}
      .br-list .br-score{font-size:16px}
      .me-footer{padding:10px 12px;font-size:12px}
      .me-footer .mf-rank{font-size:16px}
    }
  </style>
</head>
<body data-public="true">
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="leaderboard-hero"></div>
        <div class="card">
          <div data-card-accent="pool-trophy"></div>
          <h1><span class="accent">Leaderboard</span></h1>
          <p class="sub">Live shares update with the <a href="./prize-pool.html" style="color:var(--gold)">prize pool</a> · ⚽ = wallet linked · only wallet-linked players are eligible for payouts (next eligible player takes the slot)</p>

          <!-- WALLET FILTER (toggles between full leaderboard and the exact payout ranking) -->
          <div class="wallet-filter" id="wallet-filter">
            <button data-filter="all" class="active">All players</button>
            <button data-filter="wallet">💰 Wallet-linked only</button>
          </div>

          <!-- TABS -->
          <div class="lbar" id="lbar">
            <button data-view="overall" class="active">Overall</button>
            <button data-view="groups">Groups</button>
            <button data-view="bracket">Bracket</button>
            <button data-view="bonus">Bonus</button>
            <button data-view="crypto">Crypto</button>
            <button data-view="payouts">💰 Payouts</button>
          </div>

          <!-- SUB-SELECTOR (for Groups + Crypto) -->
          <div id="sub-selector" class="sub-selector hidden"></div>

          <!-- LIST (generic wrapper; each view fills with its own layout) -->
          <div id="list">
            <div class="empty">Loading…</div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/projection.js?v=5"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    // ============== CONSTANTS ==============
    const POOL_SPLIT = {
      groupTop1:  0.55,  // 1st-of-each-group bracket (split flat across GROUP_SLOTS_TOP1=12)
      groupTop2:  0.30,  // 2nd-of-each-group bracket (split flat across GROUP_SLOTS_TOP2=12)
      groupBest3: 0.15,  // 8 best 3rd-placed players (split flat across GROUP_SLOTS_BEST3=8)
      // End-pool: fixed tiered weights for top 4 overall
      endTiers: [0.50, 0.25, 0.15, 0.10],
    };
    // Fixed slot counts — per-player share is always (fraction * group_pot) / slots,
    // regardless of how many slots are actually filled at projection time. This matches
    // the published rules (Group 1st × 12 → 55 %/12 ≈ 4.58 % etc.) and avoids inflating
    // a single early leader to look like they'd win the whole bracket.
    const GROUP_SLOTS_TOP1  = 12;
    const GROUP_SLOTS_TOP2  = 12;
    const GROUP_SLOTS_BEST3 = 8;
    const END_TOP_N = POOL_SPLIT.endTiers.length;
    const GROUP_LETTERS = ['A','B','C','D','E','F','G','H','I','J','K','L'];
    const COINS = [
      { code:'btc',   label:'BTC',   icon:'./illus/coin-btc.webp' },
      { code:'bnb',   label:'BNB',   icon:'./illus/coin-bnb.webp' },
      { code:'bobai', label:'BOBAI', icon:'./illus/coin-bobai.webp' },
    ];
    const KO_PHASES = [
      { key:'r32',   label:'Round of 32' },
      { key:'r16',   label:'Round of 16' },
      { key:'qf',    label:'Quarter-finals' },
      { key:'sf',    label:'Semi-finals' },
      { key:'3rd',   label:'Third place' },
      { key:'final', label:'Final' },
    ];
    // Bonus sub-tabs. Champion is first — it's the headline pick.
    const BONUS_TABS = [
      { key:'champion',     label:'🏆 Champion',     field:'champion',
        title:'World Cup winner',
        intro:'Every tipped country stays on the board <b>until that team exits the tournament</b>. Eliminated teams are greyed out. The 20 points lock in <b>green</b> when the lifting-the-trophy team is decided at the end of the final.' },
      { key:'most_goals',   label:'⚽ Most goals',   field:'most_goals_team',
        title:'Team with the most goals scored',
        intro:'Whoever is leading the goals-scored table right now. The 20-point award goes <b>green</b> once the team is mathematically uncatchable.' },
      { key:'fewest_goals', label:'🥅 Fewest goals', field:'fewest_goals_team',
        title:'Team with the fewest goals scored',
        intro:'Live during the group phase. Locks in when the qualifying team is final — usually the lowest-scoring team that exits the tournament.' },
      { key:'golden_boot',  label:'👑 Golden Boot',  field:'topscorer_country',
        title:'Country of the top scorer',
        intro:'Live top-scorer feed (football-data.org). Resolves at the final once the Golden Boot is mathematically locked.' },
      { key:'red_cards',    label:'🟥 Red cards',    field:'red_cards_bracket',
        title:'Total red cards in the tournament',
        intro:'Live counter — only resolves at the <b>end of the final</b>. The bracket the running total currently sits in is highlighted; tippers of that bracket are the candidates to win the 20 points.' },
    ];
    const RED_CARD_BRACKETS = [
      { key:'<5',    label:'< 5',    min: 0,  max: 4  },
      { key:'5-9',   label:'5 – 9',  min: 5,  max: 9  },
      { key:'10-14', label:'10 – 14',min:10,  max:14  },
      { key:'15-19', label:'15 – 19',min:15,  max:19  },
      { key:'>19',   label:'> 19',   min:20,  max: Infinity },
    ];

    // ============== STATE ==============
    let me = null;
    let view = 'overall';
    let subView = null;
    let allMatches = null;
    let pool = { total:0, group:0, end:0, crypto:0, price:0 };
    let allGroupData = null;
    // Crypto pot resolved: prices frozen at the exact Final kickoff (2026-07-19 19:00:00.000 UTC).
    // BTC/BNB = Binance 1s-candle open @19:00:00.000Z, BOBAI = GeckoTerminal pool price
    // (last trade 10:33 UTC, unchanged through kickoff) — same sources as the live display.
    const FINAL_KICKOFF_PRICES = { btc: 64420.00, bnb: 567.47, bobai: 0.0000553231784899214 };
    // walletOnly: when true, non-linked players are hidden across every view (Overall, Groups,
    // Bracket projection, Crypto) and ranks re-number against the linked-only set — this is
    // the literal payout ranking the admin uses at settlement. Default OFF so the leaderboard
    // still shows bragging-rights positions for non-linked players. Persisted in localStorage.
    let walletOnly = false;
    try { walletOnly = localStorage.getItem('wc_wallet_filter') === '1'; } catch(e){}
    function isEligible(r){ return !!(r && r.has_wallet); }
    function applyWalletFilter(rows){ return walletOnly ? rows.filter(isEligible) : rows; }

    // ============== FORMATTERS ==============
    function countryFlag(code){ const c = window.WC_COUNTRIES.find(x => x.code === code); return c ? c.flag : '⚪'; }
    function countryName(code){ const c = window.WC_COUNTRIES.find(x => x.code === code); return c ? c.name : '—'; }
    function fmtPts(p){
      if (p == null) return '0';
      const n = Number(p);
      if (!Number.isFinite(n)) return '0';
      return Number.isInteger(n) ? String(n) : (+n.toFixed(2)).toString();
    }
    function fmtBobai(n){
      if (n == null) return '0';
      const v = Number(n);
      if (v >= 1_000_000) return (v/1_000_000).toFixed(2) + 'M';
      if (v >= 1_000)     return (v/1_000).toFixed(1) + 'K';
      return v.toFixed(0);
    }
    function fmtUsd(n){
      if (n == null || !isFinite(n)) return '$0.00';
      if (n >= 1_000_000) return '$' + (n/1_000_000).toFixed(2) + 'M';
      if (n >= 1_000)     return '$' + (n/1_000).toFixed(1) + 'K';
      return '$' + n.toFixed(2);
    }
    function fmtCryptoPrice(coin, n){
      if (n == null) return '—';
      const v = Number(n);
      if (coin === 'bobai') return '$' + v.toFixed(10).replace(/0+$/,'').replace(/\.$/,'');
      if (coin === 'btc')   return '$' + v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      return '$' + v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 });
    }
    function fmtPct(p){
      if (p == null || !isFinite(p)) return '—';
      if (p === 0) return '0%';
      if (p < 0.01) return '<0.01%';
      if (p < 0.1)  return p.toFixed(2) + '%';
      if (p < 10)   return p.toFixed(1)  + '%';
      return p.toFixed(0) + '%';
    }
    function fmtKickoffShort(iso){
      const d = new Date(iso);
      return d.toLocaleDateString(undefined, { month:'short', day:'numeric' }) + ' · ' +
             d.toLocaleTimeString(undefined, { hour:'2-digit', minute:'2-digit' });
    }
    function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' })[m]); }
    function coinDisplay(c){ return c === 'bobai' ? 'BOBAI' : c.toUpperCase(); }
    function coinIconPath(c){ const m = COINS.find(x => x.code === c); return m ? m.icon : ''; }

    // ============== PRIZE MATH ==============
    // End-pool: fixed tiered weights (50 / 25 / 15 / 10 %) for top 4 by total_points.
    // Skip+promote: non-linked players are skipped — the next wallet-linked player takes the
    // slot (e.g. if leaderboard #1 has no wallet, the wallet-linked #2 becomes payout #1).
    function computeEndPoolShares(rows){
      const shares = new Map();
      const eligible = rows.filter(isEligible);
      const top = eligible.slice(0, END_TOP_N);
      top.forEach((r, i) => {
        const tier = POOL_SPLIT.endTiers[i] || 0;
        shares.set(r.user_id, tier * pool.end);
      });
      return shares;
    }

    // Group pot: 55/30/15 across {top1, top2, best-3rd}. Per-player share = (fraction *
    // group_pot) / FIXED slots (12/12/8) — NOT divided by actually-filled slots. Empty
    // slots don't inflate the remaining players' projections; any unallocated share is
    // resolved at payout time within the SAME pot (cap-cascade first; if residual remains
    // after every winner is capped, leftover → permanent BOBAI/BNB liquidity + LP burn).
    // Keyed by `${user_id}|${letter}`.
    function computeGroupShares(allGroups){
      const shares = new Map();
      if (pool.group <= 0) return shares;
      const top1s = [], top2s = [], best3candidates = [];
      allGroups.forEach(g => {
        // Skip+promote within each group: drop non-linked players first, then pick top1/top2/best3.
        const r = g.rows.filter(isEligible);
        if (r[0]) top1s.push({ ...r[0], _letter: g.letter });
        if (r[1]) top2s.push({ ...r[1], _letter: g.letter });
        if (r[2]) best3candidates.push({ ...r[2], _letter: g.letter });
      });
      const best3 = best3candidates
        .sort((a,b) => (b.group_points||0) - (a.group_points||0))
        .slice(0, GROUP_SLOTS_BEST3);
      function distribute(bracket, fraction, slots){
        if (!bracket.length || slots <= 0) return;
        const each = (pool.group * fraction) / slots;
        bracket.forEach(r => shares.set(`${r.user_id}|${r._letter}`, each));
      }
      distribute(top1s, POOL_SPLIT.groupTop1,  GROUP_SLOTS_TOP1);
      distribute(top2s, POOL_SPLIT.groupTop2,  GROUP_SLOTS_TOP2);
      distribute(best3, POOL_SPLIT.groupBest3, GROUP_SLOTS_BEST3);
      return shares;
    }

    // Crypto: each coin pot ≈ 3.3% of total (= crypto_pot / 3); winner-take-all
    function computeCryptoWinnerShare(){ return pool.crypto / 3; }

    // ============== UI HELPERS ==============
    // contextPot: the pot this row is paid out of (end / group / crypto). The percentage
    // is the share of THAT pot — so Overall 1st reads 50% (of end pool), Crypto winner 33%
    // (of crypto pot), Group top1 ≈ 4.6% (of group pot, since 12 winners share the 55% bracket).
    function prizeCellHtml(bobai, contextPot){
      const pot = contextPot || 0;
      const pct = pot > 0 ? (bobai / pot * 100) : 0;
      const hasPrice = (pool.price || 0) > 0;
      const usdStr = !(bobai > 0) ? '$0' : (hasPrice ? fmtUsd(bobai * pool.price) : 'n/a');
      const isZero = !(bobai > 0);
      return `<div class="prize-cell ${isZero ? 'zero' : ''}">
        <div class="pz-pct">${isZero ? '—' : fmtPct(pct)}</div>
        <div class="pz-bobai">${isZero ? '0 BOBAI' : fmtBobai(bobai) + ' BOBAI'}</div>
        <div class="pz-usd">${usdStr}</div>
      </div>`;
    }

    function rowClass(rank, userId, extra){
      let c = 'row';
      if (rank === 1) c += ' top1';
      else if (rank === 2) c += ' top2';
      else if (rank === 3) c += ' top3';
      if (me && me.id === userId) c += ' me';
      if (extra) c += ' ' + extra;
      return c;
    }

    function rankLabel(rank){
      if (rank === 1) return '🥇';
      if (rank === 2) return '🥈';
      if (rank === 3) return '🥉';
      return '#' + rank;
    }

    function userRow(r, rank, opts){
      const country = countryName(r.avatar_country);
      const ball = r.has_wallet ? '<span class="ball">⚽</span>' : '';
      const href = './user.html?u=' + encodeURIComponent(r.username);
      const ava = window.WC_AVATAR
        ? window.WC_AVATAR.avatarHtml(r.avatar_country, 'sm')
        : `<span style="font-size:22px">${countryFlag(r.avatar_country)}</span>`;
      const prize = (opts.prizeBobai != null)
        ? prizeCellHtml(opts.prizeBobai, opts.contextPot)
        : `<div class="prize-cell zero"><div class="pz-pct">—</div><div class="pz-bobai">0 BOBAI</div><div class="pz-usd">$0</div></div>`;
      const ptsLabel = opts.ptsLabel ? `<span class="lbl">${opts.ptsLabel}</span>` : '';
      const pts = `<div class="pts ${opts.ptsClass || ''}">${opts.ptsValue}${ptsLabel}</div>`;
      // Tie-breaker badge — only when this row genuinely beat a tied-on-points
      // neighbor on BOBAI balance (server-side flag, no amounts exposed). Limited
      // to paid positions in this view: Groups top 3 (55/30/15), Overall/Bracket
      // top 4 (50/25/15/10). Non-payout ties stay quiet.
      const medalRank = opts.medalRank || 3;
      // Past tense ("held") for settled/frozen views, present ("holds") for live ones.
      const tieVerb = opts.tiePast ? 'held' : 'holds';
      const tiePill = (r.bobai_beats_below && rank <= medalRank)
        ? ` · <span class="tie-pill" title="Tied on points; ranks higher because this wallet ${tieVerb} more $BOBAI (rules §7).">${tieVerb} more $BOBAI</span>`
        : '';
      // Cap-not-reached badge — wallet linked but 26× holder cap = 0 (i.e. holds
      // too little $BOBAI), so the row's share cascades to the other group winners.
      // Shown only after the group pot is paid (opts.forfeit = wc_payouts amount === 0).
      const forfeitPill = opts.forfeit
        ? ` · <span class="forfeit-pill" title="Wallet didn't meet the 26× holder cap — share cascaded to the remaining winners / next eligible player (rules §5).">didn't reach 26× cap</span>`
        : '';
      const paidPill = opts.paidPill ? ` · <span class="paid-pill-inline">✓ paid</span>` : '';
      return `<a href="${href}" class="${rowClass(rank, r.user_id, opts.extraClass)}" style="text-decoration:none;color:inherit">
        <div class="rank">${rankLabel(rank)}</div>
        <div class="ava-sm">${ava}</div>
        <div class="uinfo">
          <div class="uname"><span class="uname-text">${escapeHtml(r.username)}</span>${ball}</div>
          <div class="umeta">${country}${tiePill}${forfeitPill}${paidPill}</div>
        </div>
        ${prize}
        ${pts}
      </a>`;
    }

    function meFooterHtml({ rank, totalRows, qualifierRank, qualifierPts, myPts, qualifiedCopy, needCopy }){
      if (!me) {
        return `<div class="me-footer"><div class="mf-left"><span class="mf-status">Sign in to see your own rank here.</span></div></div>`;
      }
      if (rank == null) {
        return `<div class="me-footer"><div class="mf-left"><span class="mf-status">You don't have entries in this view yet.</span></div></div>`;
      }
      const qualified = rank <= qualifierRank;
      const need = Math.max(1, Math.ceil((qualifierPts || 0) - (myPts || 0) + 0.01));
      const statusHtml = qualified
        ? `<span class="mf-status qualified">${qualifiedCopy}</span>`
        : `<span class="mf-status need">${needCopy.replace('{n}', need)}</span>`;
      return `<div class="me-footer">
        <div class="mf-left">
          <span class="mf-rank">#${rank}</span>
          <span class="mf-status">of ${totalRows} player${totalRows===1?'':'s'}</span>
        </div>
        <div>${statusHtml}</div>
      </div>`;
    }

    // ============== POOL ==============
    async function loadPool(){
      const r = await window.WC_PROFILE.loadPool();
      if (r.error) return;
      const p = r.pool || {};
      pool = {
        total:        parseFloat(p.total_bobai)     || 0,
        group:        parseFloat(p.group_pot)       || 0,
        end:          parseFloat(p.endpool)         || 0,
        crypto:       parseFloat(p.crypto_pot)      || 0,
        price:        parseFloat(p.bobai_price_usd) || 0,
        groupPaidAt:  p.group_paid_at || null,
      };
    }

    // ============== MATCHES + FIFA STANDINGS ==============
    async function loadAllMatches(){
      if (allMatches) return allMatches;
      const r = await window.WC_PROFILE.loadMatches();
      allMatches = r.matches || [];
      return allMatches;
    }

    // --- Knockout result helpers (extra time / penalties) ---
    // goals_home/away = 90-min result (what tips are scored on).
    // final_home/away (+ decided_by 'aet'|'pens') = full result that decides who
    // advances. Winner = direction of final when present, else of goals.
    function matchWinnerSide(m){
      const hasFinal = m.final_home != null && m.final_away != null;
      const h = hasFinal ? m.final_home : m.goals_home;
      const a = hasFinal ? m.final_away : m.goals_away;
      if (h == null || a == null || h === a) return null;
      return h > a ? 'home' : 'away';
    }
    // Goals counted toward scorer tallies: extra-time goals count, penalties never.
    function statGoals(m){
      if (m.decided_by === 'aet' && m.final_home != null)
        return { h: m.final_home, a: m.final_away };
      return { h: m.goals_home, a: m.goals_away };
    }
    // Scoreline suffix: "(3:4 pen)" or "(2:1 a.e.t.)". Empty for regular results.
    function resultSuffix(m){
      if (m.decided_by === 'pens' && m.final_home != null)
        return ` <span class="br-pens">(${m.final_home - m.goals_home}:${m.final_away - m.goals_away} pen)</span>`;
      if (m.decided_by === 'aet' && m.final_home != null)
        return ` <span class="br-pens">(${m.final_home}:${m.final_away} a.e.t.)</span>`;
      return '';
    }

    function computeStandings(matches, groupLetter){
      const teams = {};
      const gm = matches.filter(m => m.phase === 'group' && m.group_letter === groupLetter);
      gm.forEach(m => {
        [m.team_home, m.team_away].forEach(t => {
          if (t && t !== 'TBD' && !teams[t]) teams[t] = { code:t, P:0, W:0, D:0, L:0, GF:0, GA:0, GD:0, Pts:0 };
        });
        if (!m.played || m.goals_home == null || m.goals_away == null) return;
        const H = teams[m.team_home], A = teams[m.team_away];
        if (!H || !A) return;
        H.P++; A.P++;
        H.GF += m.goals_home; H.GA += m.goals_away;
        A.GF += m.goals_away; A.GA += m.goals_home;
        H.GD = H.GF - H.GA; A.GD = A.GF - A.GA;
        if (m.goals_home > m.goals_away)      { H.W++; H.Pts += 3; A.L++; }
        else if (m.goals_home < m.goals_away) { A.W++; A.Pts += 3; H.L++; }
        else                                  { H.D++; A.D++; H.Pts++; A.Pts++; }
      });
      return Object.values(teams).sort((a,b) =>
        b.Pts - a.Pts || b.GD - a.GD || b.GF - a.GF || a.code.localeCompare(b.code)
      );
    }

    function renderStandingsTable(rows, letter){
      if (!rows.length) return `<div class="empty">Group ${letter} teams not seeded yet.</div>`;
      const head = `<tr><th class="pos">#</th><th class="team-cell" style="text-align:left">Team</th><th>P</th><th>W</th><th>D</th><th>L</th><th>GF:GA</th><th>GD</th><th>Pts</th></tr>`;
      const body = rows.map((t, i) => {
        const rank = i + 1;
        const cls = rank <= 2 ? 'q'+rank : (rank === 3 ? 'q3' : '');
        const gdCls = t.GD > 0 ? 'gd-pos' : (t.GD < 0 ? 'gd-neg' : '');
        const gdTxt = t.GD > 0 ? '+'+t.GD : t.GD;
        return `<tr class="${cls}"><td class="pos">${rank}</td>
          <td><div class="team-cell"><span class="fl">${countryFlag(t.code)}</span><span class="nm">${countryName(t.code)}</span></div></td>
          <td>${t.P}</td><td>${t.W}</td><td>${t.D}</td><td>${t.L}</td><td>${t.GF}:${t.GA}</td>
          <td class="${gdCls}">${gdTxt}</td><td class="pts">${t.Pts}</td></tr>`;
      }).join('');
      return `<div class="standings"><table><thead>${head}</thead><tbody>${body}</tbody></table>
        <div class="q-note">Top 2 advance to Round of 32. Best 3rd-placed teams may also qualify per FIFA seeding rules.</div></div>`;
    }

    // ============== OVERALL ==============
    async function renderOverall(){
      $('#sub-selector').classList.add('hidden');
      $('#list').innerHTML = '<div class="empty">Loading…</div>';
      const r = await window.WC_PROFILE.loadOverallLeaderboard();
      if (r.error) { $('#list').innerHTML = `<div class="empty">${r.error}</div>`; return; }
      if (!r.rows.length) { $('#list').innerHTML = '<div class="empty">No players yet.</div>'; return; }
      // Shares are computed from the unfiltered set (skip+promote handled inside computeEndPoolShares),
      // so a non-linked leader still doesn't get a share even with the toggle off. The toggle only
      // affects which rows are *shown* — and when shown, ranks re-number to match payout positions.
      const shares = computeEndPoolShares(r.rows);
      // Settled overlay (Final paid 2026-07-20): wc_payouts pot=end amounts are the
      // only truth — incl. Dgn's 26×-cap forfeit (0) and the proportional cascade
      // bonus on the remaining three. Same pattern as the settled groups.
      const endForfeits = new Set();
      let endPaid = false;
      {
        const pr = await window.WC_PROFILE.loadPayouts('end');
        if (!pr.error && (pr.rows || []).length) {
          endPaid = true;
          shares.clear();
          for (const row of pr.rows) {
            shares.set(row.user_id, Number(row.bobai_amount) || 0);
            if (Number(row.bobai_amount) === 0) endForfeits.add(row.user_id);
          }
        }
      }
      const rows = applyWalletFilter(r.rows);
      if (!rows.length) { $('#list').innerHTML = '<div class="empty">No wallet-linked players yet — toggle "All players" to see the full leaderboard.</div>'; return; }
      const html = rows.map((row, i) => userRow(row, i+1, {
        ptsLabel: 'pts',
        ptsValue: fmtPts(row.total_points || 0),
        prizeBobai: shares.get(row.user_id) || 0,
        contextPot: pool.end,
        medalRank: END_TOP_N,
        extraClass: endPaid ? (endForfeits.has(row.user_id) ? 'forfeit' : ((shares.get(row.user_id) || 0) > 0 ? 'paid' : '')) : '',
        forfeit: endForfeits.has(row.user_id),
      })).join('');
      const scrollCls = rows.length > 10 ? 'list scroll-cap' : 'list';
      const myIdx = me ? rows.findIndex(r0 => r0.user_id === me.id) : -1;
      const cutoff = rows[END_TOP_N - 1];
      const footer = meFooterHtml({
        rank: myIdx >= 0 ? myIdx + 1 : null,
        totalRows: rows.length,
        qualifierRank: END_TOP_N,
        qualifierPts: cutoff ? (cutoff.total_points || 0) : 0,
        myPts: myIdx >= 0 ? (rows[myIdx].total_points || 0) : 0,
        qualifiedCopy: `✓ You're in the End-Pool top ${END_TOP_N}`,
        needCopy: `+{n} pts to enter the End-Pool top ${END_TOP_N}`,
      });
      $('#list').innerHTML = `<div class="${scrollCls}">${html}</div>${footer}`;
    }

    // ============== GROUPS ==============
    async function loadAllGroupData(){
      if (allGroupData) return allGroupData;
      const arr = await Promise.all(GROUP_LETTERS.map(async L => {
        const r = await window.WC_PROFILE.loadGroupLeaderboard(L);
        return { letter: L, rows: r.rows || [] };
      }));
      allGroupData = arr;
      return arr;
    }

    async function renderGroup(letter){
      $('#list').innerHTML = '<div class="empty">Loading…</div>';
      const [allG, matches] = await Promise.all([ loadAllGroupData(), loadAllMatches() ]);
      const standings = computeStandings(matches, letter);
      const standingsHtml =
        `<div class="section-h"><span>Group ${letter} — FIFA standings</span><span class="right">${standings.reduce((a,t)=>a+t.P,0) ? 'live results' : 'matches not played yet'}</span></div>` +
        renderStandingsTable(standings, letter);

      const myGroup = allG.find(g => g.letter === letter);
      const rows = applyWalletFilter(myGroup ? myGroup.rows : []);

      // Build shares Map. Default = raw cascade-naive shares from leaderboard math.
      // Once the group pot is paid, overlay actual post-cascade amounts from
      // wc_payouts (which include 0-balance forfeits and redistributed bonuses).
      const shares = computeGroupShares(allG);
      const forfeits = new Set();
      let payoutRows = [];
      if (pool.groupPaidAt) {
        const r = await window.WC_PROFILE.loadPayouts('group');
        if (!r.error) {
          payoutRows = r.rows || [];
          for (const row of payoutRows) {
            shares.set(`${row.user_id}|${row.group_letter}`, Number(row.bobai_amount) || 0);
            if (Number(row.bobai_amount) === 0) forfeits.add(`${row.user_id}|${row.group_letter}`);
          }
        }
      }
      const best3InThisGroup = rows[2];
      const best3HasShare = best3InThisGroup
        && shares.has(`${best3InThisGroup.user_id}|${letter}`)
        && (shares.get(`${best3InThisGroup.user_id}|${letter}`) > 0);

      const paidDateStr = pool.groupPaidAt
        ? new Date(pool.groupPaidAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
        : '';
      const playerSection = pool.groupPaidAt
        ? `<div class="section-h"><span>Group ${letter} — payout <span class="settled-pill">✓ settled</span></span><span class="right">frozen ${paidDateStr}</span></div>`
          + `<div class="settled-note">Paid out <b>${paidDateStr}</b> and <b>frozen</b>. The three winners below received the amounts shown on-chain.</div>`
        : `<div class="section-h"><span>Group ${letter} — players (top 5)</span><span class="right">55 / 30 / 15 % split of group pot</span></div>`;
      let playerListHtml;
      let footer = '';
      if (!rows.length) {
        playerListHtml = `<div class="empty">No tips in Group ${letter} yet.</div>`;
      } else if (pool.groupPaidAt) {
        // ===== SETTLED VIEW =====
        // The group pot is paid out and frozen. The ONLY source of truth is
        // wc_payouts — never the live re-projection. We render the actual
        // winners first (in their paid 1st/2nd/best-3rd order, with their
        // real on-chain amounts), then the remaining players by live points
        // at 0. This stops a wallet that drifted into a top-3 live slot after
        // the freeze (daily $BOBAI tie-breaker shuffle) from showing a phantom
        // share it never received.
        // The group stage is over → group_points are final. The only thing that
        // still moves is the live $BOBAI tie-breaker, which must NOT re-order a
        // settled group. So: (a) pin the actual winners in their paid order,
        // (b) order everyone else by frozen group_points. The "holds more $BOBAI"
        // pill stays on genuine point-ties (userRow only shows it when
        // bobai_beats_below && a tie exists) — it explains which wallet won the
        // tiebreak that set the frozen payout order.
        const frozen = r => r;
        const POS_RANK = { '1st': 1, '2nd': 2, 'best_3rd': 3 };
        const winRows = payoutRows
          .filter(p => p.group_letter === letter)
          .slice()
          .sort((a, b) => (POS_RANK[a.position] || 9) - (POS_RANK[b.position] || 9));
        const winnerIds = new Set(winRows.map(w => w.user_id));
        const byId = new Map(rows.map(r => [r.user_id, r]));
        const meIdx = me ? rows.findIndex(r0 => r0.user_id === me.id) : -1;

        // Everyone outside the paid top-3, ordered by frozen group_points.
        const others = rows
          .filter(r => !winnerIds.has(r.user_id))
          .sort((a, b) => (b.group_points || 0) - (a.group_points || 0));

        // "held more $BOBAI" pill for a SETTLED group must come from the FROZEN
        // payout order, NOT the live RPC flag (r.bobai_beats_below): the daily
        // $BOBAI snapshot drifts after the freeze (and wallet swaps), which would
        // otherwise move the badge onto the lower-paid tied player. A paid winner
        // held more iff it's tied on points with the row directly below it in the
        // frozen order (next paid winner, else the top non-winner) and that row
        // has a linked wallet. Forfeits (0 paid) never claim "held more".
        const winnerHtml = winRows.map((w, i) => {
          const base = byId.get(w.user_id) || {
            user_id: w.user_id, username: w.username,
            avatar_country: w.country_code, has_wallet: true, group_points: w.group_points,
          };
          const amt = Number(w.bobai_amount) || 0;
          const isForfeit = amt === 0;
          const below = (i + 1 < winRows.length) ? byId.get(winRows[i + 1].user_id) : others[0];
          const heldMore = !isForfeit && !!below && below.has_wallet !== false
            && (below.group_points || 0) === (base.group_points || 0);
          return userRow({ ...base, bobai_beats_below: heldMore }, i + 1, {
            ptsLabel: 'pts',
            ptsValue: fmtPts(base.group_points || 0),
            prizeBobai: amt,
            contextPot: pool.group,
            extraClass: isForfeit ? 'forfeit' : (amt > 0 ? 'paid' : ''),
            forfeit: isForfeit,
            tiePast: true,
          });
        }).join('');

        const othersShown = others.slice(0, Math.max(0, 5 - winRows.length));
        // Unpaid "live standings" rows never claim the frozen held-more pill.
        const othersHtml = othersShown.map((r0, j) => userRow({ ...frozen(r0), bobai_beats_below: false }, winRows.length + j + 1, {
          ptsLabel: 'pts',
          ptsValue: fmtPts(r0.group_points || 0),
          prizeBobai: 0,
          contextPot: pool.group,
          tiePast: true,
        })).join('');

        const shownIds = new Set([...winnerIds, ...othersShown.map(r => r.user_id)]);
        let meHtml = '';
        if (me && meIdx >= 0 && !shownIds.has(me.id)) {
          const meRow = rows[meIdx];
          const meFrozenRank = others.findIndex(r => r.user_id === me.id);
          meHtml = `<div class="rank-gap">···</div>` + userRow({ ...frozen(meRow), bobai_beats_below: false }, winRows.length + (meFrozenRank >= 0 ? meFrozenRank + 1 : meIdx + 1), {
            ptsLabel: 'pts',
            ptsValue: fmtPts(meRow.group_points || 0),
            prizeBobai: 0,
            contextPot: pool.group,
            tiePast: true,
          });
        }
        const divider = othersHtml
          ? `<div class="settled-divider">— paid winners above · live standings below (no further payout) —</div>`
          : '';
        playerListHtml = `<div class="list">${winnerHtml}${divider}${othersHtml}${meHtml}</div>`;

        // Settled footer: tell me exactly what I won here (if anything).
        if (me) {
          const myWin = winRows.find(w => w.user_id === me.id);
          let statusHtml;
          if (myWin && Number(myWin.bobai_amount) > 0) {
            const pos = myWin.position === '1st' ? '1st' : myWin.position === '2nd' ? '2nd' : 'best 3rd';
            statusHtml = `<span class="mf-status qualified">✓ You won Group ${letter} ${pos} — ${fmtBobai(Number(myWin.bobai_amount))} BOBAI paid on-chain</span>`;
          } else if (myWin) {
            statusHtml = `<span class="mf-status need">Group ${letter} ${myWin.position === 'best_3rd' ? 'best 3rd' : myWin.position} — share cascaded (26× cap not reached)</span>`;
          } else {
            const myRank = meIdx >= 0 ? meIdx + 1 : null;
            statusHtml = `<span class="mf-status">Group ${letter} settled — you finished ${myRank ? '#' + myRank : 'unranked'}, outside the paid positions</span>`;
          }
          footer = `<div class="me-footer"><div class="mf-left"><span class="mf-status">Group ${letter} payout ✓ frozen</span></div><div>${statusHtml}</div></div>`;
        }
      } else {
        const top5 = rows.slice(0, 5);
        const meIdx = me ? rows.findIndex(r0 => r0.user_id === me.id) : -1;
        const meRowData = (meIdx >= 5) ? rows[meIdx] : null;
        const listHtml = top5.map((r0, i) => userRow(r0, i+1, {
          ptsLabel: 'pts',
          ptsValue: fmtPts(r0.group_points || 0),
          prizeBobai: shares.get(`${r0.user_id}|${letter}`) || 0,
          contextPot: pool.group,
        })).join('');
        const meHtml = meRowData
          ? `<div class="rank-gap">···</div>` + userRow(meRowData, meIdx + 1, {
              ptsLabel: 'pts',
              ptsValue: fmtPts(meRowData.group_points || 0),
              prizeBobai: shares.get(`${meRowData.user_id}|${letter}`) || 0,
              contextPot: pool.group,
            })
          : '';
        playerListHtml = `<div class="list">${listHtml}${meHtml}</div>`;

        const cutoffPlayer = rows[1] || rows[0];
        const cutoffPts = cutoffPlayer ? (cutoffPlayer.group_points || 0) : 0;
        const myPts = (meIdx >= 0) ? (rows[meIdx].group_points || 0) : 0;
        const myRank = (meIdx >= 0) ? meIdx + 1 : null;
        const qualifiedCopy = myRank === 1
          ? `✓ You're 1st in Group ${letter} — top-1 share`
          : `✓ You're 2nd in Group ${letter} — top-2 share`;
        const needCopy = (myRank === 3 && best3HasShare)
          ? `Currently qualifies as best-3rd · +{n} pts to lock top 2`
          : `+{n} pts to enter Group ${letter} top 2`;
        footer = meFooterHtml({
          rank: myRank, totalRows: rows.length,
          qualifierRank: 2, qualifierPts: cutoffPts, myPts,
          qualifiedCopy, needCopy,
        });
      }

      $('#list').innerHTML = standingsHtml + playerSection + playerListHtml + footer;
      if (window.twemoji) try { window.twemoji.parse($('#list'), { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    // ============== BRACKET ==============
    function brTeam(code, align){
      const tbd = !code || code === 'TBD';
      const cls = ['br-team']; if (tbd) cls.push('tbd'); if (align === 'right') cls.push('away');
      const flag = tbd ? '⚪' : countryFlag(code);
      const name = tbd ? 'TBD' : countryName(code);
      if (align === 'right') return `<div class="${cls.join(' ')}"><span class="nm">${name}</span><span class="fl">${flag}</span></div>`;
      return `<div class="${cls.join(' ')}"><span class="fl">${flag}</span><span class="nm">${name}</span></div>`;
    }
    function brTeamWithWin(code, align, isWin){
      const html = brTeam(code, align);
      if (!isWin) return html;
      return html.replace('br-team', 'br-team win');
    }
    function renderBracketMatchRow(m){
      const played = m.played && m.goals_home != null && m.goals_away != null;
      let hWin = false, aWin = false;
      if (played) { const s = matchWinnerSide(m); hWin = s === 'home'; aWin = s === 'away'; }
      const isFinal = m.phase === 'final';
      const time = m.kickoff_utc ? fmtKickoffShort(m.kickoff_utc) : '';
      const center = played
        ? `<div class="br-score played">${m.goals_home} : ${m.goals_away}${resultSuffix(m)}</div><div class="br-time">${time}</div>`
        : `<div class="br-vs">VS</div><div class="br-time">${time}</div>`;
      return `<div class="br-match ${played?'played':''} ${isFinal?'final':''}">
        ${brTeamWithWin(m.team_home, 'left',  hWin)}
        <div class="br-center">${center}</div>
        ${brTeamWithWin(m.team_away, 'right', aWin)}
      </div>`;
    }

    async function renderBracket(){
      showPhaseSelector();
      $('#list').innerHTML = '<div class="empty">Loading bracket…</div>';
      const matches = await loadAllMatches();
      const phase = KO_PHASES.find(p => p.key === subView) || KO_PHASES[0];
      const phaseMatches = matches.filter(m => m.phase === phase.key)
        .sort((a,b) => new Date(a.kickoff_utc) - new Date(b.kickoff_utc));
      const matchListHtml = phaseMatches.length
        ? `<div class="br-list">${phaseMatches.map(renderBracketMatchRow).join('')}</div>`
        : `<div class="empty">No ${phase.label} matches scheduled yet.</div>`;

      // Overall standings below — from KO onwards only End Pool matters.
      // Same skip+promote logic + toggle filter as the Overall view.
      const r = await window.WC_PROFILE.loadOverallLeaderboard();
      const allRows = r.rows || [];
      const shares = computeEndPoolShares(allRows);
      const overallRows = applyWalletFilter(allRows);
      const overallHtml = overallRows.length
        ? overallRows.map((row, i) => userRow(row, i+1, {
            ptsLabel: 'pts',
            ptsValue: fmtPts(row.total_points || 0),
            prizeBobai: shares.get(row.user_id) || 0,
            contextPot: pool.end,
            medalRank: END_TOP_N,
          })).join('')
        : '<div class="empty">No players yet.</div>';
      const scrollCls = overallRows.length > 10 ? 'list scroll-cap' : 'list';
      const myIdx = me ? overallRows.findIndex(r0 => r0.user_id === me.id) : -1;
      const cutoff = overallRows[END_TOP_N - 1];
      const footer = meFooterHtml({
        rank: myIdx >= 0 ? myIdx + 1 : null,
        totalRows: overallRows.length,
        qualifierRank: END_TOP_N,
        qualifierPts: cutoff ? (cutoff.total_points || 0) : 0,
        myPts: myIdx >= 0 ? (overallRows[myIdx].total_points || 0) : 0,
        qualifiedCopy: `✓ You're in the End-Pool top ${END_TOP_N}`,
        needCopy: `+{n} pts to enter the End-Pool top ${END_TOP_N}`,
      });

      $('#list').innerHTML = `
        <div class="section-h"><span>${phase.label}</span><span class="right">${phaseMatches.length} match${phaseMatches.length===1?'':'es'}</span></div>
        ${matchListHtml}
        <div class="section-h" style="margin-top:26px"><span>End-Pool projection — overall standings</span><span class="right">share of end pool</span></div>
        <div class="${scrollCls}">${overallHtml}</div>
        ${footer}`;
      if (window.twemoji) try { window.twemoji.parse($('#list'), { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    // ============== BONUS ==============
    // State cache so switching between bonus sub-tabs doesn't re-fetch every time.
    let bonusData = null;

    async function loadBonusData(){
      if (bonusData) return bonusData;
      const [ba, sc, st, mt] = await Promise.all([
        window.WC_PROFILE.loadAllBonusAnswers(),
        window.WC_PROFILE.loadScorers(),
        window.WC_PROFILE.loadTournamentStats(),
        loadAllMatches(),
      ]);
      bonusData = {
        answers: ba.rows || [],
        scorers: sc.scorers || [],
        stats:   st.stats || { red_cards_total: 0 },
        matches: mt || [],
      };
      return bonusData;
    }

    // Compute goals-scored-per-team from played group matches AND played KO matches.
    // Returns { code: { gf, played, gamesLeft, eliminated } }. `gamesLeft` is
    // unplayed matches the team is still scheduled to play, which we need to
    // know whether a "currently leading" team is mathematically uncatchable.
    function computeTeamGoalStats(matches){
      const byTeam = {};
      const ensure = code => {
        if (!code || code === 'TBD') return null;
        if (!byTeam[code]) byTeam[code] = { code, gf: 0, played: 0, gamesLeft: 0, eliminated: false };
        return byTeam[code];
      };
      matches.forEach(m => {
        const H = ensure(m.team_home), A = ensure(m.team_away);
        if (m.played && m.goals_home != null && m.goals_away != null) {
          const sg = statGoals(m);  // ET goals count, penalties don't
          if (H) { H.gf += sg.h; H.played++; }
          if (A) { A.gf += sg.a; A.played++; }
        } else {
          if (H) H.gamesLeft++;
          if (A) A.gamesLeft++;
        }
      });
      // Eliminated detection — two paths, neither speculative:
      //   1) Team lost a KO match (definitive exit).
      //   2) Group stage fully complete AND team has no future scheduled match.
      //      During the group phase we can't tell yet — the team's R32 slot may
      //      still be TBD pending the cross-group 3rd-place comparison, and the
      //      football-data.org sync only fills KO assignments after group-end.
      //      Without this guard, advancing teams like Netherlands (10 group goals)
      //      get flagged eliminated just because their TBD home slot hasn't
      //      received a team code yet.
      const groupTotal = matches.filter(m => m.phase === 'group').length;
      const groupPlayed = matches.filter(m => m.phase === 'group' && m.played).length;
      const groupDone = groupTotal > 0 && groupPlayed === groupTotal;
      // KO losers
      matches.forEach(m => {
        if (m.phase === 'group') return;
        if (!m.played || m.goals_home == null || m.goals_away == null) return;
        const side = matchWinnerSide(m);  // resolves ET/penalty winner too
        if (!side) return;
        const loserCode = side === 'home' ? m.team_away : m.team_home;
        if (loserCode && byTeam[loserCode]) byTeam[loserCode].eliminated = true;
      });
      // Group-phase exits — only safe to call after all 72 group matches played.
      if (groupDone) {
        Object.values(byTeam).forEach(t => {
          if (t.played > 0 && t.gamesLeft === 0) t.eliminated = true;
        });
      }
      return byTeam;
    }

    // Render one card per "winning entry" (a team / player / bracket) followed
    // by the chips of the users who tipped it. The award badge on each chip is
    // GREY when the question is open and GREEN once the answer is locked in.
    function bonusCardHtml({ avaHtml, primary, secondaryHtml, eliminated, tipperRows, locked, isWinner }){
      const chips = tipperRows.length
        ? tipperRows.map(r => {
            const href = './user.html?u=' + encodeURIComponent(r.username);
            const isMe = !!(me && r.user_id === me.id);
            const award = locked
              ? `<span class="pts-tag awarded">+20</span>`
              : `<span class="pts-tag pending">20</span>`;
            const ball = r.has_wallet ? '<span class="ball">⚽</span>' : '';
            return `<a class="tip-chip${isMe?' me':''}" href="${href}">${escapeHtml(r.username)}${ball}${award}</a>`;
          }).join('')
        : `<div class="empty">No one tipped this one.</div>`;
      const cls = ['bonus-card'];
      if (eliminated) cls.push('eliminated');
      if (isWinner)   cls.push('winner');
      return `<div class="${cls.join(' ')}">
        <div class="bc-head">
          <div class="bc-ava">${avaHtml}</div>
          <div class="bc-info">
            <div class="bc-name">${primary}</div>
            ${secondaryHtml ? `<div class="bc-meta">${secondaryHtml}</div>` : ''}
          </div>
        </div>
        <div class="bc-tippers">${chips}</div>
      </div>`;
    }

    function bonusStatusBar(intro, statusLabel, statusClass, rightLabel){
      return `<div class="bonus-intro">${intro}</div>
        <div class="bonus-status">
          <span class="left">Current status</span>
          <span class="right">${rightLabel || ''}</span>
        </div>
        <div style="margin:-4px 4px 14px"><span class="bonus-pill ${statusClass}">${statusLabel}</span></div>`;
    }

    function tippersForField(data, field, value){
      return data.answers.filter(a => a[field] === value);
    }

    // ----- Most / Fewest goals: show actual leader(s) across ALL teams.
    // Tippers shown below each card — "No one tipped this one." if empty. -----
    function renderGoalsBonus(data, mode){
      const tab    = BONUS_TABS.find(t => t.key === mode);
      const field  = tab.field;
      const teams  = computeTeamGoalStats(data.matches);
      // ALL teams that appear in fixtures (skip TBD KO placeholders that haven't
      // had a real opponent assigned yet).
      const allTeams = Object.values(teams).filter(t => t.code !== 'TBD' && (t.played > 0 || t.gamesLeft > 0));
      if (!allTeams.length) return `<div class="bonus-empty">No team data yet.</div>`;

      let leaders = [];
      let lockedRule = false;
      let statusLabel, statusClass, rightLabel;
      if (mode === 'most_goals') {
        const top = Math.max(...allTeams.map(t => t.gf));
        leaders = allTeams.filter(t => t.gf === top);
        // Most goals locks only when the Final is finished — any team still
        // playing could put up a blowout score (e.g. 12:0) and overtake.
        const finalMatch = data.matches.find(m => m.phase === 'final');
        lockedRule = !!(finalMatch && finalMatch.played && finalMatch.goals_home != null);
        statusLabel = lockedRule ? `Resolved · ${leaders.map(t=>countryFlag(t.code)).join(' ')} ${top} goals`
                                 : `Live · ${top} goals lead`;
        statusClass = lockedRule ? 'locked' : 'live';
        rightLabel  = lockedRule ? 'final whistle blown' : `${leaders.length} team${leaders.length===1?'':'s'} tied for top`;
      } else {
        // fewest_goals — actual lowest scorer(s) tournament-wide.
        const low = Math.min(...allTeams.map(t => t.gf));
        leaders = allTeams.filter(t => t.gf === low);
        // Locked when every leader is eliminated AND no remaining team can
        // possibly drop to or below `low`. Since teams can only score MORE,
        // a still-active team with current gf <= low could stay ≤ low ⇒ unlocked.
        const anyContenderCanReach = allTeams.some(t => !leaders.includes(t) && t.gf <= low);
        lockedRule = leaders.length > 0 && leaders.every(t => t.eliminated) && !anyContenderCanReach;
        const groupTotal = data.matches.filter(m => m.phase === 'group').length;
        const groupPlayed = data.matches.filter(m => m.phase === 'group' && m.played).length;
        statusLabel = lockedRule ? `Resolved · ${leaders.map(t=>countryFlag(t.code)).join(' ')} ${low} goal${low===1?'':'s'}`
                                 : `Live · ${groupPlayed}/${groupTotal} group matches played`;
        statusClass = lockedRule ? 'locked' : 'live';
        rightLabel  = lockedRule ? 'mathematically locked' : 'updates after each match';
      }

      const ordered = leaders.slice().sort((a, b) => a.code.localeCompare(b.code));
      const head = bonusStatusBar(tab.intro, statusLabel, statusClass, rightLabel);
      const cards = ordered.map(t => {
        const tippers = tippersForField(data, field, t.code);
        const ava = window.WC_AVATAR
          ? window.WC_AVATAR.avatarHtml(t.code, 'sm')
          : `<span style="font-size:30px">${countryFlag(t.code)}</span>`;
        const elim = t.eliminated ? `<span class="elim">eliminated</span>` : '';
        const meta = `<b>${t.gf}</b> goal${t.gf===1?'':'s'} · ${t.played} played${t.gamesLeft?` · ${t.gamesLeft} left`:''}${elim?` · ${elim}`:''}`;
        return bonusCardHtml({
          avaHtml: ava,
          primary: `${countryName(t.code)}`,
          secondaryHtml: meta,
          eliminated: t.eliminated && !lockedRule,
          tipperRows: tippers,
          locked: lockedRule,
          isWinner: true,
        });
      }).join('');
      return head + (cards || `<div class="bonus-empty">No leader determined yet.</div>`);
    }

    // ----- Champion: tipped teams that are still in the tournament. Eliminated
    // teams disappear from the board. Once final is played, only the actual
    // winner stays. -----
    function renderChampion(data){
      const tab = BONUS_TABS.find(t => t.key === 'champion');
      const teams = computeTeamGoalStats(data.matches);
      const tippedCodes = Array.from(new Set(data.answers.map(a => a.champion).filter(Boolean)));
      if (!tippedCodes.length) {
        return bonusStatusBar(tab.intro, 'No picks yet', 'pending', '') +
          `<div class="bonus-empty">No one has tipped a champion yet.</div>`;
      }
      // Resolve only when the final is played.
      const finalMatch = data.matches.find(m => m.phase === 'final');
      const finalPlayed = !!(finalMatch && finalMatch.played && finalMatch.goals_home != null);
      let winnerCode = null;
      if (finalPlayed) {
        const s = matchWinnerSide(finalMatch);  // ET/penalty winner too
        if (s === 'home') winnerCode = finalMatch.team_home;
        else if (s === 'away') winnerCode = finalMatch.team_away;
      }
      // Only show tipped teams still in the tournament (or the winner once the
      // final has been played). The rule as stated: a team stays listed for as
      // long as it is still in the tournament.
      const candidates = tippedCodes
        .map(code => {
          const t = teams[code] || { code, gf: 0, played: 0, gamesLeft: 0, eliminated: false };
          return { code, ...t };
        })
        .filter(t => winnerCode ? t.code === winnerCode : !t.eliminated)
        .sort((a, b) => countryName(a.code).localeCompare(countryName(b.code)));
      const head = bonusStatusBar(
        tab.intro,
        winnerCode ? `Resolved · 🏆 ${countryName(winnerCode)} won the final`
                   : `Live · ${candidates.length} tipped team${candidates.length===1?'':'s'} still in`,
        winnerCode ? 'locked' : 'live',
        finalPlayed ? 'final played' : 'updates after each elimination'
      );
      if (!candidates.length) return head + `<div class="bonus-empty">All tipped champions are eliminated.</div>`;
      const cards = candidates.map(t => {
        const tippers = tippersForField(data, 'champion', t.code);
        const ava = window.WC_AVATAR
          ? window.WC_AVATAR.avatarHtml(t.code, 'sm')
          : `<span style="font-size:30px">${countryFlag(t.code)}</span>`;
        const isWinner = (t.code === winnerCode);
        const trophy = isWinner ? ' · <b>🏆 Champion</b>' : '';
        const meta = `${t.played} played${t.gamesLeft ? ` · ${t.gamesLeft} left` : ''}${trophy}`;
        return bonusCardHtml({
          avaHtml: ava,
          primary: countryName(t.code),
          secondaryHtml: meta,
          eliminated: false,
          tipperRows: tippers,
          locked: isWinner,
          isWinner: true,
        });
      }).join('');
      return head + cards;
    }

    // ----- Golden Boot: show actual top scorers from football-data.org,
    // regardless of who was tipped. Tippers shown below each country card. -----
    function renderGoldenBoot(data){
      const tab = BONUS_TABS.find(t => t.key === 'golden_boot');
      const scorers = data.scorers || [];
      if (!scorers.length) {
        return bonusStatusBar(tab.intro, 'Awaiting first goals', 'pending', 'no scorers yet') +
          `<div class="bonus-empty">Top-scorers feed will populate after the first goal of the tournament.</div>`;
      }
      const topGoals = scorers[0].goals;
      const leaders = scorers.filter(s => s.goals === topGoals && s.country_code);
      const useLeaders = leaders;
      const teamsByCountry = {};
      useLeaders.forEach(s => {
        if (!teamsByCountry[s.country_code]) teamsByCountry[s.country_code] = [];
        teamsByCountry[s.country_code].push(s);
      });
      const cardCountries = Object.keys(teamsByCountry);
      // Golden Boot locks when the Final is finished — no more goals can be scored.
      const finalMatch = data.matches.find(m => m.phase === 'final');
      const bootLocked = !!(finalMatch && finalMatch.played && finalMatch.goals_home != null);
      const head = bonusStatusBar(
        tab.intro,
        bootLocked
          ? `Resolved · ${cardCountries.map(countryFlag).join(' ')} ${topGoals} goal${topGoals===1?'':'s'}`
          : `Live · ${topGoals} goal${topGoals===1?'':'s'} lead${useLeaders.length>1?` (${useLeaders.length} tied)`:''}`,
        bootLocked ? 'locked' : 'live',
        bootLocked
          ? 'final whistle blown'
          : `updated ${scorers[0].updated_at ? new Date(scorers[0].updated_at).toLocaleString(undefined,{month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}) : 'recently'}`
      );
      const teams = computeTeamGoalStats(data.matches);
      const cards = cardCountries.map(code => {
        const players = teamsByCountry[code];
        const elimTeam = (teams[code] && teams[code].eliminated);
        const playerLines = players.map(p => `<b>${escapeHtml(p.player_name)}</b> · ${p.goals}g`).join(' · ');
        const ava = window.WC_AVATAR
          ? window.WC_AVATAR.avatarHtml(code, 'sm')
          : `<span style="font-size:30px">${countryFlag(code)}</span>`;
        return bonusCardHtml({
          avaHtml: ava,
          primary: countryName(code),
          secondaryHtml: playerLines + (elimTeam && !bootLocked ? ` · <span class="elim">team eliminated</span>` : ''),
          eliminated: elimTeam && !bootLocked,
          tipperRows: tippersForField(data, 'topscorer_country', code),
          locked: bootLocked,
          isWinner: true,
        });
      }).join('');
      return head + cards;
    }

    // ----- Red cards: show ONLY the bracket the live count falls in, plus
    // the tippers of that bracket. Per user spec: only the team/bucket
    // currently holding the 20 pts. -----
    function renderRedCards(data){
      const tab   = BONUS_TABS.find(t => t.key === 'red_cards');
      const total = Number(data.stats?.red_cards_total || 0);
      const current = RED_CARD_BRACKETS.find(b => total >= b.min && total <= b.max);
      // Locks when the Final is finished — the tournament total is final.
      const finalMatch = data.matches.find(m => m.phase === 'final');
      const rcLocked = !!(finalMatch && finalMatch.played && finalMatch.goals_home != null);
      const head = bonusStatusBar(
        tab.intro,
        rcLocked
          ? `Resolved · 🟥 ${total} red cards total`
          : `Live · ${total} red card${total===1?'':'s'} so far`,
        rcLocked ? 'locked' : 'live',
        rcLocked ? 'final whistle blown' : 'final resolution at end of Final'
      );
      if (!current) return head + `<div class="bonus-empty">No bracket matches the current red-card total.</div>`;
      const tippers = tippersForField(data, 'red_cards_bracket', current.key);
      return head + bonusCardHtml({
        avaHtml: `<span style="font-size:30px">🟥</span>`,
        primary: current.label,
        secondaryHtml: rcLocked
          ? `<b>Final bucket</b> · ${total} red cards in the tournament`
          : `<b>Current bucket</b> · ${total} red card${total===1?'':'s'} so far`,
        eliminated: false,
        tipperRows: tippers,
        locked: rcLocked,
        isWinner: true,
      });
    }

    async function renderBonus(){
      showBonusSelector();
      $('#list').innerHTML = '<div class="empty">Loading bonus standings…</div>';
      const data = await loadBonusData();
      const mode = subView || 'champion';
      let html;
      if      (mode === 'champion')     html = renderChampion(data);
      else if (mode === 'most_goals')   html = renderGoalsBonus(data, 'most_goals');
      else if (mode === 'fewest_goals') html = renderGoalsBonus(data, 'fewest_goals');
      else if (mode === 'golden_boot')  html = renderGoldenBoot(data);
      else if (mode === 'red_cards')    html = renderRedCards(data);
      else html = '<div class="bonus-empty">Pick a bonus question above.</div>';
      $('#list').innerHTML = html;
      if (window.twemoji) try { window.twemoji.parse($('#list'), { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    // ============== CRYPTO ==============
    async function renderCrypto(coin){
      $('#list').innerHTML = '<div class="empty">Loading…</div>';
      const [r, matches] = await Promise.all([ window.WC_PROFILE.loadCryptoLeaderboard(coin), loadAllMatches() ]);
      if (r.error) { $('#list').innerHTML = `<div class="empty">${r.error}</div>`; return; }
      if (!r.rows.length) { $('#list').innerHTML = '<div class="empty">No predictions yet.</div>'; return; }

      const priceKey = coin + '_price';
      const livePx = FINAL_KICKOFF_PRICES[coin];
      const display = coinDisplay(coin);

      // Reveal crypto tips publicly at the final edit lock (BONUS_CRYPTO_LOCK_UTC), same gate as profile page.
      const cryptoLockMs = new Date(window.WC_CONFIG.BONUS_CRYPTO_LOCK_UTC).getTime();
      const cryptoRevealed = Date.now() >= cryptoLockMs;

      // Sort all by tip price ASC (apply wallet-only filter first if toggle is on — ranks
      // and the "closest" highlight then re-number against the linked-only set).
      const all = applyWalletFilter(r.rows
        .filter(row => row[priceKey] != null)
        .map(row => ({ ...row, _tip: parseFloat(row[priceKey]) }))
        .filter(row => isFinite(row._tip)))
        .sort((a,b) => a._tip - b._tip);

      if (!all.length) { $('#list').innerHTML = `<div class="empty">${walletOnly ? 'No wallet-linked ' + display + ' predictions yet — toggle "All players" to see all.' : 'No valid ' + display + ' predictions yet.'}</div>`; return; }

      // Skip+promote: the actual payout winner is the closest player WITH A LINKED WALLET.
      // When the toggle is off we still highlight the absolute closest visually (because the
      // leaderboard rank reflects the real game state), but the prize cell is attributed to
      // the eligible winner. When the toggle is on, `all` is already wallet-only so both
      // collapse to the same row.
      let closestIdx = 0;
      if (livePx != null && isFinite(livePx)) {
        let bestDiff = Infinity;
        all.forEach((row, i) => {
          const d = Math.abs(row._tip - livePx);
          if (d < bestDiff) { bestDiff = d; closestIdx = i; }
        });
      }
      // Payout winner — FINAL (2026-07-20): closest wallet-linked guess WITH BOBAI
      // holdings (26x cap: zero balance → cap 0 → next closest). BTC _PW · BNB prince27 ·
      // BOBAI Beso2025 (Havy was closest but holds 0 BOBAI → forfeits per cap rule).
      const PAYOUT_WINNERS = { btc: 12, bnb: 59, bobai: 40 };
      const CRYPTO_FORFEITS = { bobai: 46 };  // Havy — closest guess, 0 BOBAI → cap 0 → forfeited
      const payoutWinnerId = PAYOUT_WINNERS[coin] ?? null;
      // Rank by absolute distance to live (closest = #1)
      const rankByUserId = new Map();
      if (livePx != null && isFinite(livePx)) {
        all.map((row, i) => ({ row, dist: Math.abs(row._tip - livePx) }))
           .sort((a,b) => a.dist - b.dist)
           .forEach((x, rank) => rankByUserId.set(x.row.user_id, rank + 1));
      } else {
        all.forEach((row, i) => rankByUserId.set(row.user_id, i + 1));
      }

      const above = all.slice(closestIdx + 1, closestIdx + 4); // higher tips
      const below = all.slice(Math.max(0, closestIdx - 3), closestIdx); // lower tips
      const aboveDisplay = above.slice().reverse(); // highest tip first (top of display)
      const belowDisplay = below.slice().reverse(); // closest-of-below first (just under closest)
      const winnerPrize = computeCryptoWinnerShare();
      const closestRow = all[closestIdx];

      function buildRow(row, isClosest){
        const rank = rankByUserId.get(row.user_id) || '—';
        const isMe = !!(me && row.user_id === me.id);
        const reveal = cryptoRevealed || isMe;
        let ptsValue;
        if (reveal) {
          const diff = (livePx != null) ? Math.abs(row._tip - livePx) : null;
          const tipPx = fmtCryptoPrice(coin, row._tip);
          const diffHtml = diff != null
            ? `<br><span style="font-size:10px;color:${isClosest?'var(--gold)':'var(--muted)'};font-weight:${isClosest?700:500}">Δ ${fmtCryptoPrice(coin, diff)}</span>`
            : `<br><span style="font-size:10px;color:var(--muted)">no live</span>`;
          ptsValue = tipPx + diffHtml;
        } else {
          ptsValue = `<span style="color:var(--muted)">🔒</span><br><span style="font-size:10px;color:var(--muted)">locked</span>`;
        }
        // Prize % (33% of crypto pot) is public — derives from rank, which is also public.
        // Only the actual tip price stays hidden until first-match kickoff.
        // Settled state: pot winner renders green "✓ paid"; a closer guess that
        // forfeited on the 26× cap (0 BOBAI holdings) renders the amber cap row —
        // same visual language as the settled groups.
        const isWinner = row.user_id === payoutWinnerId;
        const isForfeit = CRYPTO_FORFEITS[coin] === row.user_id;
        return userRow(row, rank, {
          ptsLabel: '',
          ptsValue,
          ptsClass: 'diff',
          prizeBobai: isWinner ? winnerPrize : 0,
          contextPot: pool.crypto,
          extraClass: isForfeit ? 'forfeit-inline' : (isWinner ? 'paid-inline' : (isClosest ? 'closest' : '')),
          forfeit: isForfeit,
          paidPill: isWinner,
        });
      }

      const coinImg = `<img class="coin-badge ${coin}" src="${coinIconPath(coin)}" alt="">`;
      const liveBadge = livePx != null
        ? `<div style="text-align:center;padding:10px;background:rgba(0,230,118,.04);border:1px solid rgba(0,230,118,.2);border-radius:8px;margin-bottom:14px;font-size:12px;color:#5fffa0">${coinImg}Final kickoff ${display}: <b>${fmtCryptoPrice(coin, livePx)}</b> · frozen 19 Jul 2026, 19:00 UTC · winner-take-all on the closest guess</div>`
        : `<div style="text-align:center;padding:10px;background:rgba(255,180,0,.04);border:1px solid rgba(255,180,0,.2);border-radius:8px;margin-bottom:14px;font-size:12px;color:#ffc066">${coinImg}${display} price unavailable — showing predictions only</div>`;

      const aboveSection = aboveDisplay.length
        ? `<div class="crypto-divider up">▲ ${display} wins if price rises</div>` +
          aboveDisplay.map(row => buildRow(row, false)).join('')
        : '';
      const closestHtml = buildRow(closestRow, true);
      const belowSection = belowDisplay.length
        ? belowDisplay.map(row => buildRow(row, false)).join('') +
          `<div class="crypto-divider down">▼ ${display} wins if price falls</div>`
        : '';

      // "Me" handling: if not in the shown set, append separately
      const shownIds = new Set([closestRow.user_id, ...aboveDisplay.map(r0=>r0.user_id), ...belowDisplay.map(r0=>r0.user_id)]);
      const meRowData = me ? all.find(r0 => r0.user_id === me.id) : null;
      const meExtraHtml = (me && meRowData && !shownIds.has(me.id))
        ? `<div class="rank-gap">···</div>` + buildRow(meRowData, false)
        : '';

      // Footer
      let footer = '';
      if (me) {
        if (meRowData) {
          const meRank = rankByUserId.get(meRowData.user_id);
          // Prices are frozen at the Final kickoff — the board is final, no flip math anymore.
          const status = meRank === 1
            ? `<span class="mf-status qualified">✓ Closest guess — wins the ${display} pot</span>`
            : `<span class="mf-status need">Δ ${fmtCryptoPrice(coin, Math.abs(meRowData._tip - livePx))} off the kickoff price</span>`;
          footer = `<div class="me-footer">
            <div class="mf-left"><span class="mf-rank">#${meRank}</span><span class="mf-status">of ${all.length} prediction${all.length===1?'':'s'}</span></div>
            <div>${status}</div></div>`;
        } else {
          footer = `<div class="me-footer"><div class="mf-left"><span class="mf-status">You haven't set a ${display} prediction yet.</span></div></div>`;
        }
      }

      $('#list').innerHTML = liveBadge + aboveSection + closestHtml + belowSection + meExtraHtml + footer;
    }

    // ============== PAYOUTS (total prize money per wallet-linked user) ==============
    // Global ranking by projected total payout across all 3 pots — only shows wallet-linked
    // users (skip+promote is already applied: non-eligible players don't get a slot, so they
    // simply don't appear here). Live, recomputes from the same data the rest of the
    // leaderboard uses.
    async function renderPayouts(){
      $('#sub-selector').classList.add('hidden');
      $('#list').innerHTML = '<div class="empty">Loading projections…</div>';
      if (!window.WC_PROJECTION) {
        $('#list').innerHTML = '<div class="empty">Projection helper not loaded.</div>';
        return;
      }
      window.WC_PROJECTION.injectStyles();
      const data = await window.WC_PROJECTION.loadAll();
      if (!data || data.error) {
        $('#list').innerHTML = `<div class="empty">${(data && data.error) || 'Could not load projections.'}</div>`;
        return;
      }
      const entries = window.WC_PROJECTION.computeAll(data);
      if (!entries.length) {
        $('#list').innerHTML = '<div class="empty">No wallet-linked players yet — once players link a wallet they show up here with their projected payout.</div>';
        return;
      }
      const meId = me ? me.id : null;
      const intro = `<div class="section-h" style="margin-top:0"><span>Projected payouts — wallet-linked players only</span><span class="right">summed across End-Pool + Groups + Crypto</span></div>
        <div class="empty" style="text-align:left;font-size:12px;padding:10px 12px;background:rgba(240,185,11,.04);border:1px solid rgba(240,185,11,.18);border-radius:8px;margin-bottom:10px;color:var(--text)">Each row sums what that wallet would receive across all 3 pots if the current standings held to settlement. Chips show which pots contribute. Click a name to open their profile.</div>`;
      const rowsHtml = entries.map((e, i) =>
        window.WC_PROJECTION.renderPayoutListRowHtml(e, i + 1, data.pool, { meId })
      ).join('');
      const scrollCls = entries.length > 10 ? 'list scroll-cap' : 'list';
      const myIdx = meId ? entries.findIndex(e => e.user_id === meId) : -1;
      let footer = '';
      if (me) {
        if (myIdx >= 0) {
          const myEntry = entries[myIdx];
          const myPct = data.pool.total > 0 ? (myEntry.totalBobai / data.pool.total * 100) : 0;
          footer = `<div class="me-footer">
            <div class="mf-left"><span class="mf-rank">#${myIdx + 1}</span><span class="mf-status">of ${entries.length} wallet-linked player${entries.length===1?'':'s'}</span></div>
            <div><span class="mf-status qualified">You'd receive ${myPct.toFixed(myPct < 0.1 ? 2 : 1)}% of the full pool right now</span></div>
          </div>`;
        } else if (!me.wallet) {
          footer = `<div class="me-footer">
            <div class="mf-left"><span class="mf-status">You're not in this list — <a href="./dashboard.html" style="color:var(--gold);font-weight:700">link a wallet</a> to be eligible for payouts.</span></div>
          </div>`;
        } else {
          footer = `<div class="me-footer">
            <div class="mf-left"><span class="mf-status">Wallet linked, but at current standings you wouldn't receive a payout — keep tipping.</span></div>
          </div>`;
        }
      }
      $('#list').innerHTML = intro + `<div class="${scrollCls}">${rowsHtml}</div>` + footer;
      if (window.twemoji) try { window.twemoji.parse($('#list'), { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    // ============== SUB-SELECTORS ==============
    function showGroupSelector(){
      const sel = $('#sub-selector');
      sel.classList.remove('hidden');
      sel.innerHTML = GROUP_LETTERS.map(L =>
        `<button data-letter="${L}" class="${subView===L?'active':''}">Group ${L}</button>`
      ).join('');
      $$('#sub-selector button').forEach(b => b.addEventListener('click', () => {
        subView = b.dataset.letter; showGroupSelector(); renderGroup(subView);
      }));
    }
    function showPhaseSelector(){
      const sel = $('#sub-selector');
      sel.classList.remove('hidden');
      sel.innerHTML = KO_PHASES.map(p =>
        `<button data-phase="${p.key}" class="${subView===p.key?'active':''}">${p.label}</button>`
      ).join('');
      $$('#sub-selector button').forEach(b => b.addEventListener('click', () => {
        subView = b.dataset.phase; showPhaseSelector(); renderBracket();
      }));
    }
    function showBonusSelector(){
      const sel = $('#sub-selector');
      sel.classList.remove('hidden');
      sel.innerHTML = BONUS_TABS.map(t =>
        `<button data-bonus="${t.key}" class="${subView===t.key?'active':''}">${t.label}</button>`
      ).join('');
      $$('#sub-selector button').forEach(b => b.addEventListener('click', () => {
        subView = b.dataset.bonus; showBonusSelector(); renderBonus();
      }));
    }
    function showCoinSelector(){
      const sel = $('#sub-selector');
      sel.classList.remove('hidden');
      sel.innerHTML = COINS.map(c =>
        `<button data-coin="${c.code}" class="${subView===c.code?'active':''}"><img class="coin-ic ${c.code}" src="${c.icon}" alt="">${c.label}</button>`
      ).join('');
      $$('#sub-selector button').forEach(b => b.addEventListener('click', () => {
        subView = b.dataset.coin; showCoinSelector(); renderCrypto(subView);
      }));
    }

    function switchView(v){
      view = v;
      $$('#lbar button').forEach(b => b.classList.toggle('active', b.dataset.view === v));
      // The wallet filter is meaningless in the payouts view (list is always wallet-linked
      // only by definition), so hide the toggle there.
      const wf = $('#wallet-filter');
      if (wf) wf.classList.toggle('hidden', v === 'payouts');
      if (v === 'overall') {
        subView = null; $('#sub-selector').classList.add('hidden'); renderOverall();
      } else if (v === 'groups') {
        if (!subView || !GROUP_LETTERS.includes(subView)) subView = 'A';
        showGroupSelector(); renderGroup(subView);
      } else if (v === 'bracket') {
        if (!subView || !KO_PHASES.find(p => p.key === subView)) subView = 'r32';
        showPhaseSelector(); renderBracket();
      } else if (v === 'bonus') {
        if (!subView || !BONUS_TABS.find(t => t.key === subView)) subView = 'champion';
        showBonusSelector(); renderBonus();
      } else if (v === 'payouts') {
        subView = null; $('#sub-selector').classList.add('hidden'); renderPayouts();
      } else {
        if (!subView || !['btc','bnb','bobai'].includes(subView)) subView = 'btc';
        showCoinSelector(); renderCrypto(subView);
      }
    }

    $$('#lbar button').forEach(b => b.addEventListener('click', () => switchView(b.dataset.view)));

    // Wallet-only toggle — sync initial UI, then re-render current view on each click.
    function syncWalletFilterButtons(){
      $$('#wallet-filter button').forEach(b =>
        b.classList.toggle('active', b.dataset.filter === (walletOnly ? 'wallet' : 'all'))
      );
    }
    syncWalletFilterButtons();
    $$('#wallet-filter button').forEach(b => b.addEventListener('click', () => {
      const next = b.dataset.filter === 'wallet';
      if (next === walletOnly) return;
      walletOnly = next;
      try { localStorage.setItem('wc_wallet_filter', walletOnly ? '1' : '0'); } catch(e){}
      syncWalletFilterButtons();
      switchView(view); // preserves subView for groups/bracket/crypto
    }));

    (async ()=>{
      me = await window.WC_AUTH.currentProfile();
      // Public archive page — anonymous visitors see the full board, `me` stays null.
      await loadPool();
      switchView('overall');
      setInterval(loadPool, 30000);
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/prize-pool.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Prize Pool</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:920px}

    /* POOL CARD */
    .pool{background:linear-gradient(135deg,rgba(240,185,11,.06),rgba(64,64,255,.04));border:1px solid rgba(240,185,11,.25);border-radius:14px;padding:20px;margin-bottom:24px}
    .pool-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
    .pool-title{font-family:'Space Grotesk';font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
    .pool-total{font-family:'Space Grotesk';font-weight:700;font-size:34px;color:var(--text);line-height:1.05;margin-bottom:2px}
    .pool-usd{font-size:14px;color:var(--muted);margin-bottom:14px}
    .pool-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .pool-cell{padding:12px 10px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;text-align:center}
    .pool-cell .lbl{font-size:9.5px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
    .pool-cell .val{font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--text);line-height:1.1}
    .pool-cell .val-usd{font-size:11.5px;color:var(--gold);font-weight:600;margin-top:2px;font-family:'Space Grotesk'}
    .pool-cell .pct{font-size:10px;color:var(--muted);margin-top:4px}

    /* SECTION HEADER */
    .section-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 4px 10px;font-family:'Space Grotesk';font-weight:600;font-size:11.5px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase}
    .section-h .right{color:var(--muted);font-weight:500;letter-spacing:.5px;text-transform:none;font-size:11px}

    /* PAYOUT TABLE */
    .ptable-wrap{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:24px;scrollbar-width:thin;scrollbar-color:rgba(240,185,11,.3) transparent}
    .ptable-wrap::-webkit-scrollbar{height:6px}
    .ptable-wrap::-webkit-scrollbar-thumb{background:rgba(240,185,11,.25);border-radius:3px}
    .ptable{width:100%;border-collapse:collapse;font-size:12.5px}
    .ptable thead{background:rgba(0,0,0,.4)}
    .ptable th{padding:9px 10px;text-align:left;font-family:'Space Grotesk';font-weight:600;font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.04)}
    .ptable td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);vertical-align:middle}
    .ptable tbody tr:last-child td{border-bottom:none}
    .ptable tr.pot-h td{background:rgba(240,185,11,.05);color:var(--gold);font-family:'Space Grotesk';font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase}
    .ptable td.rank-icon{width:34px;text-align:center;font-size:14px}
    .ptable td.tnum{font-family:'Space Grotesk';font-weight:600;text-align:right;white-space:nowrap}
    .ptable td.tusd{color:var(--gold);font-size:11.5px;font-weight:600;text-align:right;white-space:nowrap}
    .ptable .pct-cell{color:var(--muted);font-size:11px;white-space:nowrap}

    /* TX TABLE */
    .txwrap{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:24px}
    .txscroll{max-height:400px;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(240,185,11,.3) transparent}
    .txscroll::-webkit-scrollbar{width:6px;height:6px}
    .txscroll::-webkit-scrollbar-thumb{background:rgba(240,185,11,.25);border-radius:3px}
    .txfilter{display:flex;gap:4px;padding:8px;background:rgba(0,0,0,.4);border-bottom:1px solid var(--border)}
    .txfilter button{padding:6px 11px;font-size:11px;font-weight:600;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);border-radius:6px;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.3px}
    .txfilter button:hover{border-color:rgba(240,185,11,.3)}
    .txfilter button.active{background:var(--gold-glow);color:var(--gold);border-color:var(--gold)}
    .txfilter .right{margin-left:auto;display:flex;align-items:center;font-size:10.5px;color:var(--muted);padding:0 6px}
    .txfilter .right a{color:var(--gold);text-decoration:none}
    .txfilter .right a:hover{text-decoration:underline}

    .txtable{width:100%;border-collapse:collapse;font-size:12.5px}
    .txtable th,.txtable td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.04)}
    .txtable th{position:sticky;top:0;z-index:2;font-family:'Space Grotesk';font-weight:600;font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;background:#0c0c1c;white-space:nowrap}
    .txtable td{color:var(--text);vertical-align:middle}
    .txtable tbody tr:last-child td{border-bottom:none}
    .txtable tbody tr:hover{background:rgba(240,185,11,.03)}
    .txtable .ttime{color:var(--muted);font-size:11.5px;white-space:nowrap}
    .txtable .tchip{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.5px;font-family:'Space Grotesk'}
    .tchip.bnb{background:rgba(243,186,47,.12);color:#f3ba2f;border:1px solid rgba(243,186,47,.3)}
    .tchip.usdt{background:rgba(38,161,123,.12);color:#26a17b;border:1px solid rgba(38,161,123,.3)}
    .tchip.tax{background:rgba(180,140,255,.12);color:#b48cff;border:1px solid rgba(180,140,255,.3)}
    .txtable .tnum{font-family:'Space Grotesk';font-weight:600;text-align:right;white-space:nowrap}
    .txtable .tusd{color:var(--gold);font-size:11px;font-weight:600;text-align:right;white-space:nowrap}
    .txtable .txl{color:var(--gold);font-family:'Space Grotesk';font-size:11px;text-decoration:none;white-space:nowrap}
    .txtable .txl:hover{text-decoration:underline}
    .txempty{padding:32px 16px;text-align:center;color:var(--muted);font-size:12.5px}

    /* AUSZAHLUNG / PAYOUT FLOW */
    .flow{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:24px}
    .flow-intro{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:16px}
    .flow-intro b{color:var(--text)}
    .flow-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
    .flow-step{display:flex;gap:12px;padding:11px 12px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px}
    .flow-step .num{flex-shrink:0;width:26px;height:26px;background:var(--gold-glow);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:12px}
    .flow-step .body{font-size:12.5px;color:var(--text);line-height:1.5}
    .flow-step .body b{color:var(--gold);font-family:'Space Grotesk'}
    .flow-step .body .muted{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
    .flow-note{padding:11px 14px;background:rgba(64,64,255,.05);border:1px solid rgba(64,64,255,.2);border-radius:8px;font-size:11.5px;color:#9090ff;line-height:1.55}

    /* ===== PAID-OUT STATES (group pot) ===== */
    .pool-cell.paid{border-color:rgba(0,230,118,.32);background:rgba(0,230,118,.04);position:relative}
    .pool-cell.paid::before{content:'';position:absolute;inset:-1px;border-radius:10px;background:linear-gradient(135deg,rgba(0,230,118,.10),transparent 60%);pointer-events:none}
    .pool-cell.paid .lbl{color:#5fffa0}
    .pool-cell.paid .pct{color:#5fffa0;font-weight:600;text-transform:uppercase;letter-spacing:.8px}
    .paid-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:rgba(0,230,118,.12);border:1px solid rgba(0,230,118,.32);color:#5fffa0;font-family:'Space Grotesk';font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
    .receipt-btn{margin-top:12px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(0,230,118,.22),rgba(0,230,118,.08));border:1px solid rgba(0,230,118,.45);color:#7fffb0;font-family:'Space Grotesk';font-weight:700;font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;padding:11px 14px;border-radius:10px;cursor:pointer;transition:all .18s;box-shadow:0 2px 12px rgba(0,230,118,.08);position:relative;overflow:hidden}
    .receipt-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .6s}
    .receipt-btn:hover::before{transform:translateX(100%)}
    .receipt-btn:hover{background:linear-gradient(135deg,rgba(0,230,118,.34),rgba(0,230,118,.14));border-color:rgba(0,230,118,.7);color:#a5ffce;transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,230,118,.18)}
    .receipt-btn:active{transform:translateY(0);box-shadow:0 1px 6px rgba(0,230,118,.1)}
    .receipt-btn .ic{font-size:14px;line-height:1}
    .ptable tr.pot-h.paid td{background:rgba(0,230,118,.08);color:#7fffb0}
    .ptable tr.row.paid td{background:rgba(0,230,118,.04);border-color:rgba(0,230,118,.12)}
    .ptable tr.row.paid td.rank-icon{position:relative}
    .ptable tr.row.paid .tusd{color:#5fffa0}

    /* ===== RECEIPT MODAL ===== */
    .rc-modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
    .rc-modal[aria-hidden="false"]{display:flex;animation:rcFade .2s ease-out}
    @keyframes rcFade{from{opacity:0}to{opacity:1}}
    .rc-backdrop{position:fixed;inset:0;background:rgba(2,2,8,.85);backdrop-filter:blur(8px) saturate(1.3);z-index:-1}
    .rc-box{position:relative;width:100%;max-width:680px;background:linear-gradient(160deg,#0d1015 0%,#0a0d12 50%,#080b10 100%);border:1px solid rgba(0,230,118,.28);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);overflow:hidden;animation:rcSlide .25s ease-out}
    @keyframes rcSlide{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
    .rc-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.4);color:#cbd0e0;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:3;backdrop-filter:blur(6px)}
    .rc-close:hover{background:rgba(255,48,40,.18);border-color:rgba(255,48,40,.45);color:#ff8580;transform:rotate(90deg)}
    .rc-header{padding:24px 28px 18px;border-bottom:1px solid rgba(0,230,118,.15);background:linear-gradient(135deg,rgba(0,230,118,.05),transparent 70%);display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
    .rc-header .illus{width:96px;height:96px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
    .rc-header .illus img{max-width:100%;max-height:100%;object-fit:contain}
    .rc-header .head-text{min-width:0}
    .rc-header h2{font-family:'Space Grotesk';font-weight:700;font-size:21px;color:var(--text);margin:0 0 4px;letter-spacing:-.3px}
    .rc-header .sub{font-size:12.5px;color:var(--muted);line-height:1.5}
    .rc-header .sub b{color:#7fffb0}
    .rc-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
    .rc-tot{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;padding:9px 8px;text-align:center}
    .rc-tot .l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
    .rc-tot .v{font-family:'Space Grotesk';font-weight:700;font-size:13.5px;color:var(--text)}
    .rc-body{padding:18px 22px 22px;max-height:60vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,230,118,.3) transparent}
    .rc-body::-webkit-scrollbar{width:6px}
    .rc-body::-webkit-scrollbar-thumb{background:rgba(0,230,118,.25);border-radius:3px}
    .rc-group{margin-bottom:14px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;overflow:hidden}
    .rc-group:last-child{margin-bottom:0}
    .rc-group-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,230,118,.04);border-bottom:1px solid rgba(0,230,118,.1);font-family:'Space Grotesk';font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#7fffb0;font-weight:700}
    .rc-group-h .right{color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.5px;text-transform:none}
    .rc-rows{display:flex;flex-direction:column}
    .rc-row{display:grid;grid-template-columns:30px 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.03);font-size:12.5px}
    .rc-row:last-child{border-bottom:none}
    .rc-row .ic{font-size:16px;text-align:center}
    .rc-row .who{display:flex;flex-direction:column;gap:1px;min-width:0}
    .rc-row .who .name{color:var(--text);font-weight:600;font-family:'Space Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rc-row .who .country{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
    .rc-row .who .country .twe-flag{width:14px;height:14px}
    .rc-row .amt{font-family:'Space Grotesk';font-weight:700;font-size:12px;text-align:right;white-space:nowrap}
    .rc-row .amt .b{color:var(--text)}
    .rc-row .amt .u{color:#5fffa0;font-size:10.5px;margin-top:1px;display:block}
    .rc-row .tx{font-family:'Space Grotesk';font-size:10.5px;color:#7fffb0;text-decoration:none;white-space:nowrap;padding:4px 8px;border:1px solid rgba(0,230,118,.25);border-radius:5px;background:rgba(0,230,118,.06);transition:all .15s}
    .rc-row .tx:hover{background:rgba(0,230,118,.14);border-color:rgba(0,230,118,.5)}
    .rc-row .tx-pending{font-family:'Space Grotesk';font-size:10px;color:var(--muted);padding:4px 8px;border:1px dashed rgba(255,255,255,.1);border-radius:5px;letter-spacing:.4px}
    .rc-row .tx.tx-paid{background:rgba(0,230,118,.10);border-color:rgba(0,230,118,.32);color:#7fffb0;cursor:default}
    .rc-footer{padding:16px 22px 20px;border-top:1px solid rgba(0,230,118,.15);background:rgba(0,230,118,.025);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
    .rc-footer .verify{font-size:12px;color:var(--muted);line-height:1.45;flex:1;min-width:0}
    .rc-footer .verify a{color:#7fffb0;text-decoration:none;font-weight:600}
    .rc-footer .verify a:hover{text-decoration:underline;color:#a5ffce}
    .rc-footer .share{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,rgba(0,230,118,.22),rgba(0,230,118,.08));border:1px solid rgba(0,230,118,.45);color:#7fffb0;font-family:'Space Grotesk';font-weight:700;font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;padding:10px 18px;border-radius:10px;cursor:pointer;transition:all .18s;flex-shrink:0;box-shadow:0 2px 12px rgba(0,230,118,.08)}
    .rc-footer .share:hover{background:linear-gradient(135deg,rgba(0,230,118,.34),rgba(0,230,118,.14));border-color:rgba(0,230,118,.7);color:#a5ffce;transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,230,118,.18)}
    .rc-footer .share:active{transform:translateY(0)}
    .rc-empty{padding:30px 14px;text-align:center;color:var(--muted);font-size:13px}

    @media (max-width: 560px){
      .pool-total{font-size:26px}
      .pool-breakdown{grid-template-columns:1fr;gap:6px}
      .txtable{font-size:11.5px}
      .txtable th,.txtable td{padding:7px 6px}
      .txtable .ttime{font-size:10.5px}
      .txtable .tnum{font-size:11px}
      .flow-step{padding:9px 10px}
      .flow-step .body{font-size:12px}
      .rc-box{border-radius:14px}
      .rc-close{top:10px;right:10px;width:34px;height:34px;font-size:16px}
      .rc-header{padding:20px 54px 14px 14px;grid-template-columns:64px 1fr;gap:12px}
      .rc-header .illus{width:64px;height:64px}
      .rc-header h2{font-size:17px}
      .rc-header .sub{font-size:11.5px}
      .rc-totals{grid-template-columns:1fr 1fr;gap:6px}
      .rc-tot .v{font-size:12.5px}
      .rc-body{padding:14px}
      .rc-row{grid-template-columns:24px 1fr auto;gap:8px;padding:10px 10px;font-size:12px}
      .rc-row .tx{grid-column:1/-1;text-align:center;margin-top:6px}
      .rc-row .tx-pending{grid-column:1/-1;text-align:center;margin-top:6px}
      .rc-footer{padding:14px;flex-direction:column;align-items:stretch;text-align:center;gap:12px}
      .rc-footer .verify{text-align:center;font-size:11.5px}
      .rc-footer .share{justify-content:center;padding:12px 18px;font-size:12px}
    }
  </style>
</head>
<body data-public="true">
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="prize-pool-hero"></div>
        <div class="card">
          <h1><span class="accent">Prize Pool</span></h1>
          <p class="sub">Live BOBAI pool · split into Group / End / Crypto pots</p>

          <!-- POOL CARD -->
          <div class="pool">
            <div class="pool-head">
              <div class="pool-title">🏆 Prize Pool</div>
              <div style="font-size:10.5px;color:var(--muted)" id="pool-updated">pool fills from kickoff</div>
            </div>
            <div class="pool-total" id="pool-bobai">0 BOBAI</div>
            <div class="pool-usd" id="pool-usd">≈ $0.00</div>
            <div class="pool-breakdown">
              <div class="pool-cell" id="pool-group-cell">
                <div class="lbl" id="pool-group-lbl">Group pot · 60 %</div>
                <div class="val" id="pool-group">0</div>
                <div class="val-usd" id="pool-group-usd">≈ $0</div>
                <div class="pct" id="pool-group-pct">paid 1 day after group stage</div>
                <button id="receipt-btn" class="receipt-btn" style="display:none" type="button" onclick="openReceipt('group')">
                  <span class="ic">🧾</span> View Payout Receipt
                </button>
              </div>
              <div class="pool-cell" id="pool-end-cell">
                <div class="lbl" id="pool-end-lbl">End pool · 30 %</div>
                <div class="val" id="pool-end">0</div>
                <div class="val-usd" id="pool-end-usd">≈ $0</div>
                <div class="pct" id="pool-end-pct">paid 1 day after Final</div>
                <button id="receipt-btn-final" class="receipt-btn" style="display:none" type="button" onclick="openReceipt('final')">
                  <span class="ic">🧾</span> View Payout Receipt
                </button>
              </div>
              <div class="pool-cell" id="pool-crypto-cell">
                <div class="lbl">Crypto pot · 10 %</div>
                <div class="val" id="pool-crypto">0</div>
                <div class="val-usd" id="pool-crypto-usd">≈ $0</div>
                <div class="pct" id="pool-crypto-pct">paid 1 day after Final</div>
                <button id="receipt-btn-final2" class="receipt-btn" style="display:none" type="button" onclick="openReceipt('final')">
                  <span class="ic">🧾</span> View Payout Receipt
                </button>
              </div>
            </div>

            <!-- DONATION BOX -->
            <div style="margin-top:16px;padding:14px;background:rgba(0,0,0,.35);border:1px solid rgba(0,230,118,.15);border-radius:10px">
              <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px">
                <div style="font-family:'Space Grotesk';font-weight:600;font-size:12px;color:#5fffa0;letter-spacing:.5px">💚 DONATIONS WELCOME</div>
                <a href="./rules.html#donations" style="font-size:11px;color:var(--muted);text-decoration:underline">how it works</a>
              </div>
              <div style="font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:10px">
                Send <b>BNB</b> or <b>USDT (BEP-20)</b> to grow the pool. Incoming funds are auto-swapped to BOBAI and added on-chain. Any amount welcome.
              </div>
              <div style="background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px">
                <a id="prize-addr" href="#" target="_blank" rel="noopener" title="View on BscScan" style="flex:1;font-size:12px;color:var(--text);word-break:break-all;font-family:'Space Grotesk';text-decoration:none">…</a>
                <button id="copy-addr" class="btn" style="width:auto;padding:7px 12px;font-size:11px">Copy</button>
              </div>
              <div style="font-size:10.5px;color:var(--muted);margin-top:8px">
                BSC (BNB Smart Chain) only. Sending other networks = lost funds.
              </div>
            </div>
          </div>

          <!-- HOW THE POOL GROWS -->
          <div class="section-h">
            <span>💧 How the pool grows</span>
            <span class="right">3 transparent sources · all on-chain</span>
          </div>
          <div class="flow" style="margin-bottom:24px">
            <div class="flow-steps">
              <div class="flow-step">
                <div class="num">1</div>
                <div class="body">
                  <b>Donations</b> — any BNB or USDT (BEP-20) sent to the prize-pool wallet is auto-swapped to BOBAI and credited on-chain. No minimum, no cap.
                  <span class="muted">Live in the credits table below. Every swap verifiable on BscScan.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">2</div>
                <div class="body">
                  <b>BOBAI tax auto-flow</b> &mdash; from <b>Jun 11, 00:01 UTC</b> until the Final (<b>Jul 19, 23:59 UTC</b>), <b>0.52% of every BOBAI trade tax</b> auto-flows into this wallet: 0.26% redirected from the BOB burn slice + 0.26% from the creator slice. The 3% on-chain tax rate stays fixed; only the off-chain distribution changes for the WC26 window.
                  <span class="muted">After the Final, distribution returns to standard 1/1/1 split. <a href="https://brainonbnb.ai/#about" target="_blank" rel="noopener">See full tax schedule →</a></span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">3</div>
                <div class="body">
                  <b>Cap-cascade residual</b> &mdash; if a winner hits the 26× holder cap and no eligible winner can absorb the excess, the residual is added as <b>permanent BOBAI/BNB liquidity</b> with LP burned — never refunded, never kept.
                  <span class="muted">Edge case only. Already factored into per-position payouts below.</span>
                </div>
              </div>
            </div>
            <div class="flow-note">
              💡 The prize-pool wallet has <b>one outflow only</b>: winner payouts (twice — after group stage and after the Final). No buybacks, no burns, no admin discretion in between.
            </div>
          </div>

          <!-- PER-POSITION PAYOUTS -->
          <div class="section-h">
            <span>💎 Expected payouts per position</span>
            <span class="right">live — recalculated as pool grows</span>
          </div>
          <div class="ptable-wrap">
            <table class="ptable">
              <thead>
                <tr>
                  <th></th>
                  <th>Position</th>
                  <th>Slots</th>
                  <th class="pct-cell" style="text-align:right">Pool share</th>
                  <th class="tnum" style="text-align:right">BOBAI per slot</th>
                  <th class="tusd" style="text-align:right">$ per slot</th>
                </tr>
              </thead>
              <tbody id="payout-body">
                <tr><td colspan="6" style="padding:24px;text-align:center;color:var(--muted)">Loading…</td></tr>
              </tbody>
            </table>
          </div>

          <!-- TX HISTORY -->
          <div class="section-h">
            <span>Pool credits</span>
            <span class="right">every swap on-chain · auto-refreshes every 30s</span>
          </div>
          <div class="txwrap">
            <div class="txfilter" id="txfilter">
              <button data-filter="all" class="active">All</button>
              <button data-filter="donation">💚 Donations</button>
              <button data-filter="tax">⚙️ Tax adds</button>
              <span class="right"><a id="addr-link" href="#" target="_blank" rel="noopener">verify on BscScan ↗</a></span>
            </div>
            <div class="txscroll">
              <table class="txtable">
                <thead>
                  <tr>
                    <th>Time (UTC)</th>
                    <th>Type</th>
                    <th class="tnum" style="text-align:right">Amount in</th>
                    <th class="tnum" style="text-align:right">BOBAI added</th>
                    <th class="tusd" style="text-align:right">$ Value</th>
                    <th>Tx</th>
                  </tr>
                </thead>
                <tbody id="tx-body">
                  <tr><td colspan="6" class="txempty">Loading…</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- AUSZAHLUNGSERKLÄRUNG -->
          <div class="section-h">
            <span>📋 How payouts work</span>
            <span class="right">full audit logged on-chain + as PDF</span>
          </div>
          <div class="flow">
            <div class="flow-intro">
              Payouts happen <b>twice</b>: <b>1 day after group stage</b> (Group pot) and <b>1 day after the Final</b> (End pool + Crypto pot). Both runs follow the same transparent procedure — manually triggered by the admin, never auto-drained.
            </div>
            <div class="flow-steps">
              <div class="flow-step">
                <div class="num">1</div>
                <div class="body">
                  <b>Snapshot leaderboard</b> at lock time (last group match end, or Final end).
                  <span class="muted">All scores frozen. Bonus questions count toward total points.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">2</div>
                <div class="body">
                  <b>Read wallet eligibility</b> — only players with a linked BEP-20 wallet receive transfers.
                  <span class="muted">Unlinked players keep leaderboard position but their share redistributes to eligible winners.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">3</div>
                <div class="body">
                  <b>Read on-chain BOBAI balance</b> of each eligible wallet (live from blockchain, not from a database — un-fakeable).
                  <span class="muted">Used for the 26× holder cap + tie-breaker.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">4</div>
                <div class="body">
                  <b>Compute raw shares</b> per pot:
                  <span class="muted">Group: 55 % / 30 % / 15 % flat across 1st/2nd/best-3rd brackets. End pool: 50/25/15/10 % tiered for top 4. Crypto: 3.3 %/coin to closest guesses.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">5</div>
                <div class="body">
                  <b>Apply 26× holder cap</b> per winner, <b>per pot independently</b>. Excess flows to remaining uncapped winners proportionally within the same pot — never crosses pot boundaries.
                  <span class="muted">Cascade repeats until every dollar lands within someone's cap. Any residual that no eligible winner can absorb is added as <b>permanent BOBAI/BNB liquidity</b> on PancakeSwap with LP burned to the dead address — never refunded, never kept.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">6</div>
                <div class="body">
                  <b>Test payout: 1 % first</b>. Admin signs a tiny test batch to verify addresses + amounts on-chain before full execution.
                  <span class="muted">If anything looks off, full payout aborts. No 99 % surprise.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">7</div>
                <div class="body">
                  <b>Full payout in randomized group order</b> (e.g. Group F before Group A) — so on-chain observers can't match wallets to group rank.
                  <span class="muted">Only End-Pool top 4 + 3 Crypto winners stay matchable, since those are unique single-winner positions already on the leaderboard.</span>
                </div>
              </div>
              <div class="flow-step">
                <div class="num">8</div>
                <div class="body">
                  <b>Audit PDF published</b> after each run.
                  <span class="muted">Lists every winner, raw share, cap applied, redistribution rounds, and final tx hash. Verifiable from this page.</span>
                </div>
              </div>
            </div>
            <div class="flow-note">
              💡 The same player can win in <b>multiple groups</b> (e.g. 1st in A + 2nd in D + best-3rd in F) — each placement is paid separately. Linked wallet is keyed to a username, not to a single group.
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- ===== PAYOUT RECEIPT MODAL (group + final, content set per pot) ===== -->
    <div class="rc-modal" id="receipt-modal" aria-hidden="true" role="dialog" aria-labelledby="rc-title" onclick="if(event.target===this)closeReceipt()">
      <div class="rc-backdrop" onclick="closeReceipt()"></div>
      <div class="rc-box" role="document">
        <button class="rc-close" type="button" onclick="closeReceipt()" aria-label="Close">×</button>
        <div class="rc-header">
          <div class="illus">
            <img src="./illus/receipt-payout.webp" alt="" onerror="this.onerror=null;this.src='./illus/receipt-payout.png'">
          </div>
          <div class="head-text">
            <h2 id="rc-title">Group Pot · Payout Receipt</h2>
            <div class="sub" id="rc-sub">12 groups · 32 winners · paid <b id="rc-date">—</b></div>
            <div class="rc-totals">
              <div class="rc-tot"><div class="l">Total Paid</div><div class="v" id="rc-total-bobai">—</div></div>
              <div class="rc-tot"><div class="l">USD Value</div><div class="v" id="rc-total-usd">—</div></div>
              <div class="rc-tot"><div class="l">Wallets</div><div class="v" id="rc-total-wallets">—</div></div>
            </div>
          </div>
        </div>
        <div class="rc-body" id="rc-body">
          <div class="rc-empty">Loading payout receipt…</div>
        </div>
        <div class="rc-footer">
          <div class="verify">
            Every transfer is verifiable on-chain ·
            <a id="rc-wallet-link" href="#" target="_blank" rel="noopener">View prize wallet on BscScan ↗</a>
          </div>
          <button class="share" type="button" onclick="shareReceipt()">🔗 Copy link</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);

    function fmtBobai(n){
      if (n == null) return '0';
      const v = Number(n);
      if (v >= 1_000_000) return (v/1_000_000).toFixed(2) + 'M';
      if (v >= 1_000)     return (v/1_000).toFixed(1) + 'K';
      return v.toFixed(0);
    }
    // Returns formatted USD or 'n/a' if price feed unavailable. Use this anywhere
    // a USD value is derived from `bobai_price_usd` so an outage doesn't show $0.00.
    function fmtUsdOrNa(bobaiAmount, price){
      return price > 0 ? fmtUsd(bobaiAmount * price) : 'n/a';
    }
    function fmtUsd(n){
      if (n == null || !isFinite(n)) return '$0.00';
      if (n >= 1_000_000) return '$' + (n/1_000_000).toFixed(2) + 'M';
      if (n >= 1_000)     return '$' + (n/1_000).toFixed(1) + 'K';
      if (n >= 1)         return '$' + n.toFixed(2);
      if (n > 0)          return '$' + n.toFixed(4);
      return '$0.00';
    }
    function fmtAmountIn(token, n){
      const v = parseFloat(n) || 0;
      if (v >= 1) return v.toFixed(4) + ' ' + token;
      return v.toFixed(6) + ' ' + token;
    }
    function fmtTime(iso){
      if (!iso) return '—';
      const d = new Date(iso);
      const pad = (n) => String(n).padStart(2,'0');
      return d.getUTCFullYear() + '-' + pad(d.getUTCMonth()+1) + '-' + pad(d.getUTCDate()) + ' ' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes());
    }
    function txLink(h){
      if (!h) return '—';
      return `<a class="txl" href="https://bscscan.com/tx/${h}" target="_blank" rel="noopener">${h.slice(0,6)}…${h.slice(-4)}</a>`;
    }

    // Latest pool state (for $ calculations on tx rows)
    let livePrice = 0;
    let liveTotalBobai = 0;

    let groupPaidAt = null;
    let finalPaidAt = null;      // derived from wc_payouts pot=end/crypto rows
    let payoutRowsCache = null;  // all wc_payouts rows, loaded once per refresh

    async function loadAllPayoutRows(){
      const r = await window.WC_PROFILE.loadPayouts();
      if (r.error) return payoutRowsCache || [];
      payoutRowsCache = r.rows || [];
      const finalRows = payoutRowsCache.filter(x => x.pot === 'end' || x.pot === 'crypto');
      const paidTs = finalRows.filter(x => x.tx_hash && x.paid_at).map(x => new Date(x.paid_at).getTime());
      finalPaidAt = paidTs.length ? new Date(Math.min(...paidTs)).toISOString() : null;
      return payoutRowsCache;
    }

    async function loadPool(){
      const r = await window.WC_PROFILE.loadPool();
      if (r.error) return;
      const p = r.pool || {};
      const total = parseFloat(p.total_bobai) || 0;
      const px    = parseFloat(p.bobai_price_usd) || 0;
      const group  = parseFloat(p.group_pot)  || 0;
      const end    = parseFloat(p.endpool)    || 0;
      const crypto = parseFloat(p.crypto_pot) || 0;
      groupPaidAt = p.group_paid_at || null;

      livePrice = px;
      liveTotalBobai = total;

      $('#pool-bobai').textContent  = fmtBobai(total) + ' BOBAI';
      $('#pool-usd').textContent    = '≈ ' + fmtUsdOrNa(total, px);
      $('#pool-group').textContent  = fmtBobai(group) + ' BOBAI';
      $('#pool-end').textContent    = fmtBobai(end) + ' BOBAI';
      $('#pool-crypto').textContent = fmtBobai(crypto) + ' BOBAI';
      $('#pool-group-usd').textContent  = '≈ ' + fmtUsdOrNa(group,  px);
      $('#pool-end-usd').textContent    = '≈ ' + fmtUsdOrNa(end,    px);
      $('#pool-crypto-usd').textContent = '≈ ' + fmtUsdOrNa(crypto, px);
      if (p.updated_at) {
        $('#pool-updated').textContent = 'updated ' + new Date(p.updated_at).toLocaleTimeString();
      }

      // Toggle paid-out visual state once the admin marks the group pot paid.
      const cell = $('#pool-group-cell');
      const pct  = $('#pool-group-pct');
      const lbl  = $('#pool-group-lbl');
      const lblEnd = $('#pool-end-lbl');
      const btn  = $('#receipt-btn');
      if (groupPaidAt) {
        cell.classList.add('paid');
        const d = new Date(groupPaidAt);
        const datePill = d.toISOString().slice(0, 10);
        pct.innerHTML = `<span class="paid-pill">✅ Paid · ${datePill}</span>`;
        lbl.textContent = 'Group pot · 60 % (final snapshot)';
        lblEnd.textContent = 'End pool · 90 %';
        btn.style.display = '';
      } else {
        cell.classList.remove('paid');
        pct.textContent = 'paid 1 day after group stage';
        lbl.textContent = 'Group pot · 60 %';
        lblEnd.textContent = 'End pool · 30 %';
        btn.style.display = 'none';
      }

      // End-pool + Crypto cells flip to paid once wc_payouts carries confirmed
      // end/crypto rows (Final payout 2026-07-20).
      await loadAllPayoutRows();
      const finalPaid = !!finalPaidAt;
      const datePillF = finalPaid ? finalPaidAt.slice(0, 10) : null;
      for (const [cellId, pctId, btnId] of [
        ['pool-end-cell',    'pool-end-pct',    'receipt-btn-final'],
        ['pool-crypto-cell', 'pool-crypto-pct', 'receipt-btn-final2'],
      ]) {
        const c = $('#' + cellId), pc = $('#' + pctId), b = $('#' + btnId);
        if (finalPaid) {
          c.classList.add('paid');
          pc.innerHTML = `<span class="paid-pill">✅ Paid · ${datePillF}</span>`;
          b.style.display = '';
          $('#pool-end-lbl').textContent = 'End pool · 90 % (final snapshot)';
        } else {
          c.classList.remove('paid');
          pc.textContent = 'paid 1 day after Final';
          b.style.display = 'none';
        }
      }

      renderPayouts(group, end, crypto, px, !!groupPaidAt, finalPaid);
    }

    // Per-position expected payouts (kept in sync with the leaderboard's POOL_SPLIT)
    function renderPayouts(group, end, crypto, px, groupPaid, finalPaid){
      const tbody = $('#payout-body');
      const rows = [];

      // Pool share = % of the pot named in the section header (group/end/crypto).
      // Group brackets are FLAT within: 12 winners share the bracket pot equally.
      const groupSection = groupPaid
        ? 'Group pot · ✅ paid out'
        : 'Group pot · paid 1 day after group stage';
      rows.push({ section: groupSection, sectionPot: 'group' });
      rows.push({ pot:'group', icon:'🥇', label:'Group 1st', slots:12, share:0.55, bobai: (group*0.55)/12 });
      rows.push({ pot:'group', icon:'🥈', label:'Group 2nd', slots:12, share:0.30, bobai: (group*0.30)/12 });
      rows.push({ pot:'group', icon:'🥉', label:'Best 3rd',  slots:8,  share:0.15, bobai: (group*0.15)/8  });

      rows.push({ section: finalPaid ? 'End pool · ✅ paid out' : 'End pool · paid 1 day after Final', sectionPot: 'end' });
      rows.push({ pot:'end', icon:'🥇', label:'Overall 1st', slots:1, share:0.50, bobai: end*0.50 });
      rows.push({ pot:'end', icon:'🥈', label:'Overall 2nd', slots:1, share:0.25, bobai: end*0.25 });
      rows.push({ pot:'end', icon:'🥉', label:'Overall 3rd', slots:1, share:0.15, bobai: end*0.15 });
      rows.push({ pot:'end', icon:'4️⃣', label:'Overall 4th', slots:1, share:0.10, bobai: end*0.10 });

      rows.push({ section: finalPaid ? 'Crypto pot · ✅ paid out' : 'Crypto pot · paid 1 day after Final', sectionPot: 'crypto' });
      rows.push({ pot:'crypto', icon:'₿',  label:'Closest BTC guess',   slots:1, share:1/3, bobai: crypto/3 });
      rows.push({ pot:'crypto', icon:'🟡', label:'Closest BNB guess',   slots:1, share:1/3, bobai: crypto/3 });
      rows.push({ pot:'crypto', icon:'🧠', label:'Closest BOBAI guess', slots:1, share:1/3, bobai: crypto/3 });

      tbody.innerHTML = rows.map(r => {
        if (r.section) {
          const paidSection = (groupPaid && r.sectionPot === 'group') || (finalPaid && r.sectionPot !== 'group');
          return `<tr class="${paidSection ? 'pot-h paid' : 'pot-h'}"><td colspan="6">${r.section}</td></tr>`;
        }
        const slotsLabel = r.slots > 1 ? `× ${r.slots}` : '× 1';
        const pctLabel = (r.share * 100).toFixed(r.share < 0.1 ? 2 : (r.share < 1 ? 1 : 0)) + ' %';
        const paidRow = (groupPaid && r.pot === 'group') || (finalPaid && (r.pot === 'end' || r.pot === 'crypto'));
        return `<tr class="${paidRow ? 'row paid' : 'row'}">
          <td class="rank-icon">${r.icon}</td>
          <td>${r.label}</td>
          <td class="pct-cell">${slotsLabel}</td>
          <td class="pct-cell" style="text-align:right">${pctLabel}</td>
          <td class="tnum">${fmtBobai(r.bobai)}</td>
          <td class="tusd">${fmtUsdOrNa(r.bobai, px)}</td>
        </tr>`;
      }).join('');
    }

    // ─── Receipt Modal (generic: 'group' = group pot · 'final' = end-pool + crypto) ───
    let receiptLoadedKind = null;
    let receiptKind = 'group';

    async function loadReceipt(kind){
      const body = $('#rc-body');
      try {
        const rows = await loadAllPayoutRows();
        if (kind === 'final') {
          renderFinalReceipt(rows.filter(r => r.pot === 'end' || r.pot === 'crypto'));
        } else {
          renderReceipt(rows.filter(r => r.pot === 'group'));
        }
        receiptLoadedKind = kind;
      } catch (e) {
        body.innerHTML = `<div class="rc-empty">Could not load receipt: ${e.message}</div>`;
      }
    }

    function positionOrder(pos){
      const order = { '1st': 1, '2nd': 2, 'best_3rd': 3 };
      return order[pos] ?? 99;
    }
    function positionLabel(pos){
      if (pos === '1st') return '🥇 1st';
      if (pos === '2nd') return '🥈 2nd';
      if (pos === 'best_3rd') return '🥉 Best 3rd';
      return pos;
    }
    function countryFlag(code){
      if (!code || code.length !== 2) return '';
      const A = 0x1F1E6, base = 'A'.charCodeAt(0);
      return String.fromCodePoint(A + (code.toUpperCase().charCodeAt(0) - base))
           + String.fromCodePoint(A + (code.toUpperCase().charCodeAt(1) - base));
    }
    function countryName(code){
      // Optional: window.WC_COUNTRIES is the same object the rest of the app uses
      if (window.WC_COUNTRIES && code) {
        const c = window.WC_COUNTRIES.find?.(x => x.code === code);
        if (c?.name) return c.name;
      }
      return code || '';
    }

    function renderReceipt(rows){
      const body = $('#rc-body');
      if (!rows.length) {
        body.innerHTML = `<div class="rc-empty">
          <div style="font-size:32px;margin-bottom:8px">⏳</div>
          <div style="font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--text);margin-bottom:6px">Payout in progress</div>
          <div>Transactions will appear here as they confirm on-chain.<br>Refresh to update.</div>
        </div>`;
        $('#rc-total-bobai').textContent = '—';
        $('#rc-total-usd').textContent = '—';
        $('#rc-total-wallets').textContent = '—';
        return;
      }

      // Group by group_letter (A..L)
      const groups = {};
      let totalBobai = 0;
      const wallets = new Set();
      for (const r of rows) {
        const key = r.group_letter || '?';
        (groups[key] ||= []).push(r);
        totalBobai += Number(r.bobai_amount) || 0;
        if (r.wallet) wallets.add(r.wallet.toLowerCase());
      }
      const letters = Object.keys(groups).sort();

      // Header totals
      $('#rc-total-bobai').textContent = fmtBobai(totalBobai) + ' BOBAI';
      $('#rc-total-usd').textContent   = fmtUsdOrNa(totalBobai, livePrice);
      $('#rc-total-wallets').textContent = wallets.size;
      const earliest = rows.reduce((a, r) => {
        const t = new Date(r.paid_at).getTime();
        return (!a || t < a) ? t : a;
      }, null);
      if (earliest) $('#rc-date').textContent = new Date(earliest).toISOString().slice(0, 10);

      body.innerHTML = letters.map(letter => {
        const list = groups[letter].slice().sort((a, b) => positionOrder(a.position) - positionOrder(b.position));
        const sum = list.reduce((s, r) => s + (Number(r.bobai_amount) || 0), 0);
        return `<div class="rc-group">
          <div class="rc-group-h">
            <span>Group ${letter}</span>
            <span class="right">${fmtBobai(sum)} BOBAI · ${list.length} winner${list.length > 1 ? 's' : ''}</span>
          </div>
          <div class="rc-rows">
            ${list.map(r => `
              <div class="rc-row">
                <div class="ic">${positionLabel(r.position).split(' ')[0]}</div>
                <div class="who">
                  <div class="name">${escapeHtml(r.username || '—')}</div>
                  <div class="country">${countryFlag(r.country_code)} ${escapeHtml(countryName(r.country_code))}</div>
                </div>
                <div class="amt">
                  <div class="b">${fmtBobai(Number(r.bobai_amount))} BOBAI</div>
                  <span class="u">${r.usd_at_payout != null ? fmtUsd(Number(r.usd_at_payout)) : fmtUsdOrNa(Number(r.bobai_amount), livePrice)}</span>
                </div>
                ${r.tx_hash
                  ? `<span class="tx tx-paid" title="On-chain confirmed. Verify aggregate outflows on the prize wallet (linked in footer).">✓ paid</span>`
                  : (Number(r.bobai_amount) === 0
                      ? `<span class="tx-pending" style="color:#ffc066;border-color:rgba(255,180,0,.32)">26× cap not reached</span>`
                      : `<span class="tx-pending">pending</span>`)}
              </div>
            `).join('')}
          </div>
        </div>`;
      }).join('');
    }

    // ─── Final receipt (End-Pool top-4 + 3 crypto pots, paid 2026-07-20) ──
    function finalSlotMeta(pos){
      const M = {
        end_1:        { ic: '🥇', label: 'Overall 1st · 50 %' },
        end_2:        { ic: '🥈', label: 'Overall 2nd · 25 %' },
        end_3:        { ic: '🥉', label: 'Overall 3rd · 15 %' },
        end_4:        { ic: '4️⃣', label: 'Overall 4th · 10 %' },
        crypto_btc:   { ic: '₿',  label: 'Closest BTC guess' },
        crypto_bnb:   { ic: '🟡', label: 'Closest BNB guess' },
        crypto_bobai: { ic: '🧠', label: 'Closest BOBAI guess' },
      };
      return M[pos] || { ic: '·', label: pos };
    }
    function renderFinalReceipt(rows){
      const body = $('#rc-body');
      if (!rows.length) {
        body.innerHTML = `<div class="rc-empty">
          <div style="font-size:32px;margin-bottom:8px">⏳</div>
          <div style="font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--text);margin-bottom:6px">Payout in progress</div>
          <div>Transactions will appear here as they confirm on-chain.<br>Refresh to update.</div>
        </div>`;
        $('#rc-total-bobai').textContent = '—';
        $('#rc-total-usd').textContent = '—';
        $('#rc-total-wallets').textContent = '—';
        return;
      }
      let totalBobai = 0;
      const wallets = new Set();
      rows.forEach(r => {
        totalBobai += Number(r.bobai_amount) || 0;
        if (r.wallet && Number(r.bobai_amount) > 0) wallets.add(r.wallet.toLowerCase());
      });
      $('#rc-total-bobai').textContent = fmtBobai(totalBobai) + ' BOBAI';
      $('#rc-total-usd').textContent   = fmtUsdOrNa(totalBobai, livePrice);
      $('#rc-total-wallets').textContent = wallets.size;
      const earliest = rows.reduce((a, r) => {
        if (!r.paid_at) return a;
        const t = new Date(r.paid_at).getTime();
        return (!a || t < a) ? t : a;
      }, null);
      if (earliest) $('#rc-date').textContent = new Date(earliest).toISOString().slice(0, 10);

      const order = ['end_1','end_2','end_3','end_4','crypto_btc','crypto_bnb','crypto_bobai'];
      const byPos = new Map(rows.map(r => [r.position, r]));
      const sections = [
        { title: 'End Pool — Overall Top 4 (50 / 25 / 15 / 10 %)', slots: order.slice(0, 4) },
        { title: 'Crypto Pots — winner-take-all per coin (frozen at Final kickoff, 19 Jul 19:00 UTC)', slots: order.slice(4) },
      ];
      body.innerHTML = sections.map(sec => {
        const list = sec.slots.map(p => byPos.get(p)).filter(Boolean);
        const sum = list.reduce((s, r) => s + (Number(r.bobai_amount) || 0), 0);
        return `<div class="rc-group">
          <div class="rc-group-h">
            <span>${sec.title}</span>
            <span class="right">${fmtBobai(sum)} BOBAI</span>
          </div>
          <div class="rc-rows">
            ${list.map(r => {
              const meta = finalSlotMeta(r.position);
              const zero = Number(r.bobai_amount) === 0;
              const note = r.notes ? `<div class="country" style="color:#ffc066">${escapeHtml(r.notes)}</div>` : '';
              return `<div class="rc-row">
                <div class="ic">${meta.ic}</div>
                <div class="who">
                  <div class="name">${escapeHtml(r.username || '—')} <span style="color:var(--muted);font-weight:500;font-size:11px">· ${meta.label}</span></div>
                  <div class="country">${countryFlag(r.country_code)} ${escapeHtml(countryName(r.country_code))}</div>
                  ${note}
                </div>
                <div class="amt">
                  <div class="b">${fmtBobai(Number(r.bobai_amount))} BOBAI</div>
                  <span class="u">${r.usd_at_payout != null ? fmtUsd(Number(r.usd_at_payout)) : fmtUsdOrNa(Number(r.bobai_amount), livePrice)}</span>
                </div>
                ${r.tx_hash
                  ? `<span class="tx tx-paid" title="On-chain confirmed. Verify aggregate outflows on the prize wallet (linked in footer).">✓ paid</span>`
                  : (zero
                      ? `<span class="tx-pending" style="color:#ffc066;border-color:rgba(255,180,0,.32)">26× cap not reached</span>`
                      : `<span class="tx-pending">pending</span>`)}
              </div>`;
            }).join('')}
          </div>
        </div>`;
      }).join('');
    }

    function escapeHtml(s){
      return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    async function openReceipt(kind){
      receiptKind = kind || 'group';
      // Header copy per pot
      if (receiptKind === 'final') {
        $('#rc-title').textContent = 'Final · Payout Receipt';
        $('#rc-sub').innerHTML = 'End-Pool top 4 + 3 crypto pots · paid <b id="rc-date">—</b>';
      } else {
        $('#rc-title').textContent = 'Group Pot · Payout Receipt';
        $('#rc-sub').innerHTML = '12 groups · 32 winners · paid <b id="rc-date">—</b>';
      }
      $('#receipt-modal').setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      await loadReceipt(receiptKind);  // always fresh — #rc-date lives inside the rebuilt sub-line
      if (window.twemoji) window.twemoji.parse($('#receipt-modal'));
    }
    function closeReceipt(){
      $('#receipt-modal').setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && $('#receipt-modal').getAttribute('aria-hidden') === 'false') closeReceipt();
    });
    async function shareReceipt(){
      const url = location.origin + location.pathname + '?receipt=' + receiptKind;
      try {
        await navigator.clipboard.writeText(url);
        const b = document.querySelector('.rc-footer .share');
        const orig = b.textContent;
        b.textContent = '✓ Copied';
        setTimeout(() => { b.textContent = orig; }, 1500);
      } catch { /* ignore */ }
    }
    // Make the modal-control functions reachable from inline onclick attributes
    window.openReceipt = openReceipt;
    window.closeReceipt = closeReceipt;
    window.shareReceipt = shareReceipt;

    // ─── Tx History ───────────────────────────────────────────────
    let currentFilter = 'all';
    let txCache = [];

    async function loadTxs(){
      try {
        const sb = supabase.createClient(window.WC_CONFIG.SUPABASE_URL, window.WC_CONFIG.SUPABASE_ANON_KEY);
        const { data, error } = await sb
          .from('wc_donations')
          .select('id, from_address, token, amount_in, amount_bobai, tx_hash, swap_tx_hash, created_at')
          .order('created_at', { ascending: false })
          .limit(100);
        if (error) { console.warn('tx fetch:', error.message); return; }
        txCache = data || [];
        renderTxs();
      } catch (e) { console.warn('tx fetch error:', e.message); }
    }

    function renderTxs(){
      const tbody = $('#tx-body');
      const rows = txCache.filter(row => {
        if (currentFilter === 'all')      return true;
        if (currentFilter === 'tax')      return row.token === 'TAX';
        if (currentFilter === 'donation') return row.token === 'BNB' || row.token === 'USDT';
        return true;
      });
      if (!rows.length) {
        tbody.innerHTML = `<tr><td colspan="6" class="txempty">No ${currentFilter === 'all' ? '' : currentFilter + ' '}entries yet — waiting for the first swap.</td></tr>`;
        return;
      }
      tbody.innerHTML = rows.map(r => {
        const chipClass = r.token === 'TAX' ? 'tax' : (r.token === 'BNB' ? 'bnb' : 'usdt');
        const chipLabel = r.token === 'TAX' ? '⚙️ Tax' : (r.token === 'BNB' ? '🟡 BNB' : '💵 USDT');
        const bobai = parseFloat(r.amount_bobai) || 0;
        return `<tr>
          <td class="ttime">${fmtTime(r.created_at)}</td>
          <td><span class="tchip ${chipClass}">${chipLabel}</span></td>
          <td class="tnum">${fmtAmountIn(r.token === 'TAX' ? 'BNB' : r.token, r.amount_in)}</td>
          <td class="tnum">${fmtBobai(bobai)}</td>
          <td class="tusd">${fmtUsdOrNa(bobai, livePrice)}</td>
          <td>${txLink(r.swap_tx_hash || r.tx_hash)}</td>
        </tr>`;
      }).join('');
    }

    // Filter buttons
    $('#txfilter').addEventListener('click', (e) => {
      const btn = e.target.closest('button[data-filter]');
      if (!btn) return;
      document.querySelectorAll('#txfilter button').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentFilter = btn.dataset.filter;
      renderTxs();
    });

    // ─── Donation address copy + BscScan link ─────────────────────
    (() => {
      const addr = window.WC_CONFIG?.PRIZE_WALLET;
      if (!addr) return;
      const linkEl = $('#prize-addr');
      linkEl.textContent = addr;
      linkEl.href = `https://bscscan.com/address/${addr}`;
      $('#addr-link').href = `https://bscscan.com/address/${addr}`;
      $('#rc-wallet-link').href = `https://bscscan.com/address/${addr}`;
      $('#copy-addr').addEventListener('click', async () => {
        try {
          await navigator.clipboard.writeText(addr);
          const b = $('#copy-addr');
          const orig = b.textContent;
          b.textContent = '✓ Copied';
          setTimeout(() => { b.textContent = orig; }, 1500);
        } catch { /* ignore */ }
      });
    })();

    // ─── Init ─────────────────────────────────────────────────────
    (async ()=>{
      await window.WC_AUTH.currentProfile();
      await loadPool();
      await loadTxs();
      setInterval(loadPool, 30000);
      setInterval(loadTxs, 30000);

      // Auto-open the receipt modal if the link was shared with ?receipt=group|final
      const rq = new URLSearchParams(location.search).get('receipt');
      if (rq === 'group' && groupPaidAt) openReceipt('group');
      if (rq === 'final' && finalPaidAt) openReceipt('final');
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/reset.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Password — BOBAI Worldcup '26</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="./index.html" aria-label="Back to sign in">
          <span>←</span> Sign in
        </a>
        <div class="brand">BOBAI Worldcup <span style="opacity:.55;margin:0 4px">·</span> '26</div>
        <span style="width:80px"></span>
      </div>
    </nav>

    <main>
      <div class="container">
        <div class="card">
          <h1><span class="accent">Reset password</span></h1>
          <p class="sub">Choose a new password for your account.</p>

          <div id="alert"></div>

          <form id="form-reset">
            <div class="field">
              <label>New password</label>
              <input type="password" name="password" autocomplete="new-password" minlength="6" required>
              <div class="hint">Min 6 characters.</div>
            </div>
            <div class="field">
              <label>Confirm new password</label>
              <input type="password" name="password_confirm" autocomplete="new-password" minlength="6" required>
            </div>
            <button type="submit" class="btn">Update password</button>
          </form>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    // Supabase parses the recovery token from the URL hash automatically
    // and emits a PASSWORD_RECOVERY event. We just need to wait for it (or
    // for an existing session) before allowing the form submit.
    let ready = false;
    window.WC_SB.auth.onAuthStateChange((event) => {
      if (event === 'PASSWORD_RECOVERY' || event === 'SIGNED_IN') {
        ready = true;
      }
    });

    // Also check on load — direct navigations may already have a session.
    (async () => {
      const { data } = await window.WC_SB.auth.getSession();
      if (data.session) ready = true;
      if (!ready) {
        // Give the SDK ~500ms to process the recovery hash
        setTimeout(async () => {
          const { data } = await window.WC_SB.auth.getSession();
          if (data.session) ready = true;
        }, 500);
      }
    })();

    $('#form-reset').addEventListener('submit', async (e) => {
      e.preventDefault();
      showAlert();
      if (!ready) {
        showAlert('error', 'Reset link expired or invalid. Request a new one from the sign-in page.');
        return;
      }
      const fd = new FormData(e.target);
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Updating…';
      const r = await window.WC_AUTH.updatePassword(
        fd.get('password'),
        fd.get('password_confirm'),
      );
      btn.disabled = false; btn.textContent = 'Update password';
      if (r.error) { showAlert('error', r.error); return; }
      showAlert('ok', 'Password updated — redirecting to sign in…');
      await window.WC_AUTH.logout();
      setTimeout(() => { window.location.href = './index.html'; }, 1000);
    });
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/rules.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rules &amp; FAQ — BOBAI Worldcup '26 (FIFA 2026 Crypto Tipgame)</title>
  <meta name="description" content="Full rules of the BOBAI Worldcup '26 — a free FIFA 2026 prediction game on BNB Chain. Scoring, prize pool split, payouts, holder cap, security and donation flow. Read before you play.">
  <meta name="keywords" content="BOBAI Worldcup rules, FIFA World Cup 2026 prediction game rules, crypto tipgame rules, BNB Chain prize pool rules, on-chain payouts, BOBAI scoring, Brain On BNB AI">
  <link rel="canonical" href="https://brainonbnb.com/worldcup/app/rules">
  <meta property="og:title" content="Rules &amp; FAQ — BOBAI Worldcup '26">
  <meta property="og:description" content="Full rules of the BOBAI Worldcup '26 — free FIFA 2026 crypto prediction game on BNB Chain. Scoring, prize pool, payouts.">
  <meta property="og:url" content="https://brainonbnb.com/worldcup/app/rules">
  <meta property="og:type" content="article">
  <meta name="robots" content="index, follow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:760px}
    /* Sticky TOC — clings to the top of the viewport just below the global nav (.nav 58px + .tabbar ~37px ≈ 96px).
       z-index stays below the nav (which is 100) so the back-button remains clickable above the TOC. */
    .toc{position:sticky;top:96px;z-index:50;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;padding:12px;background:rgba(5,5,16,.92);backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--border);border-radius:10px}
    .toc a{font-size:12px;padding:6px 10px;background:rgba(240,185,11,.07);border:1px solid rgba(240,185,11,.2);border-radius:6px;color:var(--gold);text-decoration:none;font-weight:600;letter-spacing:.3px}
    .toc a:hover{background:rgba(240,185,11,.15)}
    @media (max-width: 600px){
      .toc{top:90px;padding:8px;gap:5px}
      .toc a{font-size:10.5px;padding:5px 7px;letter-spacing:.2px}
    }

    h2{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--gold);margin:36px 0 12px;letter-spacing:-.01em;scroll-margin-top:200px}
    h2:first-of-type{margin-top:0}
    h3{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--text);margin:18px 0 8px}
    p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:12px}
    p b, li b{color:var(--text)}
    ul, ol{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 12px 22px}
    li{margin-bottom:4px}
    code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:4px;font-size:13px;color:var(--gold);font-family:'Space Grotesk'}
    .callout{padding:14px 16px;border-radius:10px;font-size:13px;line-height:1.6;margin:14px 0}
    .callout.warn{background:rgba(255,180,0,.07);border:1px solid rgba(255,180,0,.25);color:#ffc066}
    .callout.danger{background:rgba(255,48,40,.06);border:1px solid rgba(255,48,40,.25);color:#ff8580}
    .callout.info{background:rgba(64,64,255,.06);border:1px solid rgba(64,64,255,.25);color:#9090ff}
    .callout.ok{background:rgba(0,230,118,.05);border:1px solid rgba(0,230,118,.2);color:#5fffa0}
    .scoring-table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:13px}
    .scoring-table th, .scoring-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
    .scoring-table th{color:var(--gold);font-family:'Space Grotesk';font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase}
    .scoring-table td{color:var(--text)}
    .scoring-table td:last-child{text-align:right;color:var(--gold);font-family:'Space Grotesk';font-weight:600}

    /* ─── Cap-overflow explainer ─── */
    .cap-h3-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
    .cap-h3-row h3{margin:0}
    .cap-modal-btn{
      display:inline-flex;align-items:center;gap:7px;
      background:linear-gradient(135deg,rgba(240,185,11,.18),rgba(240,185,11,.08));
      border:1px solid rgba(240,185,11,.45);color:var(--gold);
      font-family:'Space Grotesk';font-weight:600;font-size:12px;letter-spacing:.3px;
      padding:7px 13px;border-radius:999px;cursor:pointer;
      transition:all .2s;text-decoration:none;
    }
    .cap-modal-btn:hover{background:linear-gradient(135deg,rgba(240,185,11,.32),rgba(240,185,11,.15));border-color:var(--gold);transform:translateY(-1px)}
    .cap-modal-btn .ic{font-size:14px;line-height:1}

    /* The "old" example block — now lives inside the modal */
    .cap-example{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:12px;padding:16px;margin:14px 0 18px}
    .cap-example .lead{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.65}
    .cap-example .lead b{color:var(--gold)}
    .cap-case{margin-bottom:18px}
    .cap-case:last-child{margin-bottom:0}
    .cap-case-title{font-family:'Space Grotesk';font-weight:600;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;padding:7px 12px;border-radius:8px;margin-bottom:10px;display:inline-block}
    .cap-case-title.ok{background:rgba(0,230,118,.07);color:#5fffa0;border:1px solid rgba(0,230,118,.25)}
    .cap-case-title.bad{background:rgba(255,180,0,.07);color:#ffc066;border:1px solid rgba(255,180,0,.25)}
    .cap-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
    @media (max-width:600px){.cap-row{grid-template-columns:repeat(2,1fr);gap:6px}}
    .cap-card{background:rgba(5,5,16,.6);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:11.5px;line-height:1.45;color:var(--muted);position:relative}
    .cap-card.capped{border-color:rgba(255,48,40,.3);background:rgba(255,48,40,.04)}
    .cap-card.bonus{border-color:rgba(0,230,118,.3);background:rgba(0,230,118,.04)}
    .cap-card .h{font-family:'Space Grotesk';font-weight:600;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text);margin-bottom:6px}
    .cap-card .line{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
    .cap-card .line + .line{margin-top:2px}
    .cap-card .line span{color:var(--muted);font-size:10.5px}
    .cap-card .line b{color:var(--text);font-family:'Space Grotesk';font-weight:600;font-size:11.5px}
    .cap-card .line.pay{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
    .cap-card .line.pay b{color:var(--gold);font-size:13px}
    .cap-card .line.strike b{color:#ff8580;text-decoration:line-through;font-size:10.5px}
    .cap-card .stamp{position:absolute;top:-7px;right:-7px;background:rgba(255,48,40,.92);color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:9px;letter-spacing:1px;padding:3px 7px;border-radius:4px;transform:rotate(8deg);box-shadow:0 2px 6px rgba(0,0,0,.4)}
    .cap-card .overflow-tag{margin-top:6px;padding:4px 6px;background:rgba(255,180,0,.08);border:1px dashed rgba(255,180,0,.3);border-radius:5px;font-size:10px;color:#ffc066;text-align:center;font-weight:600;letter-spacing:.2px}
    .cap-card .bonus-tag{margin:5px 0;padding:4px 6px;background:rgba(0,230,118,.08);border:1px dashed rgba(0,230,118,.3);border-radius:5px;font-size:10px;color:#5fffa0;text-align:center;font-weight:600;letter-spacing:.2px}
    .cap-foot{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.55}
    .cap-foot b{color:var(--text)}

    /* ─── Cap-overflow MODAL (lightbox) ─── */
    .cap-modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
    .cap-modal[aria-hidden="false"]{display:flex;animation:capFade .2s ease-out}
    @keyframes capFade{from{opacity:0}to{opacity:1}}
    .cap-modal-backdrop{position:fixed;inset:0;background:rgba(2,2,8,.85);backdrop-filter:blur(8px) saturate(1.3);z-index:-1}
    .cap-modal-box{
      position:relative;max-width:920px;width:100%;
      background:linear-gradient(180deg,rgba(15,15,30,.98),rgba(5,5,16,.98));
      border:1px solid rgba(240,185,11,.35);border-radius:18px;
      box-shadow:0 16px 60px rgba(0,0,0,.6),0 0 0 1px rgba(240,185,11,.08) inset;
      padding:0;animation:capPop .25s cubic-bezier(.2,.9,.3,1.1);
      margin:auto;
    }
    @keyframes capPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
    .cap-modal-close{
      position:absolute;top:14px;right:14px;z-index:5;
      width:36px;height:36px;border-radius:50%;
      background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);
      font-size:22px;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:all .15s;
    }
    .cap-modal-close:hover{background:rgba(255,48,40,.25);border-color:rgba(255,48,40,.5);color:#ff8580;transform:rotate(90deg)}
    .cap-modal-header{
      position:relative;
      padding:28px 60px 18px;
      display:grid;grid-template-columns:90px 1fr 90px;align-items:center;gap:14px;
      border-bottom:1px solid var(--border);
      background:
        radial-gradient(ellipse at top, rgba(240,185,11,.10), transparent 60%),
        linear-gradient(180deg,rgba(240,185,11,.04),transparent);
      border-radius:18px 18px 0 0;
    }
    .cap-modal-header h2{
      grid-column:2;text-align:center;
      font-family:'Space Grotesk';font-weight:700;font-size:24px;letter-spacing:-.01em;
      color:var(--gold);margin:0;line-height:1.15;
    }
    .cap-modal-header .sub{
      grid-column:2;text-align:center;
      font-size:12.5px;color:var(--muted);margin:6px 0 0;letter-spacing:.3px;
    }
    .cap-modal-header .sub b{color:var(--text)}
    .cap-illus{
      width:90px;height:90px;display:flex;align-items:center;justify-content:center;
    }
    .cap-illus img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
    .cap-illus.left{grid-column:1}
    .cap-illus.right{grid-column:3}
    .cap-modal-body{padding:22px 28px 28px}
    .cap-modal-body .cap-example{margin:0;background:transparent;border:none;padding:0}
    .cap-modal-body .cap-row{grid-template-columns:repeat(4,1fr);gap:10px}
    .cap-modal-body .cap-case{margin-bottom:24px}
    .cap-modal-body .cap-case:last-child{margin-bottom:0}
    .cap-modal-body .lead{font-size:14px;line-height:1.7;margin:0 0 18px;padding:14px 16px;background:rgba(240,185,11,.05);border:1px solid rgba(240,185,11,.18);border-radius:10px}
    .cap-divider{
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      margin:14px 0 18px;
    }
    .cap-divider img{
      width:140px;height:140px;object-fit:contain;
      filter:drop-shadow(0 8px 22px rgba(240,185,11,.18));
    }
    .cap-divider .lbl{
      margin-top:4px;font-size:10px;color:rgba(240,185,11,.55);
      font-family:'Space Grotesk';font-weight:600;letter-spacing:3px;text-transform:uppercase;
    }
    .cap-case-titlebar{
      display:flex;align-items:center;gap:12px;margin-bottom:10px;
    }
    .cap-case-titlebar .ic{
      flex-shrink:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;
    }
    .cap-case-titlebar .ic img{
      max-width:100%;max-height:100%;object-fit:contain;
      filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
    }
    .cap-case-titlebar .cap-case-title{margin-bottom:0}
    .cap-modal-footer{
      padding:18px 28px 22px;border-top:1px solid var(--border);
      font-size:12.5px;color:var(--muted);line-height:1.65;
      display:grid;grid-template-columns:90px 1fr;align-items:center;gap:16px;text-align:left;
    }
    .cap-footer-illus{
      width:90px;height:90px;object-fit:contain;
      filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
    }
    .cap-modal-footer b{color:var(--gold)}

    @media (max-width: 720px){
      .cap-modal{padding:12px 6px}
      .cap-modal-box{border-radius:14px}
      .cap-modal-header{grid-template-columns:60px 1fr 60px;padding:22px 50px 14px;gap:8px}
      .cap-modal-header h2{font-size:18px}
      .cap-modal-header .sub{font-size:11.5px}
      .cap-illus{width:60px;height:60px}
      .cap-modal-body{padding:18px 14px 18px}
      .cap-modal-body .cap-row{grid-template-columns:repeat(2,1fr);gap:8px}
      .cap-modal-body .lead{font-size:13px;padding:12px}
      .cap-modal-footer{padding:14px 18px 18px;grid-template-columns:1fr;text-align:center;gap:10px}
      .cap-footer-illus{width:72px;height:72px;justify-self:center}
      .cap-divider img{width:110px;height:110px}
      .cap-case-titlebar .ic{width:48px;height:48px}
    }

    /* Lock background scroll while modal is open */
    body.cap-modal-open{overflow:hidden}
  </style>
</head>
<body data-public="true">
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="rules-hero"></div>
        <div class="card">
          <h1><span class="accent">Rules &amp; FAQ</span></h1>
          <p class="sub">Read this before you play. Especially if it's your first crypto-tipgame.</p>

          <nav class="toc">
            <a href="#disclaimer">⚠ Disclaimer</a>
            <a href="#register">Register</a>
            <a href="#bonus">Bonus</a>
            <a href="#tips">Tips</a>
            <a href="#crypto">Crypto</a>
            <a href="#scoring">Scoring</a>
            <a href="#pool">Prize pool</a>
            <a href="#payouts">Payouts</a>
            <a href="#donations">Donations</a>
            <a href="#security">Security</a>
            <a href="#contact">Contact</a>
          </nav>

          <!-- DISCLAIMER -->
          <h2 id="disclaimer">⚠ Disclaimer — read first</h2>
          <div class="callout danger">
            <b>BOBAI Worldcup '26 is a community fan project.</b> Not affiliated with FIFA, BNB Chain, Binance, or any of the listed teams or players. Names, flags and competition data are used for descriptive purposes only.
          </div>
          <div class="callout warn">
            <b>No responsibility, no guarantees.</b> Participation is entirely at your own risk. We do not provide financial, investment, or legal advice. Predictions are entertainment, not a strategy.
            <br><br>
            • If you don't know what you're doing — <b>don't do it.</b><br>
            • Never send funds you can't afford to lose.<br>
            • Smart contracts and wallets can have bugs. Networks can be congested. Transactions can fail.<br>
            • Prize-pool distribution depends on on-chain conditions (gas, slippage, network availability). Payout timing is a target, not a promise.<br>
            • You are responsible for your own taxes wherever you live.<br>
            • If gambling is restricted in your jurisdiction or you are under the local legal age — <b>do not participate.</b>
          </div>
          <p>By creating an account, sending donations or claiming payouts you accept these terms. If you don't agree — close this page and don't take part. The dev team reserves the right to fix bugs, correct match results, and adjust scoring rules transparently if data sources disagree.</p>

          <!-- REGISTER -->
          <h2 id="register">1. Register</h2>
          <p>Create an account with a <b>username + email + password</b>. Pick a country — you'll get a BOBAI in that national jersey as your avatar. Email is used only for confirmation + password reset — never shown publicly, never spammed.</p>
          <p>Before the account is created you'll see a short <b>security briefing</b> (anti-scam, anti-phishing, game disclaimer) that you have to acknowledge. After confirming, a confirmation link is sent to your inbox — click it once and you're in.</p>
          <p>Optionally link a <b>BEP-20 wallet</b> (MetaMask, Trust Wallet, Binance Web3, hardware — any wallet works). You just paste the address — no signing, no app install, no gas. The wallet is only needed if you want to be <b>eligible for prize-pool payouts</b>. You can play purely for fun without one — your username will still appear on the leaderboard, just without the ⚽ icon.</p>
          <div class="callout warn">
            A linked wallet is <b>permanent</b> and <b>unique</b>: it cannot be changed or removed after linking, and the same wallet cannot be used on two different accounts. Double-check the address before confirming.
          </div>

          <!-- BONUS QUESTIONS -->
          <h2 id="bonus">2. Bonus questions (one-time)</h2>
          <p>Five long-shot predictions, each worth <b>20 points</b>:</p>
          <ol>
            <li>Who wins the World Cup? (single team)</li>
            <li>Team with the most goals scored across the tournament</li>
            <li>Team with the fewest goals scored</li>
            <li>Top scorer's country (Golden Boot)</li>
            <li>Total red cards bracket: &lt;5 / 5–9 / 10–14 / 15–19 / &gt;19</li>
          </ol>
          <p><b>Submission deadline:</b> <b>18 June 2026, 15:45 UTC</b> — 15 min before the first matchday-2 match. One-time extension to give late joiners a fair shot. After the deadline: locked — no changes (DB-enforced).</p>

          <!-- TIPS -->
          <h2 id="tips">3. Match tips</h2>
          <p>For every match you tip the <b>exact score</b> (e.g. 2:1). All 72 group-stage matches plus 32 knockout matches.</p>
          <p>Each match locks <b>15 minutes before kickoff</b>. After that: no edits possible (enforced at database level — you literally can't get around it).</p>
          <p>Knockout matches start as <i>TBD vs TBD</i> in the UI and become tippable once the draw resolves them.</p>

          <!-- CRYPTO -->
          <h2 id="crypto">4. Crypto predictions</h2>
          <p>Predict the USD price of <b>BTC, BNB and BOBAI</b> at the exact moment of the World Cup <b>Final kickoff</b> (19 July 2026, 19:00 UTC). Live current prices are shown for reference; you can edit anytime until <b>18 June 2026, 15:45 UTC</b> — 15 min before the first matchday-2 match. After that: locked.</p>
          <p>Scoring is based on <b>absolute difference</b> to the actual price at the snapshot moment — the closest guess on each coin wins that coin's share of the crypto pot.</p>

          <!-- SCORING -->
          <h2 id="scoring">5. Scoring</h2>
          <h3>Match scoring (per match)</h3>
          <p>Raw points stack — first you get points for calling the <b>winner (1/X/2)</b>, then a bonus on top if you also got the <b>goal difference</b>, and another bonus on top if you nailed the <b>exact score</b>:</p>
          <table class="scoring-table">
            <tr><th>Outcome</th><th>Example (tipped 2:1)</th><th>Raw points</th></tr>
            <tr><td>Correct winner only (1 / X / 2)</td><td>Actual 4:0 — right side, wrong margin</td><td>2</td></tr>
            <tr><td>Correct winner <b>+ correct goal difference</b></td><td>Actual 3:2 — right side, 1-goal margin matches (+1)</td><td>3</td></tr>
            <tr><td>Correct winner + GD <b>+ exact result</b></td><td>Actual 2:1 — nailed it (+2)</td><td>5</td></tr>
            <tr><td>Wrong winner / wrong direction</td><td>Actual 0:1 or 1:1</td><td>0</td></tr>
          </table>
          <p style="font-size:12.5px">A correct draw tip (X) only counts if the actual result is also a draw — the score doesn't have to match exactly to get the 2 base points, but you need an actual draw for the <b>+1</b> GD bonus and an exact draw score for the <b>+2</b> exact bonus.</p>
          <h3>Phase multiplier</h3>
          <p>Later matches matter more. Raw points get multiplied by phase — and inside the group stage the multiplier climbs each matchday so totals spread out and fewer players land on the same number of points:</p>
          <table class="scoring-table">
            <tr><th>Phase</th><th>Multiplier</th></tr>
            <tr><td>Group stage — Matchday 1</td><td>×1</td></tr>
            <tr><td>Group stage — Matchday 2</td><td>×1.25</td></tr>
            <tr><td>Group stage — Matchday 3</td><td>×1.5</td></tr>
            <tr><td>Round of 32</td><td>×2</td></tr>
            <tr><td>Round of 16</td><td>×3</td></tr>
            <tr><td>Quarter-finals</td><td>×4</td></tr>
            <tr><td>Semi-finals</td><td>×5</td></tr>
            <tr><td>Third-place match</td><td>×6</td></tr>
            <tr><td>Final</td><td>×7</td></tr>
          </table>
          <p style="font-size:12.5px">A perfect exact-score tip in the Final is worth <b>5 × 7 = 35 points</b> — enough to flip the leaderboard on a single match, which is exactly the point.</p>
          <h3>Bonus &amp; Crypto</h3>
          <p>Bonus questions: <b>20 pts each</b> if correct. Crypto: <b>not counted in points</b> — winners are determined by closest absolute price difference (own pot).</p>
          <h3>Tie-breaker</h3>
          <p>If two players have the exact same point total in a payout group, the player with <b>more BOBAI in their linked wallet at payout time</b> wins. Players without a linked wallet automatically rank below players with one in case of a tie.</p>

          <!-- POOL -->
          <h2 id="pool">6. Prize pool</h2>
          <h3>Where the BOBAI comes from</h3>
          <p>Two sources feed the prize-pool wallet (<code id="addr-hint">0x5E41…D105</code>):</p>
          <ul>
            <li><b>Token tax auto-flow</b>: from <b>11 Jun 2026, 00:01 UTC</b> until the Final (<b>19 Jul 2026, 23:59 UTC</b>), <b>0.52 % of every BOBAI buy/sell tax</b> flows into the prize-pool wallet automatically — <b>0.26 % redirected from the BOB-burn slice</b> + <b>0.26 % from the creator slice</b>. The 3 % on-chain tax rate stays fixed; only the off-chain distribution changes for the WC26 window. After the Final, the split reverts to the standard 1 % BOBAI burn · 1 % BOB burn · 1 % creator.</li>
            <li><b>Donations</b>: anyone can send BNB or USDT (BEP-20) to the prize-pool wallet. Incoming funds are auto-swapped to BOBAI via PancakeSwap and added on-chain. Any amount welcome — see <a href="#donations" style="color:var(--gold)">below</a>.</li>
          </ul>
          <p>Everything is verifiable on BscScan. The pool figure displayed on the leaderboard reads the actual on-chain BOBAI balance — there's nothing in a back-office database we could fudge.</p>
          <h3>Pool split</h3>
          <p>How each incoming BOBAI gets allocated depends on the tournament phase at the moment it arrives:</p>
          <ul>
            <li><b>During group-stage matches</b>: 60 % → Group Pot · 30 % → End Pool · 10 % → Crypto Pot</li>
            <li><b>From R32 onwards</b>: 90 % → End Pool · 10 % → Crypto Pot (Group Pot stops growing — it's paid out before KO starts)</li>
          </ul>

          <!-- PAYOUTS -->
          <h2 id="payouts">7. Payouts</h2>
          <h3>Group Pot (60 % of group-stage collection)</h3>
          <p>Paid <b>one day after the last group-stage match</b>. Split across <b>32 winners</b> from three sub-brackets:</p>
          <table class="scoring-table">
            <tr><th>Sub-bracket</th><th>Who qualifies</th><th>Share of group pot</th></tr>
            <tr><td>Group 1st</td><td>1st-placed player in each of the 12 groups</td><td>55 %</td></tr>
            <tr><td>Group 2nd</td><td>2nd-placed player in each of the 12 groups</td><td>30 %</td></tr>
            <tr><td>Best 3rds</td><td>8 best 3rd-placed players across all groups</td><td>15 %</td></tr>
          </table>
          <p>Within each sub-bracket, the share is <b>split equally</b> among its members — every group 1st gets the same slice of the 55 %, every group 2nd gets the same slice of the 30 %, and every best-3rd gets the same slice of the 15 %. The bracket weights still guarantee that being 1st always pays more than being 2nd, and being 2nd always pays more than just sneaking into best-3rd.</p>
          <table class="scoring-table">
            <tr><th>Position</th><th>Share per player</th></tr>
            <tr><td>Group 1st (×12)</td><td>55 % ÷ 12 ≈ <b>4.58 %</b> of group pot each</td></tr>
            <tr><td>Group 2nd (×12)</td><td>30 % ÷ 12 ≈ <b>2.50 %</b> of group pot each</td></tr>
            <tr><td>Best 3rd (×8)</td><td>15 % ÷ 8 ≈ <b>1.88 %</b> of group pot each</td></tr>
          </table>
          <p style="font-size:12.5px">Flat split inside the bracket = no &ldquo;winner-take-most&rdquo; effect; finishing 1st of your group with 30 group_points pays the same as finishing 1st with 60. The only thing that matters is which position you finished.</p>
          <h3>End Pool (KO-phase pot)</h3>
          <p>Paid <b>one day after the Final</b>. Top 4 overall — based on total score across all phases <b>including bonus questions</b>. Within the top 4 the split is <b>tiered by position</b>:</p>
          <table class="scoring-table">
            <tr><th>Overall finish</th><th>Share of end pool</th></tr>
            <tr><td>🥇 1st</td><td><b>50 %</b></td></tr>
            <tr><td>🥈 2nd</td><td><b>25 %</b></td></tr>
            <tr><td>🥉 3rd</td><td><b>15 %</b></td></tr>
            <tr><td>4th</td><td><b>10 %</b></td></tr>
          </table>
          <p style="font-size:12.5px">Fixed percentages — climbing one position is always worth a meaningful jump. Bonus questions count in the total points that determine your rank, so don't skip them.</p>
          <h3>Crypto Pot (10 %)</h3>
          <p>Paid <b>one day after the Final</b>, alongside the End Pool. Split into 3 equal slots:</p>
          <ul>
            <li>3.3 % of total pool to the closest BTC guess</li>
            <li>3.3 % of total pool to the closest BNB guess</li>
            <li>3.3 % of total pool to the closest BOBAI guess</li>
          </ul>
          <p>The same player can win multiple Crypto Pot slots if they have the best guess on more than one coin.</p>
          <h3>Eligibility</h3>
          <div class="callout warn">
            Only players with a <b>linked wallet</b> at payout time are counted for payouts. Players without a linked wallet keep their leaderboard position for bragging rights, but are <b>skipped</b> when payout slots are filled — the next eligible player on the leaderboard takes the slot. Example: if leaderboard #1 has no wallet, leaderboard #2 (with wallet) becomes payout #1 and receives the 50 % End-Pool share; #3 (with wallet) becomes payout #2, and so on. On every leaderboard you can toggle <b>“💰 Wallet-linked only”</b> to view the exact payout ranking.
          </div>

          <h3>Holder-balance cap: max 26× your BOBAI</h3>
          <p>Each individual payout to a winner is capped at <b>26× the BOBAI balance held in their linked wallet at the moment of payout</b>. Examples:</p>
          <table class="scoring-table">
            <tr><th>Your wallet holds</th><th>Maximum single payout</th></tr>
            <tr><td>$1 in BOBAI</td><td>$26</td></tr>
            <tr><td>$10 in BOBAI</td><td>$260</td></tr>
            <tr><td>$100 in BOBAI</td><td>$2,600</td></tr>
            <tr><td>$1,000 in BOBAI</td><td>$26,000</td></tr>
            <tr><td>$10,000 in BOBAI</td><td>$260,000</td></tr>
          </table>
          <div class="callout info">
            <b>Why this exists.</b> This is an <b>anti-abuse rule</b> that protects the people who actually believe in <b>BOBAI / Brain On BNB AI</b> — the holders, supporters, and long-term believers. Without a cap, anyone could spin up an empty wallet, place a random tip, and try to siphon a pool that was built by real supporters. The 26× rule ties payouts to actual skin in the game.
          </div>
          <p><b>Don't worry about being "capped out".</b> Nobody knows in advance how big the prize pool will be — but if the pool grows, your <b>BOBAI balance grows with it</b> (same token, same chart). So the cap scales with you. Holding more BOBAI literally raises your ceiling.</p>
          <p>The balance is read <b>live from the blockchain</b> at payout time — there's no snapshot to game and no way to fake it.</p>

          <div class="cap-h3-row">
            <h3>Cap overflow — cascading redistribution</h3>
            <button type="button" class="cap-modal-btn" onclick="openCapModal()" aria-haspopup="dialog" aria-controls="cap-modal">
              <span class="ic">⚽</span> See a visual walk-through
            </button>
          </div>
          <p>If a winner's computed share exceeds their personal 26× cap, the excess does <b>not</b> stay with that winner and is <b>not</b> kept by the team. It flows to the rest of the eligible winners <b>in the same pot</b>. Each pot (Group, End Pool, and the three Crypto pots) is evaluated <b>independently</b> — overflow never crosses pot boundaries.</p>
          <ol>
            <li>Compute every winner's raw share based on points / closest-guess logic.</li>
            <li>Apply each winner's 26× cap. Sum up the overflow from anyone who got capped.</li>
            <li>Redistribute that overflow <b>proportionally</b> to the remaining (uncapped) winners <b>within the same pot</b>.</li>
            <li>If that redistribution pushes a new winner over their cap, repeat step 2 — the cascade continues until either every dollar is paid out within someone's cap, or no eligible uncapped winner remains.</li>
            <li>If after the full cascade <b>residual still remains</b> (every winner in that pot is capped out), the leftover BOBAI is added as <b>permanent liquidity</b> to the BOBAI/BNB PancakeSwap pool, and the resulting LP tokens are <b>burned to the dead address</b>. It is never carried into another pot, never refunded, never kept by the team — the value flows back to every BOBAI holder through a deeper, tighter market.</li>
          </ol>
          <p style="font-size:12.5px">The cascading logic is implemented in the same payout-computation code that the admin runs before signing. The full split (raw share, cap applied, redistribution rounds) will be published on-chain alongside each payout batch so anyone can verify it.</p>

          <h3>How the payouts run</h3>
          <p>Payout transactions are <b>triggered manually</b> by the project admin (not fully autonomous) — the code computes the exact split (including cap and cascade), then the admin signs and broadcasts the batch. This is a deliberate safety design: an off-by-one bug should never auto-drain the pool.</p>

          <!-- DONATIONS -->
          <h2 id="donations">8. Donations</h2>
          <p>The prize-pool wallet accepts <b>BNB</b> and <b>USDT (BEP-20)</b> on BNB Smart Chain. Address is shown on the <a href="./leaderboard.html" style="color:var(--gold)">Leaderboard</a> page with a copy button.</p>
          <div class="callout danger">
            <b>BSC only.</b> If you send USDT on Ethereum, Tron, Solana or any other network — funds are <b>lost</b>. There's no human in the loop to recover them.
          </div>
          <p>How it works:</p>
          <ol>
            <li>You send X BNB or USDT to the prize wallet</li>
            <li>The pool sync worker detects the new balance</li>
            <li>BNB/USDT is auto-swapped to BOBAI via PancakeSwap</li>
            <li>The new BOBAI is added to the pool (verifiable on BscScan)</li>
            <li>Pool display updates within ~5 minutes</li>
          </ol>
          <p>Any amount welcome. For gas efficiency we suggest at least the equivalent of ~$5, but anything works.</p>

          <!-- SECURITY -->
          <h2 id="security">9. Security &amp; manipulation safety</h2>
          <ul>
            <li><b>Tip lock</b>: 15 minutes before kickoff, enforced at the database level — not just in the UI.</li>
            <li><b>Bonus &amp; crypto lock</b>: enforced at the database level when the relevant match kicks off.</li>
            <li><b>Match results</b>: only the sync worker (using a service-role key, never exposed to users) can write results. Players cannot edit goals.</li>
            <li><b>Scoring</b>: runs in a database trigger after match results are written. The trigger overwrites any user-side `points` value, so nobody can self-award points.</li>
            <li><b>Wallet linking</b>: you just paste your BEP-20 address — no signing, no seed phrase, no private key. We never ask for any of that, and the app would never need it.</li>
            <li><b>Wallet privacy</b>: your linked wallet is <b>never shown to other players in-app</b>. The only public reveal is the on-chain payout transaction itself — and Group-Pot payouts are sent in <b>randomized order across the 12 groups</b> (e.g. group F may receive before group A), so observers cannot match a wallet to a specific group placement. Only the <b>End-Pool top 4</b> (🥇/🥈/🥉/4th overall) and the <b>three closest crypto guesses</b> (BTC/BNB/BOBAI) are matchable to a wallet, because those are unique single-winner positions that are already public on the leaderboard.</li>
            <li><b>Tie-breaker by BOBAI balance</b>: read live from the blockchain at payout time, not from a database — un-fakeable.</li>
            <li><b>Payouts</b>: manually triggered by admin, not autonomous. An admin error or bug can be caught before signing.</li>
            <li><b>Prize wallet</b>: a fresh dedicated wallet. Private key is only stored in encrypted Cloudflare Worker secrets — never in code, never on a server you can SSH into.</li>
          </ul>
          <div class="callout danger">
            <b>Admins NEVER DM you first.</b> Anyone offering you to "double your winnings", "verify your account", "claim your payout faster" via Telegram/X DM is a scammer. Block + report.
          </div>

          <!-- CONTACT -->
          <h2 id="contact">10. Contact</h2>
          <p>Questions, bug reports, suggestions:</p>
          <ul>
            <li>Telegram: <a href="https://t.me/bobai_official" style="color:var(--gold)">@bobai_official</a></li>
            <li>X: <a href="https://x.com/BrainOnBNB" style="color:var(--gold)">@BrainOnBNB</a></li>
            <li>Website: <a href="https://brainonbnb.com" style="color:var(--gold)">brainonbnb.com</a></li>
          </ul>
          <p style="font-size:11.5px;color:var(--muted);margin-top:24px;padding-top:18px;border-top:1px solid var(--border)">
            Last updated: 22 May 2026 (prize-pool tax auto-flow clarified: 0.52 % = 0.26 % BOB-burn + 0.26 % creator). Rules may be refined for clarity before launch on 4 June 2026; any change with material effect on scoring or payouts will be announced in the official Telegram with at least 24 hours' notice.
          </p>
        </div>
      </div>
    </main>
  </div>

  <!-- ─── Cap-overflow modal (opened via the "See a visual walk-through" button in §7) ─── -->
  <div id="cap-modal" class="cap-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="cap-modal-title">
    <div class="cap-modal-backdrop" onclick="closeCapModal()"></div>
    <div class="cap-modal-box">
      <button type="button" class="cap-modal-close" aria-label="Close" onclick="closeCapModal()">×</button>

      <div class="cap-modal-header">
        <div class="cap-illus left">
          <img alt="" src="./illus/pool-trophy.webp"
               onerror="this.onerror=null;this.src='./illus/pool-trophy.png'">
        </div>
        <h2 id="cap-modal-title">The 26× Cap — Visual Walk-Through</h2>
        <p class="sub">A <b>Group-Phase scenario</b> showing how overflow cascades within a single pot</p>
        <div class="cap-illus right">
          <img alt="" src="./illus/tips-ball.webp"
               onerror="this.onerror=null;this.src='./illus/tips-ball.png'">
        </div>
      </div>

      <div class="cap-modal-body">
        <div class="cap-example">
          <p class="lead">
            Imagine the <b>Group Pot</b> has grown to <b>$24,000</b>. The top-1 sub-bracket holds <b>55% = $13,200</b>, split equally among the <b>12 group winners</b> → each one is entitled to <b>$1,100</b>. Below are <b>4 representative winners</b> with very different BOBAI balances.
          </p>

          <div class="cap-case">
            <div class="cap-case-title ok">Case A — Everyone holds enough BOBAI</div>
            <div class="cap-row">
              <div class="cap-card">
                <div class="h">Winner 1</div>
                <div class="line"><span>Holds</span><b>$500</b></div>
                <div class="line"><span>26× cap</span><b>$13,000</b></div>
                <div class="line pay"><span>Paid</span><b>$1,100 ✓</b></div>
              </div>
              <div class="cap-card">
                <div class="h">Winner 2</div>
                <div class="line"><span>Holds</span><b>$1,000</b></div>
                <div class="line"><span>26× cap</span><b>$26,000</b></div>
                <div class="line pay"><span>Paid</span><b>$1,100 ✓</b></div>
              </div>
              <div class="cap-card">
                <div class="h">Winner 3</div>
                <div class="line"><span>Holds</span><b>$200</b></div>
                <div class="line"><span>26× cap</span><b>$5,200</b></div>
                <div class="line pay"><span>Paid</span><b>$1,100 ✓</b></div>
              </div>
              <div class="cap-card">
                <div class="h">Winner 4</div>
                <div class="line"><span>Holds</span><b>$1,500</b></div>
                <div class="line"><span>26× cap</span><b>$39,000</b></div>
                <div class="line pay"><span>Paid</span><b>$1,100 ✓</b></div>
              </div>
            </div>
            <div class="cap-foot">Every cap respected. All 12 group winners are paid in full — <b>$13,200 distributed, nothing held back</b>.</div>
          </div>

          <div class="cap-divider">
            <img src="./illus/wallet-cascade.webp" alt="cascade flow">
            <div class="lbl">↓ &nbsp; The overflow cascade &nbsp; ↓</div>
          </div>

          <div class="cap-case">
            <div class="cap-case-titlebar">
              <div class="ic"><img src="./illus/wallet-overflow.webp" alt=""></div>
              <div class="cap-case-title bad">Case B — Two winners hit the 26× cap → cascade</div>
            </div>
            <div class="cap-row">
              <div class="cap-card capped">
                <span class="stamp">CAPPED</span>
                <div class="h">Winner 1</div>
                <div class="line"><span>Holds</span><b>$5</b></div>
                <div class="line"><span>26× cap</span><b>$130</b></div>
                <div class="line strike"><span>Share was</span><b>$1,100</b></div>
                <div class="line pay"><span>Paid</span><b>$130</b></div>
                <div class="overflow-tag">Overflow $970 ↓</div>
              </div>
              <div class="cap-card capped">
                <span class="stamp">CAPPED</span>
                <div class="h">Winner 2</div>
                <div class="line"><span>Holds</span><b>$20</b></div>
                <div class="line"><span>26× cap</span><b>$520</b></div>
                <div class="line strike"><span>Share was</span><b>$1,100</b></div>
                <div class="line pay"><span>Paid</span><b>$520</b></div>
                <div class="overflow-tag">Overflow $580 ↓</div>
              </div>
              <div class="cap-card bonus">
                <div class="h">Winner 3</div>
                <div class="line"><span>Holds</span><b>$200</b></div>
                <div class="line"><span>26× cap</span><b>$5,200</b></div>
                <div class="line"><span>Base share</span><b>$1,100</b></div>
                <div class="bonus-tag">+ Cascade bonus $155</div>
                <div class="line pay"><span>Paid</span><b>$1,255 ✓</b></div>
              </div>
              <div class="cap-card bonus">
                <div class="h">Winner 4</div>
                <div class="line"><span>Holds</span><b>$1,500</b></div>
                <div class="line"><span>26× cap</span><b>$39,000</b></div>
                <div class="line"><span>Base share</span><b>$1,100</b></div>
                <div class="bonus-tag">+ Cascade bonus $155</div>
                <div class="line pay"><span>Paid</span><b>$1,255 ✓</b></div>
              </div>
            </div>
            <div class="cap-foot">
              Total overflow from the 2 capped winners = <b>$1,550</b>. That overflow cascades to the <b>10 uncapped winners</b>, +$155 each — all stay well under their personal caps. The full <b>$13,200</b> sub-bracket is paid out <b>within this same pot</b>, fully absorbed by the cascade.
            </div>
          </div>
        </div>
      </div>

      <div class="cap-modal-footer">
        <img class="cap-footer-illus" src="./illus/liquidity-lock.webp" alt="">
        <div>
          <b>Extreme edge case.</b> If every winner in a pot is capped out and a residual still remains, that leftover BOBAI is added as <b>permanent liquidity</b> to the BOBAI/BNB PancakeSwap pool, and the resulting LP tokens are <b>burned to the dead address</b>. It <b>never</b> crosses into another pot, <b>never</b> refunds, <b>never</b> stays with the team — value flows back to every BOBAI holder via a tighter market.
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    // Replace the short address hint with the real configured one
    const addrHint = document.getElementById('addr-hint');
    const a = window.WC_CONFIG?.PRIZE_WALLET;
    if (a && addrHint) addrHint.textContent = a.slice(0,6) + '…' + a.slice(-4);

    // ─── Cap-overflow modal ───
    function openCapModal(){
      const m = document.getElementById('cap-modal');
      if (!m) return;
      m.setAttribute('aria-hidden', 'false');
      document.body.classList.add('cap-modal-open');
      // Focus the close button for keyboard users
      const close = m.querySelector('.cap-modal-close');
      if (close) setTimeout(()=>close.focus(), 50);
    }
    function closeCapModal(){
      const m = document.getElementById('cap-modal');
      if (!m) return;
      m.setAttribute('aria-hidden', 'true');
      document.body.classList.remove('cap-modal-open');
    }
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') {
        const m = document.getElementById('cap-modal');
        if (m && m.getAttribute('aria-hidden') === 'false') closeCapModal();
      }
    });
    window.openCapModal = openCapModal;
    window.closeCapModal = closeCapModal;
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_c.sql
==============================================================================

-- Phase C migration — bonus questions finalized, RLS hardened for empty-match-table case
-- Run in Supabase SQL Editor after the base schema.sql.

-- 1) wc_bonus: q5 → topscorer_country (typed properly), drop q6 placeholder
ALTER TABLE wc_bonus RENAME COLUMN q5 TO topscorer_country;
ALTER TABLE wc_bonus DROP COLUMN q6;

-- 2) Harden RLS time-locks so they don't reject inserts when wc_matches is empty
--    (during beta build, matches aren't seeded yet — without COALESCE, NULL > NOW()
--     returns NULL which fails the WITH CHECK clause and blocks legitimate inserts)

DROP POLICY IF EXISTS wc_bonus_insert_own ON wc_bonus;
DROP POLICY IF EXISTS wc_bonus_update_own ON wc_bonus;
CREATE POLICY wc_bonus_insert_own ON wc_bonus FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE((SELECT kickoff_utc FROM wc_matches WHERE id = 1), '9999-12-31'::timestamptz) > NOW()
);
CREATE POLICY wc_bonus_update_own ON wc_bonus FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE((SELECT kickoff_utc FROM wc_matches WHERE id = 1), '9999-12-31'::timestamptz) > NOW()
);

DROP POLICY IF EXISTS wc_crypto_insert_own ON wc_crypto;
DROP POLICY IF EXISTS wc_crypto_update_own ON wc_crypto;
CREATE POLICY wc_crypto_insert_own ON wc_crypto FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE(
        (SELECT kickoff_utc FROM wc_matches WHERE phase = 'final' ORDER BY kickoff_utc DESC LIMIT 1),
        '9999-12-31'::timestamptz
      ) > NOW()
);
CREATE POLICY wc_crypto_update_own ON wc_crypto FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE(
        (SELECT kickoff_utc FROM wc_matches WHERE phase = 'final' ORDER BY kickoff_utc DESC LIMIT 1),
        '9999-12-31'::timestamptz
      ) > NOW()
);

-- Tips RLS already covers this implicitly: tip insert requires a wc_matches row with kickoff > NOW(),
-- so empty wc_matches naturally blocks tipping until Phase D seeds the matches. Keep as-is.

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_d.sql
==============================================================================

-- Phase D migration — 15-minute pre-kickoff lock + seed all 104 matches
-- Run in Supabase SQL Editor after the base schema.sql + migration_phase_c.sql.

-- 1) Harden wc_tips RLS: lock 15 minutes BEFORE kickoff
DROP POLICY IF EXISTS wc_tips_insert_own ON wc_tips;
DROP POLICY IF EXISTS wc_tips_update_own ON wc_tips;

CREATE POLICY wc_tips_insert_own ON wc_tips FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE(
        (SELECT kickoff_utc FROM wc_matches WHERE id = match_id),
        '9999-12-31'::timestamptz
      ) > NOW() + INTERVAL '15 minutes'
);

CREATE POLICY wc_tips_update_own ON wc_tips FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND COALESCE(
        (SELECT kickoff_utc FROM wc_matches WHERE id = match_id),
        '9999-12-31'::timestamptz
      ) > NOW() + INTERVAL '15 minutes'
);

-- 2) Seed all 104 matches (idempotent via ON CONFLICT)
--    Team codes match wc_countries (e.g. ENG, SCO, BA, CZ). KO matches use 'TBD'.
INSERT INTO wc_matches (id, phase, group_letter, team_home, team_away, kickoff_utc, multiplier) VALUES
-- GROUP A
( 1,'group','A','MX','ZA','2026-06-11 19:00+00',1),
( 2,'group','A','KR','CZ','2026-06-12 02:00+00',1),
( 3,'group','A','CZ','ZA','2026-06-18 16:00+00',1),
( 4,'group','A','MX','KR','2026-06-19 01:00+00',1),
( 5,'group','A','ZA','KR','2026-06-25 01:00+00',1),
( 6,'group','A','CZ','MX','2026-06-25 01:00+00',1),
-- GROUP B
( 7,'group','B','CA','BA','2026-06-12 19:00+00',1),
( 8,'group','B','QA','CH','2026-06-13 19:00+00',1),
( 9,'group','B','CH','BA','2026-06-18 19:00+00',1),
(10,'group','B','CA','QA','2026-06-18 22:00+00',1),
(11,'group','B','CH','CA','2026-06-24 19:00+00',1),
(12,'group','B','BA','QA','2026-06-24 19:00+00',1),
-- GROUP C
(13,'group','C','BR','MA','2026-06-13 22:00+00',1),
(14,'group','C','HT','SCO','2026-06-14 01:00+00',1),
(15,'group','C','SCO','MA','2026-06-19 22:00+00',1),
(16,'group','C','BR','HT','2026-06-20 00:30+00',1),
(17,'group','C','MA','HT','2026-06-24 22:00+00',1),
(18,'group','C','SCO','BR','2026-06-24 22:00+00',1),
-- GROUP D
(19,'group','D','US','PY','2026-06-13 01:00+00',1),
(20,'group','D','AU','TR','2026-06-14 04:00+00',1),
(21,'group','D','US','AU','2026-06-19 19:00+00',1),
(22,'group','D','TR','PY','2026-06-20 03:00+00',1),
(23,'group','D','TR','US','2026-06-26 02:00+00',1),
(24,'group','D','PY','AU','2026-06-26 02:00+00',1),
-- GROUP E
(25,'group','E','DE','CW','2026-06-14 17:00+00',1),
(26,'group','E','CI','EC','2026-06-15 23:00+00',1),
(27,'group','E','DE','CI','2026-06-20 20:00+00',1),
(28,'group','E','EC','CW','2026-06-21 00:00+00',1),
(29,'group','E','CW','CI','2026-06-25 20:00+00',1),
(30,'group','E','EC','DE','2026-06-25 20:00+00',1),
-- GROUP F
(31,'group','F','NL','JP','2026-06-14 20:00+00',1),
(32,'group','F','SE','TN','2026-06-15 02:00+00',1),
(33,'group','F','NL','SE','2026-06-20 17:00+00',1),
(34,'group','F','TN','JP','2026-06-21 04:00+00',1),
(35,'group','F','TN','NL','2026-06-25 23:00+00',1),
(36,'group','F','JP','SE','2026-06-25 23:00+00',1),
-- GROUP G
(37,'group','G','BE','EG','2026-06-15 19:00+00',1),
(38,'group','G','IR','NZ','2026-06-16 01:00+00',1),
(39,'group','G','BE','IR','2026-06-21 19:00+00',1),
(40,'group','G','NZ','EG','2026-06-22 01:00+00',1),
(41,'group','G','NZ','BE','2026-06-27 03:00+00',1),
(42,'group','G','EG','IR','2026-06-27 03:00+00',1),
-- GROUP H
(43,'group','H','ES','CV','2026-06-15 16:00+00',1),
(44,'group','H','SA','UY','2026-06-15 22:00+00',1),
(45,'group','H','ES','SA','2026-06-21 16:00+00',1),
(46,'group','H','UY','CV','2026-06-21 22:00+00',1),
(47,'group','H','CV','SA','2026-06-27 00:00+00',1),
(48,'group','H','UY','ES','2026-06-27 00:00+00',1),
-- GROUP I
(49,'group','I','FR','SN','2026-06-16 19:00+00',1),
(50,'group','I','IQ','NO','2026-06-16 22:00+00',1),
(51,'group','I','FR','IQ','2026-06-22 21:00+00',1),
(52,'group','I','NO','SN','2026-06-23 00:00+00',1),
(53,'group','I','NO','FR','2026-06-26 19:00+00',1),
(54,'group','I','SN','IQ','2026-06-26 19:00+00',1),
-- GROUP J
(55,'group','J','AR','DZ','2026-06-17 01:00+00',1),
(56,'group','J','AT','JO','2026-06-17 04:00+00',1),
(57,'group','J','AR','AT','2026-06-22 17:00+00',1),
(58,'group','J','JO','DZ','2026-06-23 03:00+00',1),
(59,'group','J','DZ','AT','2026-06-29 02:00+00',1),
(60,'group','J','JO','AR','2026-06-29 02:00+00',1),
-- GROUP K
(61,'group','K','PT','CD','2026-06-17 17:00+00',1),
(62,'group','K','UZ','CO','2026-06-18 03:00+00',1),
(63,'group','K','PT','UZ','2026-06-23 17:00+00',1),
(64,'group','K','CO','CD','2026-06-24 02:00+00',1),
(65,'group','K','CO','PT','2026-06-28 23:30+00',1),
(66,'group','K','CD','UZ','2026-06-28 23:30+00',1),
-- GROUP L
(67,'group','L','ENG','HR','2026-06-17 20:00+00',1),
(68,'group','L','GH','PA','2026-06-17 23:00+00',1),
(69,'group','L','ENG','GH','2026-06-23 20:00+00',1),
(70,'group','L','PA','HR','2026-06-23 23:00+00',1),
(71,'group','L','PA','ENG','2026-06-27 21:00+00',1),
(72,'group','L','HR','GH','2026-06-27 21:00+00',1),
-- ROUND OF 32 (16 matches, dates approx — refined later from football-data API)
(73,'r32',NULL,'TBD','TBD','2026-06-29 19:00+00',2),
(74,'r32',NULL,'TBD','TBD','2026-06-30 17:00+00',2),
(75,'r32',NULL,'TBD','TBD','2026-06-30 20:30+00',2),
(76,'r32',NULL,'TBD','TBD','2026-07-01 01:00+00',2),
(77,'r32',NULL,'TBD','TBD','2026-07-01 17:00+00',2),
(78,'r32',NULL,'TBD','TBD','2026-07-01 21:00+00',2),
(79,'r32',NULL,'TBD','TBD','2026-07-02 01:00+00',2),
(80,'r32',NULL,'TBD','TBD','2026-07-02 16:00+00',2),
(81,'r32',NULL,'TBD','TBD','2026-07-02 20:00+00',2),
(82,'r32',NULL,'TBD','TBD','2026-07-03 00:00+00',2),
(83,'r32',NULL,'TBD','TBD','2026-07-03 19:00+00',2),
(84,'r32',NULL,'TBD','TBD','2026-07-03 23:00+00',2),
(85,'r32',NULL,'TBD','TBD','2026-07-04 03:00+00',2),
(86,'r32',NULL,'TBD','TBD','2026-07-04 18:00+00',2),
(87,'r32',NULL,'TBD','TBD','2026-07-04 22:00+00',2),
(88,'r32',NULL,'TBD','TBD','2026-07-05 18:00+00',2),
-- ROUND OF 16 (8 matches)
(89,'r16',NULL,'TBD','TBD','2026-07-05 22:00+00',2),
(90,'r16',NULL,'TBD','TBD','2026-07-06 00:00+00',2),
(91,'r16',NULL,'TBD','TBD','2026-07-06 19:00+00',2),
(92,'r16',NULL,'TBD','TBD','2026-07-07 00:00+00',2),
(93,'r16',NULL,'TBD','TBD','2026-07-07 16:00+00',2),
(94,'r16',NULL,'TBD','TBD','2026-07-07 20:00+00',2),
(95,'r16',NULL,'TBD','TBD','2026-07-08 19:00+00',2),
(96,'r16',NULL,'TBD','TBD','2026-07-08 23:00+00',2),
-- QUARTER-FINALS (4 matches)
(97,'qf', NULL,'TBD','TBD','2026-07-09 20:00+00',3),
(98,'qf', NULL,'TBD','TBD','2026-07-10 19:00+00',3),
(99,'qf', NULL,'TBD','TBD','2026-07-11 21:00+00',3),
(100,'qf',NULL,'TBD','TBD','2026-07-12 01:00+00',3),
-- SEMI-FINALS (2 matches)
(101,'sf',NULL,'TBD','TBD','2026-07-14 19:00+00',3),
(102,'sf',NULL,'TBD','TBD','2026-07-15 19:00+00',3),
-- THIRD PLACE
(103,'3rd',  NULL,'TBD','TBD','2026-07-18 21:00+00',4),
-- FINAL
(104,'final',NULL,'TBD','TBD','2026-07-19 19:00+00',4)
ON CONFLICT (id) DO UPDATE
  SET phase        = EXCLUDED.phase,
      group_letter = EXCLUDED.group_letter,
      team_home    = EXCLUDED.team_home,
      team_away    = EXCLUDED.team_away,
      kickoff_utc  = EXCLUDED.kickoff_utc,
      multiplier   = EXCLUDED.multiplier;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_e.sql
==============================================================================

-- Phase E migration — Scoring engine (DB trigger, auto-resolves tips when match.played=true)
-- Manipulation-safe: scoring runs ONLY via this trigger, never by user input.
-- Run in Supabase SQL Editor after Phase D.

-- ============================================================
-- Compute one tip's raw score (pre-multiplier)
-- 5 = exact result · 3 = correct winner + correct goal diff · 1 = correct winner only · 0 otherwise
-- ============================================================
CREATE OR REPLACE FUNCTION wc_score_tip(
  m_h INT, m_a INT, t_h INT, t_a INT
) RETURNS INT AS $$
BEGIN
  IF m_h IS NULL OR m_a IS NULL OR t_h IS NULL OR t_a IS NULL THEN
    RETURN 0;
  END IF;
  -- Exact
  IF t_h = m_h AND t_a = m_a THEN
    RETURN 5;
  END IF;
  -- Correct winner direction?
  IF (m_h > m_a AND t_h > t_a)
     OR (m_h < m_a AND t_h < t_a)
     OR (m_h = m_a AND t_h = t_a) THEN
    -- Correct goal difference too?
    IF (m_h - m_a) = (t_h - t_a) THEN
      RETURN 3;
    END IF;
    RETURN 1;
  END IF;
  RETURN 0;
END;
$$ LANGUAGE plpgsql IMMUTABLE;

-- ============================================================
-- Trigger: when match transitions to played (or score corrected),
-- recompute points for every tip on that match.
-- ============================================================
CREATE OR REPLACE FUNCTION wc_resolve_tips() RETURNS TRIGGER AS $$
BEGIN
  -- Trigger fires when match is marked played WITH valid goals, OR when goals are corrected
  IF NEW.played
     AND NEW.goals_home IS NOT NULL
     AND NEW.goals_away IS NOT NULL
     AND (
       OLD.played       IS DISTINCT FROM NEW.played
       OR OLD.goals_home IS DISTINCT FROM NEW.goals_home
       OR OLD.goals_away IS DISTINCT FROM NEW.goals_away
     ) THEN
    UPDATE wc_tips t
    SET
      points       = wc_score_tip(NEW.goals_home, NEW.goals_away, t.tip_home, t.tip_away),
      points_final = wc_score_tip(NEW.goals_home, NEW.goals_away, t.tip_home, t.tip_away) * NEW.multiplier,
      resolved     = TRUE,
      updated_at   = NOW()
    WHERE t.match_id = NEW.id;
  END IF;
  -- Unresolve if a match is reset (played=true → false)
  IF OLD.played = TRUE AND NEW.played = FALSE THEN
    UPDATE wc_tips t
    SET points = 0, points_final = 0, resolved = FALSE, updated_at = NOW()
    WHERE t.match_id = NEW.id;
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

DROP TRIGGER IF EXISTS wc_resolve_tips_trigger ON wc_matches;
CREATE TRIGGER wc_resolve_tips_trigger
AFTER UPDATE ON wc_matches
FOR EACH ROW EXECUTE FUNCTION wc_resolve_tips();

-- ============================================================
-- Hard guard: users can NEVER update wc_matches (results/goals)
-- Only service-role (Cloudflare Worker) is allowed to write.
-- This is implicit (no INSERT/UPDATE policy → blocked under RLS), but
-- we add a NEGATIVE policy explicitly for clarity.
-- ============================================================
-- (no-op — wc_matches has only SELECT policy; INSERT/UPDATE require service role)

-- ============================================================
-- Helper: resolve bonus questions in one call (run after tournament ends)
-- Takes the actual answers and writes points to wc_bonus rows.
-- Each correct answer = 10 pts.  (Superseded by migration_phase_k_bonus_20 → 20 pts.)
-- ============================================================
CREATE OR REPLACE FUNCTION wc_resolve_bonus(
  p_champion           TEXT,
  p_most_goals_team    TEXT,
  p_fewest_goals_team  TEXT,
  p_red_cards_bracket  TEXT,
  p_topscorer_country  TEXT
) RETURNS INT AS $$
DECLARE
  rows_updated INT;
BEGIN
  UPDATE wc_bonus b
  SET points = (
    (CASE WHEN b.champion          = p_champion          THEN 10 ELSE 0 END) +
    (CASE WHEN b.most_goals_team   = p_most_goals_team   THEN 10 ELSE 0 END) +
    (CASE WHEN b.fewest_goals_team = p_fewest_goals_team THEN 10 ELSE 0 END) +
    (CASE WHEN b.red_cards_bracket = p_red_cards_bracket THEN 10 ELSE 0 END) +
    (CASE WHEN b.topscorer_country = p_topscorer_country THEN 10 ELSE 0 END)
  ),
  resolved = TRUE,
  updated_at = NOW();
  GET DIAGNOSTICS rows_updated = ROW_COUNT;
  RETURN rows_updated;
END;
$$ LANGUAGE plpgsql;

-- ============================================================
-- Helper: resolve crypto predictions
-- Stores abs-diff to actual prices; lowest diff wins the pool slot (computed at payout time).
-- ============================================================
CREATE OR REPLACE FUNCTION wc_resolve_crypto(
  p_btc   NUMERIC,
  p_bnb   NUMERIC,
  p_bobai NUMERIC
) RETURNS INT AS $$
DECLARE
  rows_updated INT;
BEGIN
  UPDATE wc_crypto c
  SET btc_diff   = ABS(c.btc_price   - p_btc),
      bnb_diff   = ABS(c.bnb_price   - p_bnb),
      bobai_diff = ABS(c.bobai_price - p_bobai),
      resolved   = TRUE,
      updated_at = NOW();
  GET DIAGNOSTICS rows_updated = ROW_COUNT;
  RETURN rows_updated;
END;
$$ LANGUAGE plpgsql;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_e_grants.sql
==============================================================================

-- Phase E hotfix — grant service_role explicit privileges on all wc_* tables
-- Required because new sb_secret_* API keys don't get implicit table privileges
-- like the legacy service_role JWT did.

GRANT USAGE ON SCHEMA public TO service_role;
GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO service_role;
GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO service_role;
GRANT EXECUTE ON ALL FUNCTIONS IN SCHEMA public TO service_role;

-- Auto-grant to service_role for any new tables/sequences/functions we add later
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO service_role;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT USAGE, SELECT ON SEQUENCES TO service_role;
ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT EXECUTE ON FUNCTIONS TO service_role;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_g.sql
==============================================================================

-- Phase G migration — leaderboard views (overall, per-group, per-crypto)
-- Run in Supabase SQL Editor after previous migrations.

-- ============================================================
-- Per-group leaderboard: points from group-stage matches only
-- ============================================================
DROP VIEW IF EXISTS wc_leaderboard_group;
CREATE VIEW wc_leaderboard_group AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL AND u.wallet_verified) AS has_wallet,
  m.group_letter,
  COALESCE(SUM(t.points_final), 0)         AS group_points,
  COUNT(t.id)                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)     AS tips_resolved
FROM wc_users u
JOIN wc_tips t ON t.user_id = u.id
JOIN wc_matches m ON m.id = t.match_id AND m.phase = 'group'
GROUP BY u.id, u.username, u.avatar_country, u.wallet, u.wallet_verified, m.group_letter;

ALTER VIEW wc_leaderboard_group SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard_group TO anon, authenticated, service_role;

-- ============================================================
-- Per-crypto leaderboard view (one per coin, sorted by diff)
-- Returns NULL diff at the bottom (= not yet resolved or didn't predict)
-- ============================================================
DROP VIEW IF EXISTS wc_leaderboard_crypto;
CREATE VIEW wc_leaderboard_crypto AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL AND u.wallet_verified) AS has_wallet,
  c.btc_price,    c.btc_diff,
  c.bnb_price,    c.bnb_diff,
  c.bobai_price,  c.bobai_diff,
  c.resolved      AS crypto_resolved
FROM wc_users u
JOIN wc_crypto c ON c.user_id = u.id;

ALTER VIEW wc_leaderboard_crypto SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard_crypto TO anon, authenticated, service_role;

-- ============================================================
-- Refresh existing wc_leaderboard to include avatar + crypto resolved info
-- (the original view exists from base schema; we replace it to include
-- the crypto-prize-pot positions so the overall page can show them)
-- ============================================================
DROP VIEW IF EXISTS wc_leaderboard;
CREATE VIEW wc_leaderboard AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL AND u.wallet_verified) AS has_wallet,
  COALESCE(SUM(t.points_final), 0) + COALESCE(b.points, 0) AS total_points,
  COALESCE(SUM(t.points_final), 0)                          AS match_points,
  COALESCE(b.points, 0)                                     AS bonus_points,
  COUNT(t.id)                                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)                     AS tips_resolved
FROM wc_users u
LEFT JOIN wc_tips  t ON t.user_id = u.id
LEFT JOIN wc_bonus b ON b.user_id = u.id
GROUP BY u.id, u.username, u.avatar_country, u.wallet, u.wallet_verified, b.points;

ALTER VIEW wc_leaderboard SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard TO anon, authenticated, service_role;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_h_auth.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase H Auth Migration
-- Switch from synthetic-email auth (<username>@worldcup.bobai.app)
-- to real-email auth (user provides their own email; can log in via
-- username OR email; password reset via email).
--
-- Run AFTER reset_test_data.sql (since old synthetic-email users won't
-- have a real email and can't be migrated).

-- ============================================================
-- RPC: wc_username_to_email(p_username)
-- Resolves a username to the auth.users.email so client can call
-- signInWithPassword({ email, password }) when the user typed only
-- a username. SECURITY DEFINER bypasses RLS so anonymous callers
-- (pre-login) can use it.
--
-- Trade-off accepted: this exposes the email of any username someone
-- queries. Username enumeration is already possible via the "Username
-- already taken" sign-up error, so this is an acceptable widening for
-- the login UX. Supabase auth rate limiting still applies on the
-- subsequent password attempt.
-- ============================================================
CREATE OR REPLACE FUNCTION public.wc_username_to_email(p_username TEXT)
RETURNS TEXT
LANGUAGE sql
SECURITY DEFINER
SET search_path = public
AS $$
  SELECT au.email
  FROM wc_users wu
  JOIN auth.users au ON au.id = wu.auth_id
  WHERE wu.username_lc = lower(p_username)
  LIMIT 1;
$$;

REVOKE ALL ON FUNCTION public.wc_username_to_email(TEXT) FROM PUBLIC;
GRANT EXECUTE ON FUNCTION public.wc_username_to_email(TEXT) TO anon, authenticated;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_h_crypto_lock.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase H follow-up: lock crypto predictions at tournament start
--
-- Previously crypto predictions stayed editable until the FINAL kickoff, which
-- meant they could not be revealed on public profiles until after the Final.
-- New rule: crypto predictions lock when the FIRST match kicks off (same lock
-- moment as bonus). They then become publicly visible during the tournament,
-- and the leaderboard can show who's currently closest to the live price.

DROP POLICY IF EXISTS wc_crypto_insert_own ON wc_crypto;
DROP POLICY IF EXISTS wc_crypto_update_own ON wc_crypto;

CREATE POLICY wc_crypto_insert_own ON wc_crypto FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = 1) > NOW()
);

CREATE POLICY wc_crypto_update_own ON wc_crypto FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = 1) > NOW()
);

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_h_grants.sql
==============================================================================

-- Phase H hotfix — grant anon + authenticated explicit privileges on wc_* tables.
-- Required because new sb_publishable_*/sb_secret_* API keys don't get implicit
-- table privileges like the legacy JWT keys did. Without this, every INSERT
-- into wc_users (during signup) fails with "permission denied for table".
--
-- RLS policies remain the gatekeeper — these GRANTs only allow the role to
-- attempt the operation; the policy WITH CHECK still has to pass.

GRANT USAGE ON SCHEMA public TO anon, authenticated;

-- All current tables: authenticated does full CRUD (RLS scopes to owner),
-- anon is read-only (for public leaderboard / pool / matches).
GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO authenticated;
GRANT SELECT ON ALL TABLES IN SCHEMA public TO anon;

-- Sequences (BIGSERIAL columns need USAGE on the underlying sequence for INSERT)
GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO anon, authenticated;

-- Functions (RPCs like wc_username_to_email)
GRANT EXECUTE ON ALL FUNCTIONS IN SCHEMA public TO anon, authenticated;

-- Auto-apply same grants to any tables/sequences/functions added later
ALTER DEFAULT PRIVILEGES IN SCHEMA public
  GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO authenticated;
ALTER DEFAULT PRIVILEGES IN SCHEMA public
  GRANT SELECT ON TABLES TO anon;
ALTER DEFAULT PRIVILEGES IN SCHEMA public
  GRANT USAGE, SELECT ON SEQUENCES TO anon, authenticated;
ALTER DEFAULT PRIVILEGES IN SCHEMA public
  GRANT EXECUTE ON FUNCTIONS TO anon, authenticated;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_h_signup_trigger.sql
==============================================================================

-- Phase H — auto-create wc_users profile when an auth.users row is created.
-- Replaces the client-side insert (which fails when Confirm Email is on,
-- because the new user has no session yet → anon role → permission denied).
--
-- Username uniqueness is enforced by the existing unique index on
-- wc_users.username_lc — if it collides, the trigger raises an exception,
-- which rolls back the auth.users INSERT too. Net effect: signUp fails
-- with "Database error saving new user", which the client maps to
-- "Username already taken".
--
-- Signups WITHOUT a `username` in raw_user_meta_data are skipped, so this
-- trigger is safe even if other apps share this Supabase project.

CREATE OR REPLACE FUNCTION public.wc_handle_new_user()
RETURNS TRIGGER
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
DECLARE
  v_username TEXT;
  v_country  TEXT;
BEGIN
  v_username := NEW.raw_user_meta_data->>'username';
  v_country  := NEW.raw_user_meta_data->>'country';

  -- Only auto-create for users that signed up via the worldcup app
  -- (they always carry a username in user_metadata).
  IF v_username IS NULL OR v_username = '' THEN
    RETURN NEW;
  END IF;

  INSERT INTO public.wc_users (auth_id, username, avatar_country)
  VALUES (NEW.id, v_username, NULLIF(v_country, ''));

  RETURN NEW;
END;
$$;

-- Replace any prior version of the trigger
DROP TRIGGER IF EXISTS wc_on_auth_user_created ON auth.users;

CREATE TRIGGER wc_on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE FUNCTION public.wc_handle_new_user();

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_h_wallet_signature.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase H: wallet signature columns
-- Adds storage for ECDSA signature + signed message + timestamp on wc_users.
-- The user produces this signature in their own wallet (MetaMask, Trust, hardware, etc.);
-- client-side ethers.verifyMessage prevents bad data, but the authoritative check
-- happens server-side via a Cloudflare Worker before any payout.

ALTER TABLE wc_users
  ADD COLUMN IF NOT EXISTS wallet_signature TEXT,
  ADD COLUMN IF NOT EXISTS wallet_message   TEXT,
  ADD COLUMN IF NOT EXISTS wallet_signed_at TIMESTAMPTZ;

-- Re-grant updates on the new columns to authenticated role (RLS still gates per-row).
GRANT UPDATE (wallet, wallet_signature, wallet_message, wallet_signed_at, avatar_country)
  ON wc_users TO authenticated;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_i_wallet_simple.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase I: simple wallet linking
-- Removes the ECDSA-signature flow. New rules:
--   1. User just types their BEP-20 address — no signing, no gas.
--   2. Each wallet can be linked to AT MOST ONE account (UNIQUE).
--   3. Once set, the wallet is IMMUTABLE — to switch, the account is sunk.
--      Hard lock + UI confirm replaces signature verification as anti-fraud.
-- Idempotent: works whether or not the never-applied signature migration H
-- was ever run.

-- ============================================================
-- 1) Drop dependent views first (they reference wallet_verified)
-- ============================================================
DROP VIEW IF EXISTS wc_leaderboard_crypto;
DROP VIEW IF EXISTS wc_leaderboard_group;
DROP VIEW IF EXISTS wc_leaderboard;

-- ============================================================
-- 2) Drop signature columns + wallet_verified (no-op if absent)
-- ============================================================
ALTER TABLE wc_users
  DROP COLUMN IF EXISTS wallet_signature,
  DROP COLUMN IF EXISTS wallet_message,
  DROP COLUMN IF EXISTS wallet_signed_at,
  DROP COLUMN IF EXISTS wallet_verified;

-- ============================================================
-- 3) Wipe stale wallet rows (clean slate before adding UNIQUE)
-- ============================================================
UPDATE wc_users
   SET wallet = NULL
 WHERE wallet IS NOT NULL;

-- ============================================================
-- 4) UNIQUE wallet (case-insensitive, only when set)
--    Replaces the old non-unique partial index from schema.sql.
-- ============================================================
DROP INDEX IF EXISTS wc_users_wallet;
DROP INDEX IF EXISTS wc_users_wallet_unique;
CREATE UNIQUE INDEX wc_users_wallet_unique
  ON wc_users (lower(wallet))
  WHERE wallet IS NOT NULL;

-- ============================================================
-- 5) Immutability: wallet may go NULL → set, never change after that
-- ============================================================
CREATE OR REPLACE FUNCTION wc_users_immutable_check() RETURNS TRIGGER AS $$
BEGIN
  -- Service role (Cloudflare Worker / admin SQL) bypasses these checks so we
  -- can still correct mistakes manually if a user reaches out.
  IF coalesce(current_setting('request.jwt.claims', true)::json->>'role','') = 'service_role' THEN
    RETURN NEW;
  END IF;
  IF NEW.auth_id IS DISTINCT FROM OLD.auth_id THEN
    RAISE EXCEPTION 'auth_id is immutable';
  END IF;
  IF NEW.username IS DISTINCT FROM OLD.username THEN
    RAISE EXCEPTION 'username is immutable';
  END IF;
  -- Wallet: NULL → address is the ONLY allowed transition for a normal user.
  -- Changing an already-set wallet, or clearing it, requires service_role.
  IF OLD.wallet IS NOT NULL AND NEW.wallet IS DISTINCT FROM OLD.wallet THEN
    RAISE EXCEPTION 'wallet is permanent once linked — contact support to correct it';
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Trigger already exists from base schema; CREATE OR REPLACE FUNCTION above
-- is enough — no need to drop/recreate the trigger.

-- ============================================================
-- 6) Tighten column grant to the new minimal write set
--    REVOKE list only includes the column that definitely exists today.
--    Past grants on dropped columns vanished with the columns themselves.
-- ============================================================
REVOKE UPDATE (wallet, avatar_country) ON wc_users FROM authenticated;
GRANT  UPDATE (wallet, avatar_country) ON wc_users TO authenticated;

-- ============================================================
-- 7) Recreate leaderboard views without wallet_verified
--    has_wallet now == (wallet IS NOT NULL)
-- ============================================================
CREATE VIEW wc_leaderboard AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL) AS has_wallet,
  COALESCE(SUM(t.points_final), 0) + COALESCE(b.points, 0) AS total_points,
  COALESCE(SUM(t.points_final), 0)                          AS match_points,
  COALESCE(b.points, 0)                                     AS bonus_points,
  COUNT(t.id)                                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)                     AS tips_resolved
FROM wc_users u
LEFT JOIN wc_tips  t ON t.user_id = u.id
LEFT JOIN wc_bonus b ON b.user_id = u.id
GROUP BY u.id, u.username, u.avatar_country, u.wallet, b.points;

ALTER VIEW wc_leaderboard SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard TO anon, authenticated, service_role;

CREATE VIEW wc_leaderboard_group AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL) AS has_wallet,
  m.group_letter,
  COALESCE(SUM(t.points_final), 0)         AS group_points,
  COUNT(t.id)                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)     AS tips_resolved
FROM wc_users u
JOIN wc_tips t ON t.user_id = u.id
JOIN wc_matches m ON m.id = t.match_id AND m.phase = 'group'
GROUP BY u.id, u.username, u.avatar_country, u.wallet, m.group_letter;

ALTER VIEW wc_leaderboard_group SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard_group TO anon, authenticated, service_role;

CREATE VIEW wc_leaderboard_crypto AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL) AS has_wallet,
  c.btc_price,    c.btc_diff,
  c.bnb_price,    c.bnb_diff,
  c.bobai_price,  c.bobai_diff,
  c.resolved      AS crypto_resolved
FROM wc_users u
JOIN wc_crypto c ON c.user_id = u.id;

ALTER VIEW wc_leaderboard_crypto SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard_crypto TO anon, authenticated, service_role;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_j_scoring_rebalance.sql
==============================================================================

-- Phase J — Scoring rebalance (17 May 2026)
--
-- Two changes that the rules + UI already advertise:
--   1) Raw points for a winner-only tip: 1 → 2.   New ladder: 0 · 2 · 3 · 5.
--   2) Phase multipliers expanded from x1..x4 to x1..x7 so the late KO
--      matches truly swing the leaderboard.
--
-- Idempotent: safe to re-run.  Re-resolves any already-played matches under
-- the new scheme so historical points stay consistent (no-op before kickoff,
-- but correct if this is ever re-run mid-tournament).
--
-- Run in Supabase SQL Editor after Phase I.

BEGIN;

-- ============================================================
-- 1) Updated raw score function: 5 / 3 / 2 / 0
--    (was: 5 / 3 / 1 / 0)
-- ============================================================
CREATE OR REPLACE FUNCTION wc_score_tip(
  m_h INT, m_a INT, t_h INT, t_a INT
) RETURNS INT AS $$
BEGIN
  IF m_h IS NULL OR m_a IS NULL OR t_h IS NULL OR t_a IS NULL THEN
    RETURN 0;
  END IF;
  -- Exact result
  IF t_h = m_h AND t_a = m_a THEN
    RETURN 5;
  END IF;
  -- Correct winner direction?
  IF (m_h > m_a AND t_h > t_a)
     OR (m_h < m_a AND t_h < t_a)
     OR (m_h = m_a AND t_h = t_a) THEN
    -- Correct goal difference on top of correct winner?
    IF (m_h - m_a) = (t_h - t_a) THEN
      RETURN 3;
    END IF;
    RETURN 2;  -- was 1
  END IF;
  RETURN 0;
END;
$$ LANGUAGE plpgsql IMMUTABLE;

-- ============================================================
-- 2) Phase multipliers
--    Was:  group=1, r32/r16=2, qf/sf=3, 3rd/final=4
--    Now:  group=1, r32=2, r16=3, qf=4, sf=5, 3rd=6, final=7
-- ============================================================
UPDATE wc_matches SET multiplier =
  CASE phase
    WHEN 'group' THEN 1
    WHEN 'r32'   THEN 2
    WHEN 'r16'   THEN 3
    WHEN 'qf'    THEN 4
    WHEN 'sf'    THEN 5
    WHEN '3rd'   THEN 6
    WHEN 'final' THEN 7
    ELSE multiplier
  END
WHERE phase IN ('group','r32','r16','qf','sf','3rd','final');

-- ============================================================
-- 3) Retro-resolve any already-played matches under the new scheme
--    so points + points_final stay in sync.  Pre-kickoff this hits
--    zero rows; mid-tournament it brings history up to date.
-- ============================================================
UPDATE wc_tips t
SET
  points       = wc_score_tip(m.goals_home, m.goals_away, t.tip_home, t.tip_away),
  points_final = wc_score_tip(m.goals_home, m.goals_away, t.tip_home, t.tip_away) * m.multiplier,
  updated_at   = NOW()
FROM wc_matches m
WHERE t.match_id = m.id
  AND m.played = TRUE
  AND m.goals_home IS NOT NULL
  AND m.goals_away IS NOT NULL;

COMMIT;

-- Verification queries (run manually if you want to double-check):
--   SELECT phase, multiplier, COUNT(*) FROM wc_matches GROUP BY phase, multiplier ORDER BY multiplier;
--   SELECT wc_score_tip(3,2,2,1);  -- expects 2 (correct winner only)
--   SELECT wc_score_tip(3,2,2,1);  -- ↑
--   SELECT wc_score_tip(3,2,3,2);  -- expects 5 (exact)
--   SELECT wc_score_tip(3,1,2,0);  -- expects 3 (winner + goal diff)
--   SELECT wc_score_tip(1,0,0,1);  -- expects 0 (wrong winner)

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_k_bonus_20.sql
==============================================================================

-- ============================================================
-- Phase K: bump bonus question points 10 → 20
-- Each correct bonus answer now scores 20 (was 10).
-- Idempotent: CREATE OR REPLACE — safe to re-run.
-- ============================================================
CREATE OR REPLACE FUNCTION wc_resolve_bonus(
  p_champion           TEXT,
  p_most_goals_team    TEXT,
  p_fewest_goals_team  TEXT,
  p_red_cards_bracket  TEXT,
  p_topscorer_country  TEXT
) RETURNS INT AS $$
DECLARE
  rows_updated INT;
BEGIN
  UPDATE wc_bonus b
  SET points = (
    (CASE WHEN b.champion          = p_champion          THEN 20 ELSE 0 END) +
    (CASE WHEN b.most_goals_team   = p_most_goals_team   THEN 20 ELSE 0 END) +
    (CASE WHEN b.fewest_goals_team = p_fewest_goals_team THEN 20 ELSE 0 END) +
    (CASE WHEN b.red_cards_bracket = p_red_cards_bracket THEN 20 ELSE 0 END) +
    (CASE WHEN b.topscorer_country = p_topscorer_country THEN 20 ELSE 0 END)
  ),
  resolved = TRUE,
  updated_at = NOW();
  GET DIAGNOSTICS rows_updated = ROW_COUNT;
  RETURN rows_updated;
END;
$$ LANGUAGE plpgsql;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_l_md2_reopen.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase L: one-time reopen of Bonus + Crypto submissions
--
-- Original rule: bonus + crypto predictions locked at the first-match kickoff
-- (wc_matches id=1, 2026-06-11 19:00 UTC).
--
-- After MD1 we noticed late joiners had zero chance to play. Fair extension:
-- reopen Bonus + Crypto editing for everyone (existing + new users) and lock
-- finally 15 min before the first MD2 match (CZ–ZA, 2026-06-18 16:00 UTC),
-- i.e. 2026-06-18 15:45 UTC.
--
-- This is a ONE-TIME extension — the new lock is a hard-coded timestamp so it
-- isn't coupled to match IDs (cleaner; no risk of moving again if matches get
-- reshuffled).
--
-- Crypto: the scoring snapshot is still taken at the Final kickoff (19 Jul 2026
-- 19:00 UTC) — only the edit deadline moves, no re-snapshot needed.

-- BONUS
DROP POLICY IF EXISTS wc_bonus_insert_own ON wc_bonus;
DROP POLICY IF EXISTS wc_bonus_update_own ON wc_bonus;

CREATE POLICY wc_bonus_insert_own ON wc_bonus FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND NOW() < '2026-06-18 15:45+00'::timestamptz
);

CREATE POLICY wc_bonus_update_own ON wc_bonus FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND NOW() < '2026-06-18 15:45+00'::timestamptz
);

-- CRYPTO
DROP POLICY IF EXISTS wc_crypto_insert_own ON wc_crypto;
DROP POLICY IF EXISTS wc_crypto_update_own ON wc_crypto;

CREATE POLICY wc_crypto_insert_own ON wc_crypto FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND NOW() < '2026-06-18 15:45+00'::timestamptz
);

CREATE POLICY wc_crypto_update_own ON wc_crypto FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND NOW() < '2026-06-18 15:45+00'::timestamptz
);

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_m_md_staircase.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase M: matchday staircase in the group phase
--
-- Why: with a flat ×1 over the 72 group matches, many players land on the
-- same total at the end of MD3 → too many ties per payout rank. Staggering
-- MD2 and MD3 produces more distinct totals while keeping the relative
-- value of each match close to the original (no late-round shock):
--
--   MD1  ×1     (matches 1–2 in every group)
--   MD2  ×1.25  (matches 3–4)
--   MD3  ×1.5   (matches 5–6)
--   KO   ×2 → ×7  (unchanged, see migration_phase_j)
--
-- Side-effect: points_final + multiplier are no longer integers
-- (e.g. exact-score in an MD3 match = 5 × 1.5 = 7.5), so both columns
-- are widened to NUMERIC. Sums / ordering on the leaderboard view keep
-- working unchanged.
--
-- Idempotent: safe to re-run. Re-resolves any already-played matches
-- under the new scheme so historical points stay in sync (no-op before
-- MD2 kickoff, but correct if this is ever re-run mid-tournament).
--
-- Run in Supabase SQL Editor after Phase L.

BEGIN;

-- ============================================================
-- 1) Drop leaderboard views that depend on points_final
--    (Postgres blocks ALTER COLUMN TYPE on columns used by views.)
--    Views are recreated identically at the end of this migration.
-- ============================================================
DROP VIEW IF EXISTS wc_leaderboard;
DROP VIEW IF EXISTS wc_leaderboard_group;

-- ============================================================
-- 2) Widen multiplier + points_final from INT to NUMERIC
-- ============================================================
ALTER TABLE wc_matches
  ALTER COLUMN multiplier TYPE NUMERIC USING multiplier::NUMERIC;
ALTER TABLE wc_matches
  ALTER COLUMN multiplier SET DEFAULT 1;

ALTER TABLE wc_tips
  ALTER COLUMN points_final TYPE NUMERIC USING points_final::NUMERIC;
ALTER TABLE wc_tips
  ALTER COLUMN points_final SET DEFAULT 0;

-- ============================================================
-- 3) Group-phase staircase
--    Within each group, matches are ordered by kickoff time + id;
--    positions 1–2 = MD1, 3–4 = MD2, 5–6 = MD3.
--    KO phases are untouched (WHERE phase = 'group').
-- ============================================================
WITH ranked AS (
  SELECT
    id,
    ROW_NUMBER() OVER (
      PARTITION BY group_letter
      ORDER BY kickoff_utc, id
    ) AS pos
  FROM wc_matches
  WHERE phase = 'group'
)
UPDATE wc_matches m
SET multiplier = CASE
  WHEN r.pos <= 2 THEN 1
  WHEN r.pos <= 4 THEN 1.25
  ELSE                 1.5
END
FROM ranked r
WHERE m.id = r.id;

-- ============================================================
-- 4) Retro-resolve any already-played matches under the new scheme
--    so points_final stays in sync with the new multipliers.
--    Pre-MD2 this hits zero MD2/MD3 rows; safe.
-- ============================================================
UPDATE wc_tips t
SET
  points_final = wc_score_tip(m.goals_home, m.goals_away, t.tip_home, t.tip_away) * m.multiplier,
  updated_at   = NOW()
FROM wc_matches m
WHERE t.match_id = m.id
  AND m.played = TRUE
  AND m.goals_home IS NOT NULL
  AND m.goals_away IS NOT NULL;

-- ============================================================
-- 5) Recreate leaderboard views (identical to migration_phase_i)
--    Now reading the widened NUMERIC points_final column.
-- ============================================================
CREATE VIEW wc_leaderboard AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL) AS has_wallet,
  COALESCE(SUM(t.points_final), 0) + COALESCE(b.points, 0) AS total_points,
  COALESCE(SUM(t.points_final), 0)                          AS match_points,
  COALESCE(b.points, 0)                                     AS bonus_points,
  COUNT(t.id)                                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)                     AS tips_resolved
FROM wc_users u
LEFT JOIN wc_tips  t ON t.user_id = u.id
LEFT JOIN wc_bonus b ON b.user_id = u.id
GROUP BY u.id, u.username, u.avatar_country, u.wallet, b.points;

ALTER VIEW wc_leaderboard SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard TO anon, authenticated, service_role;

CREATE VIEW wc_leaderboard_group AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL) AS has_wallet,
  m.group_letter,
  COALESCE(SUM(t.points_final), 0)         AS group_points,
  COUNT(t.id)                               AS tips_count,
  COUNT(t.id) FILTER (WHERE t.resolved)     AS tips_resolved
FROM wc_users u
JOIN wc_tips t ON t.user_id = u.id
JOIN wc_matches m ON m.id = t.match_id AND m.phase = 'group'
GROUP BY u.id, u.username, u.avatar_country, u.wallet, m.group_letter;

ALTER VIEW wc_leaderboard_group SET (security_invoker = on);
GRANT SELECT ON wc_leaderboard_group TO anon, authenticated, service_role;

COMMIT;

-- Verification (run manually):
--   SELECT group_letter, multiplier, COUNT(*)
--   FROM wc_matches WHERE phase='group'
--   GROUP BY group_letter, multiplier ORDER BY group_letter, multiplier;
--   -- expect 2 rows at 1, 2 at 1.25, 2 at 1.5 per group
--
--   SELECT phase, multiplier, COUNT(*)
--   FROM wc_matches GROUP BY phase, multiplier ORDER BY multiplier;
--   -- group: 24 @ 1, 24 @ 1.25, 24 @ 1.5
--   -- r32 24 @ 2 → final 1 @ 7 (unchanged)

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_n_bonus_live.sql
==============================================================================

-- ============================================================
-- Phase N: Live bonus-resolution data
--
-- Adds two tables driven by the football-data.org sync worker so the
-- leaderboard "Bonus" view can render live winners without manual entry:
--
--   wc_scorers           — top scorers (for Golden Boot question)
--   wc_tournament_stats  — single-row counter for red cards (Q5 bracket)
--
-- Both are read-only for the public; writes go through the service-role
-- worker. Idempotent.
-- ============================================================

CREATE TABLE IF NOT EXISTS wc_scorers (
  rank          INT  PRIMARY KEY,
  player_name   TEXT NOT NULL,
  country_code  TEXT,                       -- ISO code; null if unmappable
  goals         INT  NOT NULL DEFAULT 0,
  assists       INT,
  updated_at    TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE IF NOT EXISTS wc_tournament_stats (
  id              INT PRIMARY KEY DEFAULT 1 CHECK (id = 1),
  red_cards_total INT DEFAULT 0,
  updated_at      TIMESTAMPTZ DEFAULT NOW()
);
INSERT INTO wc_tournament_stats (id) VALUES (1) ON CONFLICT DO NOTHING;

-- Per-match red-card counter so the worker can hit /matches/{id} once per
-- finished match (saving the count) and aggregate totals from cached values.
-- NULL = not yet fetched, integer = swept and counted.
ALTER TABLE wc_matches ADD COLUMN IF NOT EXISTS red_cards INT;

ALTER TABLE wc_scorers          ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_tournament_stats ENABLE ROW LEVEL SECURITY;

DROP POLICY IF EXISTS wc_scorers_read           ON wc_scorers;
DROP POLICY IF EXISTS wc_tournament_stats_read  ON wc_tournament_stats;
CREATE POLICY wc_scorers_read          ON wc_scorers          FOR SELECT USING (true);
CREATE POLICY wc_tournament_stats_read ON wc_tournament_stats FOR SELECT USING (true);

GRANT SELECT ON wc_scorers, wc_tournament_stats TO anon, authenticated;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_o_bobai_snapshot.sql
==============================================================================

-- BOBAI Worldcup '26 — Phase O: BOBAI balance snapshot for tie-breaker.
-- Adds a periodically-refreshed on-chain BOBAI balance to wc_users so the
-- leaderboard can apply the published tie-breaker rule (rules.html §7):
--   1. group_points DESC                  (the score itself)
--   2. on-chain BOBAI balance DESC        (skin-in-the-game tie-breaker)
--   3. has_wallet DESC                    (linked > non-linked)
--   4. user_id ASC                        (deterministic last-resort fallback)
--
-- PRIVACY: bobai_balance MUST NEVER be exposed to anon/authenticated. It's
-- consumed strictly inside SECURITY DEFINER RPCs which return only the
-- pre-computed `rank` + `tied_above`/`tied_below` flags (so the UI can render
-- a "holds more $BOBAI" badge without ever revealing the actual amounts).
--
-- Also used at payout time (Phase H) for the 26× holder cap and the audit PDF
-- — but the payout calculator reads a FRESH on-chain balance at lock time;
-- this column is for live display only.

BEGIN;

-- ============================================================
-- 1) New columns on wc_users
-- ============================================================
ALTER TABLE wc_users
  ADD COLUMN IF NOT EXISTS bobai_balance     NUMERIC NOT NULL DEFAULT 0,
  ADD COLUMN IF NOT EXISTS bobai_snapshot_at TIMESTAMPTZ;

-- ============================================================
-- 2) Privacy lockdown — anon/authenticated must NOT see balances
--    (existing RLS policy `wc_users_read FOR SELECT USING (true)` would
--     otherwise expose any column the role has GRANT on)
-- ============================================================
REVOKE SELECT (bobai_balance, bobai_snapshot_at) ON wc_users FROM anon, authenticated;

-- ============================================================
-- 3) Group leaderboard with tie-breaker resolved server-side
--    Returns same shape as wc_leaderboard_group + rank + tied flags.
--    bobai_balance is consumed inside this function but NEVER returned.
-- ============================================================
DROP FUNCTION IF EXISTS wc_group_leaderboard_ranked(text);

CREATE OR REPLACE FUNCTION wc_group_leaderboard_ranked(p_letter text)
RETURNS TABLE (
  user_id            bigint,
  username           text,
  avatar_country     text,
  has_wallet         boolean,
  group_letter       text,
  group_points       numeric,
  tips_count         bigint,
  tips_resolved      bigint,
  rank               int,
  tied_above         boolean,
  tied_below         boolean,
  bobai_beats_below  boolean,   -- this row beat the next-ranked row on BOBAI
  bobai_loses_above  boolean    -- this row lost to the prior-ranked row on BOBAI
)
LANGUAGE sql
STABLE
SECURITY DEFINER
SET search_path = public
AS $$
  WITH base AS (
    SELECT
      u.id                                                       AS user_id,
      u.username,
      u.avatar_country,
      (u.wallet IS NOT NULL)                                     AS has_wallet,
      m.group_letter::text                                       AS group_letter,
      COALESCE(SUM(t.points_final), 0)::numeric                  AS group_points,
      COUNT(t.id)::bigint                                        AS tips_count,
      COUNT(t.id) FILTER (WHERE t.resolved)::bigint              AS tips_resolved,
      COALESCE(u.bobai_balance, 0)::numeric                      AS bobai_balance
    FROM wc_users u
    JOIN wc_tips    t ON t.user_id = u.id
    JOIN wc_matches m ON m.id = t.match_id AND m.phase = 'group'
    WHERE m.group_letter = p_letter
    GROUP BY u.id, u.username, u.avatar_country, u.wallet, m.group_letter, u.bobai_balance
  ),
  ordered AS (
    SELECT
      *,
      ROW_NUMBER() OVER w AS rk,
      LAG(group_points)   OVER w AS prev_pts,
      LEAD(group_points)  OVER w AS next_pts,
      LAG(bobai_balance)  OVER w AS prev_bobai,
      LEAD(bobai_balance) OVER w AS next_bobai
    FROM base
    WINDOW w AS (ORDER BY group_points DESC, bobai_balance DESC, has_wallet DESC, user_id ASC)
  )
  SELECT
    user_id, username, avatar_country, has_wallet, group_letter,
    group_points, tips_count, tips_resolved,
    rk::int AS rank,
    (prev_pts IS NOT NULL AND prev_pts = group_points) AS tied_above,
    (next_pts IS NOT NULL AND next_pts = group_points) AS tied_below,
    (next_pts IS NOT NULL AND next_pts = group_points AND bobai_balance > next_bobai) AS bobai_beats_below,
    (prev_pts IS NOT NULL AND prev_pts = group_points AND bobai_balance < prev_bobai) AS bobai_loses_above
  FROM ordered
  ORDER BY rk;
$$;

REVOKE ALL ON FUNCTION wc_group_leaderboard_ranked(text) FROM PUBLIC;
GRANT EXECUTE ON FUNCTION wc_group_leaderboard_ranked(text) TO anon, authenticated, service_role;

-- ============================================================
-- 4) Overall leaderboard with tie-breaker resolved server-side
--    Mirrors wc_leaderboard shape + rank + tied flags.
-- ============================================================
DROP FUNCTION IF EXISTS wc_overall_leaderboard_ranked();

CREATE OR REPLACE FUNCTION wc_overall_leaderboard_ranked()
RETURNS TABLE (
  user_id            bigint,
  username           text,
  avatar_country     text,
  has_wallet         boolean,
  total_points       numeric,
  match_points       numeric,
  bonus_points       int,
  tips_count         bigint,
  tips_resolved      bigint,
  rank               int,
  tied_above         boolean,
  tied_below         boolean,
  bobai_beats_below  boolean,
  bobai_loses_above  boolean
)
LANGUAGE sql
STABLE
SECURITY DEFINER
SET search_path = public
AS $$
  WITH base AS (
    SELECT
      u.id                                                                       AS user_id,
      u.username,
      u.avatar_country,
      (u.wallet IS NOT NULL)                                                     AS has_wallet,
      (COALESCE(SUM(t.points_final), 0) + COALESCE(b.points, 0))::numeric        AS total_points,
      COALESCE(SUM(t.points_final), 0)::numeric                                  AS match_points,
      COALESCE(b.points, 0)::int                                                 AS bonus_points,
      COUNT(t.id)::bigint                                                        AS tips_count,
      COUNT(t.id) FILTER (WHERE t.resolved)::bigint                              AS tips_resolved,
      COALESCE(u.bobai_balance, 0)::numeric                                      AS bobai_balance
    FROM wc_users u
    LEFT JOIN wc_tips  t ON t.user_id = u.id
    LEFT JOIN wc_bonus b ON b.user_id = u.id
    GROUP BY u.id, u.username, u.avatar_country, u.wallet, b.points, u.bobai_balance
  ),
  ordered AS (
    SELECT
      *,
      ROW_NUMBER() OVER w AS rk,
      LAG(total_points)   OVER w AS prev_pts,
      LEAD(total_points)  OVER w AS next_pts,
      LAG(bobai_balance)  OVER w AS prev_bobai,
      LEAD(bobai_balance) OVER w AS next_bobai
    FROM base
    WINDOW w AS (ORDER BY total_points DESC, bobai_balance DESC, has_wallet DESC, user_id ASC)
  )
  SELECT
    user_id, username, avatar_country, has_wallet,
    total_points, match_points, bonus_points,
    tips_count, tips_resolved,
    rk::int AS rank,
    (prev_pts IS NOT NULL AND prev_pts = total_points) AS tied_above,
    (next_pts IS NOT NULL AND next_pts = total_points) AS tied_below,
    (next_pts IS NOT NULL AND next_pts = total_points AND bobai_balance > next_bobai) AS bobai_beats_below,
    (prev_pts IS NOT NULL AND prev_pts = total_points AND bobai_balance < prev_bobai) AS bobai_loses_above
  FROM ordered
  ORDER BY rk;
$$;

REVOKE ALL ON FUNCTION wc_overall_leaderboard_ranked()  FROM PUBLIC;
GRANT EXECUTE ON FUNCTION wc_overall_leaderboard_ranked() TO anon, authenticated, service_role;

-- ============================================================
-- 5) Bulk-update RPC for the hourly cron snapshot
--    Worker posts a JSON array of {id, balance} and updates in one round-trip
--    (keeps Cloudflare Workers free-tier subrequest count down — single REST
--    call instead of N PATCHes).
-- ============================================================
DROP FUNCTION IF EXISTS wc_update_bobai_snapshots(jsonb);

CREATE OR REPLACE FUNCTION wc_update_bobai_snapshots(payload jsonb)
RETURNS int
LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public
AS $$
DECLARE
  v_updated int;
BEGIN
  WITH src AS (
    SELECT
      (e->>'id')::bigint       AS id,
      (e->>'balance')::numeric AS balance
    FROM jsonb_array_elements(payload) e
  )
  UPDATE wc_users u
     SET bobai_balance     = src.balance,
         bobai_snapshot_at = NOW()
    FROM src
   WHERE u.id = src.id;
  GET DIAGNOSTICS v_updated = ROW_COUNT;
  RETURN v_updated;
END;
$$;

REVOKE ALL ON FUNCTION wc_update_bobai_snapshots(jsonb) FROM PUBLIC;
GRANT EXECUTE ON FUNCTION wc_update_bobai_snapshots(jsonb) TO service_role;

COMMIT;

-- Verification (run manually):
--   SELECT column_name, data_type FROM information_schema.columns
--   WHERE table_name='wc_users' AND column_name IN ('bobai_balance','bobai_snapshot_at');
--
--   -- Anon should NOT be able to read bobai_balance directly:
--   SET ROLE anon;
--   SELECT bobai_balance FROM wc_users LIMIT 1;   -- expect: permission denied
--   RESET ROLE;
--
--   -- RPC should return ranked rows with tied flags but no bobai column:
--   SELECT * FROM wc_group_leaderboard_ranked('A') LIMIT 5;
--   SELECT * FROM wc_overall_leaderboard_ranked() LIMIT 5;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_p_group_payouts.sql
==============================================================================

-- Phase P: Group pot payout tracking
--
-- 1. wc_payouts: per-transfer row written by the payout CLI script
--    (one row per winner per pot). End-pool/Crypto payouts use the same table.
-- 2. wc_pool.group_paid_at: single timestamp that gates the "paid out" UI
--    state across the worldcup app. Set by /admin/mark-group-paid after the
--    payout script finishes successfully.

-- =====================================================================
-- 1) wc_payouts — receipt rows
-- =====================================================================
CREATE TABLE IF NOT EXISTS wc_payouts (
  id              BIGSERIAL PRIMARY KEY,
  pot             TEXT        NOT NULL CHECK (pot IN ('group', 'end', 'crypto')),
  group_letter    TEXT        CHECK (group_letter IS NULL OR group_letter ~ '^[A-L]$'),
  position        TEXT        NOT NULL,        -- '1st' | '2nd' | 'best_3rd' | 'overall_1st' | 'overall_2nd' | 'overall_3rd' | 'overall_4th' | 'btc' | 'bnb' | 'bobai'
  user_id         BIGINT REFERENCES wc_users(id) ON DELETE SET NULL,
  username        TEXT        NOT NULL,        -- snapshot at payout time
  country_code    TEXT,                        -- snapshot at payout time
  wallet          TEXT        NOT NULL,        -- BEP-20 address (lowercased)
  bobai_amount    NUMERIC(38, 8) NOT NULL,
  usd_at_payout   NUMERIC(14, 2),
  tx_hash         TEXT,                        -- 0x… BscScan tx
  paid_at         TIMESTAMPTZ NOT NULL DEFAULT now(),
  notes           TEXT                         -- e.g. "26x cap applied", "redistributed share"
);

-- Common read patterns:
CREATE INDEX IF NOT EXISTS wc_payouts_pot_idx          ON wc_payouts (pot);
CREATE INDEX IF NOT EXISTS wc_payouts_group_letter_idx ON wc_payouts (group_letter) WHERE group_letter IS NOT NULL;
CREATE INDEX IF NOT EXISTS wc_payouts_user_idx         ON wc_payouts (user_id)      WHERE user_id IS NOT NULL;
CREATE INDEX IF NOT EXISTS wc_payouts_paid_at_idx      ON wc_payouts (paid_at DESC);

-- Public read access (TX hashes + amounts are on-chain anyway, no PII beyond
-- wallet which is also on-chain). Insert is service-role only.
ALTER TABLE wc_payouts ENABLE ROW LEVEL SECURITY;
DO $$ BEGIN
  CREATE POLICY "public read wc_payouts" ON wc_payouts FOR SELECT USING (true);
EXCEPTION WHEN duplicate_object THEN NULL; END $$;

-- =====================================================================
-- 2) wc_pool.group_paid_at — the global "paid" gate
-- =====================================================================
ALTER TABLE wc_pool
  ADD COLUMN IF NOT EXISTS group_paid_at TIMESTAMPTZ;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/migration_phase_q_penalties.sql
==============================================================================

-- Phase Q — Knockout: extra time & penalty shootouts
-- ====================================================
-- KO matches can be decided after 90 min (extra time or a penalty shootout).
-- The tip game scores the PLAYED-90-MIN result only: a 1:1 that goes to pens
-- still scores everyone's draw-tips. Extra time / penalties only decide who
-- advances and feed the bonus questions (champion, etc.) — they NEVER change
-- the match-tip points.
--
-- Data model:
--   goals_home / goals_away  = 90-minute (regular) result  -> tip scoring
--   final_home / final_away  = full result incl. ET + pens -> winner & display
--                              (NULL when the match was decided inside 90 min)
--   decided_by               = 'aet' | 'pens' | NULL        -> display label
--
-- Winner everywhere (bracket advance / elimination / champion / bonus) =
--   direction of final_* when present, else direction of goals_*.
-- Penalty tally shown in the UI = final_* - goals_* (e.g. 4:5 - 1:1 = 3:4).
--
-- The scoring trigger (wc_resolve_tips / wc_score_tip) is intentionally NOT
-- touched — it keeps scoring on goals_home/goals_away.

ALTER TABLE wc_matches ADD COLUMN IF NOT EXISTS final_home INT;
ALTER TABLE wc_matches ADD COLUMN IF NOT EXISTS final_away INT;
ALTER TABLE wc_matches ADD COLUMN IF NOT EXISTS decided_by TEXT
  CHECK (decided_by IN ('aet','pens'));

-- Backfill of the two already-played R32 shootouts (DE-PY id 73, NL-MA id 87)
-- is done out-of-band via service-role PATCH so the wc_resolve_tips trigger
-- re-scores their tips from the corrected 90-min goals. See deploy notes.

==============================================================================
=== FILE: dashboard/worldcup/app/sql/reset_test_data.sql
==============================================================================

-- BOBAI Worldcup '26 — Reset all user/test data
-- Run BEFORE public registration opens (04.06) if you want a clean slate.
-- Keeps wc_matches + wc_pool (reference data); wipes all user-created rows.
--
-- ⚠ DESTRUCTIVE: deletes ALL users including yours.
--   You'll need to re-register after running this.

BEGIN;

-- 1) Drop donation log (no FK to wc_users)
DELETE FROM wc_donations;

-- 2) Delete every Supabase auth user that has a wc_users profile.
--    FK chain: auth.users → wc_users (CASCADE) → wc_tips/wc_bonus/wc_crypto (CASCADE)
--    so this one DELETE wipes everything user-related in one shot.
DELETE FROM auth.users WHERE id IN (SELECT auth_id FROM wc_users);

-- Safety net for the historical synthetic-email accounts (pre-Phase-H).
-- These had no matching wc_users row in some failed-registration cases.
DELETE FROM auth.users WHERE email LIKE '%@worldcup.bobai.app';

-- Belt-and-suspenders: if any orphan game rows survived the cascade, kill them.
DELETE FROM wc_tips;
DELETE FROM wc_bonus;
DELETE FROM wc_crypto;
DELETE FROM wc_users;

-- 3) Reset pool counters (kept for now; will start filling from kickoff)
UPDATE wc_pool SET
  total_bobai = 0,
  group_pot   = 0,
  endpool     = 0,
  crypto_pot  = 0,
  updated_at  = NOW()
WHERE id = 1;

COMMIT;

==============================================================================
=== FILE: dashboard/worldcup/app/sql/schema.sql
==============================================================================

-- BOBAI Worldcup '26 — Beta Schema
-- Run in Supabase SQL Editor (same project as buildonbnbgame)
-- All tables prefixed wc_ to keep app data isolated

-- ============================================================
-- 1) PROFILES (linked to auth.users, username-based)
-- ============================================================
CREATE TABLE wc_users (
  id BIGSERIAL PRIMARY KEY,
  auth_id UUID UNIQUE NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  username TEXT UNIQUE NOT NULL CHECK (char_length(username) BETWEEN 3 AND 20),
  username_lc TEXT GENERATED ALWAYS AS (lower(username)) STORED,
  wallet TEXT,                        -- lowercase BEP-20 address, NULL if not connected
  wallet_verified BOOLEAN DEFAULT FALSE,
  avatar_country TEXT,                -- ISO country code (e.g. 'BR','FR','USA')
  created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE UNIQUE INDEX wc_users_username_lc ON wc_users (username_lc);
CREATE INDEX wc_users_wallet ON wc_users (wallet) WHERE wallet IS NOT NULL;

-- ============================================================
-- 2) MATCHES (static reference data, 104 entries: 72 group + 32 KO)
-- ============================================================
CREATE TABLE wc_matches (
  id INT PRIMARY KEY,                 -- 1-72 group, 73-104 KO
  phase TEXT NOT NULL,                -- 'group','r32','r16','qf','sf','3rd','final'
  group_letter CHAR(1),               -- 'A'-'L' for group, NULL for KO
  team_home TEXT,                     -- ISO or 'TBD'
  team_away TEXT,
  kickoff_utc TIMESTAMPTZ NOT NULL,
  goals_home INT,                     -- NULL until played; 90-min (regular) result -> tip scoring
  goals_away INT,
  final_home INT,                     -- KO full result incl ET+pens; NULL if decided in 90 (phase_q)
  final_away INT,
  decided_by TEXT,                    -- 'aet' | 'pens' | NULL — how a KO match was decided (phase_q)
  played BOOLEAN DEFAULT FALSE,
  multiplier NUMERIC DEFAULT 1        -- group MD1=1, MD2=1.25, MD3=1.5; r32=2, r16=3, qf=4, sf=5, 3rd=6, final=7 (rebalanced phase_j, MD staircase phase_m)
);
CREATE INDEX wc_matches_kickoff ON wc_matches (kickoff_utc);
CREATE INDEX wc_matches_phase ON wc_matches (phase);

-- ============================================================
-- 3) MATCH TIPS
-- ============================================================
CREATE TABLE wc_tips (
  id BIGSERIAL PRIMARY KEY,
  user_id BIGINT REFERENCES wc_users(id) ON DELETE CASCADE,
  match_id INT REFERENCES wc_matches(id),
  tip_home INT NOT NULL CHECK (tip_home >= 0 AND tip_home <= 30),
  tip_away INT NOT NULL CHECK (tip_away >= 0 AND tip_away <= 30),
  points INT DEFAULT 0,               -- computed after match (raw, pre-multiplier; 0/2/3/5)
  points_final NUMERIC DEFAULT 0,     -- post-multiplier (can be fractional, e.g. 5 × 1.5 = 7.5)
  resolved BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE (user_id, match_id)
);
CREATE INDEX wc_tips_user ON wc_tips (user_id);
CREATE INDEX wc_tips_match ON wc_tips (match_id);

-- ============================================================
-- 4) BONUS ANSWERS (pre-WC, 20pts each)
-- ============================================================
CREATE TABLE wc_bonus (
  user_id BIGINT PRIMARY KEY REFERENCES wc_users(id) ON DELETE CASCADE,
  champion TEXT,                      -- predicted winner (ISO code)
  most_goals_team TEXT,
  fewest_goals_team TEXT,
  red_cards_bracket TEXT,             -- '<5','5-9','10-14','15-19','>19'
  q5 TEXT,                            -- placeholder
  q6 TEXT,                            -- placeholder
  points INT DEFAULT 0,
  resolved BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- ============================================================
-- 5) CRYPTO PREDICTIONS (at final kickoff)
-- ============================================================
CREATE TABLE wc_crypto (
  user_id BIGINT PRIMARY KEY REFERENCES wc_users(id) ON DELETE CASCADE,
  btc_price NUMERIC(18,2),
  bnb_price NUMERIC(18,4),
  bobai_price NUMERIC(20,10),
  btc_diff NUMERIC,                   -- abs diff to actual, set at final-kickoff
  bnb_diff NUMERIC,
  bobai_diff NUMERIC,
  resolved BOOLEAN DEFAULT FALSE,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- ============================================================
-- 6) POOL STATE (single row)
-- ============================================================
CREATE TABLE wc_pool (
  id INT PRIMARY KEY DEFAULT 1,
  total_bobai NUMERIC DEFAULT 0,
  group_pot NUMERIC DEFAULT 0,        -- 60% during group phase
  endpool NUMERIC DEFAULT 0,          -- 30% group / 90% KO
  crypto_pot NUMERIC DEFAULT 0,       -- 10% always
  bobai_price_usd NUMERIC,            -- cached for display
  updated_at TIMESTAMPTZ DEFAULT NOW(),
  CHECK (id = 1)                      -- enforce single row
);
INSERT INTO wc_pool (id) VALUES (1) ON CONFLICT DO NOTHING;

-- ============================================================
-- 7) DONATIONS LOG
-- ============================================================
CREATE TABLE wc_donations (
  id BIGSERIAL PRIMARY KEY,
  from_address TEXT NOT NULL,
  token TEXT NOT NULL,                -- 'BNB','USDT','TAX'
  amount_in NUMERIC NOT NULL,
  amount_bobai NUMERIC,
  tx_hash TEXT UNIQUE,
  swap_tx_hash TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE INDEX wc_donations_from ON wc_donations (from_address);
CREATE INDEX wc_donations_created ON wc_donations (created_at DESC);

-- ============================================================
-- ROW LEVEL SECURITY
-- ============================================================
ALTER TABLE wc_users     ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_matches   ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_tips      ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_bonus     ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_crypto    ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_pool      ENABLE ROW LEVEL SECURITY;
ALTER TABLE wc_donations ENABLE ROW LEVEL SECURITY;

-- USERS: public can read leaderboard fields, only owner writes own row
CREATE POLICY wc_users_read       ON wc_users FOR SELECT USING (true);
CREATE POLICY wc_users_insert_own ON wc_users FOR INSERT WITH CHECK (auth.uid() = auth_id);
CREATE POLICY wc_users_update_own ON wc_users FOR UPDATE USING (auth.uid() = auth_id);

-- IMMUTABILITY: username + auth_id can NEVER change after creation
CREATE OR REPLACE FUNCTION wc_users_immutable_check() RETURNS TRIGGER AS $$
BEGIN
  -- Service role (Cloudflare Worker) bypasses all immutability checks
  IF coalesce(current_setting('request.jwt.claims', true)::json->>'role','') = 'service_role' THEN
    RETURN NEW;
  END IF;
  IF NEW.auth_id IS DISTINCT FROM OLD.auth_id THEN
    RAISE EXCEPTION 'auth_id is immutable';
  END IF;
  IF NEW.username IS DISTINCT FROM OLD.username THEN
    RAISE EXCEPTION 'username is immutable';
  END IF;
  -- Users cannot self-verify their wallet; flip happens via service-role flow
  IF NEW.wallet_verified IS DISTINCT FROM OLD.wallet_verified AND OLD.wallet_verified = FALSE THEN
    RAISE EXCEPTION 'wallet_verified can only be set via signature verification flow';
  END IF;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER wc_users_immutable BEFORE UPDATE ON wc_users
FOR EACH ROW EXECUTE FUNCTION wc_users_immutable_check();

-- MATCHES: public read-only (writes via service role)
CREATE POLICY wc_matches_read ON wc_matches FOR SELECT USING (true);

-- TIPS: public can read all (for leaderboard transparency), owner writes own
-- DB-enforced lock: tips can only be inserted/updated BEFORE match kickoff
CREATE POLICY wc_tips_read       ON wc_tips FOR SELECT USING (true);
CREATE POLICY wc_tips_insert_own ON wc_tips FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = match_id) > NOW()
);
CREATE POLICY wc_tips_update_own ON wc_tips FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = match_id) > NOW()
);

-- BONUS: public can read (for transparency), owner writes own
-- DB-enforced lock: locked once the FIRST match (id=1) has kicked off
CREATE POLICY wc_bonus_read       ON wc_bonus FOR SELECT USING (true);
CREATE POLICY wc_bonus_insert_own ON wc_bonus FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = 1) > NOW()
);
CREATE POLICY wc_bonus_update_own ON wc_bonus FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE id = 1) > NOW()
);

-- CRYPTO: public can read, owner writes own
-- DB-enforced lock: locked once the FINAL match has kicked off
CREATE POLICY wc_crypto_read       ON wc_crypto FOR SELECT USING (true);
CREATE POLICY wc_crypto_insert_own ON wc_crypto FOR INSERT WITH CHECK (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE phase = 'final' ORDER BY kickoff_utc DESC LIMIT 1) > NOW()
);
CREATE POLICY wc_crypto_update_own ON wc_crypto FOR UPDATE USING (
  user_id IN (SELECT id FROM wc_users WHERE auth_id = auth.uid())
  AND (SELECT kickoff_utc FROM wc_matches WHERE phase = 'final' ORDER BY kickoff_utc DESC LIMIT 1) > NOW()
);

-- POOL & DONATIONS: public read-only
CREATE POLICY wc_pool_read      ON wc_pool      FOR SELECT USING (true);
CREATE POLICY wc_donations_read ON wc_donations FOR SELECT USING (true);

-- ============================================================
-- LEADERBOARD VIEW (computed aggregate)
-- ============================================================
CREATE OR REPLACE VIEW wc_leaderboard AS
SELECT
  u.id            AS user_id,
  u.username,
  u.avatar_country,
  (u.wallet IS NOT NULL AND u.wallet_verified) AS has_wallet,
  COALESCE(SUM(t.points_final), 0) + COALESCE(b.points, 0) AS total_points,
  COALESCE(SUM(t.points_final), 0) AS match_points,
  COALESCE(b.points, 0) AS bonus_points,
  COUNT(t.id) FILTER (WHERE t.resolved) AS matches_resolved
FROM wc_users u
LEFT JOIN wc_tips  t ON t.user_id = u.id
LEFT JOIN wc_bonus b ON b.user_id = u.id
GROUP BY u.id, u.username, u.avatar_country, u.wallet, u.wallet_verified, b.points;

GRANT SELECT ON wc_leaderboard TO anon, authenticated;

==============================================================================
=== FILE: dashboard/worldcup/app/tips.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Auth gate — hide page + redirect anonymous visitors before first paint -->
  <style>html.wc-gate{visibility:hidden!important}</style>
  <script>
    (function(){
      document.documentElement.classList.add('wc-gate');
      function hasSession(){
        try {
          return Object.keys(localStorage).some(function(k){
            return k.indexOf('sb-')===0 && k.lastIndexOf('-auth-token')===k.length-11 && !!localStorage.getItem(k);
          });
        } catch(e){ return true; }
      }
      if (!hasSession()){ window.location.replace('/worldcup/'); return; }
      document.documentElement.classList.remove('wc-gate');
      window.addEventListener('pageshow', function(e){
        if (e.persisted && !hasSession()) window.location.replace('/worldcup/');
      });
    })();
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Tips</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:920px}
    .tipbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;background:rgba(0,0,0,.3);padding:5px;border-radius:10px}
    .tipbar button{flex:1;min-width:80px;padding:9px 8px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit}
    .tipbar button.active{background:var(--gold-glow);color:var(--gold)}

    /* Subtle group A–L jump bar — shows only when Groups view is active */
    .group-sub{display:flex;flex-wrap:wrap;gap:4px;margin:-8px 0 14px;padding:0 2px;align-items:center}
    .group-sub .lbl{font-size:10px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-right:4px}
    .group-sub button{padding:4px 9px;font-size:10.5px;font-weight:600;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--muted);border-radius:6px;cursor:pointer;transition:all .15s;font-family:inherit;letter-spacing:.3px}
    .group-sub button:hover{border-color:rgba(240,185,11,.3);color:var(--text)}
    .group-sub button.active{background:var(--gold-glow);color:var(--gold);border-color:rgba(240,185,11,.5)}
    .group-sub.hidden{display:none}

    .group-card{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
    .group-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .group-title{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--gold);letter-spacing:.5px}
    .group-meta{font-size:11px;color:var(--muted)}

    .match-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:10px 4px;border-top:1px solid var(--border)}
    .match-row.first{border-top:none}
    .match-meta{grid-column:1/-1;font-size:10.5px;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;padding-bottom:4px}
    .match-meta .multi{padding:1px 6px;border-radius:4px;font-weight:700;font-size:9px;letter-spacing:.5px}
    .match-meta .multi.x1{background:rgba(123,125,158,.2);color:var(--muted)}
    .match-meta .multi.x125{background:rgba(140,160,200,.22);color:#b8c8e8}
    .match-meta .multi.x15{background:rgba(120,180,220,.22);color:#a8d0e8}
    .match-meta .multi.x2{background:rgba(64,64,255,.15);color:#9090ff}
    .match-meta .multi.x3{background:rgba(160,64,255,.15);color:#c590ff}
    .match-meta .multi.x4{background:rgba(240,185,11,.18);color:var(--gold)}
    .match-meta .multi.x5{background:rgba(255,140,40,.18);color:#ffb070}
    .match-meta .multi.x6{background:rgba(255,80,80,.20);color:#ff9080}
    .match-meta .multi.x7{background:linear-gradient(90deg,var(--gold) 0%,#ff7040 100%);color:#000;font-weight:800}

    .tab-badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:4px;background:var(--gold);color:#000;border-radius:99px;font-size:10px;font-weight:800;line-height:1.4;vertical-align:1px}
    .tab-badge:empty{display:none}
    #phase-bar button.active .tab-badge{background:#000;color:var(--gold)}
    .match-meta .lockicon{color:#ff8580}
    .match-meta .open{color:#5fffa0}
    .match-meta .resolved{color:var(--gold)}
    .match-meta .decider{color:var(--text);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:99px;font-weight:600;white-space:nowrap}

    .team{display:flex;align-items:center;gap:8px;min-width:0}
    .team.away{justify-content:flex-end}
    .team .fl{font-size:22px;line-height:1;flex-shrink:0}
    .team .nm-block{display:flex;flex-direction:column;min-width:0;overflow:hidden;line-height:1.1}
    .team.away .nm-block{text-align:right}
    .team .nm{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .team .gscore{font-size:11px;color:var(--gold);font-weight:700;font-family:'Space Grotesk',sans-serif;letter-spacing:.3px;margin-top:1px}

    .score-cell{display:flex;align-items:center;gap:6px;flex-shrink:0}
    .score-input{width:42px;padding:7px 6px;background:rgba(0,0,0,.5);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-weight:700;text-align:center;font-family:'Space Grotesk'}
    .score-input:focus{outline:none;border-color:var(--gold)}
    .score-input:disabled{opacity:.45;cursor:not-allowed}
    .score-dash{color:var(--muted);font-weight:700}

    .save-tag{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);min-width:40px;text-align:right}
    .save-tag.dirty{color:#ffc066}
    .save-tag.ok{color:#5fffa0}
    .save-tag.err{color:#ff8580}
    .save-tag.locked{color:#ff8580}

    .points-pill{font-size:10px;font-weight:700;color:var(--gold);background:var(--gold-glow);padding:2px 7px;border-radius:99px;margin-left:6px}

    @media (max-width: 560px){
      .team .nm{font-size:11.5px}
      .score-input{width:36px;padding:6px 4px;font-size:13px}
    }
  </style>
</head>
<body>
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">
        <div data-hero="tips-hero"></div>
        <div class="card">
          <div data-card-accent="tips-ball"></div>
          <h1><span class="accent">Match Tips</span></h1>
          <p class="sub">2 pts winner · +1 goal diff · +2 exact (5 max) · ×1 → ×7 by matchday &amp; phase · locks 15 min before kickoff</p>

          <div id="alert"></div>

          <!-- View switcher -->
          <div class="tipbar" id="phase-bar">
            <button data-view="next48" class="active">⏰ Next 48h <span class="tab-badge" id="badge-next48"></span></button>
            <button data-view="group">Groups</button>
            <button data-view="r32">R32</button>
            <button data-view="r16">R16</button>
            <button data-view="qf">QF</button>
            <button data-view="sf">SF</button>
            <button data-view="3rd">3rd Place</button>
            <button data-view="final">Final</button>
          </div>

          <!-- Quick-jump to a single group, shown only when Groups view is active -->
          <div class="group-sub hidden" id="group-sub">
            <span class="lbl">Jump to</span>
            <button data-letter="all" class="active">All</button>
          </div>

          <div id="list">Loading matches…</div>
        </div>
      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    const LOCK_MIN = 15;

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    function countryLookup(code){
      return window.WC_COUNTRIES.find(c => c.code === code);
    }

    function teamCell(code, alignRight, goals){
      if (!code || code === 'TBD') {
        return `<div class="team ${alignRight?'away':''}">
          <span class="fl">⚪</span><div class="nm-block"><span class="nm" style="color:var(--muted)">TBD</span></div>
        </div>`;
      }
      const c = countryLookup(code);
      const flag = c ? c.flag : '🏳';
      const name = c ? c.name : code;
      const scoreLine = (goals !== null && goals !== undefined) ? `<span class="gscore">${goals}</span>` : '';
      if (alignRight) {
        return `<div class="team away"><div class="nm-block"><span class="nm">${name}</span>${scoreLine}</div><span class="fl">${flag}</span></div>`;
      }
      return `<div class="team"><span class="fl">${flag}</span><div class="nm-block"><span class="nm">${name}</span>${scoreLine}</div></div>`;
    }

    function fmtKickoff(iso){
      const d = new Date(iso);
      // Local TZ for display
      const opts = { weekday:'short', month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' };
      return d.toLocaleString(undefined, opts);
    }

    function isLocked(iso){
      const kickoff = new Date(iso).getTime();
      return Date.now() >= kickoff - LOCK_MIN * 60 * 1000;
    }

    function fmtPts(p){
      if (p == null) return '0';
      const n = Number(p);
      if (!Number.isFinite(n)) return '0';
      return Number.isInteger(n) ? String(n) : (+n.toFixed(2)).toString();
    }
    function multiplierCls(m){
      // Class-safe token: '1.25' → 'x125', '1.5' → 'x15', integer → 'x<n>'
      const n = Number(m);
      if (n === 1.25) return 'x125';
      if (n === 1.5)  return 'x15';
      return 'x' + n;
    }
    function multiplierLabel(m){
      return `<span class="multi ${multiplierCls(m)}">×${fmtPts(m)}</span>`;
    }

    let allMatches = [];
    let myTips = {};
    let currentView = 'next48';
    let currentGroupLetter = 'all';
    const GROUP_LETTERS = ['A','B','C','D','E','F','G','H','I','J','K','L'];

    function hasTip(m){
      const t = myTips[m.id];
      return !!(t && Number.isInteger(t.tip_home) && Number.isInteger(t.tip_away));
    }

    function isNext48(m){
      if (m.team_home === 'TBD' || m.team_away === 'TBD') return false;
      if (isLocked(m.kickoff_utc)) return false;
      const t = new Date(m.kickoff_utc).getTime();
      const now = Date.now();
      return t > now - 60*1000 && t <= now + 48*60*60*1000; // ~now to +48h
    }

    function next48Untipped(){
      return allMatches
        .filter(m => isNext48(m) && !hasTip(m))
        .sort((a,b)=> new Date(a.kickoff_utc) - new Date(b.kickoff_utc));
    }

    function refreshBadge(){
      const b = $('#badge-next48');
      const n = next48Untipped().length;
      b.textContent = n ? String(n) : '';
    }

    function parseEmoji(){
      if (!window.twemoji) return;
      try { window.twemoji.parse($('#list'), { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    function render(){
      const list = $('#list');
      list.innerHTML = '';
      refreshBadge();
      // Re-parse twemoji after DOM is built — covers every early-return path.
      queueMicrotask(parseEmoji);

      if (currentView === 'next48') {
        const items = next48Untipped();
        if (!items.length) {
          // Differentiate: nothing scheduled vs. everything already tipped
          const anyIn48 = allMatches.some(isNext48);
          if (anyIn48) {
            list.innerHTML = '<div class="alert ok" style="text-align:center;line-height:1.6">🎉 <b>You\'re up to date.</b><br><span style="opacity:.85">All matches in the next 48 hours are tipped. Switch to <b>Groups</b> / <b>R32</b> / … to plan further ahead.</span></div>';
          } else {
            list.innerHTML = '<div class="alert info" style="text-align:center;line-height:1.6">⏳ <b>No matches in the next 48 hours.</b><br><span style="opacity:.85">Check back closer to kickoff, or browse <b>Groups</b> / <b>R32</b> / … to place your tips early.</span></div>';
          }
          return;
        }
        const card = document.createElement('div');
        card.className = 'group-card';
        card.innerHTML = `<div class="group-head"><div class="group-title">⏰ Next 48 hours</div><div class="group-meta">${items.length} ${items.length===1?'match':'matches'} to tip</div></div><div class="rows"></div>`;
        const rows = card.querySelector('.rows');
        items.forEach((m, idx) => rows.appendChild(buildMatchRow(m, idx===0)));
        list.appendChild(card);
        return;
      }

      let filtered;
      if (currentView === 'group') {
        filtered = allMatches.filter(m => m.phase === 'group');
        // group by group_letter
        const byG = {};
        filtered.forEach(m => {
          byG[m.group_letter] = byG[m.group_letter] || [];
          byG[m.group_letter].push(m);
        });
        const allLetters = Object.keys(byG).sort();
        if (!allLetters.length) {
          list.innerHTML = '<div class="alert info">No matches loaded yet. Run the Phase D seed in Supabase.</div>';
          return;
        }
        const letters = currentGroupLetter === 'all'
          ? allLetters
          : allLetters.filter(L => L === currentGroupLetter);
        letters.forEach(letter => {
          const card = document.createElement('div');
          card.className = 'group-card';
          card.innerHTML = `
            <div class="group-head">
              <div class="group-title">Group ${letter}</div>
              <div class="group-meta">${byG[letter].length} matches</div>
            </div>
            <div class="rows"></div>`;
          const rows = card.querySelector('.rows');
          byG[letter].forEach((m, idx) => {
            rows.appendChild(buildMatchRow(m, idx === 0));
          });
          list.appendChild(card);
        });
      } else {
        filtered = allMatches.filter(m => m.phase === currentView);
        if (!filtered.length) {
          list.innerHTML = '<div class="alert info">No matches in this phase yet.</div>';
          return;
        }
        const card = document.createElement('div');
        card.className = 'group-card';
        const phaseName = ({ r32:'Round of 32', r16:'Round of 16', qf:'Quarter-Finals', sf:'Semi-Finals', '3rd':'Third Place', final:'Final' })[currentView] || currentView.toUpperCase();
        card.innerHTML = `<div class="group-head"><div class="group-title">${phaseName}</div><div class="group-meta">${filtered.length} matches</div></div><div class="rows"></div>`;
        const rows = card.querySelector('.rows');
        filtered.forEach((m, idx) => rows.appendChild(buildMatchRow(m, idx === 0)));
        list.appendChild(card);
      }
    }

    // KO matches decided after 90 min: tips score on the 90-min goals, this chip
    // just surfaces the decider (penalties / extra time) next to the result.
    function deciderChip(m){
      if (m.final_home == null || m.final_away == null) return '';
      if (m.decided_by === 'pens') return `<span class="decider">🥅 ${m.final_home - m.goals_home}:${m.final_away - m.goals_away} pen</span>`;
      if (m.decided_by === 'aet')  return `<span class="decider">⏱ ${m.final_home}:${m.final_away} a.e.t.</span>`;
      return '';
    }

    function buildMatchRow(m, isFirst){
      const wrap = document.createElement('div');
      wrap.className = 'match-row' + (isFirst ? ' first' : '');
      const tip = myTips[m.id];
      const locked = isLocked(m.kickoff_utc);
      const resolved = !!(tip && tip.resolved);
      const played = m.played && m.goals_home != null && m.goals_away != null;

      const status = resolved
        ? `<span class="resolved">✓ resolved <span class="points-pill">+${fmtPts(tip.points_final)}</span></span>`
        : locked
          ? `<span class="lockicon">🔒 locked</span>`
          : `<span class="open">⏱ open</span>`;

      wrap.innerHTML = `
        <div class="match-meta">
          <span>${fmtKickoff(m.kickoff_utc)}</span>
          ${multiplierLabel(m.multiplier)}
          ${status}
          ${played ? deciderChip(m) : ''}
        </div>
        ${teamCell(m.team_home, false, played ? m.goals_home : null)}
        <div class="score-cell">
          <input class="score-input s-home" type="number" min="0" max="30" inputmode="numeric"
                 value="${tip ? tip.tip_home : ''}" ${locked ? 'disabled' : ''} placeholder="–">
          <span class="score-dash">:</span>
          <input class="score-input s-away" type="number" min="0" max="30" inputmode="numeric"
                 value="${tip ? tip.tip_away : ''}" ${locked ? 'disabled' : ''} placeholder="–">
        </div>
        ${teamCell(m.team_away, true, played ? m.goals_away : null)}
        <div class="match-meta" style="padding-top:2px"><span class="save-tag ${locked?'locked':''}" data-mid="${m.id}">${locked?'locked':''}</span></div>
      `;

      // disable inputs if either team is TBD
      if (m.team_home === 'TBD' || m.team_away === 'TBD') {
        wrap.querySelectorAll('.score-input').forEach(i => { i.disabled = true; i.placeholder = '–'; });
        wrap.querySelector('.save-tag').textContent = 'awaiting draw';
      }

      const inH = wrap.querySelector('.s-home');
      const inA = wrap.querySelector('.s-away');
      const tag = wrap.querySelector('.save-tag');

      const trySave = async () => {
        const vH = inH.value.trim(), vA = inA.value.trim();
        if (vH === '' || vA === '') return;
        const nh = parseInt(vH, 10), na = parseInt(vA, 10);
        if (!Number.isInteger(nh) || !Number.isInteger(na)) return;
        tag.className = 'save-tag dirty';
        tag.textContent = 'saving…';
        const r = await window.WC_PROFILE.saveTip(m.id, nh, na);
        if (r.error) {
          tag.className = 'save-tag err';
          tag.textContent = 'failed';
          showAlert('error', `Match ${m.id}: ${r.error}`);
          return;
        }
        myTips[m.id] = { match_id: m.id, tip_home: nh, tip_away: na, points_final: 0, resolved: false };
        tag.className = 'save-tag ok';
        tag.textContent = '✓ saved';
        refreshBadge();
        setTimeout(()=>{
          if (tag.textContent === '✓ saved') tag.textContent = '';
          tag.className = 'save-tag';
          // On the Next-48h view, the just-tipped match should drop out of the list
          if (currentView === 'next48') render();
        }, 1800);
      };

      inH.addEventListener('change', trySave);
      inA.addEventListener('change', trySave);
      inH.addEventListener('blur', trySave);
      inA.addEventListener('blur', trySave);

      return wrap;
    }

    function updateGroupSubBarVisibility(){
      $('#group-sub').classList.toggle('hidden', currentView !== 'group');
    }

    function buildGroupSubBar(){
      const bar = $('#group-sub');
      if (!bar.querySelector('[data-letter="A"]')) {
        GROUP_LETTERS.forEach(L => {
          const btn = document.createElement('button');
          btn.dataset.letter = L;
          btn.textContent = L;
          bar.appendChild(btn);
        });
      }
      bar.querySelectorAll('button').forEach(b => {
        b.classList.toggle('active', b.dataset.letter === currentGroupLetter);
      });
      bar.querySelectorAll('button').forEach(b => {
        b.onclick = () => {
          currentGroupLetter = b.dataset.letter;
          buildGroupSubBar();
          render();
        };
      });
    }

    $$('#phase-bar button').forEach(b => b.addEventListener('click', () => {
      $$('#phase-bar button').forEach(x => x.classList.remove('active'));
      b.classList.add('active');
      currentView = b.dataset.view;
      updateGroupSubBarVisibility();
      render();
    }));

    (async ()=>{
      buildGroupSubBar();
      updateGroupSubBarVisibility();
      const me = await window.WC_AUTH.currentProfile();
      if (!me) { window.location.href = '/worldcup/'; return; }
      const [mr, tr] = await Promise.all([
        window.WC_PROFILE.loadMatches(),
        window.WC_PROFILE.loadMyTips(),
      ]);
      if (mr.error) { showAlert('error', mr.error); return; }
      if (tr.error) { showAlert('error', tr.error); return; }
      allMatches = mr.matches;
      myTips = tr.tips;
      render();
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/app/user.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Public archive page since 2026-07-20 (like leaderboard/prize-pool/rules) — auth gate removed -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOBAI Worldcup '26 — Player</title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="stylesheet" href="./assets/style.css?v=19">
  <style>
    .container.wide{max-width:920px}
    .card + .card{margin-top:14px}
    .profile-card{display:flex;align-items:center;gap:16px}
    .profile-meta{flex:1;min-width:0}
    .profile-meta .uname{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--text);margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .profile-meta .country{font-size:12.5px;color:var(--muted)}

    .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
    .badge.gold{background:var(--gold-glow);color:var(--gold);border:1px solid rgba(240,185,11,.3)}
    .badge.muted{background:rgba(123,125,158,.1);color:var(--muted);border:1px solid rgba(123,125,158,.2)}
    .badge.you{background:rgba(0,230,118,.1);color:#5fffa0;border:1px solid rgba(0,230,118,.3)}

    .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
    .stat{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:14px}
    .stat .lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
    .stat .val{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--gold);line-height:1.1}
    .stat .sub{font-size:11px;color:var(--muted);margin-top:4px}

    .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
    .card-h h3{font-family:'Space Grotesk';font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0}

    .subtabs{display:flex;gap:4px;margin-bottom:14px;background:rgba(0,0,0,.3);padding:4px;border-radius:10px;flex-wrap:wrap}
    .subtabs button{flex:1;min-width:90px;padding:9px 8px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;font-family:inherit}
    .subtabs button.active{background:var(--gold-glow);color:var(--gold)}

    .tip-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:10px 4px;border-top:1px solid var(--border)}
    .tip-row.first{border-top:none}
    .tip-meta{grid-column:1/-1;font-size:10.5px;color:var(--muted);text-align:center;padding-bottom:4px}
    .team{display:flex;align-items:center;gap:8px;min-width:0}
    .team.away{justify-content:flex-end}
    .team .fl{font-size:22px;line-height:1;flex-shrink:0}
    .team .nm{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .score-pill{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.5);font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--text);min-width:60px;justify-content:center}
    .score-pill.locked{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.5px;text-transform:uppercase}

    .locked-cell{padding:12px;background:rgba(255,180,0,.05);border:1px dashed rgba(255,180,0,.25);border-radius:10px;color:#ffc066;text-align:center;font-size:12px}
    .pick-list{display:flex;flex-direction:column;gap:8px}
    .pick-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;font-size:13px}
    .pick-item .lbl{color:var(--muted);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase}
    .pick-item .val{color:var(--text);font-weight:600}

    .empty-state{padding:30px 14px;text-align:center;color:var(--muted);font-size:13px}
  </style>
</head>
<body data-public="true">
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="container wide">

        <!-- PROFILE -->
        <div class="card">
          <div id="alert"></div>
          <div class="profile-card">
            <div id="t-ava"></div>
            <div class="profile-meta">
              <div class="uname">
                <span id="t-uname">…</span>
                <span id="t-self-badge" class="badge you hidden">that's you</span>
                <span id="t-wallet-badge" class="badge muted">no wallet</span>
              </div>
              <div class="country" id="t-country">—</div>
            </div>
          </div>
        </div>

        <!-- STATS -->
        <div class="card">
          <div class="card-h"><h3>Stats</h3></div>
          <div class="stats-grid">
            <div class="stat"><div class="lbl">Total points</div><div class="val" id="s-total">0</div><div class="sub">match + bonus</div></div>
            <div class="stat"><div class="lbl">Rank</div><div class="val" id="s-rank">—</div><div class="sub" id="s-rank-sub">of — players</div></div>
            <div class="stat"><div class="lbl">Match tips placed</div><div class="val" id="s-tips">0</div><div class="sub">of 104</div></div>
            <div class="stat"><div class="lbl">Bonus answered</div><div class="val" id="s-bonus">0</div><div class="sub">of 5</div></div>
          </div>
        </div>

        <!-- PROJECTED PAYOUT -->
        <div class="card">
          <div class="card-h"><h3>Projected payout</h3><span class="right">live · if standings hold</span></div>
          <p class="sub" style="text-align:left;margin:0 0 12px">
            What this player would win <b>right now</b> across all 3 pots — End-Pool, Group brackets, Crypto. Updates after every match.
          </p>
          <div id="proj-content"><div class="proj-empty">Loading projection…</div></div>
        </div>

        <!-- PICKS -->
        <div class="card">
          <div class="card-h"><h3>Picks</h3></div>
          <div class="subtabs" id="pick-tabs">
            <button data-view="tips" class="active">⚽ Match tips</button>
            <button data-view="bonus">🏆 Bonus</button>
            <button data-view="crypto">📈 Crypto</button>
          </div>
          <div id="pane-tips">Loading…</div>
          <div id="pane-bonus" class="hidden">Loading…</div>
          <div id="pane-crypto" class="hidden">Loading…</div>
        </div>

      </div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="./assets/config.js?v=12"></script>
  <script src="./assets/countries.js?v=11"></script>
  <script src="./assets/auth.js?v=13"></script>
  <script src="./assets/profile.js?v=18"></script>
  <script src="./assets/projection.js?v=5"></script>
  <script src="./assets/avatar.js?v=7"></script>
  <script src="./assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="./assets/twemojify.js?v=2"></script>
  <script>
    const $ = (s,r=document)=>r.querySelector(s);
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];

    function showAlert(type, msg){
      const el = $('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }
    function findCountry(code){ return window.WC_COUNTRIES.find(c => c.code === code) || null; }
    function fmtKickoff(iso){
      return new Date(iso).toLocaleString(undefined, { weekday:'short', month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' });
    }
    function fmtPts(p){
      if (p == null) return '0';
      const n = Number(p);
      if (!Number.isFinite(n)) return '0';
      return Number.isInteger(n) ? String(n) : (+n.toFixed(2)).toString();
    }
    // KO decider suffix (penalties / extra time). Tips score on the 90-min goals.
    function koDecider(m){
      if (m.final_home == null || m.final_away == null) return '';
      if (m.decided_by === 'pens') return ` (${m.final_home - m.goals_home}:${m.final_away - m.goals_away} pen)`;
      if (m.decided_by === 'aet')  return ` (${m.final_home}:${m.final_away} a.e.t.)`;
      return '';
    }
    function teamCell(code, alignRight){
      if (!code || code === 'TBD') {
        return `<div class="team ${alignRight?'away':''}"><span class="fl">⚪</span><span class="nm" style="color:var(--muted)">TBD</span></div>`;
      }
      const c = findCountry(code);
      const flag = c ? c.flag : '🏳';
      const name = c ? c.name : code;
      if (alignRight) return `<div class="team away"><span class="nm">${name}</span><span class="fl">${flag}</span></div>`;
      return `<div class="team"><span class="fl">${flag}</span><span class="nm">${name}</span></div>`;
    }

    /* Parse ?u= */
    const params = new URLSearchParams(window.location.search);
    const targetUsername = (params.get('u') || '').trim();

    let myProfile = null;        // current logged-in user
    let target = null;           // wc_users row of the user we're viewing
    let isSelf = false;

    /* Match-tip + bonus + crypto reveal rules:
       - Own picks: always visible
       - Others' match tips: only after each match kickoff (= 15min-locked)
       - Others' bonus picks: only after BONUS_CRYPTO_LOCK_UTC (final edit lock)
       - Others' crypto picks: only after BONUS_CRYPTO_LOCK_UTC (final edit lock)
       Even though the DB currently exposes them publicly, we honour these
       rules in the UI so visitors can't copy-tip before lock. */
    let firstMatchKickoff = null;
    let finalKickoff = null;
    const BONUS_CRYPTO_LOCK_MS = new Date(window.WC_CONFIG.BONUS_CRYPTO_LOCK_UTC).getTime();

    function canSeeTipFor(match){
      if (isSelf) return true;
      return Date.now() >= new Date(match.kickoff_utc).getTime();
    }
    function canSeeBonus(){
      if (isSelf) return true;
      return Date.now() >= BONUS_CRYPTO_LOCK_MS;
    }
    function canSeeCrypto(){
      if (isSelf) return true;
      // Crypto predictions lock at BONUS_CRYPTO_LOCK_UTC (final edit deadline),
      // so reveal them publicly at that moment.
      return Date.now() >= BONUS_CRYPTO_LOCK_MS;
    }

    async function loadTarget(){
      const sb = window.WC_SB;
      if (!targetUsername) { showAlert('error', 'No user specified. Add ?u=USERNAME to the URL.'); return false; }
      const { data, error } = await sb.from('wc_users')
        .select('id, username, avatar_country, wallet')
        .ilike('username', targetUsername)
        .maybeSingle();
      if (error || !data) { showAlert('error', 'Player "' + targetUsername + '" not found.'); return false; }
      target = data;
      return true;
    }

    function renderHeader(){
      const c = findCountry(target.avatar_country);
      $('#t-ava').innerHTML = window.WC_AVATAR.avatarHtml(target.avatar_country, 'lg');
      $('#t-uname').textContent = target.username;
      $('#t-country').textContent = c ? c.name : 'no country';
      const wb = $('#t-wallet-badge');
      if (target.wallet) wb.outerHTML = '<span id="t-wallet-badge" class="badge gold">⚽ wallet linked</span>';
      else               wb.outerHTML = '<span id="t-wallet-badge" class="badge muted">no wallet</span>';
      $('#t-self-badge').classList.toggle('hidden', !isSelf);
      document.title = 'BOBAI Worldcup \'26 — ' + target.username;
    }

    async function loadStats(){
      const sb = window.WC_SB;
      const [{ data: lb }, { count: totalUsers }, { count: tipCount }, { data: bonusRow }] = await Promise.all([
        sb.from('wc_leaderboard').select('user_id,total_points').order('total_points', { ascending: false }).limit(500),
        sb.from('wc_users').select('id', { count: 'exact', head: true }),
        sb.from('wc_tips').select('id', { count: 'exact', head: true }).eq('user_id', target.id),
        sb.from('wc_bonus').select('champion,most_goals_team,fewest_goals_team,red_cards_bracket,topscorer_country').eq('user_id', target.id).maybeSingle(),
      ]);
      let pts = 0, rank = '—';
      if (lb && lb.length) {
        const idx = lb.findIndex(r => r.user_id === target.id);
        if (idx >= 0) { pts = lb[idx].total_points || 0; rank = idx + 1; }
      }
      $('#s-total').textContent = fmtPts(pts);
      $('#s-rank').textContent = rank;
      $('#s-rank-sub').textContent = 'of ' + (totalUsers || 1) + ' player' + ((totalUsers || 1) === 1 ? '' : 's');
      $('#s-tips').textContent = tipCount || 0;
      const VALID_BRACKETS = new Set(['<5','5-9','10-14','15-19','>19']);
      const isValidBonus = (k, v) => v && (k !== 'red_cards_bracket' || VALID_BRACKETS.has(v));
      const bonusFilled = bonusRow
        ? ['champion','most_goals_team','fewest_goals_team','red_cards_bracket','topscorer_country']
            .filter(k => isValidBonus(k, bonusRow[k])).length
        : 0;
      $('#s-bonus').textContent = bonusFilled;
    }

    async function loadProjection(){
      if (!target || !window.WC_PROJECTION) return;
      window.WC_PROJECTION.injectStyles();
      const box = $('#proj-content');
      try {
        const proj = await window.WC_PROJECTION.loadAndCompute(target.id, target.wallet);
        box.innerHTML = window.WC_PROJECTION.renderHtml(proj);
      } catch (e) {
        box.innerHTML = '<div class="proj-empty">Projection unavailable.</div>';
      }
    }

    /* ============== TIPS ============== */
    async function renderTipsPane(){
      const sb = window.WC_SB;
      const [{ data: matches }, { data: tips }] = await Promise.all([
        sb.from('wc_matches').select('id, phase, group_letter, team_home, team_away, kickoff_utc, goals_home, goals_away, final_home, final_away, decided_by, played').order('kickoff_utc', { ascending: true }),
        sb.from('wc_tips').select('match_id, tip_home, tip_away, points_final, resolved').eq('user_id', target.id),
      ]);
      // pick first kickoff + final kickoff (used by reveal helpers)
      if (matches && matches.length) {
        const first = matches.find(m => m.id === 1);
        firstMatchKickoff = first ? new Date(first.kickoff_utc).getTime() : null;
        const finals = matches.filter(m => m.phase === 'final').sort((a,b)=>new Date(b.kickoff_utc)-new Date(a.kickoff_utc));
        finalKickoff = finals[0] ? new Date(finals[0].kickoff_utc).getTime() : null;
      }
      const byMatch = {};
      (tips || []).forEach(t => { byMatch[t.match_id] = t; });

      const pane = $('#pane-tips');
      if (!matches || !matches.length) { pane.innerHTML = '<div class="empty-state">No matches loaded yet.</div>'; return; }

      let visibleTipCount = 0;
      let html = '';
      let lastPhase = null;
      matches.forEach((m, i) => {
        const t = byMatch[m.id];
        if (!t) return;
        const visible = canSeeTipFor(m);
        if (visible) visibleTipCount++;
        const phaseLabel = m.phase === 'group' ? ('Group ' + m.group_letter) : m.phase.toUpperCase();
        if (m.phase !== lastPhase) {
          html += `<div style="margin:14px 0 6px;font-family:'Space Grotesk';font-weight:600;font-size:12px;color:var(--gold);letter-spacing:1px;text-transform:uppercase">${m.phase.toUpperCase()}</div>`;
          lastPhase = m.phase;
        }
        let scoreCell;
        if (!visible) {
          scoreCell = `<span class="score-pill locked">🔒 reveals at kickoff</span>`;
        } else {
          const points = m.played && t.points_final != null ? `<span style="font-size:10px;color:var(--gold);margin-left:6px">+${fmtPts(t.points_final)}p</span>` : '';
          scoreCell = `<span class="score-pill">${t.tip_home} – ${t.tip_away}${points}</span>`;
        }
        html += `<div class="tip-row">
          <div class="tip-meta">${phaseLabel} · ${fmtKickoff(m.kickoff_utc)}${m.played ? ' · played '+m.goals_home+'–'+m.goals_away+koDecider(m) : ''}</div>
          ${teamCell(m.team_home, false)}
          <div>${scoreCell}</div>
          ${teamCell(m.team_away, true)}
        </div>`;
      });
      if (!html) {
        pane.innerHTML = '<div class="empty-state">No match tips placed yet.</div>';
      } else {
        if (!isSelf) {
          const total = (tips || []).length;
          const hidden = total - visibleTipCount;
          if (hidden > 0) {
            html = `<div class="locked-cell" style="margin-bottom:12px">${hidden} of ${total} tips are still hidden — they reveal one by one as each match kicks off.</div>` + html;
          }
        }
        pane.innerHTML = html;
      }
      if (window.twemoji) try { window.twemoji.parse(pane, { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    /* ============== BONUS ============== */
    async function renderBonusPane(){
      const pane = $('#pane-bonus');
      if (!canSeeBonus()) {
        pane.innerHTML = '<div class="locked-cell">🔒 Bonus picks reveal after the final lock (18 June 2026, 15:45 UTC).</div>';
        return;
      }
      const sb = window.WC_SB;
      const { data, error } = await sb.from('wc_bonus')
        .select('champion,most_goals_team,fewest_goals_team,red_cards_bracket,topscorer_country,points,resolved')
        .eq('user_id', target.id).maybeSingle();
      if (error) { pane.innerHTML = '<div class="empty-state">Could not load bonus picks.</div>'; return; }
      if (!data) { pane.innerHTML = '<div class="empty-state">No bonus picks yet.</div>'; return; }
      const cn = code => { const c = findCountry(code); return c ? `${c.flag} ${c.name}` : (code || '—'); };
      // Final results (resolved 2026-07-20): Champion ES · Most goals FR+ENG (tie, 20 each) ·
      // Fewest goals PA (0) · Red cards 15-19 · Top scorer FR (Mbappé). Correct picks render green +20.
      const BONUS_CORRECT = { champion:['ES'], most_goals_team:['FR','ENG'], fewest_goals_team:['PA'], red_cards_bracket:['15-19'], topscorer_country:['FR'] };
      const hit  = f => !!(data.resolved && BONUS_CORRECT[f].includes(data[f]));
      const vst  = f => hit(f) ? ' style="color:#5fffa0;font-weight:700"' : '';
      const chip = f => hit(f) ? ' <span style="color:#5fffa0;font-size:10px;font-weight:700">+20</span>' : '';
      pane.innerHTML = `
        <div class="pick-list">
          <div class="pick-item"><span class="lbl">Champion</span><span class="val"${vst('champion')}>${cn(data.champion)}${chip('champion')}</span></div>
          <div class="pick-item"><span class="lbl">Most goals (team)</span><span class="val"${vst('most_goals_team')}>${cn(data.most_goals_team)}${chip('most_goals_team')}</span></div>
          <div class="pick-item"><span class="lbl">Fewest goals (team)</span><span class="val"${vst('fewest_goals_team')}>${cn(data.fewest_goals_team)}${chip('fewest_goals_team')}</span></div>
          <div class="pick-item"><span class="lbl">Red-cards bracket</span><span class="val"${vst('red_cards_bracket')}>${(['<5','5-9','10-14','15-19','>19'].includes(data.red_cards_bracket)) ? data.red_cards_bracket : '—'}${chip('red_cards_bracket')}</span></div>
          <div class="pick-item"><span class="lbl">Top scorer (country)</span><span class="val"${vst('topscorer_country')}>${cn(data.topscorer_country)}${chip('topscorer_country')}</span></div>
          ${data.resolved ? `<div class="pick-item"><span class="lbl">Bonus points</span><span class="val" style="color:var(--gold)">${data.points || 0}</span></div>` : ''}
        </div>`;
      if (window.twemoji) try { window.twemoji.parse(pane, { folder:'svg', ext:'.svg', base:'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' }); } catch(e){}
    }

    /* ============== CRYPTO ============== */
    async function renderCryptoPane(){
      const pane = $('#pane-crypto');
      if (!canSeeCrypto()) {
        pane.innerHTML = '<div class="locked-cell">🔒 Crypto predictions reveal after the final lock (18 June 2026, 15:45 UTC).</div>';
        return;
      }
      const sb = window.WC_SB;
      const { data, error } = await sb.from('wc_crypto')
        .select('btc_price,bnb_price,bobai_price,btc_diff,bnb_diff,bobai_diff,resolved')
        .eq('user_id', target.id).maybeSingle();
      if (error) { pane.innerHTML = '<div class="empty-state">Could not load crypto picks.</div>'; return; }
      if (!data) { pane.innerHTML = '<div class="empty-state">No crypto picks yet.</div>'; return; }
      const fmt = (v, dp) => v == null ? '—' : '$' + Number(v).toFixed(dp);
      // Crypto pots resolved 2026-07-20 against the frozen Final-kickoff prices
      // (BTC 64420.00 · BNB 567.47 · BOBAI 0.0000553232). Winner-take-all per coin,
      // closest wallet-linked guess with BOBAI holdings wins (26x cap): BTC _PW (12) ·
      // BNB prince27 (59) · BOBAI Beso2025 (40) — Havy was closer but holds 0 BOBAI → cap 0 → next closest.
      const CRYPTO_WINNERS = { btc: 12, bnb: 59, bobai: 40 };
      const cw   = coin => !!(data.resolved && CRYPTO_WINNERS[coin] === target.id);
      const cst  = coin => cw(coin) ? ' style="color:#5fffa0;font-weight:700"' : '';
      const ctag = coin => cw(coin) ? ' <span style="color:#5fffa0;font-size:10px;font-weight:700">🏆 closest — wins the pot</span>' : '';
      pane.innerHTML = `
        <div class="pick-list">
          <div class="pick-item"><span class="lbl">Bitcoin (BTC)</span><span class="val"${cst('btc')}>${fmt(data.btc_price, 2)}${ctag('btc')}</span></div>
          <div class="pick-item"><span class="lbl">BNB</span><span class="val"${cst('bnb')}>${fmt(data.bnb_price, 4)}${ctag('bnb')}</span></div>
          <div class="pick-item"><span class="lbl">BOBAI</span><span class="val"${cst('bobai')}>${fmt(data.bobai_price, 10)}${ctag('bobai')}</span></div>
          ${data.resolved ? `<div class="pick-item"><span class="lbl">Absolute diffs</span><span class="val">${fmt(data.btc_diff,2)} · ${fmt(data.bnb_diff,4)} · ${fmt(data.bobai_diff,10)}</span></div>` : ''}
        </div>`;
    }

    /* Tab switching */
    let loadedPanes = { tips: false, bonus: false, crypto: false };
    $$('#pick-tabs button').forEach(btn => {
      btn.addEventListener('click', async () => {
        const v = btn.dataset.view;
        $$('#pick-tabs button').forEach(x => x.classList.toggle('active', x === btn));
        $('#pane-tips').classList.toggle('hidden', v !== 'tips');
        $('#pane-bonus').classList.toggle('hidden', v !== 'bonus');
        $('#pane-crypto').classList.toggle('hidden', v !== 'crypto');
        if (!loadedPanes[v]) {
          loadedPanes[v] = true;
          if (v === 'tips') await renderTipsPane();
          if (v === 'bonus') await renderBonusPane();
          if (v === 'crypto') await renderCryptoPane();
        }
      });
    });

    (async () => {
      myProfile = await window.WC_AUTH.currentProfile();
      // Public archive page — anonymous visitors can view any profile, myProfile stays null.

      const ok = await loadTarget();
      if (!ok) return;

      isSelf = !!(myProfile && myProfile.id === target.id);
      renderHeader();
      await loadStats();
      loadProjection();  // async, populates the projected-payout card
      // load default (tips) pane
      loadedPanes.tips = true;
      await renderTipsPane();
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: dashboard/worldcup/index.html
==============================================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FIFA World Cup 2026 Crypto Tipgame — BOBAI Worldcup '26</title>
  <meta name="description" content="Free FIFA World Cup 2026 prediction game on BNB Chain. Tip every match score, answer 5 bonus questions, predict BTC/BNB/BOBAI prices. Transparent on-chain BOBAI prize pool, no signup fee, fully verifiable payouts.">
  <meta name="keywords" content="FIFA World Cup 2026 prediction game, World Cup 2026 tipgame, crypto World Cup game, BNB Chain prediction game, free crypto prize pool, BOBAI Worldcup, Brain On BNB AI, on-chain football tipping, World Cup 2026 score prediction, crypto fantasy football">
  <link rel="canonical" href="https://brainonbnb.com/worldcup/">
  <link rel="icon" type="image/png" href="/favicon.png?v=4">
  <link rel="shortcut icon" type="image/png" href="/favicon.png?v=4">
  <link rel="apple-touch-icon" href="/logo.png?v=4">
  <meta property="og:title" content="FIFA World Cup 2026 Crypto Tipgame — BOBAI Worldcup '26">
  <meta property="og:description" content="Free FIFA World Cup 2026 prediction game on BNB Chain. Predict every match + bonus questions + BTC/BNB/BOBAI prices. Transparent on-chain BOBAI prize pool, no signup fee.">
  <meta property="og:image" content="https://brainonbnb.com/worldcup/illus/og-banner.jpg">
  <meta property="og:url" content="https://brainonbnb.com/worldcup/">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="FIFA World Cup 2026 Crypto Tipgame — BOBAI Worldcup '26">
  <meta name="twitter:description" content="Free FIFA World Cup 2026 prediction game on BNB Chain. Transparent on-chain BOBAI prize pool, no signup fee.">
  <meta name="twitter:image" content="https://brainonbnb.com/worldcup/illus/og-banner.jpg">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="/worldcup/app/assets/style.css?v=19">
  <style>
    /* Landing-specific overrides on top of shared style.css */
    main{flex:1;padding:48px 24px}
    .stage{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,680px) minmax(380px,1fr);gap:40px;align-items:start}
    @media (max-width: 1024px){
      .stage{grid-template-columns:1fr;gap:24px;max-width:680px}
    }
    .illu{position:sticky;top:84px;display:flex;justify-content:center}
    .illu-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--radius);filter:drop-shadow(0 12px 40px rgba(240,185,11,.18))}
    @media (max-width: 1024px){
      .illu{position:static;max-width:360px;margin:0 auto}
    }

    .hero{text-align:center}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

    h1.hero-h1{font-family:'Space Grotesk';font-weight:700;font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px;text-align:center}
    h1.hero-h1 .accent{background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 60%,#fff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .hero-sub{font-size:clamp(15px,2vw,18px);color:var(--muted);line-height:1.6;max-width:560px;margin:0 auto 36px}

    .cd-block{margin-bottom:32px}
    .cd-title{font-family:'Space Grotesk';font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}

    /* Live Prize Pool — dezent über Countdown */
    .pool-block{margin:0 auto 28px;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 22px;background:var(--gold-glow);border:1px solid rgba(240,185,11,.22);border-radius:var(--radius);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
    .pool-block:hover{border-color:rgba(240,185,11,.45);transform:translateY(-1px)}
    .pool-title{font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px}
    .pool-title .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.8s infinite}
    .pool-values{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:center}
    .pool-bobai{font-family:'Space Grotesk';font-weight:700;font-size:20px;color:var(--text);letter-spacing:-.01em}
    .pool-bobai .unit{color:var(--gold);font-weight:600;font-size:14px;margin-left:4px}
    .pool-usd{color:var(--muted);font-size:14px;font-weight:500}
    .pool-block.loading .pool-bobai,.pool-block.loading .pool-usd{opacity:.35}
    .pool-fund{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45;text-align:center;max-width:460px}
    .pool-fund b{color:var(--gold);font-weight:600}
    .countdown{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
    .cd-cell{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;min-width:88px}
    .cd-num{font-family:'Space Grotesk';font-weight:700;font-size:32px;color:var(--gold);line-height:1}
    .cd-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px}

    .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:40px;text-align:left}
    .feat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
    .feat-icon{font-size:22px;margin-bottom:10px;display:block}
    .feat-title{font-weight:600;font-size:14px;margin-bottom:4px}
    .feat-text{font-size:12.5px;color:var(--muted);line-height:1.5}

    /* Country picker (mirrored from /app/index.html) */
    .country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;max-height:240px;overflow-y:auto;padding:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;text-align:left}
    .country-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:8px;background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;color:var(--text)}
    .country-cell:hover{background:rgba(240,185,11,.06);border-color:rgba(240,185,11,.15)}
    .country-cell.sel{background:var(--gold-glow);border-color:var(--gold)}
    .country-cell .fl{font-size:22px;line-height:1}
    .country-cell .nm{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.2}
    .country-cell.sel .nm{color:var(--gold)}

    /* Form card spacing inside the hero column */
    .auth-card{text-align:left;margin-top:0}
    .auth-card h2{font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:4px;text-align:center;color:var(--text)}
    .auth-card .sub{margin-bottom:20px}

    footer{padding:24px;text-align:center;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}
    footer a{color:var(--gold);text-decoration:none}
    footer a:hover{text-decoration:underline}

    /* Security briefing modal (shown after clicking "Create account") */
    .modal-back{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:16px}
    .modal-back.open{display:flex}
    .modal{max-width:520px;width:100%;max-height:calc(100vh - 32px);background:var(--bg);border:1px solid var(--gold);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
    .modal-body{padding:22px 22px 12px;overflow-y:auto}
    .modal h4{font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin:0 0 6px}
    .modal .lead{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 16px}
    .modal .sec-title{font-family:'Space Grotesk';font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin:14px 0 6px;display:flex;align-items:center;gap:6px}
    .modal .sec-title:first-of-type{margin-top:0}
    .modal ul.sec{list-style:none;padding:0;margin:0 0 4px;font-size:12.5px;color:var(--text);line-height:1.55}
    .modal ul.sec li{position:relative;padding:5px 0 5px 16px}
    .modal ul.sec li::before{content:'';position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6}
    .modal ul.sec a{color:var(--gold);text-decoration:none}
    .modal ul.sec a:hover{text-decoration:underline}
    .modal .check-row{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:12px;background:rgba(240,185,11,.06);border:1px solid rgba(240,185,11,.2);border-radius:8px;font-size:13px;color:var(--text);line-height:1.5;cursor:pointer}
    .modal .check-row input{margin-top:2px;flex-shrink:0;accent-color:var(--gold);cursor:pointer;width:16px;height:16px}
    .modal-actions{padding:14px 22px 18px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap}
    .modal-actions .btn{flex:1;min-width:140px}
  </style>
</head>
<body data-public="true">
  <div class="bg-grad"></div>
  <div class="page">
    <nav>
      <div class="nav">
        <a class="back-btn" href="/" title="Back to Dashboard"><span>&larr;</span> Dashboard</a>
        <a class="brand-link" href="/worldcup/">BOBAI Worldcup '26</a>
        <div class="user">Hi <b id="me-name">…</b> · <a href="#" id="logout">logout</a></div>
      </div>
      <div class="tabbar">
        <a href="./app/dashboard.html" data-tab="dashboard"><span class="ic">🏠</span> Dashboard</a>
        <a href="./app/tips.html" data-tab="tips"><span class="ic">⚽</span> Tips</a>
        <a href="./app/bonus.html" data-tab="bonus"><span class="ic">🏆</span> Bonus</a>
        <a href="./app/crypto.html" data-tab="crypto"><span class="ic">📈</span> Crypto</a>
        <a href="./app/leaderboard.html" data-tab="leaderboard"><span class="ic">📊</span> Leaderboard</a>
        <a href="./app/prize-pool.html" data-tab="prize-pool"><span class="ic">💰</span> Prize Pool</a>
        <a href="./app/rules.html" data-tab="rules"><span class="ic">📖</span> Rules</a>
      </div>
    </nav>

    <main>
      <div class="stage">
        <aside class="illu" aria-hidden="true">
          <img src="illus/left.webp" alt="" class="illu-img">
        </aside>

        <section class="hero">
          <a class="pool-block loading" id="pool-block" href="./app/prize-pool.html" title="See full prize-pool breakdown">
            <div class="pool-title"><span class="dot"></span><span>🏆 Live Prize Pool</span></div>
            <div class="pool-values">
              <div class="pool-bobai"><span id="pool-bobai">—</span><span class="unit">BOBAI</span></div>
              <div class="pool-usd">·  ≈ <span id="pool-usd">$—</span></div>
            </div>
            <div class="pool-fund" id="pool-fund">Donations + <b>0.52% BOBAI tax auto-flow</b> from Jun 11 → Jul 19</div>
          </a>

          <h1 class="hero-h1"><span class="accent">BOBAI</span><br><span class="accent">Worldcup '26</span></h1>
          <p class="hero-sub">The on-chain tipping game for World Cup 2026. Predict every match, climb the leaderboard and win from a transparent BOBAI prize pool. No middleman. No paperwork. Just call your shots.</p>

          <div class="cd-block">
            <div class="cd-title">🏆 Final Kickoff in</div>
            <div class="countdown" id="cd-kickoff" aria-live="polite">
              <div class="cd-cell"><div class="cd-num" id="k-d">--</div><div class="cd-lbl">Days</div></div>
              <div class="cd-cell"><div class="cd-num" id="k-h">--</div><div class="cd-lbl">Hours</div></div>
              <div class="cd-cell"><div class="cd-num" id="k-m">--</div><div class="cd-lbl">Minutes</div></div>
              <div class="cd-cell"><div class="cd-num" id="k-s">--</div><div class="cd-lbl">Seconds</div></div>
            </div>
          </div>

          <div class="card auth-card" id="auth">
            <h2>Sign in or create your account</h2>
            <p class="sub">Pick a username, lock in your tips, climb the leaderboard.</p>

            <div class="tabs">
              <button class="tab active" data-tab="login">Sign in</button>
              <button class="tab" data-tab="register">Register</button>
            </div>

            <div id="alert"></div>

            <!-- LOGIN -->
            <form id="form-login" class="tab-pane">
              <div class="field">
                <label>Username or Email</label>
                <input type="text" name="identifier" autocomplete="username" required>
              </div>
              <div class="field">
                <label>Password</label>
                <input type="password" name="password" autocomplete="current-password" required>
              </div>
              <button type="submit" class="btn">Sign in</button>
              <p class="sub" style="margin-top:14px;margin-bottom:0;font-size:12px;text-align:center">
                <a href="#" id="link-forgot" style="color:var(--gold)">Forgot password?</a>
              </p>
            </form>

            <!-- REGISTER -->
            <form id="form-register" class="tab-pane hidden">
              <div class="field">
                <label>Username</label>
                <input type="text" name="username" autocomplete="username" required>
                <div class="hint">3–20 chars, letters/numbers/underscore. Shown on the leaderboard.</div>
              </div>
              <div class="field">
                <label>Email</label>
                <input type="email" name="email" autocomplete="email" required>
                <div class="hint">Used only for password reset. Never shown publicly, never spammed.</div>
              </div>
              <div class="field">
                <label>Password</label>
                <input type="password" name="password" autocomplete="new-password" minlength="6" required>
                <div class="hint">Min 6 characters.</div>
              </div>
              <div class="field">
                <label>Confirm password</label>
                <input type="password" name="password_confirm" autocomplete="new-password" minlength="6" required>
                <div class="hint">Re-enter the same password.</div>
              </div>
              <div class="field">
                <label>Pick your country (avatar)</label>
                <div id="country-grid" class="country-grid"></div>
                <input type="hidden" name="country" id="country-input">
                <div class="hint">You can change this later. Picker shows team flags; your <b>avatar</b> on the dashboard + leaderboard will be rendered as <b>BOBAI in that country's national jersey</b>.</div>
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>

            <!-- FORGOT PASSWORD -->
            <form id="form-forgot" class="tab-pane hidden">
              <div class="field">
                <label>Email</label>
                <input type="email" name="email" autocomplete="email" required>
                <div class="hint">We'll send you a reset link.</div>
              </div>
              <button type="submit" class="btn">Send reset link</button>
              <p class="sub" style="margin-top:14px;margin-bottom:0;font-size:12px;text-align:center">
                <a href="#" id="link-back-login" style="color:var(--gold)">← Back to sign in</a>
              </p>
            </form>
          </div>

          <div class="features">
            <div class="feat">
              <span class="feat-icon">🏆</span>
              <div class="feat-title">104 Matches</div>
              <div class="feat-text">48 teams, 12 groups, full knockout bracket. Score every game.</div>
            </div>
            <div class="feat">
              <span class="feat-icon">💰</span>
              <div class="feat-title">On-Chain Pool</div>
              <div class="feat-text">26% of BOBAI creator tax flows into a public prize wallet.</div>
            </div>
            <div class="feat">
              <span class="feat-icon">🔍</span>
              <div class="feat-title">Fully Transparent</div>
              <div class="feat-text">Pool balance, leaderboard and payouts — all auditable on BSC.</div>
            </div>
          </div>
        </section>

        <aside class="illu" aria-hidden="true">
          <img src="illus/right.webp?v=2" alt="" class="illu-img">
        </aside>
      </div>
    </main>

    <footer>
      A <a href="/">Brain On BNB AI</a> (BOBAI) feature · brainonbnb.ai | <a href="https://brainonbnb.com">brainonbnb.com</a> · Kickoff 11 June 2026
    </footer>
  </div>

  <!-- Security briefing modal — shown after the user clicks "Create account" -->
  <div id="register-modal" class="modal-back" role="dialog" aria-modal="true" aria-labelledby="reg-modal-title">
    <div class="modal">
      <div class="modal-body">
        <h4 id="reg-modal-title">Before we create your account</h4>
        <p class="lead">BOBAI Worldcup '26 is a community game. Please read this once — it protects you and keeps the game fair for everyone.</p>

        <div class="sec-title"><span>🔐</span><span>Security</span></div>
        <ul class="sec">
          <li>BOBAI will <b>never</b> DM you anywhere. Trust only the official BOBAI channels and messages from your own CEX/DEX.</li>
          <li><b>Never</b> connect your wallet, scan a QR code, or share your seed phrase / private key in connection with BOBAI — no matter what's promised (airdrops, prizes, support…).</li>
        </ul>

        <div class="sec-title"><span>⚽</span><span>About this game</span></div>
        <ul class="sec">
          <li>Not affiliated with FIFA, Binance, or any tournament organizer.</li>
          <li>Playing is <b>always free</b>.</li>
          <li>Cheating or manipulation = <b>ban without warning</b>.</li>
          <li>We build with care, but bugs can happen — nothing is 100% guaranteed (we aim for 99.9%).</li>
          <li>Prize-pool payouts are capped at <b>26× your BOBAI balance</b>. Full details in the <a href="./app/rules.html" target="_blank" rel="noopener">Rules</a>.</li>
        </ul>

        <label class="check-row">
          <input type="checkbox" id="reg-ack">
          <span>I've read and understood the above.</span>
        </label>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn ghost" id="reg-cancel">Cancel</button>
        <button type="button" class="btn" id="reg-go" disabled>Create my account</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
  <script src="/worldcup/app/assets/config.js?v=11"></script>
  <script src="/worldcup/app/assets/countries.js?v=11"></script>
  <script src="/worldcup/app/assets/auth.js?v=13"></script>
  <script src="/worldcup/app/assets/nav.js?v=6"></script>
  <script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
  <script src="/worldcup/app/assets/twemojify.js?v=1"></script>
  <script>
    /* On the landing page itself, "Sign in · Register" should scroll to the auth
       form below instead of reloading. nav.js writes those links after fetching
       auth state, so we re-target them once they exist. */
    (function retargetAuthLinks(){
      const tryFix = () => {
        const userEl = document.querySelector('.user');
        if (!userEl) return false;
        const links = userEl.querySelectorAll('a[href="/worldcup/"]');
        if (!links.length) return false;
        links.forEach(a => { a.setAttribute('href', '#auth'); });
        return true;
      };
      if (tryFix()) return;
      // nav.js runs an async profile-fetch; poll briefly until it has rewritten the slot.
      let tries = 0;
      const t = setInterval(() => {
        if (tryFix() || ++tries > 40) clearInterval(t);
      }, 100);
    })();
  </script>
  <script>
    /* Countdown */
    const KICKOFF = new Date('2026-07-19T19:00:00Z').getTime();
    function $(id){ return document.getElementById(id); }
    function renderCountdown(){
      const diff = KICKOFF - Date.now();
      if(diff <= 0){
        $('k-d').textContent = $('k-h').textContent = $('k-m').textContent = $('k-s').textContent = '00';
        return;
      }
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      $('k-d').textContent = String(d).padStart(2,'0');
      $('k-h').textContent = String(h).padStart(2,'0');
      $('k-m').textContent = String(m).padStart(2,'0');
      $('k-s').textContent = String(s).padStart(2,'0');
    }
    renderCountdown();
    setInterval(renderCountdown, 1000);

    /* Live prize-pool ticker — public anon read on wc_pool */
    function fmtBobai(n){
      if (n >= 1e9) return (n/1e9).toFixed(2)+'B';
      if (n >= 1e6) return (n/1e6).toFixed(2)+'M';
      if (n >= 1e3) return (n/1e3).toFixed(1)+'K';
      return Math.round(n).toLocaleString('en-US');
    }
    function fmtUsd(n){
      if (n >= 1000) return '$'+Math.round(n).toLocaleString('en-US');
      return '$'+n.toFixed(2);
    }
    // wc_pool is a frozen WC26 archive snapshot — the BOBAI amount never changes,
    // but the USD equivalent keeps tracking the live GeckoTerminal price (the
    // stored snapshot price is only the fallback when the feed is down).
    let livePx = 0;
    async function fetchLivePx(){
      try {
        const r = await fetch('https://api.geckoterminal.com/api/v2/networks/bsc/pools/0x6eadd4cb786898b34929444988380ed0cc6fd9a6');
        const j = await r.json();
        const v = parseFloat(j?.data?.attributes?.base_token_price_usd) || 0;
        if (v > 0) livePx = v;
      } catch (_) {/* keep last good value */}
      return livePx;
    }
    async function loadPool(){
      try {
        const cfg = window.WC_CONFIG;
        const url = `${cfg.SUPABASE_URL}/rest/v1/wc_pool?id=eq.1&select=total_bobai,bobai_price_usd`;
        const res = await fetch(url, { headers: { apikey: cfg.SUPABASE_ANON_KEY, Accept: 'application/json' } });
        if (!res.ok) return;
        const rows = await res.json();
        const p = Array.isArray(rows) ? rows[0] : null;
        if (!p) return;
        const total = parseFloat(p.total_bobai) || 0;
        const live = await fetchLivePx();
        const price = live > 0 ? live : (parseFloat(p.bobai_price_usd) || 0);
        $('pool-bobai').textContent = fmtBobai(total);
        $('pool-usd').textContent = price > 0 ? fmtUsd(total * price) : 'n/a';
        document.getElementById('pool-block').classList.remove('loading');
      } catch (_) {/* silent — block stays hidden in loading state */}
    }
    loadPool();
    setInterval(loadPool, 30000);

    /* Auth form (mirrors /worldcup/app/index.html) */
    const $$ = (s,r=document)=>[...r.querySelectorAll(s)];
    const qs = (s,r=document)=>r.querySelector(s);

    function showAlert(type, msg){
      const el = qs('#alert');
      el.innerHTML = msg ? `<div class="alert ${type}">${msg}</div>` : '';
    }

    /* Render country grid */
    (function renderCountries(){
      const grid = qs('#country-grid');
      const cInput = qs('#country-input');
      if (!grid || !window.WC_COUNTRIES) return;
      window.WC_COUNTRIES.forEach(c => {
        const b = document.createElement('button');
        b.type = 'button';
        b.className = 'country-cell';
        b.dataset.code = c.code;
        b.innerHTML = `<span class="fl">${c.flag}</span><span class="nm">${c.name}</span>`;
        b.addEventListener('click', ()=>{
          $$('.country-cell').forEach(x=>x.classList.remove('sel'));
          b.classList.add('sel');
          cInput.value = c.code;
        });
        grid.appendChild(b);
      });
    })();

    /* Tab switching */
    function showPane(which){
      $$('.tab').forEach(x=>x.classList.toggle('active', x.dataset.tab===which));
      qs('#form-login').classList.toggle('hidden', which!=='login');
      qs('#form-register').classList.toggle('hidden', which!=='register');
      qs('#form-forgot').classList.toggle('hidden', which!=='forgot');
      showAlert();
    }
    $$('.tab').forEach(t=>t.addEventListener('click',()=>showPane(t.dataset.tab)));
    qs('#link-forgot').addEventListener('click', (e)=>{ e.preventDefault(); showPane('forgot'); });
    qs('#link-back-login').addEventListener('click', (e)=>{ e.preventDefault(); showPane('login'); });

    /* Login */
    qs('#form-login').addEventListener('submit', async (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Signing in…';
      const r = await window.WC_AUTH.login({
        identifier: fd.get('identifier'),
        password: fd.get('password'),
      });
      btn.disabled = false; btn.textContent = 'Sign in';
      if (r.error) { showAlert('error', r.error); return; }
      window.location.href = './app/dashboard.html';
    });

    /* Register — open the security-briefing modal first, then actually register */
    const regModal = qs('#register-modal');
    const regAck = qs('#reg-ack');
    const regGo = qs('#reg-go');
    const regCancel = qs('#reg-cancel');
    let pendingRegister = null; // { username, email, password, passwordConfirm, country }

    function openRegModal(){
      regAck.checked = false;
      regGo.disabled = true;
      regGo.textContent = 'Create my account';
      regModal.classList.add('open');
      regModal.querySelector('.modal-body').scrollTop = 0;
    }
    function closeRegModal(){
      regModal.classList.remove('open');
    }

    regAck.addEventListener('change', ()=>{ regGo.disabled = !regAck.checked; });
    regCancel.addEventListener('click', ()=>{ closeRegModal(); pendingRegister = null; });
    regModal.addEventListener('click', (e)=>{ if (e.target === regModal) { closeRegModal(); pendingRegister = null; } });

    qs('#form-register').addEventListener('submit', (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      if (!fd.get('country')) {
        showAlert('error', 'Please pick your country flag below.');
        document.getElementById('country-grid').scrollIntoView({ behavior:'smooth', block:'center' });
        return;
      }
      pendingRegister = {
        username: fd.get('username'),
        email: fd.get('email'),
        password: fd.get('password'),
        passwordConfirm: fd.get('password_confirm'),
        country: fd.get('country'),
      };
      openRegModal();
    });

    regGo.addEventListener('click', async ()=>{
      if (!regAck.checked || !pendingRegister) return;
      regGo.disabled = true; regGo.textContent = 'Creating…';
      const r = await window.WC_AUTH.register(pendingRegister);
      regGo.disabled = false; regGo.textContent = 'Create my account';
      if (r.error) {
        closeRegModal();
        showAlert('error', r.error);
        return;
      }
      const email = pendingRegister.email;
      pendingRegister = null;
      closeRegModal();
      if (r.needsConfirmation) {
        const safeEmail = email.replace(/[&<>"]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
        showAlert('ok', `📧 <b>Check your email</b> — we sent a confirmation link to <b style="word-break:break-all">${safeEmail}</b>. Click the link to activate your account, then sign in below.<br><br>⚠ <b>Don't see it?</b> Check your <b>spam / junk</b> folder — confirmation mails sometimes land there.`);
        requestAnimationFrame(() => {
          const alertEl = document.getElementById('alert');
          if (!alertEl) return;
          // Measure entire <nav> (includes .nav 58px + .tabbar 37px on landing page)
          const navEl = document.querySelector('nav');
          const navH = navEl ? navEl.offsetHeight : 58;
          const top = alertEl.getBoundingClientRect().top + window.pageYOffset - navH - 16;
          window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
        });
        return;
      }
      showAlert('ok', 'Account created — redirecting…');
      setTimeout(()=>{ window.location.href = './app/dashboard.html'; }, 700);
    });

    /* Forgot password */
    qs('#form-forgot').addEventListener('submit', async (e)=>{
      e.preventDefault();
      showAlert();
      const fd = new FormData(e.target);
      const btn = e.target.querySelector('button[type="submit"]');
      btn.disabled = true; btn.textContent = 'Sending…';
      const r = await window.WC_AUTH.resetPasswordRequest(fd.get('email'));
      btn.disabled = false; btn.textContent = 'Send reset link';
      if (r.error) { showAlert('error', r.error); return; }
      showAlert('ok', 'If an account exists for that email, a reset link has been sent. Check your inbox.');
    });

    /* If already logged in, jump straight to the app dashboard */
    (async ()=>{
      const p = await window.WC_AUTH.currentProfile();
      if (p) window.location.href = './app/dashboard.html';
    })();
  </script>
</body>
</html>

==============================================================================
=== FILE: worker-wc/index.js
==============================================================================

// $BOBAI Worldcup '26 — Live Sync + Admin Worker
// Sync match results from football-data.org → wc_matches.
// DB trigger (Phase E migration) auto-scores tips when match.played flips to true.

// ============================================================
// Team-name → our country-code map (football-data.org → wc_countries.code)
// ============================================================
const TEAM_MAP = {
  'Algeria': 'DZ',
  'Argentina': 'AR',
  'Australia': 'AU',
  'Austria': 'AT',
  'Belgium': 'BE',
  'Bosnia and Herzegovina': 'BA',
  'Bosnia-Herzegovina': 'BA',
  'Brazil': 'BR',
  'Canada': 'CA',
  'Cape Verde': 'CV',
  'Cabo Verde': 'CV',
  'Cape Verde Islands': 'CV',
  'Colombia': 'CO',
  'Croatia': 'HR',
  'Curaçao': 'CW',
  'Curacao': 'CW',
  'Czech Republic': 'CZ',
  'Czechia': 'CZ',
  'DR Congo': 'CD',
  'Congo DR': 'CD',
  'Democratic Republic of the Congo': 'CD',
  'Ecuador': 'EC',
  'Egypt': 'EG',
  'England': 'ENG',
  'France': 'FR',
  'Germany': 'DE',
  'Ghana': 'GH',
  'Haiti': 'HT',
  'Iran': 'IR',
  'Iraq': 'IQ',
  'Ivory Coast': 'CI',
  "Côte d'Ivoire": 'CI',
  'Cote d Ivoire': 'CI',
  'Japan': 'JP',
  'Jordan': 'JO',
  'Mexico': 'MX',
  'Morocco': 'MA',
  'Netherlands': 'NL',
  'New Zealand': 'NZ',
  'Norway': 'NO',
  'Panama': 'PA',
  'Paraguay': 'PY',
  'Portugal': 'PT',
  'Qatar': 'QA',
  'Saudi Arabia': 'SA',
  'Scotland': 'SCO',
  'Senegal': 'SN',
  'South Africa': 'ZA',
  'South Korea': 'KR',
  'Korea Republic': 'KR',
  'Spain': 'ES',
  'Sweden': 'SE',
  'Switzerland': 'CH',
  'Tunisia': 'TN',
  'Türkiye': 'TR',
  'Turkey': 'TR',
  'United States': 'US',
  'USA': 'US',
  'Uruguay': 'UY',
  'Uzbekistan': 'UZ',
};

function teamToCode(name){
  if (!name) return null;
  if (TEAM_MAP[name]) return TEAM_MAP[name];
  // Case-insensitive fallback
  const lc = name.toLowerCase();
  for (const k in TEAM_MAP) if (k.toLowerCase() === lc) return TEAM_MAP[k];
  return null;
}

// ============================================================
// Supabase REST helpers (service-role bypasses RLS)
// ============================================================
async function sbReq(env, method, path, body){
  const url = env.SUPABASE_URL + '/rest/v1/' + path;
  const headers = {
    'apikey':        env.SUPABASE_SERVICE_ROLE_KEY,
    'Authorization': 'Bearer ' + env.SUPABASE_SERVICE_ROLE_KEY,
    'Content-Type':  'application/json',
    'Prefer':        'return=representation',
  };
  const res = await fetch(url, { method, headers, body: body ? JSON.stringify(body) : undefined });
  const text = await res.text();
  let json = null;
  try { json = text ? JSON.parse(text) : null; } catch {}
  return { ok: res.ok, status: res.status, body: json, text };
}

async function listOurMatches(env){
  const r = await sbReq(env, 'GET',
    'wc_matches?select=id,phase,group_letter,team_home,team_away,kickoff_utc,goals_home,goals_away,final_home,final_away,decided_by,played,match_number&order=kickoff_utc.asc');
  if (!Array.isArray(r.body)) {
    console.log('[SB] listOurMatches non-array:', r.status, JSON.stringify(r.body));
    return [];
  }
  return r.body;
}

async function updateMatch(env, id, fields){
  return sbReq(env, 'PATCH', 'wc_matches?id=eq.' + id, fields);
}

// ============================================================
// Top-scorers sync — feeds the "Golden Boot" bonus question
// ============================================================
async function syncScorers(env){
  if (!env.FOOTBALL_DATA_API_KEY) return { ok: false, skipped: 'no api key' };
  const url = `https://api.football-data.org/v4/competitions/${env.FOOTBALL_DATA_COMPETITION || 'WC'}/scorers?limit=20`;
  let res;
  try {
    res = await fetch(url, {
      headers: { 'X-Auth-Token': env.FOOTBALL_DATA_API_KEY, 'Accept': 'application/json' },
    });
  } catch (e) {
    return { ok: false, error: 'fetch failed: ' + e.message };
  }
  if (!res.ok) return { ok: false, error: `football-data.org returned ${res.status}` };
  const json = await res.json();
  const scorers = json.scorers || [];

  // Rank by (goals desc, then player_id asc to keep ties stable across syncs).
  // football-data returns them already sorted but we re-rank defensively.
  const ranked = scorers
    .map(s => ({
      player_name: s.player?.name || 'Unknown',
      country_code: teamToCode(s.team?.name) || null,
      goals: Number(s.numberOfGoals || s.goals || 0),
      assists: s.assists != null ? Number(s.assists) : null,
    }))
    .sort((a, b) => b.goals - a.goals || a.player_name.localeCompare(b.player_name))
    .slice(0, 20);

  // Wipe + re-insert (table is tiny, this is the simplest "current top N" semantics).
  await sbReq(env, 'DELETE', 'wc_scorers?rank=gte.0');
  if (ranked.length) {
    const payload = ranked.map((s, i) => ({ ...s, rank: i + 1, updated_at: new Date().toISOString() }));
    await sbReq(env, 'POST', 'wc_scorers', payload);
  }
  return { ok: true, count: ranked.length };
}

// ============================================================
// Red-cards sync — feeds the "Total red cards" bonus question.
// football-data.org's per-match `bookings[]` only exists on the TIER_ONE
// plan. On the free tier it's omitted entirely → we fall back to whatever
// was last set via /admin/set-red-cards (manual override). Either way the
// public read goes through wc_tournament_stats.
// ============================================================
// Per-match cached red-cards aggregation. Strategy:
//   1. Match the remote /matches list against our wc_matches and find the
//      FINISHED matches that still have red_cards=NULL in our DB.
//   2. Fetch up to RC_BATCH of them via /matches/{id} and write the count.
//      The free tier's per-match endpoint returns bookings — the LIST
//      endpoint strips them. Rate-limit ≈ 10/min, 100/day; 8/cron is safe.
//   3. Recompute red_cards_total = SUM(wc_matches.red_cards).
// This converges to the true total within a few cron cycles even on free
// tier; once a match has a cached count, it never gets fetched again.
const RC_BATCH = 8;
async function syncRedCards(env){
  if (!env.FOOTBALL_DATA_API_KEY) return { ok: false, skipped: 'no api key' };
  const auth = { 'X-Auth-Token': env.FOOTBALL_DATA_API_KEY, 'Accept': 'application/json' };
  const comp = env.FOOTBALL_DATA_COMPETITION || 'WC';

  // Pull the list (matches, kickoffs) — we already do this elsewhere but
  // syncRedCards may run standalone too.
  let res;
  try {
    res = await fetch(`https://api.football-data.org/v4/competitions/${comp}/matches`, { headers: auth });
  } catch (e) {
    return { ok: false, error: 'fetch failed: ' + e.message };
  }
  if (!res.ok) return { ok: false, error: `football-data.org returned ${res.status}` };
  const list = await res.json();
  const remoteMatches = list.matches || [];

  // Our local matches with their cached red_cards (NULL = needs fetching).
  const ourRows = await sbReq(env, 'GET', 'wc_matches?select=id,phase,group_letter,team_home,team_away,kickoff_utc,red_cards');
  const ours = Array.isArray(ourRows.body) ? ourRows.body : [];

  // Build a small lookup: only FINISHED remote matches that we haven't
  // counted yet. We need the remote ID for the per-match call AND our
  // local row's ID to write back.
  const todo = [];
  for (const r of remoteMatches) {
    if (r.status !== 'FINISHED') continue;
    const localMatch = findOurMatch(r, ours);
    if (!localMatch) continue;
    if (localMatch.red_cards != null) continue;   // already counted
    todo.push({ remoteId: r.id, localId: localMatch.id });
  }

  // 1st pass: see if list-payload already had bookings (paid tiers); if so,
  // we'd never get into the per-match path. Run both — cheap.
  let sweptInline = 0;
  for (const r of remoteMatches) {
    if (r.status !== 'FINISHED' || !Array.isArray(r.bookings)) continue;
    const localMatch = findOurMatch(r, ours);
    if (!localMatch || localMatch.red_cards != null) continue;
    await updateMatch(env, localMatch.id, { red_cards: countReds(r.bookings) });
    sweptInline++;
  }

  // 2nd pass: per-match fetch (batched).
  let sweptPerMatch = 0, lastErr = null;
  for (const job of todo.slice(0, RC_BATCH)) {
    try {
      const d = await fetch(`https://api.football-data.org/v4/matches/${job.remoteId}`, { headers: auth });
      if (!d.ok) { lastErr = `match ${job.remoteId} HTTP ${d.status}`; continue; }
      const dj = await d.json();
      const m = dj.match || dj;
      const bookings = Array.isArray(m.bookings) ? m.bookings : null;
      if (bookings == null) { lastErr = `match ${job.remoteId} no bookings field`; continue; }
      await updateMatch(env, job.localId, { red_cards: countReds(bookings) });
      sweptPerMatch++;
    } catch (e) {
      lastErr = `match ${job.remoteId}: ${e.message}`;
    }
  }

  // Aggregate from cached per-match counts (NULL = 0). CRITICAL: only
  // overwrite the public total if we actually have something to write —
  // otherwise the free-tier "no bookings field" case would silently clobber
  // any manual /admin/set-red-cards override back to 0 on every cron tick.
  const sumRows = await sbReq(env, 'GET', 'wc_matches?select=red_cards');
  let cachedCount = 0, total = 0;
  for (const row of (Array.isArray(sumRows.body) ? sumRows.body : [])) {
    if (row.red_cards != null) { total += Number(row.red_cards) || 0; cachedCount++; }
  }
  if (cachedCount > 0) {
    await sbReq(env, 'PATCH', 'wc_tournament_stats?id=eq.1', {
      red_cards_total: total,
      updated_at: new Date().toISOString(),
    });
    return { ok: true, total, sweptInline, sweptPerMatch, cachedCount, todoRemaining: Math.max(0, todo.length - sweptPerMatch), lastErr, source: 'auto' };
  }
  // No per-match data at all → keep whatever was last written (typically a
  // manual override). Don't PATCH.
  return { ok: true, total: null, sweptInline, sweptPerMatch, cachedCount: 0, todoRemaining: Math.max(0, todo.length - sweptPerMatch), lastErr, source: 'kept manual (no cached match data yet)' };
}

function countReds(bookings){
  let n = 0;
  for (const b of bookings) {
    const card = (b.card || '').toUpperCase();
    if (card === 'RED' || card === 'RED_CARD' || card === 'SECOND_YELLOW' || card === 'SECOND_YELLOW_CARD') n++;
  }
  return n;
}

// ============================================================
// football-data.org fetch
// ============================================================
async function fetchFromFootballData(env){
  if (!env.FOOTBALL_DATA_API_KEY) {
    return { error: 'FOOTBALL_DATA_API_KEY not configured.' };
  }
  const url = `https://api.football-data.org/v4/competitions/${env.FOOTBALL_DATA_COMPETITION || 'WC'}/matches`;
  const res = await fetch(url, {
    headers: { 'X-Auth-Token': env.FOOTBALL_DATA_API_KEY, 'Accept': 'application/json' },
  });
  if (!res.ok) {
    return { error: `football-data.org returned ${res.status}` };
  }
  const json = await res.json();
  return { matches: json.matches || [] };
}

// ============================================================
// Match identifier — used to find OUR row that corresponds to a remote match
//   1) GROUP_STAGE: match by (group_letter, sorted-team-codes)
//   2) KO stage: by (phase, kickoff_utc within ±2h)  — KO teams in our DB are TBD until draw
// ============================================================
function ourPhaseFromRemote(stage){
  switch (stage) {
    case 'GROUP_STAGE': return 'group';
    case 'LAST_32':
    case 'ROUND_OF_32': return 'r32';
    case 'LAST_16':
    case 'ROUND_OF_16': return 'r16';
    case 'QUARTER_FINALS':  return 'qf';
    case 'SEMI_FINALS':     return 'sf';
    case 'THIRD_PLACE':     return '3rd';
    case 'FINAL':           return 'final';
    default: return null;
  }
}

function ourGroupLetter(remoteGroup){
  if (!remoteGroup) return null;
  // "GROUP_A" → "A"
  const m = remoteGroup.match(/GROUP_([A-L])/);
  return m ? m[1] : null;
}

function findOurMatch(remote, ourMatches){
  const phase = ourPhaseFromRemote(remote.stage);
  if (!phase) return null;
  const homeCode = teamToCode(remote.homeTeam?.name);
  const awayCode = teamToCode(remote.awayTeam?.name);

  if (phase === 'group') {
    const letter = ourGroupLetter(remote.group);
    if (!letter) return null;
    const candidates = ourMatches.filter(m => m.phase === 'group' && m.group_letter === letter);
    // Match by team codes (sorted, since home/away may differ in source vs draw order)
    const target = [homeCode, awayCode].sort().join('|');
    return candidates.find(m => [m.team_home, m.team_away].sort().join('|') === target) || null;
  }

  // KO: match by phase + closest kickoff_utc (±2h tolerance)
  const remoteTs = new Date(remote.utcDate).getTime();
  const candidates = ourMatches.filter(m => m.phase === phase);
  let best = null, bestDiff = Infinity;
  for (const c of candidates) {
    const diff = Math.abs(new Date(c.kickoff_utc).getTime() - remoteTs);
    if (diff < bestDiff) { best = c; bestDiff = diff; }
  }
  return (best && bestDiff <= 2 * 3600 * 1000) ? best : null;
}

// ============================================================
// FIFA bracket: stable match number → expected kickoff (UTC) per phase.
// Source: official FIFA 2026 schedule (CEST = UTC+2). The backfill endpoint
// uses (phase, kickoff_utc ±2h) to assign these numbers to our rows.
// ============================================================
const KO_FIFA_KICKOFFS = {
  // R32 — Sechzehntelfinale
  73: { phase: 'r32', kickoff: '2026-06-28T19:00:00.000Z' },
  74: { phase: 'r32', kickoff: '2026-06-29T20:30:00.000Z' },
  75: { phase: 'r32', kickoff: '2026-06-30T00:00:00.000Z' },
  76: { phase: 'r32', kickoff: '2026-06-29T17:00:00.000Z' },
  77: { phase: 'r32', kickoff: '2026-06-30T21:00:00.000Z' },
  78: { phase: 'r32', kickoff: '2026-06-30T17:00:00.000Z' },
  79: { phase: 'r32', kickoff: '2026-07-01T00:00:00.000Z' },
  80: { phase: 'r32', kickoff: '2026-07-01T16:00:00.000Z' },
  81: { phase: 'r32', kickoff: '2026-07-02T00:00:00.000Z' },
  82: { phase: 'r32', kickoff: '2026-07-01T20:00:00.000Z' },
  83: { phase: 'r32', kickoff: '2026-07-02T23:00:00.000Z' },
  84: { phase: 'r32', kickoff: '2026-07-02T19:00:00.000Z' },
  85: { phase: 'r32', kickoff: '2026-07-03T03:00:00.000Z' },
  86: { phase: 'r32', kickoff: '2026-07-03T22:00:00.000Z' },
  87: { phase: 'r32', kickoff: '2026-07-04T01:30:00.000Z' },
  88: { phase: 'r32', kickoff: '2026-07-03T18:00:00.000Z' },
  // R16 — Achtelfinale
  89: { phase: 'r16', kickoff: '2026-07-04T21:00:00.000Z' },
  90: { phase: 'r16', kickoff: '2026-07-04T17:00:00.000Z' },
  91: { phase: 'r16', kickoff: '2026-07-05T20:00:00.000Z' },
  92: { phase: 'r16', kickoff: '2026-07-06T00:00:00.000Z' },
  93: { phase: 'r16', kickoff: '2026-07-06T19:00:00.000Z' },
  94: { phase: 'r16', kickoff: '2026-07-07T00:00:00.000Z' },
  95: { phase: 'r16', kickoff: '2026-07-07T16:00:00.000Z' },
  96: { phase: 'r16', kickoff: '2026-07-07T20:00:00.000Z' },
  // QF — Viertelfinale
  97:  { phase: 'qf', kickoff: '2026-07-09T20:00:00.000Z' },
  98:  { phase: 'qf', kickoff: '2026-07-10T19:00:00.000Z' },
  99:  { phase: 'qf', kickoff: '2026-07-11T21:00:00.000Z' },
  100: { phase: 'qf', kickoff: '2026-07-12T00:00:00.000Z' },
  // SF — Halbfinale
  101: { phase: 'sf', kickoff: '2026-07-14T19:00:00.000Z' },
  102: { phase: 'sf', kickoff: '2026-07-15T19:00:00.000Z' },
  // 3rd place
  103: { phase: '3rd', kickoff: '2026-07-18T19:00:00.000Z' },
  // Final
  104: { phase: 'final', kickoff: '2026-07-19T19:00:00.000Z' },
};

// Bracket sources: next match → { home: {num, side}, away: {num, side} }
//   side: 'W' = winner of source match, 'L' = loser
// Once a source match flips to FINISHED with score.winner from the API, the
// W/L team code propagates into the next-match TBD slot.
const KO_BRACKET = {
  89:  { home: { num: 74, side: 'W' }, away: { num: 77, side: 'W' } },
  90:  { home: { num: 73, side: 'W' }, away: { num: 75, side: 'W' } },
  91:  { home: { num: 76, side: 'W' }, away: { num: 78, side: 'W' } },
  92:  { home: { num: 79, side: 'W' }, away: { num: 80, side: 'W' } },
  93:  { home: { num: 83, side: 'W' }, away: { num: 84, side: 'W' } },
  94:  { home: { num: 81, side: 'W' }, away: { num: 82, side: 'W' } },
  95:  { home: { num: 86, side: 'W' }, away: { num: 88, side: 'W' } },
  96:  { home: { num: 85, side: 'W' }, away: { num: 87, side: 'W' } },
  97:  { home: { num: 89, side: 'W' }, away: { num: 90, side: 'W' } },
  98:  { home: { num: 93, side: 'W' }, away: { num: 94, side: 'W' } },
  99:  { home: { num: 91, side: 'W' }, away: { num: 92, side: 'W' } },
  100: { home: { num: 95, side: 'W' }, away: { num: 96, side: 'W' } },
  101: { home: { num: 97, side: 'W' }, away: { num: 98, side: 'W' } },
  102: { home: { num: 99, side: 'W' }, away: { num: 100, side: 'W' } },
  103: { home: { num: 101, side: 'L' }, away: { num: 102, side: 'L' } },
  104: { home: { num: 101, side: 'W' }, away: { num: 102, side: 'W' } },
};

// Resolve the qualifier. football-data leaves score.winner = null for penalty
// shootouts (it only fills it for matches decided in regular/extra time), so we
// fall back to the direction of fullTime — which DOES encode the shootout winner
// (the side that won the pens carries the higher fullTime number).
function getWinnerSide(remoteScore){
  const w = remoteScore?.winner;
  if (w === 'HOME_TEAM') return 'home';
  if (w === 'AWAY_TEAM') return 'away';
  const ft = remoteScore?.fullTime;
  if (ft && ft.home != null && ft.away != null && ft.home !== ft.away) {
    return ft.home > ft.away ? 'home' : 'away';
  }
  return null; // genuinely undecided (e.g. still level — should not happen for FINISHED KO)
}
function getWinnerCode(remoteScore, ourMatch){
  const s = getWinnerSide(remoteScore);
  return s === 'home' ? ourMatch.team_home : s === 'away' ? ourMatch.team_away : null;
}
function getLoserCode(remoteScore, ourMatch){
  const s = getWinnerSide(remoteScore);
  return s === 'home' ? ourMatch.team_away : s === 'away' ? ourMatch.team_home : null;
}

// Backfill: assign FIFA match numbers to our KO rows by (phase, closest
// kickoff_utc ±2h). Idempotent. Returns counts + any unmatched FIFA slots
// + any rows already carrying a conflicting number.
async function backfillMatchNumbers(env){
  const res = await sbReq(env, 'GET',
    'wc_matches?select=id,phase,kickoff_utc,match_number,team_home,team_away'
    + '&phase=in.(r32,r16,qf,sf,3rd,final)&order=kickoff_utc.asc');
  if (!Array.isArray(res.body)) return { ok: false, error: 'fetch failed', body: res.body };
  const rows = res.body;
  const TOL_MS = 2 * 60 * 60 * 1000;
  const used = new Set();
  const applied = [], unmatched = [], conflicts = [], alreadySet = [];

  for (const [numStr, expect] of Object.entries(KO_FIFA_KICKOFFS)) {
    const fifaNum = Number(numStr);
    const expectedTs = new Date(expect.kickoff).getTime();
    let best = null, bestDiff = Infinity;
    for (const r of rows) {
      if (r.phase !== expect.phase) continue;
      if (used.has(r.id)) continue;
      const diff = Math.abs(new Date(r.kickoff_utc).getTime() - expectedTs);
      if (diff < bestDiff) { best = r; bestDiff = diff; }
    }
    if (!best || bestDiff > TOL_MS) {
      unmatched.push({ fifaNum, phase: expect.phase, expectedKickoff: expect.kickoff });
      continue;
    }
    used.add(best.id);
    if (best.match_number != null && best.match_number !== fifaNum) {
      conflicts.push({ rowId: best.id, currentNumber: best.match_number, wantedNumber: fifaNum });
      continue;
    }
    if (best.match_number === fifaNum) {
      alreadySet.push({ rowId: best.id, fifaNum });
      continue;
    }
    await updateMatch(env, best.id, { match_number: fifaNum });
    applied.push({ rowId: best.id, fifaNum, phase: best.phase, kickoff: best.kickoff_utc });
  }
  return { ok: true, applied: applied.length, alreadySet: alreadySet.length, unmatched, conflicts, details: { applied, alreadySet } };
}

// Propagate winner/loser of a finished KO match into the next-round TBD slot.
// Mutates `ours` in memory so chained finishes within the same cron tick cascade.
async function propagateBracket(env, ours, finishedMatchNumber, winnerCode, loserCode){
  if (!Number.isInteger(finishedMatchNumber)) return 0;
  let propagated = 0;
  for (const [nextNumStr, slots] of Object.entries(KO_BRACKET)) {
    const nextNum = Number(nextNumStr);
    const nextRow = ours.find(m => m.match_number === nextNum);
    if (!nextRow) continue;
    const patch = {};
    for (const side of ['home', 'away']) {
      const src = slots[side];
      if (src.num !== finishedMatchNumber) continue;
      const code = src.side === 'W' ? winnerCode : loserCode;
      if (!code) continue;
      const col = side === 'home' ? 'team_home' : 'team_away';
      if (nextRow[col] === 'TBD' || nextRow[col] == null) patch[col] = code;
    }
    if (Object.keys(patch).length) {
      await updateMatch(env, nextRow.id, patch);
      Object.assign(nextRow, patch);
      propagated++;
      console.log('[BRACKET] propagated:', { from: finishedMatchNumber, to: nextNum, ...patch });
    }
  }
  return propagated;
}

// ============================================================
// Sync logic
// ============================================================
async function syncMatches(env){
  const remote = await fetchFromFootballData(env);
  if (remote.error) return { ok: false, error: remote.error };
  const ours = await listOurMatches(env);

  let scheduled = 0, finished = 0, skipped = 0;

  for (const r of remote.matches) {
    const m = findOurMatch(r, ours);
    if (!m) { skipped++; continue; }

    const updates = {};
    // KO: fill in teams once draw resolves them
    if (m.team_home === 'TBD' || m.team_away === 'TBD') {
      const h = teamToCode(r.homeTeam?.name);
      const a = teamToCode(r.awayTeam?.name);
      if (h) updates.team_home = h;
      if (a) updates.team_away = a;
    }
    // Sync kickoff (in case schedule moves)
    if (r.utcDate && new Date(r.utcDate).toISOString() !== new Date(m.kickoff_utc).toISOString()) {
      updates.kickoff_utc = r.utcDate;
    }

    // Finished match: write goals + played=true → DB trigger auto-scores tips
    if (r.status === 'FINISHED') {
      // Tip scoring uses the 90-minute (regular) result. football-data only
      // sends `score.regularTime` when a KO match went past 90 min; ordinary
      // matches just carry `score.fullTime`. So: goals = regularTime ?? fullTime.
      // Extra time / penalties are kept separately (final_* + decided_by) and
      // only drive advancement, bonus questions and the displayed scoreline —
      // never the match-tip points.
      const ft  = r.score?.fullTime || {};
      const reg = r.score?.regularTime || {};
      const dur = r.score?.duration; // REGULAR | EXTRA_TIME | PENALTY_SHOOTOUT
      let gh = reg.home != null ? reg.home : ft.home;
      let ga = reg.away != null ? reg.away : ft.away;
      // final_* = full result incl. ET + pens; NULL when decided inside 90 min.
      let fh = null, fa = null, decidedBy = null;
      if (dur === 'EXTRA_TIME')           { fh = ft.home; fa = ft.away; decidedBy = 'aet'; }
      else if (dur === 'PENALTY_SHOOTOUT'){ fh = ft.home; fa = ft.away; decidedBy = 'pens'; }
      // KO invariant: a match only goes past 90 min when it's a DRAW after 90.
      // football-data occasionally sends regularTime as {null,null} (AR-CV
      // 2026-07-04) → the fallback scored the 120-min 3:2 as the 90-min
      // result. A non-draw here is always upstream garbage — never score it.
      if (decidedBy && gh != null && ga != null && gh !== ga) {
        const et = r.score?.extraTime || {};
        if (dur === 'EXTRA_TIME' && et.home != null && et.away != null &&
            ft.home - et.home === ft.away - et.away) {
          // Derive 90-min score: fullTime minus ET goals (AET only — for
          // pens, fullTime also folds in the shootout goals).
          gh = ft.home - et.home; ga = ft.away - et.away;
        } else if (m.played && m.goals_home != null && m.goals_home === m.goals_away) {
          // Row already carries a valid draw (manual set-result fix): keep it.
          gh = m.goals_home; ga = m.goals_away;
        } else {
          console.log('[CRON] non-draw 90-min score on', decidedBy, 'match',
            m.id, `${gh}:${ga}`, '— blocked, fix via /admin/set-result');
          gh = null; ga = null; // block auto-scoring until admin sets it
        }
      }
      if (gh != null && ga != null) {
        // Only update if something changed (goals or the ET/pen decider)
        if (!m.played || m.goals_home !== gh || m.goals_away !== ga ||
            m.final_home !== fh || m.final_away !== fa || m.decided_by !== decidedBy) {
          updates.goals_home = gh;
          updates.goals_away = ga;
          updates.final_home = fh;
          updates.final_away = fa;
          updates.decided_by = decidedBy;
          updates.played = true;
          finished++;
        }
      }
    } else if (Object.keys(updates).length === 0) {
      // No changes for non-finished match
      continue;
    } else {
      scheduled++;
    }

    if (Object.keys(updates).length > 0) {
      await updateMatch(env, m.id, updates);
      // Mirror writes into the in-memory row so subsequent propagation reads see them
      Object.assign(m, updates);
    }

    // KO bracket propagation: as soon as we mark a KO match FINISHED, push
    // its winner (and loser, for the 3rd-place) into the next-round TBD slot.
    // This is independent of football-data.org's own next-round population —
    // if their Free Tier is slow, we still advance instantly.
    if (r.status === 'FINISHED' && m.match_number != null && m.phase !== 'group') {
      const winner = getWinnerCode(r.score, m);
      const loser  = getLoserCode(r.score, m);
      if (winner) {
        const n = await propagateBracket(env, ours, m.match_number, winner, loser);
        if (n) console.log('[CRON] bracket advance from', m.match_number, '→', n, 'slot(s)');
      }
    }
  }

  return { ok: true, total: remote.matches.length, scheduled, finished, skipped };
}

// ============================================================
// Worker entry
// ============================================================
function json(body, status = 200){
  return new Response(JSON.stringify(body, null, 2), {
    status, headers: { 'Content-Type': 'application/json' },
  });
}

function checkAdmin(request, env){
  const token = request.headers.get('X-Admin-Token') || new URL(request.url).searchParams.get('token');
  return token && env.ADMIN_TOKEN && token === env.ADMIN_TOKEN;
}

export default {
  async fetch(request, env){
    const url = new URL(request.url);

    // Public: status / health
    if (url.pathname === '/' || url.pathname === '/health') {
      return json({ ok: true, name: 'bobai-worldcup-sync' });
    }

    // Admin: manual sync trigger
    if (url.pathname === '/sync') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const r = await syncMatches(env);
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: manual pool sync — reads on-chain balance + live BOBAI price → wc_pool
    if (url.pathname === '/admin/sync-pool') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      try {
        const r = await syncPool(env);
        return json({ ok: true, ...r });
      } catch (e) {
        return json({ ok: false, error: e.message }, 500);
      }
    }

    // Admin: debug — dump what football-data returns for KO stages + how our
    // matcher maps each remote KO match onto a local row. Temporary diagnostic.
    if (url.pathname === '/admin/debug-ko') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const remote = await fetchFromFootballData(env);
      if (remote.error) return json(remote, 500);
      const ours = await listOurMatches(env);
      const ko = remote.matches
        .filter(r => ourPhaseFromRemote(r.stage) && ourPhaseFromRemote(r.stage) !== 'group')
        .map(r => {
          const m = findOurMatch(r, ours);
          return {
            stage: r.stage,
            phase: ourPhaseFromRemote(r.stage),
            status: r.status,
            remoteHome: r.homeTeam?.name || null,
            remoteAway: r.awayTeam?.name || null,
            remoteHomeCode: teamToCode(r.homeTeam?.name),
            remoteAwayCode: teamToCode(r.awayTeam?.name),
            utcDate: r.utcDate,
            score: r.score || null,
            mappedLocalId: m?.id ?? null,
            mappedLocalKickoff: m?.kickoff_utc ?? null,
            mappedLocalTeams: m ? `${m.team_home}|${m.team_away}` : null,
          };
        })
        .sort((a, b) => new Date(a.utcDate) - new Date(b.utcDate));
      // Detect collisions: two remote KO matches mapped onto the same local row.
      const counts = {};
      ko.forEach(x => { if (x.mappedLocalId != null) counts[x.mappedLocalId] = (counts[x.mappedLocalId] || 0) + 1; });
      const collisions = Object.entries(counts).filter(([, n]) => n > 1).map(([id]) => Number(id));
      const unmapped = ko.filter(x => x.mappedLocalId == null).length;
      return json({ ok: true, koCount: ko.length, unmapped, collisions, ko });
    }

    // Admin: backfill match_number on KO rows by (phase, kickoff_utc ±2h).
    // Idempotent; run once after the SQL migration.
    if (url.pathname === '/admin/backfill-match-numbers') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const r = await backfillMatchNumbers(env);
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: dump bracket state. Each KO_BRACKET entry resolved against the
    // current row by match_number, showing where the next-round team will
    // come from (W/L of which source match) and whether it's already filled.
    if (url.pathname === '/admin/debug-bracket') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const res = await sbReq(env, 'GET',
        'wc_matches?select=id,match_number,phase,team_home,team_away,kickoff_utc,goals_home,goals_away,played'
        + '&match_number=not.is.null&order=match_number.asc');
      const rows = Array.isArray(res.body) ? res.body : [];
      const byNum = Object.fromEntries(rows.map(x => [x.match_number, x]));
      const bracket = Object.entries(KO_BRACKET).map(([nextNumStr, slots]) => {
        const nextNum = Number(nextNumStr);
        const row = byNum[nextNum];
        return {
          match: nextNum,
          phase: row?.phase ?? null,
          team_home: row?.team_home ?? null,
          team_away: row?.team_away ?? null,
          played: !!row?.played,
          result: row?.played ? `${row.goals_home}-${row.goals_away}` : null,
          from_home: `${slots.home.side}(${slots.home.num})`,
          from_away: `${slots.away.side}(${slots.away.num})`,
        };
      });
      const numbered = rows.length;
      const expected = Object.keys(KO_FIFA_KICKOFFS).length;
      return json({ ok: true, numbered, expected, rows, bracket });
    }

    // Admin: manually set KO teams that FIFA has officially announced but the
    // football-data.org free tier hasn't populated yet (it returns null). Only the
    // provided side(s) are written; the regular sync still fills any remaining TBD.
    // POST /admin/set-teams?token=...  Body: { updates: [{ id, team_home?, team_away? }] }
    if (url.pathname === '/admin/set-teams' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      let body;
      try { body = await request.json(); } catch { return json({ error: 'bad json' }, 400); }
      const updates = Array.isArray(body?.updates) ? body.updates : [];
      if (!updates.length) return json({ error: 'no updates' }, 400);
      const applied = [];
      for (const u of updates) {
        if (u.id == null) continue;
        const patch = {};
        if (typeof u.team_home === 'string' && u.team_home) patch.team_home = u.team_home;
        if (typeof u.team_away === 'string' && u.team_away) patch.team_away = u.team_away;
        if (!Object.keys(patch).length) continue;
        await updateMatch(env, u.id, patch);
        applied.push({ id: u.id, ...patch });
      }
      return json({ ok: true, applied });
    }

    // Admin: manually set a match result (for beta testing / FIFA-result corrections)
    // POST /admin/set-result?token=...
    // Body: { id, goals_home, goals_away, final_home?, final_away?, decided_by? }
    // goals_* = 90-min result (scored). For a KO match decided after 90 min,
    // also pass final_home/final_away (full result incl ET+pens) and
    // decided_by ('aet'|'pens'). Pass final_* = null to clear back to a
    // regular result.
    if (url.pathname === '/admin/set-result' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const b = await request.json().catch(() => ({}));
      if (!Number.isInteger(b.id) || !Number.isInteger(b.goals_home) || !Number.isInteger(b.goals_away)) {
        return json({ error: 'expected { id, goals_home, goals_away, final_home?, final_away?, decided_by? }' }, 400);
      }
      const fields = {
        goals_home: b.goals_home,
        goals_away: b.goals_away,
        played: true,
      };
      if ('final_home' in b) fields.final_home = b.final_home;
      if ('final_away' in b) fields.final_away = b.final_away;
      if ('decided_by' in b) fields.decided_by = b.decided_by;
      const r = await updateMatch(env, b.id, fields);
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: manual top-scorers sync trigger
    if (url.pathname === '/admin/sync-scorers') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const r = await syncScorers(env);
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: manual red-cards sync trigger (also see /admin/set-red-cards for override)
    if (url.pathname === '/admin/sync-red-cards') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const r = await syncRedCards(env);
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: manually set the tournament red-card counter (free-tier fallback).
    // POST /admin/set-red-cards?token=...  Body: { total }
    if (url.pathname === '/admin/set-red-cards' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const b = await request.json().catch(() => ({}));
      if (!Number.isInteger(b.total) || b.total < 0) return json({ error: 'expected { total: int >= 0 }' }, 400);
      const r = await sbReq(env, 'PATCH', 'wc_tournament_stats?id=eq.1', {
        red_cards_total: b.total,
        updated_at: new Date().toISOString(),
      });
      return json(r, r.ok ? 200 : 500);
    }

    // Admin: manual BOBAI balance snapshot trigger (drives tie-breaker on leaderboard)
    if (url.pathname === '/admin/snapshot-bobai') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      try {
        const r = await snapshotBobaiBalances(env);
        return json(r, r.ok ? 200 : 500);
      } catch (e) {
        return json({ ok: false, error: e.message }, 500);
      }
    }

    // Admin: mark the group pot paid. Sets wc_pool.group_paid_at which gates
    // every "paid out" UI state in the worldcup app. Pass paid_at = null to
    // clear (for testing / revert). Defaults to current UTC.
    if (url.pathname === '/admin/mark-group-paid' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const b = await request.json().catch(() => ({}));
      const paidAt = b.paid_at === null ? null : (b.paid_at || new Date().toISOString());
      const r = await sbReq(env, 'PATCH', 'wc_pool?id=eq.1', { group_paid_at: paidAt });
      // Re-sync the pool so the new gate flips group_pot/end/crypto right away
      try { await syncPool(env); } catch (e) { console.log('[mark-group-paid] resync failed:', e.message); }
      return json({ ok: r.ok, group_paid_at: paidAt }, r.ok ? 200 : 500);
    }

    // Admin: insert a payout receipt row. Called by the payout CLI script
    // after each successful on-chain transfer. Idempotent on (pot, group_letter,
    // position, user_id) via a clean DELETE/INSERT pattern is NOT used here —
    // the script must dedup before calling. Returns the inserted row.
    if (url.pathname === '/admin/log-payout' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const b = await request.json().catch(() => ({}));
      const required = ['pot', 'position', 'username', 'wallet', 'bobai_amount'];
      for (const k of required) {
        if (b[k] == null || b[k] === '') return json({ error: `missing field: ${k}` }, 400);
      }
      const row = {
        pot:           b.pot,
        group_letter:  b.group_letter || null,
        position:      b.position,
        user_id:       b.user_id || null,
        username:      b.username,
        country_code:  b.country_code || null,
        wallet:        String(b.wallet).toLowerCase(),
        bobai_amount:  Number(b.bobai_amount),
        usd_at_payout: b.usd_at_payout != null ? Number(b.usd_at_payout) : null,
        tx_hash:       b.tx_hash || null,
        notes:         b.notes || null,
      };
      const r = await sbReq(env, 'POST', 'wc_payouts', row);
      return json({ ok: r.ok, status: r.status, row: r.body }, r.ok ? 200 : 500);
    }

    // Admin: resolve bonus questions (call after tournament)
    if (url.pathname === '/admin/resolve-bonus' && request.method === 'POST') {
      if (!checkAdmin(request, env)) return json({ error: 'unauthorized' }, 401);
      const b = await request.json().catch(() => ({}));
      const r = await sbReq(env, 'POST', 'rpc/wc_resolve_bonus', {
        p_champion:          b.champion          || null,
        p_most_goals_team:   b.most_goals_team   || null,
        p_fewest_goals_team: b.fewest_goals_team || null,
        p_red_cards_bracket: b.red_cards_bracket || null,
        p_topscorer_country: b.topscorer_country || null,
      });
      return json(r, r.ok ? 200 : 500);
    }

    return json({ error: 'not found' }, 404);
  },

  async scheduled(event, env){
    // Daily BOBAI snapshot rides its own cron schedule ("15 6 * * *" UTC) so it
    // doesn't burn subrequest budget on every 10-min match-sync tick. 06:15 UTC
    // sits in the WC26 quiet window (matches run ~16:00–03:00 UTC, NA stadiums),
    // so we always snapshot well clear of any in-progress action. Dispatch by
    // event.cron and return early — the 10-min cron path stays untouched.
    if (event.cron === '15 6 * * *') {
      try {
        const r = await snapshotBobaiBalances(env);
        console.log('[CRON] bobai snapshot:', JSON.stringify(r));
      } catch (e) {
        console.log('[CRON] bobai snapshot error:', e.message);
      }
      return;
    }

    // 1. Match sync (skip if no API key)
    if (env.FOOTBALL_DATA_API_KEY) {
      const r = await syncMatches(env);
      console.log('[CRON] match sync:', JSON.stringify(r));
      try {
        const s = await syncScorers(env);
        console.log('[CRON] scorers sync:', JSON.stringify(s));
      } catch (e) {
        console.log('[CRON] scorers sync error:', e.message);
      }
      try {
        const rc = await syncRedCards(env);
        console.log('[CRON] red cards sync:', JSON.stringify(rc));
      } catch (e) {
        console.log('[CRON] red cards sync error:', e.message);
      }
    } else {
      console.log('[CRON] FOOTBALL_DATA_API_KEY not set — skipping match sync.');
    }

    // 2. Prize pool sync — read on-chain BOBAI balance + price, compute pots, update wc_pool
    try {
      const pool = await syncPool(env);
      console.log('[CRON] pool sync:', JSON.stringify(pool));
    } catch (e) {
      console.log('[CRON] pool sync error:', e.message);
    }

    // 3. Dispatch worldcup-bot workflow (does the actual swap with signing)
    try {
      const dispatched = await dispatchWorldcupBot(env);
      console.log('[CRON] bot dispatch:', dispatched);
    } catch (e) {
      console.log('[CRON] bot dispatch error:', e.message);
    }
  },
};

// ============================================================
// PRIZE POOL SYNC — read on-chain BOBAI balance + compute pot split
// ============================================================
const PRIZE_WALLET = '0x5E4102520A71B2AA18a1208330d4848dea4BD105';
const BOBAI_TOKEN  = '0x245c386dcfed896f5c346107596141e5edcbffff';
const BSC_RPCS = [
  'https://bsc-dataseed.binance.org/',
  'https://bsc-dataseed1.binance.org/',
  'https://bsc-dataseed2.binance.org/',
];

// Tournament timing (UTC) — anchors the allocation split.
// Pre-kickoff donations sit in `total_bobai` but aren't allocated to pots yet
// (admin decides at kickoff how to seed initial pots).
const KICKOFF_UTC   = new Date('2026-06-11T19:00:00Z').getTime();
const GROUP_END_UTC = new Date('2026-06-27T00:00:00Z').getTime();   // ~1d after last group match
const FINAL_END_UTC = new Date('2026-07-20T00:00:00Z').getTime();
// Group pot freezes the moment the group stage ends and is shown PERMANENTLY
// (the amount that was in the group pot stays visible, even after payout).
// Value = 0.60 × prize-wallet balance at GROUP_END (2026-06-27). Keep this in
// lockstep with worldcup-bot.js.
const GROUP_POT_FROZEN = 3472587.05;

async function rpcCall(method, params){
  for (const rpc of BSC_RPCS) {
    try {
      const res = await fetch(rpc, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ jsonrpc: '2.0', id: 1, method, params }),
      });
      if (!res.ok) continue;
      const j = await res.json();
      if (j.result !== undefined) return j.result;
    } catch (e) { /* try next */ }
  }
  throw new Error('all BSC RPCs failed for ' + method);
}

// Read ERC-20 balance via raw eth_call (no ethers/viem dep in Worker).
async function readBobaiBalance(address){
  // balanceOf(address) selector = 0x70a08231
  const data = '0x70a08231' + address.toLowerCase().replace('0x','').padStart(64, '0');
  const hex  = await rpcCall('eth_call', [{ to: BOBAI_TOKEN, data }, 'latest']);
  // 18-decimal token → divide by 1e18 as bigint→string for precision
  const wei = BigInt(hex);
  const whole = wei / (10n ** 18n);
  const frac  = wei % (10n ** 18n);
  // Return as plain JS number (precision OK for display; if pool ever exceeds 2^53 BOBAI we'd switch to string)
  return Number(whole) + Number(frac) / 1e18;
}

// BOBAI/WBNB pool — used for the price feed (same endpoint the TG bot polls)
const BOBAI_PAIR = '0x6eadd4cb786898b34929444988380ed0cc6fd9a6';

// On-chain price fallback constants. BOBAI < WBNB hex → BOBAI is token0 in this pair
// (verified via token0() on-chain 2026-05-21). Reserves come back as (r0, r1, ts).
const CHAINLINK_BNB_USD = '0x0567F2323251f0Aab15c8dFb1967E4e8A7D42aeE'; // BSC mainnet feed, 8 decimals

// Sanity bounds for BOBAI/USD — protects against bad on-chain math or pair manipulation
// posting a wildly wrong price during the rare event both APIs are down.
const PRICE_MIN_USD = 1e-7;
const PRICE_MAX_USD = 1e-2;

function isSanePrice(p){ return isFinite(p) && p >= PRICE_MIN_USD && p <= PRICE_MAX_USD; }

async function fetchBobaiPriceOnchain(){
  try {
    // getReserves() — returns (uint112 r0, uint112 r1, uint32 ts) packed into 96 bytes
    const rHex = await rpcCall('eth_call', [{ to: BOBAI_PAIR, data: '0x0902f1ac' }, 'latest']);
    const rBOBAI = BigInt('0x' + rHex.slice(2,   66)); // token0
    const rWBNB  = BigInt('0x' + rHex.slice(66, 130)); // token1
    if (rBOBAI === 0n || rWBNB === 0n) { console.log('[price] onchain: zero reserves'); return null; }

    // Chainlink latestAnswer() — int256, 8 decimals
    const aHex = await rpcCall('eth_call', [{ to: CHAINLINK_BNB_USD, data: '0x50d25bcd' }, 'latest']);
    const bnbUsd = Number(BigInt(aHex)) / 1e8;
    if (!(bnbUsd > 0)) { console.log('[price] onchain: bad BNB/USD'); return null; }

    // Both BOBAI and WBNB are 18 decimals → ratio cancels out cleanly
    const bobaiPerBnb = Number(rBOBAI) / Number(rWBNB);
    const price = bnbUsd / bobaiPerBnb;
    if (!isSanePrice(price)) { console.log('[price] onchain: sanity check failed:', price); return null; }
    return price;
  } catch (e) {
    console.log('[price] onchain error:', e.message);
    return null;
  }
}

async function fetchBobaiPriceUsd(){
  // 1) GeckoTerminal pool (primary — same as TG bot)
  try {
    const r = await fetch(
      `https://api.geckoterminal.com/api/v2/networks/bsc/pools/${BOBAI_PAIR}?_=${Date.now()}`,
      { headers: { 'Accept': 'application/json' } }
    );
    if (r.ok) {
      const d = await r.json();
      const p = parseFloat(d?.data?.attributes?.base_token_price_usd);
      if (isSanePrice(p)) return p;
      console.log('[price] geckoterminal returned invalid price');
    } else {
      console.log('[price] geckoterminal HTTP', r.status);
    }
  } catch (e) {
    console.log('[price] geckoterminal error:', e.message);
  }

  // 2) DexScreener fallback
  try {
    const r = await fetch(`https://api.dexscreener.com/latest/dex/tokens/${BOBAI_TOKEN}`);
    if (r.ok) {
      const d = await r.json();
      const pair = (d?.pairs || []).find(p => p.pairAddress?.toLowerCase() === BOBAI_PAIR.toLowerCase())
                || (d?.pairs || [])[0];
      const p = parseFloat(pair?.priceUsd);
      if (isSanePrice(p)) return p;
      console.log('[price] dexscreener returned no usable price');
    } else {
      console.log('[price] dexscreener HTTP', r.status);
    }
  } catch (e) {
    console.log('[price] dexscreener error:', e.message);
  }

  // 3) On-chain (pair reserves × Chainlink BNB/USD) — never down unless RPC dies
  const onchain = await fetchBobaiPriceOnchain();
  if (onchain) { console.log('[price] using on-chain fallback'); return onchain; }

  return null;
}

function computePots(total, now){
  // Pre-kickoff + Group phase: 60/30/10 split (live preview so donors see where it goes)
  if (now < GROUP_END_UTC) return {
    group:  total * 0.60,
    end:    total * 0.30,
    crypto: total * 0.10,
    phase:  now < KICKOFF_UTC ? 'pre-kickoff' : 'group',
  };
  // Group phase over. The split must NOT change on a date — only once the group
  // winners are actually paid out. We detect that from the wallet: until payout
  // the group BOBAI still sits in the prize wallet (balance > frozen group amount),
  // so we keep showing the frozen group pot + the live 30/10 of the rest.
  if (total >= GROUP_POT_FROZEN) return {
    group:  GROUP_POT_FROZEN,   // frozen snapshot — stays visible until payout
    end:    total * 0.30,
    crypto: total * 0.10,
    phase:  'group-frozen',
  };
  // Group winners paid → group BOBAI has left the wallet (balance dropped below the
  // frozen amount). Group pot goes to 0; the remaining wallet allocates 90/10.
  return { group: 0, end: total * 0.90, crypto: total * 0.10, phase: 'ko-paid' };
}

async function syncPool(env){
  // FINAL FREEZE (2026-07-20): end-pool + crypto pots are paid out on-chain.
  // wc_pool now holds the frozen final snapshot (total 8.94M / group 3.47M /
  // end 4.92M / crypto 547K) as the permanent archive display. The prize wallet
  // is empty, so the old 90/10 live-balance split would zero the pots — never
  // write wc_pool again.
  const paidCheck = await sbReq(env, 'GET', 'wc_payouts?pot=eq.end&tx_hash=not.is.null&select=id&limit=1');
  if (Array.isArray(paidCheck.body) && paidCheck.body.length) {
    return { frozen: true, reason: 'final payout complete — wc_pool is a frozen archive' };
  }
  const wallet = await readBobaiBalance(PRIZE_WALLET);
  const price  = await fetchBobaiPriceUsd();

  // Once admin marks the group pot paid, override the date/balance-based
  // logic: group stays at the frozen snapshot for display, new wallet
  // balance splits 90/10 between end + crypto. Total_bobai then includes
  // the historical group amount so the "Prize Pool" headline stays stable
  // across the payout (donors see the total they helped grow).
  const current = await sbReq(env, 'GET', 'wc_pool?id=eq.1&select=group_paid_at');
  const groupPaid = Array.isArray(current.body) && current.body[0]?.group_paid_at != null;

  let pots, displayTotal;
  if (groupPaid) {
    // Group payout is on-chain COMPLETE (2026-06-28) — the frozen 3.47M has
    // left the wallet, so the live balance is end/crypto money only. Do NOT
    // subtract the frozen amount even if donations regrow the balance past it.
    const remaining = wallet;
    pots = {
      group:  GROUP_POT_FROZEN,
      end:    remaining * 0.90,
      crypto: remaining * 0.10,
      phase:  'ko-paid',
    };
    // Total stays at "paid + still in pool" — invariant before AND after the
    // actual on-chain transfer, so the headline doesn't jump on payout day.
    displayTotal = GROUP_POT_FROZEN + remaining;
  } else {
    pots = computePots(wallet, Date.now());
    displayTotal = wallet;
  }

  const update = {
    total_bobai:     displayTotal,
    group_pot:       pots.group,
    endpool:         pots.end,
    crypto_pot:      pots.crypto,
    bobai_price_usd: price,
    updated_at:      new Date().toISOString(),
  };
  await sbReq(env, 'PATCH', 'wc_pool?id=eq.1', update);
  return { wallet, displayTotal, price, phase: pots.phase, pots, groupPaid };
}

// ============================================================
// WORLDCUP-BOT DISPATCH — kicks the GitHub Actions workflow that signs the swap
// ============================================================
async function dispatchWorldcupBot(env){
  if (!env.GH_TOKEN || !env.GH_REPO) {
    return 'skipped (GH_TOKEN/GH_REPO not configured)';
  }
  const url = `https://api.github.com/repos/${env.GH_REPO}/actions/workflows/worldcup-bot.yml/dispatches`;
  const res = await fetch(url, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${env.GH_TOKEN}`,
      Accept: 'application/vnd.github.v3+json',
      'User-Agent': 'bobai-worldcup-sync',
    },
    body: JSON.stringify({ ref: 'main' }),
  });
  return `HTTP ${res.status}`;
}

// ============================================================
// BOBAI BALANCE SNAPSHOT — hourly cron, drives the leaderboard tie-breaker
// ============================================================
// Reads on-chain BOBAI balance for every linked wc_users.wallet and stores
// it in wc_users.bobai_balance + wc_users.bobai_snapshot_at. Consumed by the
// SECURITY DEFINER RPCs `wc_group_leaderboard_ranked` / `wc_overall_leaderboard_ranked`
// to break point-ties (rules.html §7). The column is REVOKEd from anon/authenticated
// so the actual amount is never exposed — only the resulting `rank` + `tied_above`/
// `tied_below` flags reach the UI.
//
// Auto-stop: after FINAL_END_UTC the snapshot becomes a no-op (the final payout
// calculator does its own fresh on-chain read at lock time anyway).

const WALLET_RE = /^0x[0-9a-fA-F]{40}$/;

// Batched JSON-RPC call (some public BSC RPCs accept arrays; we fall back to
// per-call rpcCall() if a backend returns a non-array response, so this stays
// robust against quirky providers).
async function rpcBatchCall(calls){
  const body = calls.map((c, i) => ({ jsonrpc: '2.0', id: i, method: c.method, params: c.params }));
  for (const rpc of BSC_RPCS) {
    try {
      const res = await fetch(rpc, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) continue;
      const arr = await res.json();
      if (!Array.isArray(arr) || arr.length !== calls.length) continue;
      const out = new Array(calls.length);
      for (const r of arr) if (r && typeof r.id === 'number' && r.result !== undefined) out[r.id] = r.result;
      // If every slot filled, batch succeeded
      if (out.every(x => x !== undefined)) return out;
    } catch (_) { /* try next rpc */ }
  }
  return null;  // signal "batch unsupported / failed — caller falls back"
}

// Resolve N BOBAI balances. Tries one big batched JSON-RPC; on failure falls
// back to sequential rpcCall (still cheap — only used when batch is unavailable).
async function readBobaiBalancesBatch(addresses){
  if (!addresses.length) return [];
  const calls = addresses.map(a => ({
    method: 'eth_call',
    params: [{
      to:   BOBAI_TOKEN,
      data: '0x70a08231' + a.toLowerCase().replace('0x','').padStart(64, '0'),
    }, 'latest'],
  }));

  const batched = await rpcBatchCall(calls);
  if (batched) {
    return batched.map(hex => {
      const wei = BigInt(hex);
      const whole = wei / (10n ** 18n);
      const frac  = wei % (10n ** 18n);
      return Number(whole) + Number(frac) / 1e18;
    });
  }

  // Sequential fallback — capped because CF Free workers allow ≤50 subrequests
  // per invocation. With ~5 subrequests already burned by the rest of the cron,
  // 40 sequential reads is the safe headroom. Anything beyond that gets picked
  // up on the next hourly tick (snapshot is best-effort, not strict).
  const FALLBACK_MAX = 40;
  const out = [];
  for (let i = 0; i < Math.min(addresses.length, FALLBACK_MAX); i++) {
    try { out.push(await readBobaiBalance(addresses[i])); }
    catch (_) { out.push(null); }
  }
  while (out.length < addresses.length) out.push(null);
  return out;
}

async function snapshotBobaiBalances(env){
  if (Date.now() > FINAL_END_UTC) {
    return { ok: true, skipped: 'post-final' };
  }

  // 1) Fetch all linked wallets
  const r = await sbReq(env, 'GET', 'wc_users?select=id,wallet&wallet=not.is.null&limit=2000');
  if (!Array.isArray(r.body)) return { ok: false, error: 'failed to list wallets', status: r.status };
  const users = r.body.filter(u => u.wallet && WALLET_RE.test(u.wallet));
  if (!users.length) return { ok: true, total: 0, updated: 0 };

  // 2) Batch reads in chunks of 100 (keeps per-batch JSON-RPC payload ~30KB)
  const CHUNK = 100;
  const payload = [];
  for (let i = 0; i < users.length; i += CHUNK) {
    const slice = users.slice(i, i + CHUNK);
    const balances = await readBobaiBalancesBatch(slice.map(u => u.wallet));
    for (let j = 0; j < slice.length; j++) {
      const b = balances[j];
      if (b == null || !isFinite(b)) continue;  // skip failures — next cron retries
      payload.push({ id: slice[j].id, balance: b });
    }
  }

  if (!payload.length) return { ok: false, error: 'no balances read', total: users.length };

  // 3) Bulk update via the SECURITY DEFINER RPC (one Supabase round-trip)
  const upd = await sbReq(env, 'POST', 'rpc/wc_update_bobai_snapshots', { payload });
  if (!upd.ok) return { ok: false, error: 'rpc update failed', status: upd.status, body: upd.body };

  return { ok: true, total: users.length, batched: payload.length, updated: upd.body };
}

==============================================================================
=== FILE: worker-wc/migrations/2026-06-28_match_number.sql
==============================================================================

-- Add stable FIFA match-number identifier (73-104 = KO stage).
-- Backfill is done by the worker (/admin/backfill-match-numbers) using
-- kickoff_utc ±2h tolerance per phase, so this file only owns the schema bit.

ALTER TABLE wc_matches
  ADD COLUMN IF NOT EXISTS match_number INTEGER;

-- One FIFA number per row at most. Partial unique index allows NULLs for
-- group-stage rows we don't bother numbering.
CREATE UNIQUE INDEX IF NOT EXISTS wc_matches_match_number_uidx
  ON wc_matches (match_number)
  WHERE match_number IS NOT NULL;

==============================================================================
=== FILE: worker-wc/wrangler.toml
==============================================================================

name = "bobai-worldcup-sync"
main = "index.js"
compatibility_date = "2026-05-16"

# Cron triggers: REMOVED 2026-07-20 — WC26 is over, all pots paid out.
# The worker stays deployed for the /admin/* endpoints, but nothing runs on a
# schedule anymore (match sync, scorers, pool sync, BOBAI snapshot all obsolete).
# Old triggers for reference: ["1-59/10 * * * *", "15 6 * * *"]
[triggers]
crons = []

# Secrets (set via `wrangler secret put <NAME>`):
#   SUPABASE_SERVICE_ROLE_KEY  — Supabase service-role JWT (Project Settings → API → service_role)
#   FOOTBALL_DATA_API_KEY      — free key from football-data.org/client/register
#   ADMIN_TOKEN                — long random string for manual /admin/* endpoints
#   PRIZE_PRIVATE_KEY          — prize-wallet key (NOT used by Worker directly; only by GH Actions)
#   GH_TOKEN                   — GitHub PAT with workflow:write to dispatch worldcup-bot.yml

# Public env vars (safe to commit):
[vars]
SUPABASE_URL = "https://aerffjhdsbxpvuulkryr.supabase.co"
# football-data.org competition code for 2026 WC (override if FIFA's official ID differs)
FOOTBALL_DATA_COMPETITION = "WC"
# GH repo for workflow dispatch
GH_REPO = "mmxrealQQ/bobai-buyburn"