// ───── STORAGE SAFETY + SCHEMA VERSION ─────
// Wrap localStorage.setItem so a full quota (or privacy-mode block) never throws
// and breaks the page — it degrades gracefully with a warning instead.
(function () {
  if (!window.localStorage) return;
  const _set = Storage.prototype.setItem;
  Storage.prototype.setItem = function (k, v) {
    try { return _set.call(this, k, v); }
    catch (e) { console.warn('[campus] storage write failed for', k, e && e.name); }
  };
})();

// Bump this when the shape of stored data changes incompatibly; old state is
// cleared once so users don't get stuck with a broken/mismatched cache.
const SCHEMA_VERSION = '1';
try {
  const prev = localStorage.getItem('campus-schema-version');
  if (prev && prev !== SCHEMA_VERSION) {
    // future migrations would run here; for now we just record the new version
  }
  localStorage.setItem('campus-schema-version', SCHEMA_VERSION);
} catch {}

// Global image fallback: if an avatar (DiceBear) or content image (Picsum) fails
// to load — e.g. the external service is down — show a graceful placeholder
// instead of a broken-image icon.
function initialsAvatar(seed) {
  const ch = (String(seed || '?').replace(/[^a-zA-Z0-9]/g, '')[0] || '?').toUpperCase();
  const colors = ['#ff5a3c', '#f0453f', '#ff6b9d', '#e84393', '#c44569', '#d63031'];
  const bg = colors[ch.charCodeAt(0) % colors.length];
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="${bg}"/><text x="50" y="50" dy=".35em" text-anchor="middle" font-family="Inter,sans-serif" font-size="48" font-weight="700" fill="#fff">${ch}</text></svg>`;
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}
document.addEventListener('error', e => {
  const img = e.target;
  if (!img || img.tagName !== 'IMG' || img.dataset.failed) return;
  img.dataset.failed = '1';
  if (img.hasAttribute('data-av')) {
    img.src = initialsAvatar(img.getAttribute('data-av') || img.getAttribute('alt'));
  } else {
    img.classList.add('img-failed');
  }
}, true);

// ───── NAV TOGGLE (mobile) + cat spin ─────
const burger = document.getElementById('burger');
const burgerCat = document.getElementById('burgerCat');
// force a consistent cat size on every page, overriding any cached CSS
if (burgerCat) {
  burgerCat.style.setProperty('width', '40px', 'important');
  burgerCat.style.setProperty('height', '40px', 'important');
  burgerCat.style.setProperty('object-fit', 'contain', 'important');
}
const scrim = document.getElementById('scrim');
// home uses the cat drawer, download uses #sidebar, else the top nav
const navTarget = document.getElementById('catDrawer')
  || document.getElementById('sidebar')
  || document.getElementById('topNav');

let spin = 0;

// inject the "Campus" brand text next to the cat icon
let topbarBrand = null;
if (burger) {
  topbarBrand = document.createElement('span');
  topbarBrand.className = 'topbar-brand';
  topbarBrand.textContent = 'Campus';
  burger.insertAdjacentElement('afterend', topbarBrand);
}

function setNav(open) {
  if (navTarget) {
    navTarget.classList.toggle('open', open);
    // when closed, take the off-screen drawer out of the tab order entirely
    navTarget.inert = !open;
  }
  if (scrim) scrim.classList.toggle('open', open);
  if (topbarBrand) topbarBrand.classList.toggle('show', open);
  document.body.style.overflow = open ? 'hidden' : '';
  if (open && burgerCat) {
    spin += 360;
    burgerCat.style.transform = `rotate(${spin}deg)`;
  }
  // move focus into the drawer when opening, back to the burger when closing
  if (open && navTarget) navTarget.querySelector('a, button')?.focus();
  else if (!open && burger && document.activeElement && navTarget?.contains(document.activeElement)) burger.focus();
}

if (burger && navTarget) {
  navTarget.inert = !navTarget.classList.contains('open'); // closed by default
  burger.addEventListener('click', () => setNav(!navTarget.classList.contains('open')));
  if (scrim) scrim.addEventListener('click', () => setNav(false));
  navTarget.querySelectorAll('a').forEach(a => a.addEventListener('click', () => setNav(false)));
}

// skip-to-content link: move real focus to the target so keyboard/screen-reader
// users land in the main content, not just scroll there
document.querySelector('.skip-link')?.addEventListener('click', e => {
  // preventDefault matters here: with <base href="/"> on clean-URL pages, the browser would
  // otherwise resolve "#main" to "/#main" and navigate to the home page instead of scrolling.
  e.preventDefault();
  const target = document.querySelector(e.currentTarget.getAttribute('href'));
  if (target) { target.setAttribute('tabindex', '-1'); target.focus(); target.scrollIntoView(); }
});

// Esc closes the drawer and any open dropdown menus
document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  if (navTarget && navTarget.classList.contains('open')) setNav(false);
  const notif = document.querySelector('.notif.open');
  if (notif) {
    notif.classList.remove('open');
    const nb = notif.querySelector('#notifBtn');
    if (nb) { nb.setAttribute('aria-expanded', 'false'); nb.focus(); }
  }
  const prof = document.querySelector('.profile.open');
  if (prof) {
    prof.classList.remove('open');
    const av = prof.querySelector('.profile-av');
    if (av) { av.setAttribute('aria-expanded', 'false'); av.focus(); }
  }
});

// arrow-key roving focus within an open dropdown menu
function enableMenuArrowKeys(menu, itemSelector, returnFocusEl) {
  if (!menu) return;
  menu.addEventListener('keydown', e => {
    const items = [...menu.querySelectorAll(itemSelector)];
    if (!items.length) return;
    const i = items.indexOf(document.activeElement);
    if (e.key === 'ArrowDown') { e.preventDefault(); items[(i + 1 + items.length) % items.length].focus(); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); items[(i - 1 + items.length) % items.length].focus(); }
    else if (e.key === 'Home') { e.preventDefault(); items[0].focus(); }
    else if (e.key === 'End') { e.preventDefault(); items[items.length - 1].focus(); }
    else if (e.key === 'Escape' && returnFocusEl) { returnFocusEl.focus(); }
  });
}

// ───── DEMO AUTH ─────
const DEMO_USER = 'catlover';
const DEMO_PASS = 'meow123';
const USER_KEY = 'campus-user';
const BLANK_PX = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

// apply a custom (cropped-photo) image onto an <img>
function applyCropToImg(img, d) {
  if (!img || !d) return;
  img.removeAttribute('srcset');
  img.src = d.image;
  img.style.objectFit = 'cover';
  img.style.objectPosition = (d.pos && d.pos !== 'center') ? d.pos : 'center';
}

// ───── PLAIN TEXT ONLY ─────
// The server refuses fancy-font letters, emoji and other symbols in anything the site sends
// (SitePlainTextMiddleware). Every text box follows the same rule as you type or paste: keyboard
// punctuation a phone swaps in (curly quotes, dashes, …) becomes plain, anything else is removed.
// Password boxes are never touched.
function toPlainText(s) {
  return s.replace(/[‘’‚′]/g, "'").replace(/[“”„″]/g, '"')
    .replace(/[–—−]/g, '-').replace(/…/g, '...').replace(/[  ]/g, ' ')
    .replace(/[^\x20-\x7E\n\r\t]/g, '');
}
let PLAIN_TOAST_AT = 0;
document.addEventListener('input', e => {
  const el = e.target;
  const box = el instanceof HTMLTextAreaElement ||
    (el instanceof HTMLInputElement && /^(text|search|email|url|tel)$/.test(el.type));
  if (!box) return;
  const v = el.value, p = toPlainText(v);
  if (p === v) return;
  let pos = null;
  try { pos = el.selectionStart - (v.length - p.length); } catch {}
  el.value = p;
  if (pos != null) { try { el.setSelectionRange(pos, pos); } catch {} }
  // Say why once per few seconds; plain punctuation swaps are silent.
  if (toPlainText(v.replace(/[‘’‚′“”„″–—−…  ]/g, '')) !== v.replace(/[‘’‚′“”„″–—−…  ]/g, '')
      && Date.now() - PLAIN_TOAST_AT > 4000 && typeof toast === 'function') {
    PLAIN_TOAST_AT = Date.now();
    toast('Only plain text is allowed - no special fonts, symbols or emoji.');
  }
}, true);

// ───── BACKEND ─────
// True when the Campus C# server is answering. apiBase is '' (same-origin), which is
// falsy, so it can't double as the "is the API up?" flag - that's what apiEnabled is for.
function apiOn() {
  return !!(window.CAMPUS_DATA && window.CAMPUS_DATA.apiEnabled);
}
function apiUrl(path) {
  return ((window.CAMPUS_DATA && window.CAMPUS_DATA.apiBase) || '') + path;
}
// The session lives in an HttpOnly cookie the server sets, so it is never readable from
// here - every call just needs credentials to ride along.
async function apiPost(path, body) {
  const resp = await fetch(apiUrl(path), {
    method: 'POST',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body || {}),
  });
  const out = await resp.json().catch(() => ({}));
  banRefused(resp, out);
  return { ok: resp.ok && out.ok !== false, status: resp.status, data: out };
}

// A banned account is signed in but can't change anything: the server answers every write with
// 403 {banned: true, error}. Say so, whatever the caller does with the failure.
function banRefused(resp, out) {
  if (resp && resp.status === 403 && out && out.banned) { toast(out.error || 'This account is banned.'); return true; }
  return false;
}

// DELETE an API path. Same envelope as apiPost.
async function apiDelete(path) {
  const resp = await fetch(apiUrl(path), { method: 'DELETE', credentials: 'same-origin' });
  const out = await resp.json().catch(() => ({}));
  banRefused(resp, out);
  return { ok: resp.ok && out.ok !== false, status: resp.status, data: out };
}

// A photo's numeric server id from the element it was rendered in (data-photo), or null for
// demo content - which stays local-only.
function photoIdOf(el) {
  const host = el && el.closest('[data-photo]');
  const id = host && host.dataset.photo;
  return id && /^\d+$/.test(id) ? id : null;
}

// GET an API path as JSON. Returns null on any failure so callers can fall back.
async function apiGet(path) {
  try {
    const resp = await fetch(apiUrl(path), { credentials: 'same-origin' });
    if (!resp.ok) return null;
    return await resp.json();
  } catch { return null; }
}

// ───── CLEAN URLS (/user/{h}, /room/{id}, /image/{id}) ─────
// Pages are served at clean paths by WebController; the page JS reads its id/handle from
// the path here. Query params (?u=, ?id=) still work as a fallback for old links.
function userUrl(h) { return '/user/' + encodeURIComponent(String(h || '').replace(/^@/, '')); }

// ───── EVENTS (a profile's Events tab and a room's Events tab) ─────
// Cards come from /api/site/profile/{h}/events and /api/site/rooms/{id}/events: { id, name, description, image,
// start, end (UTC ISO), status live|upcoming|ended, room{id,name}, host{...}, going, interested, myResponse }.
// Times are shown in the visitor's own timezone. Signed-in visitors can RSVP (Going / Interested) right on the card.
function eventWhen(e) {
  // "Jan 12th, 1:00pm - 2:00pm" (a multi-day event: "Jan 12th, 9:00pm - Jan 13th, 1:00am"), in the visitor's timezone
  const s = new Date(e.start), en = new Date(e.end);
  const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  const ord = n => { const v = n % 100; return n + ((v >= 11 && v <= 13) ? 'th' : (['th', 'st', 'nd', 'rd'][n % 10] || 'th')); };
  const day = d => MON[d.getMonth()] + ' ' + ord(d.getDate());
  const tm = d => { let h = d.getHours(); const ap = h >= 12 ? 'pm' : 'am'; h = h % 12 || 12; return h + ':' + String(d.getMinutes()).padStart(2, '0') + ap; };
  if (e.status === 'live') return 'Live now \u00b7 until ' + tm(en);
  return s.toDateString() === en.toDateString()
    ? `${day(s)}, ${tm(s)} - ${tm(en)}`
    : `${day(s)}, ${tm(s)} - ${day(en)}, ${tm(en)}`;
}

function eventCardHtml(e, opts) {
  opts = opts || {};
  const href = '/event/' + encodeURIComponent(e.id);
  const hostName = e.host ? (e.host.username || '') : '';
  const av = (e.host && e.host.profile_image) || avatarUrl(hostName || 'player');
  const img = e.image ? `background-image:url('${escapeHtml(e.image)}')` : 'background-image:linear-gradient(135deg,#ff5a3c,#7b2ff7)';
  const badge = e.status === 'live' ? '<span class="pevent-live">LIVE</span>' : e.status === 'ended' ? '<span class="pevent-tag">ENDED</span>' : '';
  const canRsvp = e.status !== 'ended' && !!(typeof CAMPUS_ME !== 'undefined' && CAMPUS_ME);
  const rsvp = canRsvp
    ? `<div class="pevent-rsvp"><button type="button" data-r="going" class="${e.myResponse === 'going' ? 'on' : ''}">Going</button>`
      + `<button type="button" data-r="interested" class="${e.myResponse === 'interested' ? 'on' : ''}">Interested</button></div>`
    : '';
  // the Rec Room style card: picture + title + @host, a big picture, when, N ATTENDING
  return `<article class="evc event-card${e.status === 'ended' ? ' event-ended' : ''}" data-event="${e.id}" data-href="${href}">
      <a class="evc-head" href="${href}">
        <img src="${escapeHtml(av)}" alt="" onerror="this.style.visibility='hidden'">
        <span class="evc-titles"><b>${escapeHtml(e.name)}</b><small>${hostName ? '@' + escapeHtml(hostName) : ''}</small></span>
      </a>
      <a class="evc-img" href="${href}" style="${img}">${badge}</a>
      <div class="evc-meta">
        <span class="evc-when">${escapeHtml(eventWhen(e))}</span>
        <span class="evc-att"><b>${e.going || 0}</b> ATTENDING</span>
      </div>
      ${rsvp}
    </article>`;
}

function renderEvents(el, events, opts, emptyText) {
  if (!events || !events.length) { el.innerHTML = `<p class="profile-empty">${escapeHtml(emptyText || 'No events.')}</p>`; return; }
  el.innerHTML = events.map(e => eventCardHtml(e, opts)).join('');
  el.querySelectorAll('.event-card').forEach(c => c.addEventListener('click', ev => {
    if (ev.target.closest('a, button')) return;
    location.href = c.dataset.href;
  }));
  el.querySelectorAll('.pevent-rsvp button').forEach(btn => btn.addEventListener('click', async () => {
    const card = btn.closest('.event-card');
    const id = card && card.dataset.event;
    const ev = events.find(x => String(x.id) === String(id));
    if (!ev) return;
    // pressing the answer you already gave takes it back
    const want = ev.myResponse === btn.dataset.r ? 'none' : btn.dataset.r;
    btn.disabled = true;
    const r = await apiPost('/api/site/events/' + encodeURIComponent(id) + '/respond', { response: want });
    btn.disabled = false;
    if (r && r.ok && r.data && r.data.event) {
      Object.assign(ev, r.data.event);
      renderEvents(el, events, opts, emptyText);   // re-draw the list with the new counts and your answer
    } else toast((r && r.data && r.data.error) || 'Could not save your answer');
  }));
}

async function loadEvents(el, path, opts, emptyText) {
  if (!el) return;
  if (!apiOn()) { el.innerHTML = `<p class="profile-empty">${escapeHtml(emptyText || 'No events.')}</p>`; return; }
  el.innerHTML = '<div class="feed-loading">Loading events\u2026</div>';
  // (the later apiGet in this file THROWS on a non-OK answer, the earlier one returns null: handle both)
  let data = null;
  try { data = await apiGet(path); } catch { data = null; }
  renderEvents(el, data && data.ok ? data.events : [], opts, emptyText);
}


// Settings header: your own live status (Online · room / Offline) from the same profile API the
// profile page uses; re-run on every "profile" push about you.
async function renderSettingsStatus() {
  const el = document.getElementById('suStatus');
  const me = localStorage.getItem(USER_KEY);
  if (!el || !me || !apiOn()) return;
  const r = await apiGet('/api/site/profile/' + encodeURIComponent(me));
  const st = r && r.status;
  if (r && r.user && r.user.id) siteWatch(me, r.user.id);
  const dot = el.querySelector('.su-dot');
  if (dot) dot.style.background = st && st.online ? '#2ecc71' : '#9a9aa6';
  el.lastChild.textContent = ' ' + (st ? (st.online ? ('Online' + (st.where ? ' · ' + st.where : '')) : 'Offline') : '');
}

// ---- realtime: which profile this tab is looking at ------------------------------------------
// The site socket (ensureNotifSocket) tells the server, and the server pushes "profile" (status,
// room, name, counts changed - re-fetch) and "spotify" (a new track / pause / seek, already
// filtered for this viewer) frames for it. SITE_WATCH is the handle; SITE_WATCH_ID the account id
// once a fetch has told us (the frames carry the id).
let SITE_WATCH = null, SITE_WATCH_ID = null;
function siteWatch(handle, id) {
  if (handle) SITE_WATCH = String(handle).replace(/^@/, '');
  if (id) SITE_WATCH_ID = String(id);
  if (!SITE_WATCH) return;
  try { if (NOTIF_WS && NOTIF_WS.readyState === 1) NOTIF_WS.send(JSON.stringify({ type: 'watch', profile: SITE_WATCH })); } catch {}
}

// ---- socials --------------------------------------------------------------------------
// Icon per platform (simple monochrome glyphs, currentColor). Keys match SiteSocials.
const SOCIAL_ICONS = {
  discord: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.3 4.4A19.8 19.8 0 0 0 15.4 3l-.25.5a14.5 14.5 0 0 1 4.3 1.4 16.6 16.6 0 0 0-14.9 0A14.5 14.5 0 0 1 8.85 3.5L8.6 3a19.8 19.8 0 0 0-4.9 1.4C.6 9 .07 13.5.34 17.9a19.9 19.9 0 0 0 6 3l.5-.7c-.66-.25-1.28-.55-1.86-.9l.46-.36a14.2 14.2 0 0 0 12.12 0l.46.36c-.58.35-1.2.65-1.86.9l.5.7a19.9 19.9 0 0 0 6-3c.33-5.13-.53-9.6-3.86-13.5ZM8.3 15.3c-1.17 0-2.13-1.08-2.13-2.4 0-1.32.94-2.4 2.13-2.4s2.15 1.08 2.13 2.4c0 1.32-.95 2.4-2.13 2.4Zm7.4 0c-1.17 0-2.13-1.08-2.13-2.4 0-1.32.94-2.4 2.13-2.4s2.15 1.08 2.13 2.4c0 1.32-.94 2.4-2.13 2.4Z"/></svg>',
  x: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 3h3.1l-6.8 7.8L21.8 21h-6.3l-4.9-6.4L5 21H1.9l7.3-8.3L1.5 3h6.4l4.4 5.9L17.5 3Zm-1.1 16.2h1.7L7.1 4.7H5.3l11.1 14.5Z"/></svg>',
  youtube: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23 7.2a2.9 2.9 0 0 0-2-2C19.2 4.7 12 4.7 12 4.7s-7.2 0-9 .5a2.9 2.9 0 0 0-2 2C.5 9 .5 12 .5 12s0 3 .5 4.8a2.9 2.9 0 0 0 2 2c1.8.5 9 .5 9 .5s7.2 0 9-.5a2.9 2.9 0 0 0 2-2c.5-1.8.5-4.8.5-4.8s0-3-.5-4.8ZM9.7 15.1V8.9l6 3.1-6 3.1Z"/></svg>',
  tiktok: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.1v12.4a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.7a5.7 5.7 0 1 0 4.9 5.7V9.2a7.4 7.4 0 0 0 4.3 1.4V7.5a4.3 4.3 0 0 1-3.2-1.7Z"/></svg>',
  instagram: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>',
  twitch: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.3 2 2.5 6.5V20h5v3h2.8l2.8-3h4.2l5.2-5.2V2H4.3Zm16.4 11.9-3.2 3.2h-5.2l-2.8 2.8v-2.8H5.3V4h15.4v9.9ZM16.9 7.2h-2v5.6h2V7.2Zm-5.2 0h-2v5.6h2V7.2Z"/></svg>',
  steam: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-10 9.3l5.4 2.2a2.8 2.8 0 0 1 1.6-.5h.2l2.4-3.5v-.1a3.8 3.8 0 1 1 3.8 3.8h-.1l-3.4 2.4v.2a2.8 2.8 0 0 1-5.6.3L2.4 14.5A10 10 0 1 0 12 2Zm-3.7 15.2-1.2-.5a2.1 2.1 0 0 0 3.9-.9 2.1 2.1 0 0 0-2-2.2l1.3.5a1.6 1.6 0 1 1-2 3.1Zm7.1-5.5a2.5 2.5 0 1 1 0-5.1 2.5 2.5 0 0 1 0 5.1Zm0-4.4a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8Z"/></svg>',
  github: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5A11.5 11.5 0 0 0 .5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.2 1.2a11 11 0 0 1 5.8 0c2.2-1.5 3.2-1.2 3.2-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.2c0 .3.2.7.8.6A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>',
  reddit: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12.1a2.2 2.2 0 0 0-3.7-1.6 10.8 10.8 0 0 0-5.8-1.8l1-4.6 3.2.7a1.5 1.5 0 1 0 .2-1l-3.6-.8a.5.5 0 0 0-.6.4L11.6 8.7a10.8 10.8 0 0 0-5.9 1.8 2.2 2.2 0 1 0-2.4 3.6 4.3 4.3 0 0 0 0 .7c0 3.4 3.9 6.1 8.7 6.1s8.7-2.7 8.7-6.1a4.3 4.3 0 0 0 0-.7 2.2 2.2 0 0 0 1.3-2ZM7 13.6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm8.6 4.1a5.7 5.7 0 0 1-3.6 1.1 5.7 5.7 0 0 1-3.6-1.1.4.4 0 0 1 .6-.6 4.9 4.9 0 0 0 3 .9 4.9 4.9 0 0 0 3-.9.4.4 0 0 1 .6.6Zm-.3-2.6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/></svg>',
  spotify: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1.5a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21Zm4.8 15.2a.65.65 0 0 1-.9.2c-2.5-1.5-5.6-1.9-9.3-1a.65.65 0 1 1-.3-1.3c4-.9 7.5-.5 10.3 1.2.3.2.4.6.2.9Zm1.3-2.9a.8.8 0 0 1-1.1.3c-2.8-1.7-7.2-2.2-10.5-1.2a.8.8 0 1 1-.5-1.6c3.8-1.1 8.6-.6 11.9 1.4.4.2.5.7.2 1.1Zm.1-3a1 1 0 0 1-1.3.3C13.5 9.2 8 9 4.8 10a1 1 0 0 1-.6-1.9c3.7-1.1 9.8-.9 13.7 1.4a1 1 0 0 1 .3 1.3Z"/></svg>'
};
function renderSocials(el, rows) {
  if (!el) return;
  const list = Array.isArray(rows) ? rows : [];
  if (!list.length) { el.hidden = true; el.innerHTML = ''; return; }
  el.innerHTML = list.map(r => {
    const ico = SOCIAL_ICONS[r.platform] || '';
    const inner = ico + '<span class="sc-handle">' + escapeHtml(r.handle || '') + '</span>';
    return r.url
      ? '<a class="social-chip" href="' + escapeHtml(r.url) + '" target="_blank" rel="noopener" title="' + escapeHtml(r.label || '') + '">' + inner + '</a>'
      : '<span class="social-chip static" title="' + escapeHtml(r.label || '') + ' (click to copy)" data-copy="' + escapeHtml(r.handle || '') + '">' + inner + '</span>';
  }).join('');
  el.hidden = false;
  el.querySelectorAll('.social-chip.static').forEach(ch => ch.addEventListener('click', async () => {
    try { await navigator.clipboard.writeText(ch.dataset.copy || ''); toast('Copied ' + (ch.dataset.copy || '')); } catch {}
  }));
}

// ---- Spotify "listening to" ----------------------------------------------------------------
// np = {is_playing, track, artists, album, album_art, url, progress_ms, duration_ms, as_of} from
// the server (null = nothing to show). The bar keeps moving between polls: progress is advanced
// locally while the track is playing.
const SP_ICON = '<svg class="sp-ic" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 1.5C6.2 1.5 1.5 6.2 1.5 12S6.2 22.5 12 22.5 22.5 17.8 22.5 12 17.8 1.5 12 1.5zm4.8 15.2a.65.65 0 0 1-.9.2c-2.5-1.5-5.6-1.9-9.3-1a.65.65 0 1 1-.3-1.3c4-.9 7.5-.5 10.3 1.2.3.2.4.6.2.9zm1.3-2.9a.8.8 0 0 1-1.1.3c-2.8-1.7-7.1-2.2-10.5-1.2a.8.8 0 1 1-.5-1.6c3.8-1.2 8.5-.6 11.8 1.4.4.2.5.7.3 1.1zm.1-3a1 1 0 0 1-1.3.3C13.6 9.2 8.3 9 5.1 10a1 1 0 1 1-.6-1.9c3.7-1.1 9.6-.9 13.4 1.4.5.3.6.9.3 1.3z"/></svg>';
function spFmt(ms) { ms = Math.max(0, ms | 0); const s = Math.floor(ms / 1000); return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); }
function renderSpotify(el, np) {
  if (!el) return;
  if (!np || !np.track) { el.hidden = true; el.innerHTML = ''; el._np = null; return; }
  const esc = (typeof escapeHtml === 'function') ? escapeHtml : (x => String(x));
  el.hidden = false;
  el.classList.toggle('paused', !np.is_playing);
  if (el.tagName === 'A') { if (np.url) el.href = np.url; else el.removeAttribute('href'); }
  el.innerHTML = (np.album_art ? '<img class="sp-art" src="' + esc(np.album_art) + '" alt="">' : '')
    + '<div class="sp-meta">'
    + '<div class="sp-line">' + SP_ICON + '<span class="sp-track">' + (np.is_playing ? 'Listening to ' : 'Paused · ') + '<b>' + esc(np.track) + '</b></span>'
    + '<span class="sp-by">— ' + esc(np.artists || np.album || '') + '</span></div>'
    + '<div class="sp-bar"><i></i></div>'
    + '<div class="sp-time"><span class="sp-cur"></span><span class="sp-dur">' + spFmt(np.duration_ms) + '</span></div>'
    + '</div>';
  el._np = Object.assign({}, np, { at: Date.now() });
  spTick(el);
}
function spTick(el) {
  const np = el && el._np; if (!np) return;
  let p = np.progress_ms + (np.is_playing ? (Date.now() - np.at) : 0);
  if (np.duration_ms > 0) p = Math.min(p, np.duration_ms);
  const bar = el.querySelector('.sp-bar i'), cur = el.querySelector('.sp-cur');
  if (bar) bar.style.width = (np.duration_ms > 0 ? (100 * p / np.duration_ms) : 0).toFixed(2) + '%';
  if (cur) cur.textContent = spFmt(p);
}
setInterval(() => { document.querySelectorAll('.spotify-now').forEach(el => { if (!el.hidden) spTick(el); }); }, 1000);
function roomUrl(id) { return '/room/' + encodeURIComponent(id); }
function imageUrl(id) { return '/image/' + encodeURIComponent(id); }

// The slug for the current clean path of a given kind, or null.
function routeSlug(kind) {
  const m = location.pathname.match(new RegExp('^/' + kind + '/([^/?#]+)'));
  return m ? decodeURIComponent(m[1]) : null;
}
// Which viewed user/room/image this page is about (clean path first, then ?u=/?id=).
function viewedHandle() { return routeSlug('user') || new URLSearchParams(location.search).get('u'); }
function viewedRoomId() { return routeSlug('room') || new URLSearchParams(location.search).get('id'); }
function viewedImageId() { return routeSlug('image') || new URLSearchParams(location.search).get('id'); }

// Turn an old .html href into its clean equivalent.
function cleanHref(href) {
  if (!href || !/\.html/i.test(href)) return href;
  try {
    const u = new URL(href, location.origin);
    if (u.origin !== location.origin) return href;
    const page = u.pathname.replace(/^.*\//, '');   // filename only
    const qs = u.searchParams;
    if (page === 'profile.html') { const h = qs.get('u'); return h ? userUrl(h) : '/profile'; }
    if (page === 'room.html') { const id = qs.get('id'); return id ? roomUrl(id) : '/'; }
    if (page === 'image.html') { const id = qs.get('id'); return id ? imageUrl(id) : '/'; }
    const map = {
      'index.html': '/', 'login.html': '/login', 'settings.html': '/settings', 'stats.html': '/stats',
      'download.html': '/download', 'accessibility.html': '/accessibility',
      'news.html': '/news', 'patch-notes.html': '/patch-notes', 'weekly.html': '/weekly',
      'support.html': '/support',
    };
    if (map[page]) return map[page] + (page.startsWith('news') || page.startsWith('patch') || page.startsWith('weekly') ? u.search : '');
    return href;
  } catch { return href; }
}
// Rewrite every .html anchor under root (or the whole document) to a clean URL.
function rewriteLinks(root) {
  (root || document).querySelectorAll('a[href]').forEach(a => {
    const h = a.getAttribute('href');
    const c = cleanHref(h);
    if (c && c !== h) a.setAttribute('href', c);
  });
}
// Static nav is present now (app.js runs after the DOM).
rewriteLinks();
// Catch dynamically-rendered links too (feed, profile, search, rails) without editing every
// generator: rewrite any .html anchor as it's added to the DOM.
try {
  new MutationObserver(muts => {
    for (const m of muts) {
      m.addedNodes.forEach(n => {
        if (n.nodeType !== 1) return;
        if (n.tagName === 'A') { const h = n.getAttribute('href'); const c = cleanHref(h); if (c && c !== h) n.setAttribute('href', c); }
        if (n.querySelectorAll) rewriteLinks(n);
      });
    }
  }).observe(document.documentElement, { childList: true, subtree: true });
} catch {}

// The signed-in account, as last reported by the server. localStorage still holds the
// username so the header can render before /api/site/me answers, but the SERVER is the
// authority: syncSession() clears the local copy if the session is gone or expired.
let CAMPUS_ME = null;
let CAMPUS_ADMIN = false;

// All the localStorage keys that describe WHO is signed in. They're stored under fixed
// (not per-user) keys, so switching accounts must overwrite them or the header/settings/tab
// keep showing the previous user. setIdentityCache mirrors the server's account; clearIdentity
// wipes them on logout/401.
function setIdentityCache(u) {
  if (!u || !u.username) return;
  try {
    localStorage.setItem(USER_KEY, u.username);
    localStorage.setItem('campus-username', u.username);
    localStorage.setItem('campus-mynick', u.display_name || u.username);
    localStorage.setItem('campus-mybio', u.bio || '');
  } catch {}
}
function clearIdentityCache() {
  try {
    ['campus-user', 'campus-username', 'campus-mynick', 'campus-mybio'].forEach(k => localStorage.removeItem(k));
  } catch {}
}
// Repaint the already-rendered header chip + settings header from the current cache, so a
// server correction that lands AFTER the first paint (renderAuth runs before syncSession
// resolves) still shows the right name/@handle without needing a manual reload.
function refreshIdentityUI() {
  const me = localStorage.getItem(USER_KEY);
  if (!me) return;
  const name = myDisplayName(me), handle = '@' + myHandle(me);
  document.querySelectorAll('.pm-name').forEach(el => el.textContent = name);
  document.querySelectorAll('.pm-handle').forEach(el => el.textContent = handle);
  const suName = document.getElementById('suName'); if (suName) suName.textContent = name;
  const suHandle = document.getElementById('suHandle'); if (suHandle) suHandle.textContent = handle;
  const u = document.getElementById('setUsername'); if (u && !u.value) u.placeholder = myHandle(me);
  const n = document.getElementById('setNickname'); if (n && !n.value) n.placeholder = myDisplayName(me);
}

async function syncSession() {
  if (!apiOn()) return null;
  try {
    const resp = await fetch(apiUrl('/api/site/me'), { credentials: 'same-origin' });
    if (!resp.ok) {
      // 401 = signed out or the 12h token expired. Drop the stale local identity so the
      // UI doesn't keep showing a logged-in header for a session the server has dropped.
      if (resp.status === 401) { CAMPUS_ME = null; clearIdentityCache(); }
      return null;
    }
    const out = await resp.json();
    CAMPUS_ME = out.user || null;
    CAMPUS_ADMIN = !!out.admin;   // dev account on an admin-allowed network: shows the Admin button
    // The SERVER session is the authority. Overwrite the cached identity keys every load so
    // switching accounts - or creating a new one without logging out first - can never leave
    // the previous user's name/@handle/bio showing in the header, settings or tab.
    if (CAMPUS_ME && CAMPUS_ME.username) setIdentityCache(CAMPUS_ME);
    return CAMPUS_ME;
  } catch {
    return null;   // server unreachable: leave whatever the page already rendered
  }
}

// handle the login form (+ its 2FA second step, for an account that turned it on)
const loginForm = document.getElementById('loginForm');
const login2faForm = document.getElementById('login2faForm');
let loginPendingTicket = '';

function showLogin2faStep(pending) {
  loginPendingTicket = pending;
  loginForm.style.display = 'none';
  document.getElementById('loginFoot').style.display = 'none';
  login2faForm.style.display = 'block';
  document.getElementById('login2faCode').focus();
}

if (loginForm) {
  loginForm.addEventListener('submit', async e => {
    e.preventDefault();
    const u = (document.getElementById('loginUser').value || '').trim();
    const p = document.getElementById('loginPass').value || '';
    const err = document.getElementById('loginError');
    const btn = loginForm.querySelector('.login-submit');

    const fail = msg => {
      err.textContent = msg;
      err.classList.add('show');
      if (btn) { btn.disabled = false; btn.textContent = 'Log in'; }
    };

    if (!u || !p) return fail('Enter your username and password.');

    // Offline demo mode (apiEnabled: false) keeps the old hardcoded account.
    if (!apiOn()) {
      if (u.toLowerCase() === DEMO_USER && p === DEMO_PASS) {
        localStorage.setItem(USER_KEY, 'catlover');
        window.location.href = '/';
      } else {
        fail('Incorrect username or password - try the demo login below.');
      }
      return;
    }

    if (btn) { btn.disabled = true; btn.textContent = 'Logging in…'; }
    err.classList.remove('show');

    try {
      const { ok, data } = await apiPost('/api/site/login', { username: u, password: p });
      if (data && data.need2fa) { if (btn) { btn.disabled = false; btn.textContent = 'Log in'; } showLogin2faStep(data.pending); return; }
      if (!ok) return fail(data.error || 'Incorrect username or password.');
      if (data.user && data.user.username) { clearIdentityCache(); setIdentityCache(data.user); }
      window.location.href = '/';
    } catch {
      fail('Could not reach the server. Try again in a moment.');
    }
  });
}

if (login2faForm) {
  document.getElementById('login2faBack').addEventListener('click', () => {
    login2faForm.style.display = 'none';
    loginForm.style.display = 'block';
    document.getElementById('loginFoot').style.display = '';
    document.getElementById('loginError').textContent = '';
    document.getElementById('loginError').classList.remove('show');
  });
  login2faForm.addEventListener('submit', async e => {
    e.preventDefault();
    const err = document.getElementById('login2faError');
    const btn = login2faForm.querySelector('.login-submit');
    err.classList.remove('show'); err.textContent = '';
    if (btn) { btn.disabled = true; btn.textContent = 'Verifying…'; }
    try {
      const { ok, data } = await apiPost('/api/site/login/2fa', { pending: loginPendingTicket, code: document.getElementById('login2faCode').value });
      if (btn) { btn.disabled = false; btn.textContent = 'Verify'; }
      if (data && data.pending) loginPendingTicket = data.pending;
      if (!ok) { err.textContent = data.error || 'Wrong code.'; err.classList.add('show'); document.getElementById('login2faCode').value = ''; return; }
      if (data.user && data.user.username) { clearIdentityCache(); setIdentityCache(data.user); }
      window.location.href = '/';
    } catch {
      if (btn) { btn.disabled = false; btn.textContent = 'Verify'; }
      err.textContent = 'Could not reach the server. Try again in a moment.'; err.classList.add('show');
    }
  });
}

// handle the create-account (signup) form
const signupForm = document.getElementById('signupForm');
if (signupForm) {
  signupForm.addEventListener('submit', async e => {
    e.preventDefault();
    const val = id => (document.getElementById(id)?.value || '');
    const username = val('suUser').trim();
    const birthday  = val('suDob').trim();   // YYYY-MM-DD from <input type=date>
    const pass      = val('suPass');
    const confirm   = val('suConfirm');
    const email     = val('suEmail').trim();
    const website   = val('suWebsite');   // honeypot - stays empty for humans
    const err = document.getElementById('signupError');
    const btn = signupForm.querySelector('.login-submit');

    const fail = msg => {
      err.textContent = msg;
      err.classList.add('show');
      if (btn) { btn.disabled = false; btn.textContent = 'Create account'; }
    };

    // Client-side mirrors of the server rules, for instant feedback. The server re-checks all.
    // NOTE: under-13 accounts get a random @name assigned by the server and are set to junior,
    // so the username rules below are only a courtesy for 13+ (the server re-validates anyway).
    if (username.length < 3 || username.length > 20) return fail('Username must be 3-20 characters.');
    if (!/^[A-Za-z0-9_]+$/.test(username)) return fail('Username can only use letters, numbers and underscores.');
    if (!birthday) return fail('Enter your date of birth.');
    if (pass.length < 6) return fail('Password must be at least 6 characters.');
    if (pass !== confirm) return fail("The passwords don't match.");

    if (!apiOn()) return fail('Sign-up needs the live server.');

    if (btn) { btn.disabled = true; btn.textContent = 'Creating…'; }
    err.classList.remove('show');

    try {
      const { ok, data } = await apiPost('/api/site/register', {
        username, password: pass,
        confirm_password: confirm, email, birthday, website
      });
      if (!ok) return fail(data.error || 'Could not create account.');
      if (data.user && data.user.username) { clearIdentityCache(); setIdentityCache(data.user); }
      window.location.href = '/';
    } catch {
      fail('Could not reach the server. Try again in a moment.');
    }
  });
}

// display name / handle for the logged-in user (username + nickname can be customised)
function myDisplayName(login) {
  return localStorage.getItem('campus-mynick') || localStorage.getItem('campus-username') || cap(login || '');
}
function myHandle(login) {
  return localStorage.getItem('campus-username') || login || '';
}

// reflect logged-in state in the UI (runs on every page)
function renderAuth() {
  const user = localStorage.getItem(USER_KEY);
  if (!user) return;

  // swap "Log in" for the profile picture + dropdown menu
  const loginBtn = document.querySelector('.btn-login');
  if (loginBtn) {
    const av = avatarUrl(user);
    const chip = document.createElement('div');
    chip.className = 'profile';
    chip.innerHTML =
      `<img class="profile-av" data-av="${avKey(user)}" src="${av}" alt="${user}" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Account menu">
       <div class="profile-menu" role="menu">
         <div class="pm-head">
           <img class="pm-av" data-av="${avKey(user)}" src="${av}" alt="">
           <div class="pm-info"><span class="pm-name">${myDisplayName(user)}</span><span class="pm-handle">@${myHandle(user)}</span></div>
         </div>
         <div class="pm-tokens">
           <span class="pm-token-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 7.5v11"/><path d="M10 11c0-2.2 2.2-3.5 4.6-2.9"/><path d="M7 13.6h6.5"/><path d="M7 16.2h6.5"/></svg></span>
           <span class="pm-token-val">1,250</span>
         </div>
         <a href="/profile" class="pm-item"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.6"/><path d="M4 17c0-3 2.7-5 6-5s6 2 6 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>Profile</a>
         <a href="#" class="pm-item"><svg viewBox="0 0 20 20" fill="none"><path d="M4 6h12l-1 9a2 2 0 0 1-2 1.7H7A2 2 0 0 1 5 15L4 6Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M7 6a3 3 0 0 1 6 0" stroke="currentColor" stroke-width="1.6"/></svg>Shop</a>
         <a href="/stats" class="pm-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V10"/><path d="M10 19V4"/><path d="M16 19v-7"/><path d="M22 19H2"/></svg>Stats</a>
         <a href="/settings" class="pm-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
         <button class="pm-item pm-logout"><svg viewBox="0 0 20 20" fill="none"><path d="M8 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3M13 14l4-4-4-4M17 10H8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Log out</button>
       </div>`;
    loginBtn.replaceWith(chip);

    const avBtn = chip.querySelector('.profile-av');
    function toggleProfile(open) {
      document.querySelector('.notif')?.classList.remove('open');
      const isOpen = open ?? !chip.classList.contains('open');
      chip.classList.toggle('open', isOpen);
      avBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      if (isOpen) chip.querySelector('.pm-item')?.focus();
    }
    avBtn.addEventListener('click', e => { e.stopPropagation(); toggleProfile(); });
    avBtn.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleProfile(); }
      else if (e.key === 'ArrowDown') { e.preventDefault(); toggleProfile(true); }
    });
    enableMenuArrowKeys(chip.querySelector('.profile-menu'), '.pm-item', avBtn);
    chip.querySelector('.pm-logout').addEventListener('click', async () => {
      // Tell the server first so it clears the session cookie; the local wipe and the
      // reload happen either way, so a failed request still logs you out of this browser.
      if (apiOn()) { try { await apiPost('/api/site/logout'); } catch {} }
      clearIdentityCache();
      window.location.reload();
    });
    document.addEventListener('click', e => {
      if (!chip.contains(e.target)) toggleProfile(false);
    });
  }

  // hide the top-bar Download button while logged in
  const dlBtn = document.querySelector('.top-right .btn-dl');
  if (dlBtn) dlBtn.style.display = 'none';
}

// Render immediately from the cached username so the header doesn't flash, then confirm
// with the server. If the session turned out to be dead, syncSession cleared USER_KEY and
// this second pass leaves the "Log in" button in place.
renderAuth();
const SESSION_READY = syncSession();
SESSION_READY.then(me => renderBanBanner(me));
SESSION_READY.then(me => {
  const alreadyRendered = !!document.querySelector('.profile');
  if (me && !alreadyRendered) renderAuth();
  // syncSession may have corrected the cached identity (account switch / new account); repaint
  // the header + settings text so it doesn't keep showing the previous user.
  if (me) refreshIdentityUI();
  // Now the server has answered, swap the REAL profile picture in wherever the logged-in
  // user's own avatar shows: the top-right nav chip and the settings header. /api/site/me
  // hands back a raw image name, so turn it into a /img/ URL first.
  applyMyAvatar();
});

// The logged-in user's real profile-picture URL (from CAMPUS_ME), or null.
function myPfpUrl() {
  const raw = CAMPUS_ME && CAMPUS_ME.profile_image;
  if (!raw) return null;
  return /^https?:|^\//.test(raw) ? raw : (((window.CAMPUS_DATA && window.CAMPUS_DATA.imgBase) || '/img/') + raw);
}
// Point every "me" avatar (nav chip + settings) at the real picture, and show the real token
// balance in the account menu.
async function applyMyAvatar() {
  const me = localStorage.getItem(USER_KEY);
  if (!me) return;

  // Avatar: the in-game profile picture, taken from the PUBLIC profile endpoint - it returns
  // profile_image as a ready-to-use /img/ URL (the same one that makes the profile-page avatar
  // work), so this is the source of truth. CAMPUS_ME's raw name is only a last-ditch fallback.
  let url = null;
  if (apiOn()) {
    const r = await apiGet('/api/site/profile/' + encodeURIComponent(me));
    if (r && r.ok && r.user && r.user.profile_image) url = r.user.profile_image;
  }
  if (!url) url = myPfpUrl();
  if (url) {
    // Persist so avatarUrl() hands back the real picture on EVERY page (comments, feed, nav,
    // profile - anywhere the user's avatar is drawn), and update every already-rendered avatar
    // for this user on THIS page live. The 'storage' listener carries the change to other tabs.
    try { localStorage.setItem('campus-pfp-' + avKey(me), JSON.stringify({ image: url })); } catch {}
    refreshAvatars(avKey(me), url);
    document.querySelectorAll('.profile-av, .pm-av, #suAv').forEach(im => {
      im.removeAttribute('srcset'); im.dataset.failed = ''; im.src = url; im.style.objectFit = 'cover';
    });
  }

  // Tokens (RecCenterTokens) from the authed /me - matches what the game shows. Left as the
  // placeholder if the website session isn't authed (a balance must not come from a public call).
  const tokens = CAMPUS_ME && CAMPUS_ME.tokens;
  if (tokens != null) document.querySelectorAll('.pm-token-val').forEach(el => { el.textContent = Number(tokens).toLocaleString(); });
}

// ───── NOTIFICATIONS (real, persistent, game-synced inbox) ─────
// Reads /api/site/notifications, which aggregates the two server-side sources of truth so the
// website shows exactly what the game does: incoming friend requests (accept/decline here) and
// saved messages (cheers, coach messages…). Game / party / join invites can't be actioned in a
// browser, so they show "Launch the game to view." Actions hit the same endpoints the game uses,
// so dismissing / accepting stays in sync. NOTIF_ITEMS === null means signed out.
let NOTIF_ITEMS = [];
let NOTIF_WRAP = null, NOTIF_MENU = null, NOTIF_BADGE = null, NOTIF_BTN = null;

function notifTimeAgo(iso) {
  if (!iso) return '';
  const t = new Date(iso).getTime();
  if (isNaN(t)) return '';
  const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
  if (s < 60) return 'just now';
  const m = Math.floor(s / 60); if (m < 60) return m + 'm ago';
  const h = Math.floor(m / 60); if (h < 24) return h + 'h ago';
  const d = Math.floor(h / 24); if (d < 7) return d + 'd ago';
  return new Date(iso).toLocaleDateString();
}

function notifAvatarHtml(item) {
  const seed = (item.fromPlayer && item.fromPlayer.username) || 'player';
  const src = (item.fromPlayer && item.fromPlayer.profile_image) || avatarUrl(seed);
  return `<img class="nm-av" data-av="${avKey(seed)}" src="${src}" alt="">`;
}

async function fetchNotifications() {
  // apiGet THROWS on 401 (signed out) / any non-ok, so catch and treat as "no inbox" (null).
  try {
    const data = await apiGet('/api/site/notifications');
    NOTIF_ITEMS = (data && data.ok !== false && Array.isArray(data.items)) ? data.items : null;
  } catch {
    NOTIF_ITEMS = null;
  }
}

function syncNotifBadge() {
  if (!NOTIF_BTN) return;
  const n = Array.isArray(NOTIF_ITEMS) ? NOTIF_ITEMS.length : 0;
  NOTIF_BTN.setAttribute('aria-label', n > 0 ? `Notifications, ${n} unread` : 'Notifications');
  if (!NOTIF_BADGE) return;
  if (n > 0) { NOTIF_BADGE.textContent = n > 99 ? '99+' : n; NOTIF_BADGE.classList.remove('hidden'); }
  else { NOTIF_BADGE.textContent = ''; NOTIF_BADGE.classList.add('hidden'); }
}

function renderNotifMenu() {
  if (!NOTIF_MENU) return;
  let rows;
  if (NOTIF_ITEMS === null) {
    rows = '<p class="nm-empty">Log in to see your notifications</p>';
  } else if (NOTIF_ITEMS.length === 0) {
    rows = '<p class="nm-empty">You\'re all caught up</p>';
  } else {
    rows = NOTIF_ITEMS.map(n => {
      const time = n.time ? `<span class="nm-time">${notifTimeAgo(n.time)}</span>` : '';
      if (n.kind === 'friend_request') {
        return `<div class="nm-item nm-fr" data-id="${escapeHtml(n.id)}">
            ${notifAvatarHtml(n)}
            <div class="nm-body">
              <span class="nm-text">${escapeHtml(n.text)}</span>
              <div class="nm-actions">
                <button class="nm-accept" type="button" data-target="${n.targetId}">Accept</button>
                <button class="nm-decline" type="button" data-target="${n.targetId}">Decline</button>
              </div>
            </div>
          </div>`;
      }
      if (n.kind === 'support') {
        return `<a class="nm-item nm-support" data-id="${escapeHtml(n.id)}" href="${escapeHtml(n.link || '/support')}">
            <div class="nm-icon" aria-hidden="true">🎫</div>
            <div class="nm-body"><span class="nm-text">${escapeHtml(n.text)}</span>${time}</div>
            ${n.id === 'supq' ? '' : '<button class="nm-dismiss" type="button" aria-label="Dismiss">&times;</button>'}
          </a>`;
      }
      if (n.kind === 'launch') {
        return `<div class="nm-item nm-launch" data-id="${escapeHtml(n.id)}">
            <div class="nm-icon" aria-hidden="true">🎮</div>
            <div class="nm-body"><span class="nm-text">${escapeHtml(n.text)}</span>${time}</div>
            <button class="nm-dismiss" type="button" aria-label="Dismiss">&times;</button>
          </div>`;
      }
      return `<div class="nm-item" data-id="${escapeHtml(n.id)}">
          ${notifAvatarHtml(n)}
          <div class="nm-body"><span class="nm-text">${escapeHtml(n.text)}</span>${time}</div>
          <button class="nm-dismiss" type="button" aria-label="Dismiss">&times;</button>
        </div>`;
    }).join('');
  }
  const hasDismissable = Array.isArray(NOTIF_ITEMS) && NOTIF_ITEMS.some(n => n.kind !== 'friend_request');
  const clear = hasDismissable ? '<button class="nm-clear" type="button">Mark all read</button>' : '';
  NOTIF_MENU.innerHTML =
    `<div class="nm-head"><span>Notifications</span>${clear}</div>
     <div class="nm-list">${rows}</div>`;
  if (typeof refreshAvatars === 'function') refreshAvatars();
}

async function refreshNotifications() {
  await fetchNotifications();
  syncNotifBadge();
  renderNotifMenu();
  ensureNotifSocket();   // (re)connect the realtime channel once we know we're signed in
}

// ── realtime push ──────────────────────────────────────────────────────────
// Opens a websocket to /api/site/notifications/ws (cookie-authed, separate from the game's
// hub so it never disturbs the player's game socket). The server sends {"type":"refresh"}
// the instant a notification is created for this player; we just re-fetch the inbox. Falls
// back gracefully to the 30s poll if the socket can't connect.
let NOTIF_WS = null, NOTIF_WS_TIMER = null;
function ensureNotifSocket() {
  // Only hold a socket while signed in (NOTIF_ITEMS === null means signed out).
  if (NOTIF_ITEMS === null) { if (NOTIF_WS) { try { NOTIF_WS.close(); } catch {} NOTIF_WS = null; } return; }
  if (NOTIF_WS && (NOTIF_WS.readyState === 0 || NOTIF_WS.readyState === 1)) return; // connecting/open
  try {
    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const ws = new WebSocket(proto + '//' + location.host + '/api/site/notifications/ws');
    NOTIF_WS = ws;
    ws.onopen = () => { siteWatch(SITE_WATCH); };
    ws.onmessage = (ev) => {
      // ignore keep-alive pings; refresh on a real "refresh" (or anything else)
      let m = {}; try { m = JSON.parse(ev.data) || {}; } catch {}
      const t = m.type || '';
      if (t === 'ping') return;
      // Typed frames about the profile this tab is watching (see siteWatch).
      if (t === 'spotify') {
        if (String(m.id) === String(SITE_WATCH_ID || '') || !SITE_WATCH_ID) {
          renderSpotify(document.getElementById('profileSpotify'), m.now_playing);
          renderSpotify(document.getElementById('spotifyNowPreview'), m.now_playing);
        }
        return;
      }
      if (t === 'profile') {
        if (String(m.id) === String(SITE_WATCH_ID || '')) {
          if (document.getElementById('profilePhotos') && typeof renderProfile === 'function') renderProfile();
          if (typeof renderSettingsStatus === 'function') renderSettingsStatus();
        }
        return;
      }
      {
        refreshNotifications();
        // Anything social changed (a friend came online, a request / favourite / subscription
        // moved): redraw what's on screen. Cheap - one GET each - and only while relevant.
        const fm = document.getElementById('friendsModal');
        if (fm && fm.classList.contains('open') && typeof fm.__reload === 'function') fm.__reload();
        const sm = document.getElementById('subsModal');
        if (sm && sm.classList.contains('open') && typeof sm.__reload === 'function') sm.__reload();
        if (document.getElementById('profilePhotos') && typeof renderProfile === 'function') renderProfile();
        if (typeof hydrateOnline === 'function') hydrateOnline();
      }
    };
    ws.onclose = () => {
      NOTIF_WS = null;
      clearTimeout(NOTIF_WS_TIMER);
      // reconnect only while still signed in
      NOTIF_WS_TIMER = setTimeout(() => { if (NOTIF_ITEMS !== null) ensureNotifSocket(); }, 5000);
    };
    ws.onerror = () => { try { ws.close(); } catch {} };
  } catch { NOTIF_WS = null; }
}

async function onNotifMenuClick(e) {
  const accept = e.target.closest('.nm-accept');
  const decline = e.target.closest('.nm-decline');
  const dismiss = e.target.closest('.nm-dismiss');
  const clear = e.target.closest('.nm-clear');

  if (accept || decline) {
    e.stopPropagation();
    if (!requireLogin('manage friend requests')) return;
    const btn = accept || decline;
    const target = Number(btn.dataset.target);
    btn.disabled = true;
    const path = accept ? '/api/site/friends/accept' : '/api/site/friends/remove';
    const { ok } = await apiPost(path, { id: target });
    if (!ok) { btn.disabled = false; toast('Something went wrong.'); return; }
    toast(accept ? 'Friend request accepted' : 'Friend request declined');
    await refreshNotifications();
    return;
  }
  if (dismiss) {
    e.stopPropagation();
    e.preventDefault();   // a support item is a link - dismissing it must not follow it
    const id = dismiss.closest('.nm-item').dataset.id;
    await apiPost('/api/site/notifications/dismiss', { id });
    await refreshNotifications();
    return;
  }
  if (clear) {
    e.stopPropagation();
    // One call: the server deletes every read-able notification and tells the game to drop them.
    const { ok } = await apiPost('/api/site/notifications/dismissall');
    if (!ok) {
      const ids = (NOTIF_ITEMS || []).filter(n => n.kind !== 'friend_request').map(n => n.id);
      for (const id of ids) await apiPost('/api/site/notifications/dismiss', { id });
    }
    await refreshNotifications();
  }
}

function initNotifications() {
  const btn = document.getElementById('notifBtn');
  if (!btn) return;
  NOTIF_BTN = btn;
  NOTIF_BADGE = document.getElementById('notifBadge');

  // wrap the bell so the menu can anchor to it
  const wrap = document.createElement('div');
  wrap.className = 'notif';
  btn.replaceWith(wrap);
  wrap.appendChild(btn);
  const menu = document.createElement('div');
  menu.className = 'notif-menu';
  menu.setAttribute('role', 'menu');
  wrap.appendChild(menu);
  NOTIF_WRAP = wrap; NOTIF_MENU = menu;

  btn.setAttribute('aria-haspopup', 'true');
  btn.setAttribute('aria-expanded', 'false');

  function toggleNotif(open) {
    document.querySelector('.profile')?.classList.remove('open');
    const isOpen = open ?? !wrap.classList.contains('open');
    wrap.classList.toggle('open', isOpen);
    btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    if (isOpen) refreshNotifications();   // refresh on open so it's always current
  }
  btn.addEventListener('click', e => { e.stopPropagation(); toggleNotif(); });
  btn.addEventListener('keydown', e => {
    if (e.key === 'ArrowDown') { e.preventDefault(); toggleNotif(true); }
  });
  menu.addEventListener('click', onNotifMenuClick);
  document.addEventListener('click', e => {
    if (!wrap.contains(e.target) && wrap.classList.contains('open')) toggleNotif(false);
  });

  renderNotifMenu();       // initial paint (loading/empty)
  refreshNotifications();  // initial fetch
  // Light polling keeps the badge in sync with the game while the tab is open.
  setInterval(() => { if (document.visibilityState === 'visible') refreshNotifications(); }, 30000);
}
initNotifications();

// ───── FRIENDS ─────
const FRIENDS_KEY = 'campus-friends';
function getFriends() { try { return JSON.parse(localStorage.getItem(FRIENDS_KEY) || '{}'); } catch { return {}; } }
function saveFriends(f) { localStorage.setItem(FRIENDS_KEY, JSON.stringify(f)); }
function isFriend(h) { const f = getFriends()[h]; return !!f && f.status !== 'pending'; }
function isPending(h) { const f = getFriends()[h]; return !!f && f.status === 'pending'; }
function addFriend(h) { const f = getFriends(); if (!f[h]) f[h] = { status: 'pending', nickname: '', pinned: false }; saveFriends(f); }
function acceptFriend(h) { const f = getFriends(); if (f[h]) { f[h].status = 'accepted'; saveFriends(f); } }
function removeFriend(h) { const f = getFriends(); delete f[h]; saveFriends(f); }
function setFriendNick(h, n) { const f = getFriends(); if (f[h]) { f[h].nickname = n; saveFriends(f); } }
function toggleFriendPin(h) { const f = getFriends(); if (f[h]) { f[h].pinned = !f[h].pinned; saveFriends(f); return f[h].pinned; } return false; }
function isFavourite(h) { const f = getFriends()[h]; return !!f && !!f.favourite; }
function toggleFriendFavourite(h) { const f = getFriends(); if (f[h]) { f[h].favourite = !f[h].favourite; saveFriends(f); return f[h].favourite; } return false; }

// pinned friends widget on the home right rail
async function renderPinned() {
  const rail = document.querySelector('.feed-layout .rail');
  if (!rail) return;
  rail.querySelector('.rail-pinned')?.remove();
  if (apiOn()) {
    if (!localStorage.getItem(USER_KEY)) return;
    const d = await apiGet('/api/site/me/pinned');
    const rows = (d && d.ok && d.pinned) || [];
    if (!rows.length) return;
    const items = rows.map(p => `<a class="rail-item" href="${userUrl(p.username)}">
      <span class="rail-on-av"><img class="rail-pin-av" data-av="${avKey(p.username)}" src="${p.profile_image || avatarUrl(p.username)}" alt="">${p.online ? '<i class="online-dot"></i>' : ''}</span>
      <div class="rail-meta"><span class="rail-name">${escapeHtml(p.nickname || p.display_name || p.username)}</span><span class="rail-by">${p.online ? (p.where ? 'In ^' + escapeHtml(p.where) : 'Online') : '@' + escapeHtml(p.username)}</span></div>
    </a>`).join('');
    const html = `<div class="rail-pinned"><h3 class="rail-title">Pinned friends</h3>${items}</div>`;
    rail.insertAdjacentHTML('afterbegin', html);
    return;
  }
  const f = getFriends();
  const pinned = Object.keys(f).filter(h => f[h].pinned);
  if (!pinned.length) return;
  const items = pinned.map(h => {
    const nick = f[h].nickname || cap(h);
    return `<a class="rail-item" href="${userUrl(h)}">
      <img class="rail-pin-av" data-av="${avKey(h)}" src="${avatarUrl(h)}" alt="">
      <div class="rail-meta"><span class="rail-name">${escapeHtml(nick)}</span><span class="rail-by">@${h}</span></div>
    </a>`;
  }).join('');
  rail.insertAdjacentHTML('afterbegin',
    `<div class="rail-pinned"><h3 class="rail-title">Pinned friends</h3>${items}</div>`);
}

// online friends widget on the home right rail
async function renderOnlineFriends() {
  const rail = document.querySelector('.feed-layout .rail');
  if (!rail) return;

  // Real "who's in-game right now" from /api/site/online; demo data as a fallback.
  let list = null;
  if (apiOn()) {
    const data = await apiGet('/api/site/online');
    if (data && data.ok && Array.isArray(data.results)) {
      list = data.results.map(o => ({ h: o.username, name: o.display_name || o.username, where: o.where || 'Online now', avatar: o.profile_image }));
    }
  }
  if (!list) {
    const f = getFriends();
    list = ((window.CAMPUS_DATA && window.CAMPUS_DATA.onlineFriends) || []).map(d => ({ h: d.h, name: (f[d.h] && f[d.h].nickname) || cap(d.h), where: d.where, avatar: null }));
    Object.keys(f).filter(h => f[h].status !== 'pending')
      .forEach(h => { if (!list.some(d => d.h === h)) list.unshift({ h, name: (f[h] && f[h].nickname) || cap(h), where: 'Online now', avatar: null }); });
  }

  rail.querySelector('.rail-online')?.remove();
  const items = list.map(d => {
    const av = d.avatar || avatarUrl(d.h);
    return `<a class="rail-item" href="${userUrl(d.h)}">
      <span class="rail-on-av"><img class="rail-pin-av" data-av="${avKey(d.h)}" src="${av}" alt=""><i class="online-dot"></i></span>
      <div class="rail-meta"><span class="rail-name">${escapeHtml(d.name)}</span><span class="rail-by">${escapeHtml(d.where)}</span></div>
    </a>`;
  }).join('');

  rail.insertAdjacentHTML('afterbegin',
    `<div class="rail-online"><h3 class="rail-title">Online Friends · ${list.length}</h3>${items}</div>`);
}

// ───── UPDATES PAGE (Patch Notes / Weekly / News) ─────
function renderUpdates() {
  const list = document.getElementById('updatesList');
  if (!list) return;
  const all = (window.CAMPUS_DATA && window.CAMPUS_DATA.updates) || {};
  // type comes from the page itself (data-updates) or the ?type= param
  let type = list.dataset.updates || new URLSearchParams(location.search).get('type') || 'patch';
  if (!all[type]) type = 'patch';
  const section = all[type] || { title: 'Updates', blurb: '', posts: [] };

  document.title = `${section.title} - Campus`;
  document.getElementById('updatesTitle').textContent = section.title;
  document.getElementById('updatesBlurb').textContent = section.blurb || '';
  document.querySelectorAll('.utab').forEach(t => t.classList.toggle('active', t.dataset.type === type));

  const fmtDate = d => {
    try { return new Date(d).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }); }
    catch { return d; }
  };
  list.innerHTML = (section.posts || []).map(p => `
    <article class="update-card">
      <div class="update-meta">
        ${p.tag ? `<span class="update-tag">${escapeHtml(p.tag)}</span>` : ''}
        <span class="update-date">${escapeHtml(fmtDate(p.date))}</span>
      </div>
      <h2 class="update-title">${escapeHtml(p.title)}</h2>
      <p class="update-body">${escapeHtml(p.body)}</p>
    </article>
  `).join('') || '<p class="search-empty">Nothing here yet.</p>';
}
renderUpdates();

// ───── ROOM PAGE ─────
const ROOMS_DATA = (window.CAMPUS_DATA && window.CAMPUS_DATA.rooms) || {};

async function renderRoom() {
  const cover = document.getElementById('roomCover');
  if (!cover) return;
  const id = viewedRoomId();

  // Real room from /api/site/rooms/{id}; demo ROOMS_DATA only as a fallback.
  let r = null;
  if (apiOn() && id != null) {
    const data = await apiGet('/api/site/rooms/' + encodeURIComponent(id));
    if (data && data.ok && data.room) {
      const rm = data.room;
      r = { id: rm.id, name: rm.name, creator: rm.creator || 'someone', desc: rm.description || '', image: rm.image, visits: rm.visits || 0, cheers: rm.cheers || 0, favorites: rm.favorites || 0, players: rm.players || 0, photos: data.photos || [] };
    }
  }
  if (!r) r = ROOMS_DATA[id];
  if (!r) { document.getElementById('roomPage').innerHTML = '<p class="image-missing">Room not found.</p>'; return; }

  document.title = `^${r.name} - Campus`;
  if (r.image) { cover.style.backgroundImage = `url('${r.image}')`; cover.style.backgroundSize = 'cover'; cover.style.backgroundPosition = 'center'; }
  else cover.style.background = `linear-gradient(135deg, ${r.a || '#ff5a3c'}, ${r.b || '#7b2ff7'})`;
  document.getElementById('roomName').textContent = '^' + r.name;
  const by = document.getElementById('roomBy');
  by.textContent = 'by ' + r.creator;
  by.href = userUrl(r.creator);
  document.getElementById('roomDesc').textContent = r.desc || '';
  if (apiOn() && id != null) {
    let slot = document.getElementById('roomAdmin');
    if (!slot) { slot = document.createElement('div'); slot.id = 'roomAdmin'; slot.className = 'room-admin'; document.getElementById('roomDesc').after(slot); }
    mountAdminButton('room', r.id || id, slot);
  }
  const EYE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z"/><circle cx="12" cy="12" r="3.2"/></svg>';
  const THUMB = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v11H3V10zM7 10l4.2-6.6a1.6 1.6 0 0 1 2.9 1.2L13.4 9H19a2 2 0 0 1 2 2.4l-1.5 7.5A2.5 2.5 0 0 1 17 21H7"/></svg>';
  const STAR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z"/></svg>';
  document.getElementById('roomStats').innerHTML =
    `<div class="room-stat">${EYE}<strong>${fmt(r.visits || 0)}</strong><small>visits</small></div>
     <div class="room-stat">${THUMB}<strong>${fmt(r.cheers || 0)}</strong><small>cheers</small></div>
     <div class="room-stat">${STAR}<strong>${fmt(r.favorites || 0)}</strong><small>favorites</small></div>`;

  // the room's photos, as the same cards the home feed uses (cheers / comments work here too)
  const feed = document.getElementById('roomPhotos');
  if (feed) {
    const posts = (r.photos || []).map(x => ({
      id: x.id, image: x.image,
      user: (x.author && (x.author.display_name || x.author.username)) || 'Player',
      handle: (x.author && x.author.username) || 'player',
      avatar: x.author && x.author.profile_image,
      caption: x.description || '', room: r.name,
      cheers: x.cheers || 0, cheered: !!x.cheered, comments: x.comments || 0, takenAt: x.createdAt,
      tagged: x.taggedPlayers || [],
    }));
    if (!posts.length) feed.innerHTML = '<div class="feed-loading">No photos taken in this room yet.</div>';
    else {
      const keep = postList; // renderPosts writes into the home feed element; borrow it for this page
      feed.innerHTML = posts.map(p => {
        const [a, b] = avColor(p.user || '?');
        const tags = (p.tagged || []).map(t => `<a class="room-tag" href="${userUrl(t.username)}"><img src="${t.profile_image || avatarUrl(t.username)}" alt="">${escapeHtml(t.display_name || t.username)}</a>`).join('');
        return `<article class="post" data-photo="${p.id}">
          <div class="post-head">
            <a class="post-av" href="${userUrl(p.handle)}" style="--a:${a};--b:${b}"><img data-av="${avKey(p.handle)}" src="${p.avatar || avatarUrl(p.handle)}" alt="" onerror="this.remove()">${(p.user || '?')[0].toUpperCase()}</a>
            <div class="post-meta"><a class="post-user" href="${userUrl(p.handle)}">${escapeHtml(p.user)}</a><span class="post-handle">@${escapeHtml(p.handle)}</span></div>
            <span class="post-time">${p.takenAt ? timeAgo(p.takenAt) : ''}</span>
          </div>
          <a class="post-img" href="${imageUrl(p.id)}" style="background-image:url('${p.image}')"></a>
          <div class="post-foot">
            <span class="post-cap"><span class="room-chip">^${escapeHtml(p.room)}</span>${tags ? `<span class="room-in">In this photo:</span>${tags}` : ''}${p.caption ? ` <span class="room-caption">${escapeHtml(p.caption)}</span>` : ''}</span>
            <div class="post-stats">
              <button class="pstat cheer${p.cheered ? ' liked' : ''}" data-n="${(p.cheers || 0) - (p.cheered ? 1 : 0)}">${CHEER_ICON}<span>${fmt(p.cheers || 0)}</span></button>
              <button class="pstat comment-toggle" data-n="${p.comments || 0}">${CHAT}<span>${p.comments || 0}</span></button>
            </div>
          </div>
          ${commentsBlock(p)}
        </article>`;
      }).join('');
    }
  }
  // the room's events (hosted by players, booked in this room)
  const roomEventsEl = document.querySelector('.room-panel[data-panel="events"]');
  if (roomEventsEl && apiOn() && r.id != null) {
    roomEventsEl.innerHTML = '<div class="room-events profile-events" id="roomEvents"></div>';
    loadEvents(document.getElementById('roomEvents'), '/api/site/rooms/' + encodeURIComponent(r.id) + '/events', { showHost: true }, 'No events scheduled in this room.');
  }
  // tabs
  document.querySelectorAll('.room-tab').forEach(t => t.addEventListener('click', () => {
    document.querySelectorAll('.room-tab').forEach(x => x.classList.toggle('active', x === t));
    document.querySelectorAll('.room-panel').forEach(p => p.classList.toggle('active', p.dataset.panel === t.dataset.panel));
  }));
}
renderRoom();

// ───── EVENT PAGE (/event/{id}) - laid out like the photo page ─────
async function renderEventPage() {
  const root = document.getElementById('eventPage');
  if (!root) return;
  const id = routeSlug('event');
  let data = null;
  try { data = await apiGet('/api/site/events/' + encodeURIComponent(id)); } catch { data = null; }
  if (!data || !data.ok || !data.event) { root.innerHTML = '<p class="image-missing">This event does not exist, or is private.</p>'; return; }
  await SESSION_READY;
  let e = data.event, going = data.going_players || [];
  document.title = e.name + ' - Campus';
  const $ = x => document.getElementById(x);
  const pad = n => String(n).padStart(2, '0');
  const icsStamp = d => d.getUTCFullYear() + pad(d.getUTCMonth() + 1) + pad(d.getUTCDate()) + 'T' + pad(d.getUTCHours()) + pad(d.getUTCMinutes()) + pad(d.getUTCSeconds()) + 'Z';

  // the "..." menu: copy link / add to calendar (wired once)
  const menu = $('evMenu'), menuBtn = $('evMenuBtn');
  menuBtn.addEventListener('click', ev => { ev.stopPropagation(); menu.classList.toggle('open'); });
  document.addEventListener('click', () => menu.classList.remove('open'));
  $('evShare').onclick = async () => {
    menu.classList.remove('open');
    try { await navigator.clipboard.writeText(location.origin + '/event/' + e.id); toast('Link copied'); }
    catch { prompt('Copy this link', location.origin + '/event/' + e.id); }
  };
  $('evCal').onclick = () => {
    menu.classList.remove('open');
    const s = new Date(e.start), en = new Date(e.end);
    const ics = ['BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//Campus//Events//EN', 'BEGIN:VEVENT',
      'UID:event-' + e.id + '@campus', 'DTSTAMP:' + icsStamp(new Date()), 'DTSTART:' + icsStamp(s), 'DTEND:' + icsStamp(en),
      'SUMMARY:' + String(e.name).replace(/[\r\n]+/g, ' '),
      'DESCRIPTION:' + ((e.description || '') + (e.room ? '\\nIn ^' + e.room.name : '') + '\\n' + location.origin + '/event/' + e.id).replace(/[\r\n]+/g, '\\n'),
      'URL:' + location.origin + '/event/' + e.id, 'END:VEVENT', 'END:VCALENDAR'].join('\r\n');
    const a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([ics], { type: 'text/calendar' }));
    a.download = 'campus-event-' + e.id + '.ics';
    document.body.appendChild(a); a.click(); a.remove();
  };

  // JOIN: if you are online in the game, the server sends your game to the event
  const join = $('evJoin');
  join.addEventListener('click', async () => {
    if (!CAMPUS_ME) { location.href = '/login'; return; }
    join.disabled = true; const label = join.textContent; join.textContent = 'Joining\u2026';
    const r = await apiPost('/api/site/events/' + encodeURIComponent(e.id) + '/join', {});
    join.textContent = label; join.disabled = false;
    toast(r && r.ok ? ((r.data && r.data.message) || 'Sending you to the event\u2026') : ((r && r.data && r.data.error) || 'Could not join the event'));
  });

  const draw = () => {
    const s = new Date(e.start);
    // the picture (photo-page style), with the status chip on it
    $('evCover').style.backgroundImage = e.image ? `url('${e.image}')` : 'linear-gradient(135deg,#ff5a3c,#7b2ff7)';
    $('evBadge').innerHTML = e.status === 'live' ? '<span class="pevent-live">LIVE NOW</span>' : e.status === 'ended' ? '<span class="pevent-tag">ENDED</span>' : '';
    // who is hosting
    const host = $('evHost');
    if (e.host) {
      host.hidden = false; host.href = userUrl(e.host.username);
      const av = $('evHostAv'); av.src = e.host.profile_image || avatarUrl(e.host.username); av.onerror = () => { av.style.visibility = 'hidden'; };
      $('evHostName').textContent = e.host.display_name || e.host.username;
      $('evHostHandle').textContent = '@' + e.host.username;
    } else host.hidden = true;
    // title + one meta line: when, how many are going, where
    $('evName').textContent = e.name;
    const meta = $('evMeta');
    meta.innerHTML = `<span>${escapeHtml(eventWhen(e))}</span><span>\u00b7</span><span>${e.going || 0} attending${e.interested ? ', ' + e.interested + ' interested' : ''}</span>`
      + (e.room ? `<span>\u00b7</span><a class="image-room" href="${roomUrl(e.room.id)}">^${escapeHtml(e.room.name)}</a>` : '');

    // Join: only while you could actually go in; a signed-out visitor is sent to log in
    join.hidden = e.status === 'ended';
    const canGo = !!(CAMPUS_ME && e.canJoin);
    join.classList.toggle('ev-join-off', !!CAMPUS_ME && !canGo);
    join.title = !CAMPUS_ME ? 'Log in to join' : canGo ? 'Send me to this event (you need to be online in Campus)' : 'Opens when the event starts';
    join.disabled = !!CAMPUS_ME && !canGo;

    // RSVP pills in the photo page's button style
    const rsvp = $('evRsvp');
    if (e.status === 'ended' || !CAMPUS_ME) rsvp.innerHTML = '';
    else {
      const b = (r, label) => `<button type="button" class="img-report${e.myResponse === r ? ' on' : ''}" data-r="${r}">${label}</button>`;
      rsvp.innerHTML = b('going', 'Going') + b('interested', 'Interested') + b('not_interested', 'Not interested');
      rsvp.querySelectorAll('button').forEach(btn => btn.addEventListener('click', async () => {
        rsvp.querySelectorAll('button').forEach(x => x.disabled = true);
        const r = await apiPost('/api/site/events/' + encodeURIComponent(e.id) + '/respond', { response: e.myResponse === btn.dataset.r ? 'none' : btn.dataset.r });
        if (r && r.ok && r.data && r.data.event) {
          e = r.data.event;
          let again = null; try { again = await apiGet('/api/site/events/' + encodeURIComponent(e.id)); } catch {}
          if (again && again.going_players) going = again.going_players;
          draw();
        } else { rsvp.querySelectorAll('button').forEach(x => x.disabled = false); toast((r && r.data && r.data.error) || 'Could not save your answer'); }
      }));
    }

    // below: about + who is going (the photo page's "Comments" section look)
    const about = $('evAbout');
    if (e.description && e.description.trim() && e.description.trim().toLowerCase() !== String(e.name).trim().toLowerCase()) { $('evDesc').textContent = e.description; about.hidden = false; } else about.hidden = true;
    $('evGoingTitle').textContent = going.length ? `Attending \u00b7 ${e.going || going.length}` : 'Attending';
    $('evPeople').innerHTML = going.length
      ? going.map(p => `<a class="ev-person" href="${userUrl(p.username)}"><img src="${escapeHtml(p.profile_image || avatarUrl(p.username))}" alt="" onerror="this.style.visibility='hidden'"><span>${escapeHtml(p.display_name || p.username)}</span></a>`).join('')
      : '<p class="profile-empty">No one has said they are going yet.</p>';
  };
  draw();
}
renderEventPage();

// featured-rooms slideshow on the home page.
// Data-driven: called once with the demo rooms at load, then again with the real rooms
// once /api/site/rooms/hot answers. The previous instance's timer is cleared on re-init,
// otherwise the two would fight over the same element.
let FEATURED_TIMER = null;
function initFeaturedSlideshow(rooms) {
  const el = document.getElementById('featuredSlideshow');
  if (!el) return;

  if (FEATURED_TIMER) { clearInterval(FEATURED_TIMER); FEATURED_TIMER = null; }

  // No argument = the original demo path, keyed into ROOMS_DATA by slug.
  const list = (rooms && rooms.length)
    ? rooms
    : ['whisker-heights', 'midnight-mews', 'yarn-quest', 'haunted-cattery', 'deep-dive-reef']
        .map(id => Object.assign({ id }, ROOMS_DATA[id] || {}));

  if (!list.length) return;
  const ids = list.map(r => r.id);
  let i = 0, timer = null;

  el.innerHTML = `
    <a class="featured" id="featuredSlide" href="#"></a>
    <button class="farrow farrow-prev" aria-label="Previous room"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg></button>
    <button class="farrow farrow-next" aria-label="Next room"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></button>
    <div class="featured-dots" id="featuredDots"></div>`;
  const slide = document.getElementById('featuredSlide');
  const dots = document.getElementById('featuredDots');
  dots.innerHTML = ids.map((_, idx) => `<button class="fdot" data-i="${idx}" aria-label="Slide ${idx + 1}"></button>`).join('');

  function render() {
    const r = list[i];
    slide.href = roomUrl(ids[i]);
    // A real room has a server image; fall back to its gradient when it has none.
    const bg = r.image
      ? `background-image:url('${r.image}');background-size:cover;background-position:center`
      : `background:linear-gradient(135deg, ${r.a || '#ff5a3c'}, ${r.b || '#7b2ff7'})`;
    slide.innerHTML = `
      <div class="featured-img" style="${bg}"></div>
      <div class="featured-body">
        <span class="featured-tag">Featured room</span>
        <h2>^${r.name || ''}</h2>
        <p class="featured-by">by @${r.creator || 'someone'}</p>
        <div class="featured-row">
          <span class="featured-live"><i class="dot"></i>${(Number(r.players) || 0).toLocaleString()} playing now</span>
          <span class="featured-cta">Visit room →</span>
        </div>
      </div>`;
    slide.classList.remove('fade'); void slide.offsetWidth; slide.classList.add('fade');
    dots.querySelectorAll('.fdot').forEach((d, idx) => d.classList.toggle('active', idx === i));
  }
  function start() { timer = setInterval(() => { i = (i + 1) % ids.length; render(); }, 5000); FEATURED_TIMER = timer; }
  function stop() { clearInterval(timer); }

  render();
  start();
  function go(delta) { i = (i + delta + ids.length) % ids.length; render(); stop(); start(); }
  dots.addEventListener('click', e => {
    const b = e.target.closest('.fdot');
    if (!b) return;
    i = +b.dataset.i; render(); stop(); start();
  });
  el.querySelector('.farrow-prev').addEventListener('click', () => go(-1));
  el.querySelector('.farrow-next').addEventListener('click', () => go(1));
  el.addEventListener('mouseenter', stop);
  el.addEventListener('mouseleave', start);
}

// ───── PROFILE PAGE ─────
const PROFILE_PHOTOS = [
  { id: 'a', pos: '8% 45%',  size: '230%' },
  { id: 'b', pos: '40% 50%', size: '250%' },
  { id: 'c', pos: '70% 48%', size: '240%' },
  { id: 'd', pos: '95% 50%', size: '260%' },
  { id: 'e', pos: '20% 60%', size: '220%' },
  { id: 'f', pos: '55% 40%', size: '270%' },
];

function cap(s) { return s ? s[0].toUpperCase() + s.slice(1) : s; }

// per-user photo galleries (random generated images via Lorem Picsum)
const USER_PHOTOS = {
  catlover: [
    { id: 'g1', image: 'https://picsum.photos/seed/catlover-aurora/700/700', title: 'Caught a nice view' },
    { id: 'g2', image: 'https://picsum.photos/seed/catlover-sunset/700/700', title: 'Late night session' },
  ],
};

// per-user profile stats
const PROFILE_DATA = {
  catlover:    { friends: 16,  subscribers: 2 },
  bubbles:     { friends: 48,  subscribers: 312 },
  spookytom:   { friends: 27,  subscribers: 1530 },
  mittens:     { friends: 12,  subscribers: 89 },
  clawful:     { friends: 64,  subscribers: 12400 },
  velvetpaw:   { friends: 41,  subscribers: 4800 },
  tinker9:     { friends: 33,  subscribers: 760 },
  stitchwitch: { friends: 58,  subscribers: 9100 },
  pounce:      { friends: 9,   subscribers: 34 },
};

async function renderProfile() {
  const photosEl = document.getElementById('profilePhotos');
  if (!photosEl) return;

  const me = localStorage.getItem(USER_KEY);
  const viewed = (viewedHandle() || me || 'catlover').toLowerCase();
  const isOwn = !!me && me.toLowerCase() === viewed;
  siteWatch(viewed);

  // Real profile from the Campus server: api.user (profile_image / display_name /
  // username / bio / banner_image), api.friends, api.subscribers, api.photos, api.rooms.
  // Falls back to demo data only when the API is off or the player isn't found.
  let api = null;
  if (apiOn()) {
    // Direct fetch (not apiGet) so we can read a 403 body: if the owner has blocked this viewer
    // the server answers { blocked: true } and we show the notice instead of the profile.
    try {
      const resp = await fetch(apiUrl('/api/site/profile/' + encodeURIComponent(viewed)), { credentials: 'same-origin' });
      const data = await resp.json().catch(() => null);
      if (data && data.blocked) {
        const main = document.getElementById('main') || document.querySelector('.profile-page');
        if (main) main.innerHTML =
          `<div class="profile-blocked" style="max-width:540px;margin:120px auto;text-align:center;padding:0 20px">
             <h1 style="font-size:1.4rem;margin-bottom:10px">This Profile cannot be viewed at this time</h1>
             <p style="color:var(--muted)"><a href="/" style="color:var(--primary)">Back to home</a></p>
           </div>`;
        document.title = 'Profile unavailable - Campus';
        return;
      }
      if (resp.ok && data && data.ok) api = data;
    } catch {}
  }
  const u = api && api.user;
  if (u && u.id) siteWatch(viewed, u.id);
  const data = api
    ? { friends: api.friends || 0, subscribers: api.subscribers || 0 }
    : (PROFILE_DATA[viewed] || { friends: 8, subscribers: 24 });

  const displayName = u ? (u.display_name || u.username) : (isOwn ? myDisplayName(viewed) : cap(viewed));
  const handleText = u ? u.username : (isOwn ? myHandle(viewed) : viewed);

  document.title = `${displayName} - Campus`;
  const picEl = document.getElementById('profilePic');
  picEl.src = (u && u.profile_image) ? u.profile_image : `https://api.dicebear.com/9.x/thumbs/svg?seed=${viewed}`;
  picEl.dataset.av = avKey(viewed);
  const unameEl = document.getElementById('profileUsername');
  unameEl.textContent = displayName;
  if (!isOwn && isFavourite(viewed)) {
    unameEl.insertAdjacentHTML('beforeend', ' <span class="fav-star" title="Favourite" aria-label="Favourite">★</span>');
  }
  document.getElementById('profileHandle').textContent = '@' + handleText;
  // "You call them X" - the viewer's nickname for this friend, if they set one
  function renderNickChip() {
    document.getElementById('profileNick')?.remove();
    const n = api ? api.nickname : ((getFriends()[viewed] || {}).nickname || '');
    if (!n) return;
    document.getElementById('profileHandle').insertAdjacentHTML('afterend', `<span class="profile-nick" id="profileNick" title="Your nickname for them">aka ${escapeHtml(n)}</span>`);
  }
  renderNickChip();
  const bioEl = document.getElementById('profileBio');
  if (bioEl) {
    const myBio = isOwn ? localStorage.getItem('campus-mybio') : null;
    bioEl.textContent = myBio || (u && u.bio) || (isOwn ? 'No bio yet — add one in Settings.' : '');
  }
  renderSocials(document.getElementById('profileSocials'), u && u.socials);

  // Real joined date from the account's created_at (was hardcoded "Joined June 2025").
  const joinedText = document.querySelector('#profileJoined .joined-text');
  if (joinedText) {
    let jd = '';
    if (u && u.created_at) { const d = new Date(u.created_at); if (!isNaN(d)) jd = d.toLocaleDateString(undefined, { month: 'long', year: 'numeric' }); }
    joinedText.textContent = jd ? ('Joined ' + jd) : 'Joined';
  }

  // Status: shown ONLY when the server disclosed it, which it does only for a signed-in viewer.
  // Signed out -> api.status is null -> the whole line stays hidden (you can't see anyone's status).
  const statusEl = document.getElementById('profileStatus');
  if (statusEl) {
    const st = api && api.status;
    if (st) {
      statusEl.hidden = false;
      const dot = statusEl.querySelector('.status-dot');
      const txt = statusEl.querySelector('.status-text');
      if (dot) dot.style.background = st.online ? '#2ecc71' : '#8a8f98';
      if (txt) txt.textContent = st.online ? ('Online' + (st.where ? ' · ' + st.where : '')) : ('Offline' + (st.lastOnline ? ' · last online ' + lastOnlineText(st.lastOnline) : ''));
    } else {
      statusEl.hidden = true;
    }
    // Spotify "listening to" under the status - only what the server disclosed for THIS viewer
    // (the owner's "show to" choice). Live updates arrive over the site socket; this poll is
    // only the fallback for a tab whose socket is down.
    const spEl = document.getElementById('profileSpotify');
    if (spEl) {
      renderSpotify(spEl, st ? st.spotify : null);
      clearInterval(spEl._poll);
      if (st && u && (u.username || u.id)) {
        const handle = u.username || String(u.id);
        spEl._poll = setInterval(async () => {
          if (document.hidden) return;
          try {
            const r = await fetch('/api/site/spotify/nowplaying/' + encodeURIComponent(handle), { credentials: 'same-origin' });
            if (r.ok) { const j = await r.json(); renderSpotify(spEl, j.now_playing); }
          } catch {}
        }, 60000);
      }
    }
  }

  // Real banner from the server, if the account has one.
  {
    const b = document.querySelector('.profile-banner');
    const src = (u && u.banner_image) || 'assets/banner.png';
    if (b) { b.style.backgroundImage = `url('${src}')`; b.style.backgroundSize = 'cover'; b.style.backgroundPosition = 'center'; b.style.backgroundRepeat = 'no-repeat'; }
  }

  // custom profile picture / banner (set from a photo). Only used as a local override when
  // the server has no image of its own, so a real server picture always wins.
  try {
    const pfp = JSON.parse(localStorage.getItem('campus-pfp-' + viewed) || 'null');
    if (pfp && !(u && u.profile_image)) applyCropToImg(picEl, pfp);
  } catch {}
  try {
    const bn = null; // banners are the site-wide banner.png now
    if (bn && !(u && u.banner_image)) {
      const b = document.querySelector('.profile-banner');
      b.style.backgroundImage = `url('${bn.image}')`;
      b.style.backgroundSize = 'cover';
      b.style.backgroundPosition = bn.pos;
      b.style.backgroundRepeat = 'no-repeat';
      if (bn.id) {
        b.style.cursor = 'pointer';
        b.title = 'View photo';
        b.setAttribute('role', 'button');
        b.setAttribute('tabindex', '0');
        b.setAttribute('aria-label', 'View banner photo');
        const goPhoto = () => { window.location.href = imageUrl(bn.id); };
        b.addEventListener('click', goPhoto);
        b.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goPhoto(); } });
      }
    }
  } catch {}

  // stats box
  const subKey = 'campus-sub-' + viewed;
  let subscribed = api ? !!api.subscribed : localStorage.getItem(subKey) === '1';
  const statFriends = document.getElementById('statFriends');
  const statSubs = document.getElementById('statSubs');
  if (statFriends) statFriends.textContent = fmt(data.friends);
  // With the API the count already includes the viewer's own subscription.
  const subCount = () => api ? data.subscribers : data.subscribers + (subscribed ? 1 : 0);
  if (statSubs) statSubs.textContent = fmt(subCount());

  // top action: gear (own) or Add-friend (others)
  const actions = document.getElementById('profileActions');
  // dev accounts: the quick-admin button, after whatever buttons this branch adds
  setTimeout(() => mountAdminButton('player', (u && u.id) || viewed, actions), 0);
  if (isOwn) {
    actions.innerHTML = `<a href="/stats" class="profile-gear" title="Stats" aria-label="Stats" style="margin-right:6px;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V10"/><path d="M10 19V4"/><path d="M16 19v-7"/><path d="M22 19H2"/></svg></a><a href="/settings" class="profile-gear" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></a>`;
    // clicking your own "Friends" stat opens the friends list
    const friendRow = document.getElementById('statFriendsRow');
    if (friendRow) {
      friendRow.classList.add('statbox-clickable');
      friendRow.setAttribute('role', 'button');
      friendRow.tabIndex = 0;
      // renderProfile re-runs on every live refresh: replace the badge, never stack another.
      friendRow.querySelectorAll('.statbox-badge').forEach(b => b.remove());
      const pendingN = (NOTIF_ITEMS || []).filter(n => n.kind === 'friend_request').length;
      if (pendingN) friendRow.insertAdjacentHTML('beforeend', ` <span class="statbox-badge">${pendingN}</span>`);
      if (!friendRow.dataset.wired) {
        friendRow.dataset.wired = '1';
        friendRow.addEventListener('click', () => openFriendsList(viewed));
        friendRow.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFriendsList(viewed); } });
      }
    }
  } else {
    actions.innerHTML = '';
    const rbtn = document.createElement('button');
    rbtn.className = 'profile-report-btn';
    rbtn.textContent = 'Report';
    rbtn.addEventListener('click', () => openReport(`Report ${cap(viewed)}`, () => {
      rbtn.textContent = 'Reported';
      rbtn.disabled = true;
    }, { type: 'player', id: viewed }));
    actions.appendChild(rbtn);

    // Block / Unblock (server-backed, the same block as in-game). Only YOUR block is yours to
    // lift; if they've also blocked you, that stays when you unblock.
    if (api && u && u.id) {
      const bbtn = document.createElement('button');
      bbtn.className = 'profile-report-btn profile-block-btn';
      let blocked = !!api.blockedByMe;
      const paint = () => { bbtn.textContent = blocked ? 'Unblock' : 'Block'; bbtn.classList.toggle('on', blocked); };
      paint();
      bbtn.addEventListener('click', () => {
        if (!requireLogin('block players')) return;
        const go = async () => {
          bbtn.disabled = true;
          const { ok, data } = await apiPost('/api/site/friends/block', { id: u.id, on: !blocked });
          bbtn.disabled = false;
          if (!ok) { toast((data && data.error) || 'Could not update the block'); return; }
          blocked = !!data.blocked; api.blockedByMe = blocked; paint();
          toast(blocked ? `${escapeHtml(displayName)} blocked` : `${escapeHtml(displayName)} unblocked`);
          if (blocked) setTimeout(() => renderProfile(), 300);   // friendship ends with a block; repaint the friend controls
        };
        if (blocked) go();
        else openConfirm({ title: `Block ${escapeHtml(displayName)}?`, message: 'They won\'t be able to friend, message or join you, and any friendship ends. You can unblock them here later.', confirmText: 'Block', onConfirm: go });
      });
      actions.appendChild(bbtn);
    }

    // friend control replaces the "Friends" row in the stats box
    const friendRow = document.getElementById('statFriendsRow');
    if (friendRow) {
      friendRow.classList.add('statbox-friend');
      const fbtn = document.createElement('button');
      const targetId = u && u.id;
      // REAL relationship state from the server: None | FriendRequestSent | FriendRequestReceived
      // | Friend. Falls back to the old local flags only when there's no API profile.
      let rel = (api && api.relationship) || (isFriend(viewed) ? 'Friend' : (isPending(viewed) ? 'FriendRequestSent' : 'None'));
      const setFbtn = () => {
        if (rel === 'FriendRequestSent') { fbtn.className = 'friend-row-btn pending'; fbtn.textContent = 'Pending friend request'; }
        else if (rel === 'FriendRequestReceived') { fbtn.className = 'friend-row-btn'; fbtn.textContent = 'Accept friend request'; }
        else if (rel === 'Friend') { fbtn.className = 'friend-row-btn is-friend'; fbtn.textContent = 'Friends'; }
        else { fbtn.className = 'friend-row-btn'; fbtn.textContent = 'Add friend'; }
      };
      setFbtn();
      // Hit the real site friend endpoints (they run the same FriendsDB ops the game uses, so a
      // request sent here shows up in-game). action is request|accept|remove.
      async function act(action) {
        if (!targetId) { toast('Could not identify this player.'); return; }
        fbtn.disabled = true;
        const { ok, data } = await apiPost('/api/site/friends/' + action, { id: targetId });
        fbtn.disabled = false;
        if (!ok) { toast((data && data.error) || 'Something went wrong.'); return; }
        rel = data.relationship || (action === 'request' ? 'FriendRequestSent' : action === 'accept' ? 'Friend' : 'None');
        setFbtn();
        toast(action === 'request' ? `Friend request sent to ${escapeHtml(displayName)}`
            : action === 'accept' ? `You and ${escapeHtml(displayName)} are now friends`
            : 'Friendship updated');
      }
      fbtn.addEventListener('click', () => {
        if (!requireLogin('send friend requests')) return;
        if (rel === 'FriendRequestSent') {
          openConfirm({ title: 'Cancel friend request?', message: `Cancel your friend request to ${escapeHtml(displayName)}?`, confirmText: 'Cancel request', onConfirm: () => act('remove') });
        } else if (rel === 'Friend') {
          openConfirm({ title: 'Remove friend?', message: `Remove ${escapeHtml(displayName)} from your friends?`, confirmText: 'Remove friend', onConfirm: () => act('remove') });
        } else if (rel === 'FriendRequestReceived') {
          act('accept');
        } else {
          act('request');
        }
      });
      friendRow.innerHTML = '';
      friendRow.appendChild(fbtn);
    }
  }

  // friend options (nickname + pin) - others, only when friended
  // Anyone's "Friends" count opens their list (accepted friends only for others).
  if (!isOwn) {
    const fr = document.getElementById('statFriendsRow');
    if (fr) {
      const n = fr.querySelector('strong');
      if (n && !n.dataset.wired) { n.dataset.wired = '1'; n.style.cursor = 'pointer'; n.title = 'See friends'; n.addEventListener('click', e => { e.stopPropagation(); openFriendsList(viewed); }); }
    }
  }

  function renderFriendPanel() {
    const fp = document.getElementById('friendPanel');
    if (!fp) return;
    const serverFriend = api ? api.relationship === 'Friend' : isFriend(viewed);
    if (isOwn || !serverFriend) { fp.innerHTML = ''; return; }
    const d = Object.assign({ nickname: '', pinned: false }, getFriends()[viewed] || {});
    if (api) { d.favourite = !!api.favourite; d.nickname = api.nickname || ''; d.pinned = !!api.pinned; }
    const starSvg = '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.8 1-5.8-4.2-4.1 5.9-.9z"/></svg>';
    fp.innerHTML = `
      <span class="fo-title">Friend options</span>
      <button class="fo-fav${d.favourite ? ' on' : ''}">${starSvg}<span>${d.favourite ? 'Favourited' : 'Favourite'}</span></button>
      <button class="fo-nick-btn">${d.nickname ? 'Edit nickname' : 'Set nickname'}</button>
      <button class="fo-pin${d.pinned ? ' on' : ''}">${d.pinned ? 'Pinned to home' : 'Pin to home'}</button>`;
    fp.querySelector('.fo-fav').addEventListener('click', async e => {
      const btn = e.currentTarget;
      let fav;
      if (api && u && u.id) {
        const want = !btn.classList.contains('on');
        const { ok, data } = await apiPost('/api/site/friends/favourite', { id: u.id, on: want });
        if (!ok) { toast('Could not update favourites'); return; }
        fav = !!data.favourite;
      } else {
        fav = toggleFriendFavourite(viewed);
      }
      btn.classList.toggle('on', fav);
      btn.querySelector('span').textContent = fav ? 'Favourited' : 'Favourite';
      toast(fav ? `Added ${cap(viewed)} to favourites` : `Removed ${cap(viewed)} from favourites`);
    });
    fp.querySelector('.fo-nick-btn').addEventListener('click', () => openNickname(viewed, () => { renderFriendPanel(); renderNickChip(); },
      api && u && u.id ? { id: u.id, current: api.nickname || '', onSaved: n => { api.nickname = n || null; } } : null));
    fp.querySelector('.fo-pin').addEventListener('click', async e => {
      const btn = e.currentTarget;
      let pinned;
      if (api && u && u.id) {
        const want = !btn.classList.contains('on');
        const { ok, data } = await apiPost('/api/site/friends/pin', { id: u.id, on: want });
        if (!ok) { toast((data && data.error) || 'Could not update pins'); return; }
        pinned = !!data.pinned; api.pinned = pinned;
      } else {
        pinned = toggleFriendPin(viewed);
      }
      btn.classList.toggle('on', pinned);
      btn.textContent = pinned ? 'Pinned to home' : 'Pin to home';
      toast(pinned ? `${cap(viewed)} pinned to your home page` : `${cap(viewed)} unpinned`);
    });
  }
  renderFriendPanel();

  // "Subscribers" row opens the list of people subscribed to this profile (anyone's).
  const subsRow = document.getElementById('statSubsRow');
  if (subsRow && !subsRow.dataset.wired) {
    subsRow.dataset.wired = '1';
    subsRow.classList.add('statbox-clickable');
    subsRow.setAttribute('role', 'button');
    subsRow.tabIndex = 0;
    subsRow.addEventListener('click', () => openSubsList(viewed, 'subscribers'));
    subsRow.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openSubsList(viewed, 'subscribers'); } });
  }

  // third stat row: "Subscriptions" (own - opens who you subscribe to) or a Subscribe button (others)
  const subWrap = document.getElementById('profileSubscribe');
  if (subWrap) {
    if (isOwn) {
      // Same markup as before (so it keeps the row's own styling); the ROW is the button.
      subWrap.innerHTML = '<span class="sub-text">Subscriptions</span>';
      if (!subWrap.dataset.wired) {
        subWrap.dataset.wired = '1';
        subWrap.style.cursor = 'pointer';
        subWrap.setAttribute('role', 'button');
        subWrap.tabIndex = 0;
        subWrap.title = 'See who you subscribe to';
        subWrap.addEventListener('click', () => openSubsList(viewed, 'subscriptions'));
        subWrap.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openSubsList(viewed, 'subscriptions'); } });
      }
    } else {
      const btn = document.createElement('button');
      btn.className = 'subscribe-btn' + (subscribed ? ' subscribed' : '');
      btn.textContent = subscribed ? 'Subscribed' : 'Subscribe';
      btn.addEventListener('click', async () => {
        if (!requireLogin('subscribe')) return;
        if (!rateLimit('subscribe', 12, 60000)) { toast('You\'re doing that too fast.'); return; }
        if (api && u && u.id) {
          const { ok, data: r } = await apiPost('/api/site/subscribe', { id: u.id, on: !subscribed });
          if (!ok) { toast((r && r.error) || 'Could not update the subscription'); return; }
          subscribed = !!r.subscribed;
          data.subscribers = typeof r.subscribers === 'number' ? r.subscribers : data.subscribers;
        } else {
          subscribed = !subscribed;
          localStorage.setItem(subKey, subscribed ? '1' : '0');
        }
        btn.textContent = subscribed ? 'Subscribed' : 'Subscribe';
        btn.classList.toggle('subscribed', subscribed);
        if (statSubs) statSubs.textContent = fmt(subCount());
      });
      subWrap.innerHTML = '';
      subWrap.appendChild(btn);
    }
  }

  // photos - real from the API (each links to /image/{id}); demo fallback respects local deletions
  const delKey = 'campus-deleted-' + viewed;
  const deleted = JSON.parse(localStorage.getItem(delKey) || '[]');
  const photosTaggedEl = document.getElementById('profilePhotosTagged');
  if (api && Array.isArray(api.photos)) {
    const lockBadge = '<span class="pphoto-lock" aria-label="Private" title="Only you can see this" style="position:absolute;top:8px;right:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border-radius:50%;color:#fff"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span>';
    const tile = p =>
      `<a class="pphoto${p.isPrivate ? ' is-private' : ''}" href="${imageUrl(p.id)}" data-id="${p.id}" style="position:relative;background-image:url('${p.image}');background-size:cover;background-position:center">${p.isPrivate ? lockBadge : ''}</a>`;
    // "Photos taken" = ones this player took; "Tagged in" = ones they're tagged in (theirs or others').
    // Older photos may lack the flags: if neither flag is present on any photo, treat all as taken.
    const hasFlags = api.photos.some(p => 'taken' in p || 'tagged' in p);
    const taken  = hasFlags ? api.photos.filter(p => p.taken) : api.photos;
    const tagged = hasFlags ? api.photos.filter(p => p.tagged) : [];
    photosEl.innerHTML = taken.length ? taken.map(tile).join('') : `<p class="profile-empty">No photos taken yet.</p>`;
    if (photosTaggedEl) photosTaggedEl.innerHTML = tagged.length ? tagged.map(tile).join('') : `<p class="profile-empty">Not tagged in any photos yet.</p>`;
  } else {
    if (photosTaggedEl) photosTaggedEl.innerHTML = `<p class="profile-empty">Not tagged in any photos yet.</p>`;
    const source = USER_PHOTOS[viewed] || PROFILE_PHOTOS;
    const visible = source.filter(p => !deleted.includes(p.id));
    photosEl.innerHTML = visible.length
      ? visible.map(p => {
          const bg = p.image
            ? `background-image:url('${p.image}');background-size:cover;background-position:center`
            : `background-image:url('assets/hero-bg.jpg');background-position:${p.pos};background-size:${p.size}`;
          return `<a class="pphoto" href="${imageUrl(viewed + '__' + p.id)}" data-id="${p.id}" style="${bg}"></a>`;
        }).join('')
      : `<p class="profile-empty">No photos yet.</p>`;
  }

  // delete handler
  photosEl.addEventListener('click', e => {
    const del = e.target.closest('.pphoto-del');
    if (!del) return;
    e.preventDefault();
    e.stopPropagation();
    const tile = del.closest('.pphoto');
    const id = tile.dataset.id;
    const d = JSON.parse(localStorage.getItem(delKey) || '[]');
    if (!d.includes(id)) { d.push(id); localStorage.setItem(delKey, JSON.stringify(d)); }
    tile.style.opacity = '0';
    tile.style.transform = 'scale(.9)';
    setTimeout(() => { tile.remove(); refreshPhotoCount(); }, 180);
  });

  function refreshPhotoCount() {
    const n = photosEl.querySelectorAll('.pphoto').length;
    if (n === 0) photosEl.innerHTML = `<p class="profile-empty">No photos yet.</p>`;
  }

  // ── Rooms tab (rec.net-style room cards) ──
  const roomsEl = document.getElementById('profileRooms');
  if (roomsEl) {
    // visits = an eye, same glyph as the Rooms page and room page stat strip
    const PERSON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z"/><circle cx="12" cy="12" r="3.2"/></svg>';
    const avSrc = (u && u.profile_image) || avatarUrl(viewed);
    if (api && Array.isArray(api.rooms)) {
      roomsEl.innerHTML = api.rooms.length
        ? api.rooms.map(r => {
            const cover = r.image
              ? `background-image:url('${r.image}');background-size:cover;background-position:center`
              : `background:linear-gradient(135deg,#ff5a3c,#7b2ff7)`;
            return `<a class="room-card" href="${roomUrl(r.name || r.id)}">
              <div class="room-card-head">
                <img class="room-card-av" src="${avSrc}" alt="">
                <div class="room-card-id"><span class="room-card-name">^${escapeHtml(r.name || 'Room')}</span><span class="room-card-by">@${escapeHtml(r.creator || handleText)}</span></div>
              </div>
              <div class="room-card-cover" style="${cover}"></div>
              <div class="room-card-foot">
                <span class="room-card-stat">${PERSON}${fmt(r.visits || 0)}</span>
              </div>
            </a>`;
          }).join('')
        : `<p class="profile-empty">No rooms yet.</p>`;
    } else {
      const roomIds = ['whisker-heights', 'midnight-mews', 'litterbox-lab', 'yarn-quest', 'deep-dive-reef', 'haunted-cattery'];
      roomsEl.innerHTML = roomIds.map(rid => {
        const r = ROOMS_DATA[rid];
        return `<a class="room-card" href="${roomUrl(rid)}">
          <div class="room-card-head">
            <img class="room-card-av" src="${avSrc}" alt="">
            <div class="room-card-id"><span class="room-card-name">^${r.name}</span><span class="room-card-by">@${viewed}</span></div>
          </div>
          <div class="room-card-cover" style="background:linear-gradient(135deg,${r.a},${r.b})"></div>
          <div class="room-card-foot">
            <span class="room-card-stat">${CHEER_ICON}${fmt(r.players)}</span>
            <span class="room-card-stat">${PERSON}${r.visits}</span>
          </div>
        </a>`;
      }).join('');
    }
  }

  // ── Events tab ──
  const eventsEl = document.getElementById('profileEvents');
  if (eventsEl) loadEvents(eventsEl, '/api/site/profile/' + encodeURIComponent(viewed) + '/events', { showRoom: true }, isOwn ? "You aren't hosting any events." : 'No upcoming events.');

  // ── tab switching ──
  const ptabs = document.querySelectorAll('.profile-tabs .ptab');
  const ppanels = document.querySelectorAll('.profile-panel');
  ptabs.forEach(tab => {
    tab.addEventListener('click', () => {
      ptabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      const which = tab.dataset.tab;
      ppanels.forEach(p => p.classList.toggle('active', p.dataset.panel === which));
    });
  });
}
renderProfile();

// ───── IMAGE PAGE ─────
async function renderImage() {
  const photoEl = document.getElementById('imagePhoto');
  if (!photoEl) return;

  const id = viewedImageId();
  // Real photo from /api/site/photos/{id} (numeric id); demo getPhoto() as a fallback for
  // the old "user__letter" ids.
  let ph = null;
  if (apiOn() && id != null && /^\d+$/.test(String(id))) {
    const data = await apiGet('/api/site/photos/' + encodeURIComponent(id));
    if (data && data.ok && data.photo) {
      const p = data.photo, a = p.author || {};
      ph = {
        user: a.display_name || a.username || 'Player',
        handle: a.username || 'player',
        avatar: a.profile_image,
        image: p.image, pos: 'center', size: 'cover',
        title: p.description || 'Photo', takenAt: p.createdAt,
        cheers: p.cheers || 0, comments: p.comments || 0, cheered: !!p.cheered,
        commentList: Array.isArray(p.commentList) ? p.commentList.map(serverComment) : [],
        tagged: Array.isArray(p.taggedPlayers) ? p.taggedPlayers : [],
        room: p.room || null,
        isOwner: !!p.isOwner, visibility: p.visibility || 'public',
      };
    }
  }
  if (!ph) ph = getPhoto(id);

  if (!ph) {
    document.getElementById('imagePage').innerHTML = '<p class="image-missing">Photo not found.</p>';
    return;
  }

  document.title = `${ph.title || 'Photo'} - Campus`;

  const author = document.getElementById('imageAuthor');
  author.href = userUrl(ph.handle);
  const imgAvEl = document.getElementById('imageAuthorAv');
  imgAvEl.src = ph.avatar || avatarUrl(ph.handle);
  imgAvEl.dataset.av = avKey(ph.handle);
  document.getElementById('imageAuthorName').textContent = ph.user;
  document.getElementById('imageAuthorHandle').textContent = '@' + ph.handle;

  photoEl.style.backgroundImage = `url('${ph.image || 'assets/hero-bg.jpg'}')`;
  photoEl.style.backgroundPosition = ph.pos || 'center';
  photoEl.style.backgroundSize = ph.size || 'cover';

  // ── tagged players: a little people button on the photo that opens a list ──
  const tagged = Array.isArray(ph.tagged) ? ph.tagged.slice() : [];
  if (tagged.length) {
    const btn = document.createElement('button');
    btn.className = 'tagbtn'; btn.type = 'button';
    btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><span class="tagbtn-n"></span>';
    const pop = document.createElement('div'); pop.className = 'tagpop';
    photoEl.appendChild(btn); photoEl.appendChild(pop);
    const renderTags = () => {
      const n = btn.querySelector('.tagbtn-n'); if (n) n.textContent = tagged.length;
      if (!tagged.length) { btn.remove(); pop.remove(); return; }
      pop.innerHTML = '<div class="tp-head">In this photo</div>' + tagged.map(t =>
        `<div class="tp-row" data-pid="${t.id}"><span class="tp-av" style="background-image:url('${t.profile_image || ''}')"></span>`
        + `<a class="tp-name" href="${userUrl(t.username)}">@${escapeHtml(t.username)}</a>`
        + (ph.isOwner ? `<button class="tp-x" data-remove="${t.id}" title="Remove tag" aria-label="Remove @${escapeHtml(t.username)}">&times;</button>` : '')
        + `</div>`).join('');
    };
    renderTags();
    btn.addEventListener('click', e => { e.stopPropagation(); pop.classList.toggle('open'); });
    document.addEventListener('click', () => pop.classList.remove('open'));
    pop.addEventListener('click', async e => {
      e.stopPropagation();
      const rm = e.target.closest('.tp-x'); if (!rm) return;
      const pid = rm.dataset.remove; rm.disabled = true;
      const res = await apiPost('/api/site/photos/' + encodeURIComponent(id) + '/untag', { playerId: Number(pid) });
      if (res && res.ok) {
        const idx = tagged.findIndex(t => String(t.id) === String(pid));
        if (idx >= 0) tagged.splice(idx, 1);
        renderTags();
        if (!tagged.length) pop.classList.remove('open');
        toast('Tag removed');
      } else { rm.disabled = false; toast('Could not remove tag'); }
    });
  }

  // ── owner: photo visibility (private / friends / public), synced to the server + in-game ──
  if (ph.isOwner) {
    const infoText = document.querySelector('.image-info-text');
    if (infoText) {
      const seg = document.createElement('div'); seg.className = 'vis-seg';
      const opts = [
        ['private', 'Private', '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>'],
        ['friends', 'Friends', '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/>'],
        ['public', 'Public', '<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18"/>'],
      ];
      seg.innerHTML = opts.map(([v, label, path]) =>
        `<button type="button" data-vis="${v}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${path}</svg>${label}</button>`).join('');
      infoText.appendChild(seg);
      const mark = v => seg.querySelectorAll('button').forEach(b => b.classList.toggle('active', b.dataset.vis === v));
      mark(ph.visibility || 'public');
      seg.addEventListener('click', async e => {
        const b = e.target.closest('button'); if (!b) return;
        const v = b.dataset.vis; if (v === ph.visibility) return;
        const prev = ph.visibility; mark(v);
        const res = await apiPost('/api/site/photos/' + encodeURIComponent(id) + '/visibility', { visibility: v });
        if (res && res.ok) { ph.visibility = (res.data && res.data.visibility) || v; mark(ph.visibility); toast('Photo set to ' + (ph.visibility === 'friends' ? 'friends only' : ph.visibility)); }
        else { mark(prev); toast('Could not update visibility'); }
      });
    }
  }

  const imgExport = document.getElementById('imgExport');
  if (imgExport) imgExport.addEventListener('click', async () => {
    const src = ph.image || '';
    if (!src) { toast('Nothing to download'); return; }
    imgExport.disabled = true;
    try {
      const name = (src.split('/').pop() || 'photo.jpg').split('?')[0];
      await saveFile(await fetchBlob(src), photoFileName(name, ph.title !== 'Photo' ? ph.title : ''));
    } catch { toast('Could not download the photo'); }
    imgExport.disabled = false;
  });

  const imgReport = document.getElementById('imgReport');
  if (imgReport) imgReport.addEventListener('click', () => openReport('Report photo', () => {
    imgReport.textContent = 'Reported';
    imgReport.disabled = true;
  }, /^\d+$/.test(String(id)) ? { type: 'photo', id } : null));

  // title (with a custom override) + edit pencil for the owner
  const titleEl = document.getElementById('imageTitle');
  const savedTitle = localStorage.getItem('campus-title-' + id);
  if (savedTitle && !/^\d+$/.test(String(id))) ph.title = savedTitle;
  titleEl.textContent = ph.title || 'Untitled photo';
  document.title = `${ph.title || 'Photo'} - Campus`;

  const owner = localStorage.getItem(USER_KEY);
  if (owner && owner.toLowerCase() === (ph.handle || '').toLowerCase()) {
    // wrap title in a row with a pencil button
    const row = document.createElement('div');
    row.className = 'title-row';
    titleEl.parentNode.insertBefore(row, titleEl);
    row.appendChild(titleEl);

    const pencil = document.createElement('button');
    pencil.className = 'title-edit';
    pencil.setAttribute('aria-label', 'Edit title');
    pencil.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>';
    row.appendChild(pencil);

    pencil.addEventListener('click', () => {
      const current = titleEl.textContent;
      const editor = document.createElement('div');
      editor.className = 'title-editor';
      editor.innerHTML = `<input class="title-input" type="text" maxlength="80" value="${escapeHtml(current)}"><button class="title-save">Save</button><button class="title-cancel">Cancel</button>`;
      row.style.display = 'none';
      row.parentNode.insertBefore(editor, row);
      const input = editor.querySelector('.title-input');
      input.focus(); input.select();
      const finish = () => { editor.remove(); row.style.display = ''; };
      editor.querySelector('.title-save').addEventListener('click', async () => {
        const v = input.value.trim() || 'Untitled photo';
        if (apiOn() && /^\d+$/.test(String(id))) {
          const r = await apiPost('/api/site/photos/' + encodeURIComponent(id) + '/description', { description: input.value.trim() });
          if (!r || !r.ok) { toast('Could not save the title'); return; }
          const saved = (r.data && r.data.description) || '';
          titleEl.textContent = saved || 'Untitled photo';
          document.title = `${saved || 'Photo'} - Campus`;
        } else {
          titleEl.textContent = v;
          document.title = `${v} - Campus`;
          localStorage.setItem('campus-title-' + id, v);
        }
        toast('Title updated');
        finish();
      });
      editor.querySelector('.title-cancel').addEventListener('click', finish);
      input.addEventListener('keydown', e => { if (e.key === 'Enter') editor.querySelector('.title-save').click(); if (e.key === 'Escape') finish(); });
    });
  }

  const metaEl = document.getElementById('imageMeta');
  metaEl.innerHTML = (ph.takenAt ? `<span>${timeAgo(ph.takenAt)} ago</span>` : '')
    + (ph.room && ph.room.name ? `<span class="image-room-sep">·</span><a class="image-room" href="${roomUrl(ph.room.name)}">^${escapeHtml(ph.room.name)}</a>` : '');

  // comments (reuse the comment system; persist per photo)
  // ⋯ menu - set this photo as profile picture / banner
  const menuBtn = document.getElementById('imageMenuBtn');
  const menu = document.getElementById('imageMenu');
  const me = localStorage.getItem(USER_KEY);
  if (menuBtn && menu) {
    if (!me) {
      menuBtn.style.display = 'none'; // must be logged in to set your own
    } else {
      // owner of the photo gets a delete option
      const isOwner = me.toLowerCase() === (ph.handle || '').toLowerCase();
      if (isOwner) {
        const delItem = document.createElement('button');
        delItem.className = 'image-menu-item danger';
        delItem.dataset.act = 'delete';
        delItem.textContent = 'Delete photo';
        menu.appendChild(delItem);
      }
      menuBtn.addEventListener('click', e => { e.stopPropagation(); menu.classList.toggle('open'); });
      document.addEventListener('click', () => menu.classList.remove('open'));
      menu.addEventListener('click', e => {
        const item = e.target.closest('.image-menu-item');
        if (!item) return;
        menu.classList.remove('open');
        const act = item.dataset.act;
        const cropData = { id: id, image: ph.image || 'assets/hero-bg.jpg', pos: ph.pos, size: ph.size };
        const data = JSON.stringify(cropData);
        if (act === 'pfp') {
          localStorage.setItem('campus-pfp-' + me, data);
          refreshAvatars(avKey(me), cropData.image); // update every avatar instantly (optimistic)
          if (apiOn() && /^\d+$/.test(String(id))) {
            // a real photo: the server points your profile picture at it (no download / re-upload from the browser)
            apiPost('/api/site/me/pfp', { photoId: Number(id) }).then(r => {
              if (r && r.ok) {
                toast('Profile picture updated');
                const url = r.data && r.data.profile_image;
                if (url) refreshAvatars(avKey(me), url);
              } else toast((r && r.data && r.data.error) || 'Could not set the profile picture');
            });
          } else {
            toast('Profile picture updated');
            syncProfileImageToApi(cropData.image); // also push to the backend
          }
        } else if (act === 'banner') {
          if (apiOn() && /^\d+$/.test(String(id))) {
            apiPost('/api/site/me/banner', { photoId: Number(id) }).then(r => toast(r && r.ok ? 'Profile banner updated' : ((r && r.data && r.data.error) || 'Could not set the banner')));
          } else {
            localStorage.setItem('campus-banner-' + me, data);
            toast('Profile banner updated');
          }
        } else if (act === 'delete') {
          openConfirm({
            title: 'Delete photo?',
            message: 'This photo will be removed from your profile. This can\'t be undone.',
            confirmText: 'Delete',
            onConfirm: async () => {
              if (apiOn() && /^\d+$/.test(String(id))) {
                const r = await apiDelete('/api/site/photos/' + encodeURIComponent(id));
                if (!r || !r.ok) { toast('Could not delete the photo'); return; }
              }
              if (id && String(id).includes('__')) {
                const [u, letter] = id.split('__');
                const key = 'campus-deleted-' + u;
                const d = JSON.parse(localStorage.getItem(key) || '[]');
                if (!d.includes(letter)) { d.push(letter); localStorage.setItem(key, JSON.stringify(d)); }
              }
              toast('Photo deleted');
              setTimeout(() => { window.location.href = userUrl(ph.handle); }, 650);
            }
          });
        }
      });
    }
  }

  const host = document.getElementById('imageCommentsHost');
  if (/^\d+$/.test(String(id))) host.dataset.photo = String(id);
  const block = commentsBlock({ thread: ph.commentList || [] });
  host.innerHTML = block.replace(' hidden', ''); // always visible here
  if (host.dataset.photo) { const l = host.querySelector('.comment-list'); if (l) l.dataset.loaded = '1'; }

  // cheer button just above the comment form / Post button
  const cheerBtn = `<button class="pstat cheer${ph.cheered ? ' liked' : ''}" data-n="${(ph.cheers || 0) - (ph.cheered ? 1 : 0)}">${CHEER_ICON}<span>${fmt(ph.cheers || 0)}</span></button>`;
  const tools = document.getElementById('imageTools');
  if (tools) tools.insertAdjacentHTML('afterbegin', cheerBtn);
  else {
    const form = host.querySelector('.comment-form');
    if (form) form.insertAdjacentHTML('beforebegin', `<div class="image-actions">${cheerBtn}</div>`);
    else host.querySelector('.post-comments')?.insertAdjacentHTML('beforeend', `<div class="image-actions">${cheerBtn}</div>`);
  }
  const ch = document.getElementById('imageComments')?.querySelector('h2');
  if (ch && (ph.commentList || []).length) ch.textContent = `Comments (${ph.commentList.length})`;
}

// ───── EXPORT (Settings > Export, and the image page's Export button) ─────
// Everything happens in the browser: the page lists the photos, fetches each /img/ file,
// zips them with JSZip (loaded from cdnjs on first use) and hands the zip to the browser's
// download. The server never builds or stores an archive.
async function fetchBlob(url) {
  const r = await fetch(url, { credentials: 'same-origin' });
  if (!r.ok) throw new Error('HTTP ' + r.status);
  return await r.blob();
}
function saveFile(blob, filename) {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob); a.download = filename;
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(a.href), 4000);
}
// "<id>_<title>.<ext>" - keeps the server's name so the file is unique, adds the title if any.
function photoFileName(serverName, title) {
  const m = /^(.*?)(\.[a-z0-9]+)?$/i.exec(serverName || 'photo.jpg');
  const base = m[1] || 'photo', ext = m[2] || '.jpg';
  const t = (title || '').replace(/[^\w\- ]+/g, '').trim().slice(0, 40);
  return t ? `${base}_${t.replace(/\s+/g, '_')}${ext}` : base + ext;
}
let _jszip = null;
function loadJSZip() {
  if (window.JSZip) return Promise.resolve(window.JSZip);
  if (_jszip) return _jszip;
  _jszip = new Promise((res, rej) => {
    const sc = document.createElement('script');
    sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
    sc.onload = () => res(window.JSZip); sc.onerror = () => { _jszip = null; rej(new Error('jszip')); };
    document.head.appendChild(sc);
  });
  return _jszip;
}
function openExportPhotos() {
  if (!localStorage.getItem(USER_KEY)) { toast('Log in to export your photos'); return; }
  let scrim = document.getElementById('exportScrim');
  let modal = document.getElementById('exportModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'exportScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'exportModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
  }
  const close = () => { modal.classList.remove('open'); scrim.classList.remove('open'); document.body.style.overflow = ''; };
  modal.innerHTML = `
    <div class="report-card export-card">
      <button class="report-close" aria-label="Close">✕</button>
      <h2 class="report-title">Export Photos</h2>
      <p class="report-sub">Choose what to include. The photos are zipped in your browser.</p>
      <label class="export-opt"><input type="checkbox" id="expTaken" checked><span class="export-check"></span><span><b>Photos taken by you</b><small>Every photo you took, including private ones.</small></span></label>
      <label class="export-opt"><input type="checkbox" id="expTagged" checked><span class="export-check"></span><span><b>Photos including you</b><small>Photos other players took that you're tagged in.</small></span></label>
      <p class="export-progress" id="expProgress" hidden></p>
      <div class="report-actions">
        <button class="report-cancel export-cancel">Cancel</button>
        <button class="report-submit export-go">Continue</button>
      </div>
    </div>`;
  const card = modal.querySelector('.export-card');
  let busy = false;
  const tryClose = () => { if (!busy) close(); };
  scrim.onclick = tryClose; modal.onclick = e => { if (e.target === modal) tryClose(); };
  card.querySelector('.report-close').addEventListener('click', tryClose);
  card.querySelector('.export-cancel').addEventListener('click', tryClose);
  const go = card.querySelector('.export-go');
  const prog = card.querySelector('#expProgress');
  const say = t => { prog.hidden = false; prog.textContent = t; };
  go.addEventListener('click', async () => {
    const taken = card.querySelector('#expTaken').checked, tagged = card.querySelector('#expTagged').checked;
    if (!taken && !tagged) { say('Pick at least one option.'); return; }
    busy = true; go.disabled = true; card.querySelectorAll('input').forEach(i => i.disabled = true);
    try {
      say('Loading your photo list…');
      const d = await apiGet(`/api/site/me/photos?taken=${taken}&tagged=${tagged}`);
      const list = (d && d.ok && d.photos) || [];
      if (!list.length) { say('No photos to export.'); busy = false; go.disabled = false; card.querySelectorAll('input').forEach(i => i.disabled = false); return; }
      const JSZip = await loadJSZip();
      const zip = new JSZip();
      const takenDir = zip.folder('taken-by-me'), taggedDir = zip.folder('photos-of-me');
      let n = 0, failed = 0;
      for (const ph of list) {
        n++; say(`Downloading ${n} / ${list.length}…`);
        try {
          const blob = await fetchBlob(ph.image);
          const name = photoFileName(ph.file || (ph.image || '').split('/').pop(), ph.description);
          (ph.taken ? takenDir : taggedDir).file(name, blob);
        } catch { failed++; }
      }
      say('Zipping…');
      const out = await zip.generateAsync({ type: 'blob', compression: 'STORE' });
      const me = localStorage.getItem(USER_KEY) || 'campus';
      saveFile(out, `campus-photos-${me}-${new Date().toISOString().slice(0, 10)}.zip`);
      say(`Done - ${list.length - failed} photo${list.length - failed === 1 ? '' : 's'} exported${failed ? `, ${failed} could not be downloaded` : ''}.`);
      go.textContent = 'Close'; go.disabled = false; busy = false;
      go.onclick = close;
    } catch (e) {
      say('Export failed - ' + (e && e.message === 'jszip' ? 'could not load the zip library.' : 'please try again.'));
      busy = false; go.disabled = false; card.querySelectorAll('input').forEach(i => i.disabled = false);
    }
  });
  modal.classList.add('open'); scrim.classList.add('open'); document.body.style.overflow = 'hidden';
}

// Export Data: the player's own account as one .json file (built by the server from their account; nothing is stored).
async function openExportData() {
  if (!localStorage.getItem(USER_KEY)) { toast('Log in to export your data'); return; }
  const btn = document.getElementById('exportData');
  if (btn) btn.disabled = true;
  try {
    const r = await fetch('/api/site/me/export', { credentials: 'same-origin' });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const blob = await r.blob();
    const me = localStorage.getItem(USER_KEY) || 'campus';
    saveFile(blob, `campus-data-${me}-${new Date().toISOString().slice(0, 10)}.json`);
    toast('Your data was downloaded');
  } catch { toast('Could not export your data - please try again'); }
  if (btn) btn.disabled = false;
}

// Export Rooms: pick from the rooms you CREATED, the browser fetches each room's files and zips them. The folder layout
// is the one the admin Archive importer reads, so an export can be imported back.
function openExportRooms() {
  if (!localStorage.getItem(USER_KEY)) { toast('Log in to export your rooms'); return; }
  let scrim = document.getElementById('exportScrim');
  let modal = document.getElementById('exportModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'exportScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'exportModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
  }
  const close = () => { modal.classList.remove('open'); scrim.classList.remove('open'); document.body.style.overflow = ''; };
  modal.innerHTML = `
    <div class="report-card export-card">
      <button class="report-close" aria-label="Close">&#10005;</button>
      <h2 class="report-title">Export Rooms</h2>
      <p class="report-sub">Rooms you created. Each room is saved with its settings, picture and every saved build.</p>
      <div id="expRoomList" style="max-height:280px;overflow:auto"></div>
      <p class="export-progress" id="expProgress"></p>
      <div class="report-actions">
        <button class="report-cancel export-cancel">Cancel</button>
        <button class="report-submit export-go" disabled>Export</button>
      </div>
    </div>`;
  const card = modal.querySelector('.export-card');
  const list = card.querySelector('#expRoomList');
  const prog = card.querySelector('#expProgress');
  const go = card.querySelector('.export-go');
  const say = t => { prog.hidden = false; prog.textContent = t; };
  let busy = false;
  const tryClose = () => { if (!busy) close(); };
  scrim.onclick = tryClose; modal.onclick = e => { if (e.target === modal) tryClose(); };
  card.querySelector('.report-close').addEventListener('click', tryClose);
  card.querySelector('.export-cancel').addEventListener('click', tryClose);
  modal.classList.add('open'); scrim.classList.add('open'); document.body.style.overflow = 'hidden';
  say('Loading your rooms...');

  const boxes = () => Array.from(list.querySelectorAll('input[data-room]'));
  const refresh = () => { go.disabled = busy || !boxes().some(b => b.checked); };

  apiGet('/api/site/me/rooms').then(d => {
    const rooms = (d && d.ok && d.rooms) || [];
    if (!rooms.length) { say('You have not created any rooms.'); return; }
    prog.hidden = true;
    const esc = s => String(s).replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
    list.innerHTML = `<label class="export-opt"><input type="checkbox" id="expAllRooms" checked><span class="export-check"></span><span><b>All rooms (${rooms.length})</b></span></label>` +
      rooms.map(r => `<label class="export-opt"><input type="checkbox" data-room="${esc(r.id)}" data-name="${esc(r.name)}" checked><span class="export-check"></span><span><b>${esc(r.name)}</b><small>${r.isDorm ? 'Your dorm - ' : ''}${r.subrooms} subroom${r.subrooms === 1 ? '' : 's'}</small></span></label>`).join('');
    list.querySelector('#expAllRooms').addEventListener('change', e => { boxes().forEach(b => b.checked = e.target.checked); refresh(); });
    boxes().forEach(b => b.addEventListener('change', refresh));
    refresh();
  });

  go.addEventListener('click', async () => {
    const picked = boxes().filter(b => b.checked);
    if (!picked.length) return;
    busy = true; go.disabled = true; card.querySelectorAll('input').forEach(i => i.disabled = true);
    try {
      const JSZip = await loadJSZip();
      const zip = new JSZip();
      let failed = 0, done = 0;
      for (const b of picked) {
        done++;
        say(`Room ${done} / ${picked.length}: ${b.dataset.name}...`);
        const man = await apiGet(`/api/site/me/rooms/${b.dataset.room}/manifest`);
        if (!man || !man.ok) { failed++; continue; }
        const dir = zip.folder(man.folder);
        dir.file('RoomDetails.json', man.details);
        for (const f of man.files) {
          try {
            const blob = await fetchBlob(`/api/site/me/rooms/${b.dataset.room}/file?name=${encodeURIComponent(f.name)}`);
            dir.file(f.path, blob);
          } catch { failed++; }
        }
      }
      say('Zipping...');
      const out = await zip.generateAsync({ type: 'blob', compression: 'STORE' });
      const me = localStorage.getItem(USER_KEY) || 'campus';
      saveFile(out, `campus-rooms-${me}-${new Date().toISOString().slice(0, 10)}.zip`);
      say(`Done - ${picked.length} room${picked.length === 1 ? '' : 's'} exported${failed ? `, ${failed} file${failed === 1 ? '' : 's'} could not be downloaded` : ''}.`);
      go.textContent = 'Close'; go.disabled = false; busy = false;
      go.onclick = close;
    } catch (e) {
      say('Export failed - ' + (e && e.message === 'jszip' ? 'could not load the zip library.' : 'please try again.'));
      busy = false; card.querySelectorAll('input').forEach(i => i.disabled = false); refresh();
    }
  });
}

// ───── QUICK ADMIN (profile + room pages) ─────
// The "Admin" button, for dev accounts only: /api/site/me says admin:true when the account is a
// developer AND this network could reach the admin panel. Every action goes through
// /api/site/admin/*, which re-checks both and runs the admin panel's own handler, so it bans,
// kicks and logs exactly like the panel does.
async function mountAdminButton(kind, key, container) {
  if (!container || !key || !apiOn()) return;
  await SESSION_READY;
  if (!CAMPUS_ADMIN || container.querySelector('.admin-quick-btn')) return;
  const b = document.createElement('button');
  b.className = 'profile-report-btn admin-quick-btn';
  b.textContent = 'Admin';
  b.addEventListener('click', () => openAdminPopup(kind, key));
  container.appendChild(b);
}

function adminDur(sec) {
  if (sec == null) return 'permanently';
  const d = Math.floor(sec / 86400), h = Math.floor(sec % 86400 / 3600), m = Math.ceil(sec % 3600 / 60);
  return d ? `${d}d ${h}h left` : h ? `${h}h ${m}m left` : `${m}m left`;
}

async function openAdminPopup(kind, key) {
  let scrim = document.getElementById('adminScrim');
  let modal = document.getElementById('adminModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'adminScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'adminModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
  }
  const close = () => { modal.classList.remove('open'); scrim.classList.remove('open'); document.body.style.overflow = ''; };
  scrim.onclick = close; modal.onclick = e => { if (e.target === modal) close(); };
  const esc = s => escapeHtml(String(s == null ? '' : s));
  const base = `/api/site/admin/${kind}/${encodeURIComponent(key)}`;
  const ACC = ['Private', 'Public', 'Unlisted', 'Dev only', 'Dev unlisted'];

  const playerHtml = d => {
    const flags = [d.dev && 'Developer', d.mod && 'Moderator', d.junior && 'Junior'].filter(Boolean);
    const where = d.online ? (d.room ? `Online in ^${esc(d.room.name)}${d.room.isPrivate ? ' (private)' : ''}` : 'Online') : 'Offline';
    const noBan = d.dev || d.is_self;
    return `<h2 class="report-title">Admin · @${esc(d.username)}</h2>
      <p class="report-sub">#${d.id} · ${where} · Level ${d.level} · ${fmt(d.tokens)} tokens${flags.length ? ' · ' + flags.join(', ') : ''}</p>
      ${d.ban ? `<p class="adm-status">Banned ${d.ban.permanent ? 'permanently' : '(' + adminDur(d.ban.remaining_seconds) + ')'}${d.ban.reason ? ': ' + esc(d.ban.reason) : ''}</p>` : ''}
      ${d.mic_ban ? `<p class="adm-status">Mic banned ${d.mic_ban.permanent ? 'permanently' : '(' + adminDur(d.mic_ban.remaining_seconds) + ')'}</p>` : ''}
      <div class="adm-sec"><h3>Room</h3><div class="adm-row">
        <button class="adm-btn" data-act="kick" ${d.is_self ? 'disabled' : ''}>Kick</button>
        <button class="adm-btn" data-act="join" ${d.is_self || !d.room ? 'disabled' : ''}>Go to them</button>
        <button class="adm-btn" data-act="bring" ${d.is_self ? 'disabled' : ''}>Bring to me</button></div></div>
      <div class="adm-sec"><h3>Ban</h3>
        ${d.ban ? `<div class="adm-row"><button class="adm-btn" data-act="unban">Unban</button></div>` : `
        <div class="adm-row"><select class="adm-in" id="admBanDur" aria-label="Ban length">
          <option value="3600">1 hour</option><option value="86400">1 day</option><option value="259200">3 days</option>
          <option value="604800" selected>7 days</option><option value="2592000">30 days</option><option value="permanent">Permanent</option></select>
          <input class="adm-in grow" id="admBanReason" maxlength="200" placeholder="Reason (they see this)" aria-label="Ban reason"></div>
        <div class="adm-row"><label class="adm-chk"><input type="checkbox" id="admBanDevice"> Device</label>
          <label class="adm-chk"><input type="checkbox" id="admBanIp"> IP</label>
          <button class="adm-btn danger" data-act="ban" ${noBan ? 'disabled title="Developers can’t be banned"' : ''}>Ban</button></div>`}</div>
      <div class="adm-sec"><h3>Mic</h3><div class="adm-row">
        ${d.mic_ban ? `<button class="adm-btn" data-act="micunban">Lift mic ban</button>` : `
        <select class="adm-in" id="admMicMin" aria-label="Mic ban length"><option value="60">1 hour</option><option value="1440" selected>1 day</option><option value="10080">7 days</option><option value="0">Permanent</option></select>
        <input class="adm-in grow" id="admMicReason" maxlength="200" placeholder="Reason" aria-label="Mic ban reason">
        <button class="adm-btn" data-act="micban" ${d.is_self ? 'disabled' : ''}>Mic ban</button>`}</div></div>
      <div class="adm-sec"><h3>Tokens</h3><div class="adm-row">
        <input class="adm-in grow" id="admTokens" type="number" step="1" placeholder="Amount (negative takes away)" aria-label="Token amount">
        <button class="adm-btn" data-act="tokens">Give</button></div></div>`;
  };

  const roomHtml = d => `<h2 class="report-title">Admin · ^${esc(d.name)}</h2>
      <p class="report-sub">#${d.id} · by ${esc(d.creator || 'nobody')} · ${d.players_now} playing now${d.featured ? ' · Featured' : ''}${d.dorm ? ' · Dorm' : ''}</p>
      <div class="adm-sec"><h3>Details</h3>
        <div class="adm-row"><input class="adm-in grow" id="admRoomName" maxlength="60" value="${esc(d.name)}" placeholder="Name" aria-label="Room name"></div>
        <div class="adm-row"><textarea class="adm-in grow" id="admRoomDesc" rows="2" maxlength="500" placeholder="Description" aria-label="Description">${esc(d.description)}</textarea></div>
        <div class="adm-row"><select class="adm-in" id="admRoomAcc" aria-label="Who can join">${ACC.map((n, i) => `<option value="${i}"${i === d.accessibility ? ' selected' : ''}>${n}</option>`).join('')}</select>
          <input class="adm-in adm-num" id="admRoomMax" type="number" min="1" max="100" value="${d.max_players}" title="Max players" aria-label="Max players">
          <label class="adm-chk"><input type="checkbox" id="admRoomClone"${d.cloning ? ' checked' : ''}> Cloning</label>
          <button class="adm-btn" data-act="edit">Save</button></div></div>
      <div class="adm-sec"><h3>Room</h3><div class="adm-row">
        <button class="adm-btn" data-act="${d.featured ? 'unfeature' : 'feature'}">${d.featured ? 'Unfeature' : 'Feature'}</button>
        <button class="adm-btn danger" data-act="delete" ${d.dorm ? 'disabled title="A dorm can’t be deleted"' : ''}>Delete room</button></div></div>`;

  const paintNote = (t, bad) => {
    const n = modal.querySelector('.adm-note');
    if (n) { n.hidden = false; n.textContent = t; n.classList.toggle('bad', !!bad); }
  };

  const act = async (btn, d) => {
    const a = btn.dataset.act;
    const v = id => { const el = modal.querySelector('#' + id); return el ? el.value : ''; };
    const ck = id => { const el = modal.querySelector('#' + id); return !!(el && el.checked); };
    let body = {};
    if (a === 'ban') {
      if (!v('admBanReason').trim()) { paintNote('Give a reason for the ban.', true); return; }
      body = { duration: v('admBanDur'), reason: v('admBanReason'), device: ck('admBanDevice'), ip: ck('admBanIp') };
      if (!confirm(`Ban @${d.username}${body.duration === 'permanent' ? ' permanently' : ''}?`)) return;
    } else if (a === 'micban') {
      body = { minutes: v('admMicMin'), reason: v('admMicReason') };
    } else if (a === 'tokens') {
      const t = v('admTokens').trim();
      if (!/^-?\d+$/.test(t) || +t === 0) { paintNote('Enter a whole number of tokens.', true); return; }
      body = { amount: t };
    } else if (a === 'edit') {
      body = { name: v('admRoomName'), description: v('admRoomDesc'), accessibility: v('admRoomAcc'), maxPlayers: v('admRoomMax'), cloningAllowed: ck('admRoomClone') ? 'true' : 'false' };
    } else if (a === 'delete') {
      if (!confirm(`Delete ^${d.name}? This can’t be undone.`)) return;
    } else if (a === 'kick') {
      if (!confirm(`Kick @${d.username} from their room?`)) return;
    }
    btn.disabled = true;
    const { ok, data } = await apiPost(`${base}/${a}`, body);
    const msg = (data && (data.message || data.error)) || (ok ? 'Done.' : 'That didn’t work.');
    if (a === 'delete' && ok) { close(); toast(msg); setTimeout(() => { location.href = '/rooms'; }, 900); return; }
    await paint(msg, !ok);
  };

  const paint = async (note, bad) => {
    // apiGet is redefined further down to THROW on a non-OK answer (a lapsed session is a 403).
    let d = null;
    try { d = await apiGet(base); } catch { d = null; }
    if (!d || !d.ok) {
      modal.innerHTML = `<div class="report-card adm-card"><button class="report-close" aria-label="Close">✕</button>
        <h2 class="report-title">Admin</h2><p class="report-sub">Couldn’t load this ${kind}. Your admin access may have ended - reload the page.</p></div>`;
      modal.querySelector('.report-close').onclick = close;
      return;
    }
    modal.innerHTML = `<div class="report-card adm-card"><button class="report-close" aria-label="Close">✕</button>
      ${kind === 'player' ? playerHtml(d) : roomHtml(d)}
      <p class="adm-note${bad ? ' bad' : ''}" ${note ? '' : 'hidden'}>${esc(note || '')}</p>
      <a class="adm-panel-link" href="/admin/home/v4?${kind}=${d.id}" target="_blank" rel="noopener">Open ${kind === 'player' ? '@' + esc(d.username) : '^' + esc(d.name)} in the admin panel</a></div>`;
    const card = modal.querySelector('.adm-card');
    card.querySelector('.report-close').onclick = close;
    card.querySelectorAll('[data-act]').forEach(b => b.addEventListener('click', () => act(b, d)));
    // The panel's login redirect drops ?player= / ?room=, so leave the target for it to pick up.
    card.querySelector('.adm-panel-link').addEventListener('click', () => {
      try { localStorage.setItem('campus-admin-open', JSON.stringify({ kind, id: d.id, at: Date.now() })); } catch {}
    });
  };

  modal.innerHTML = `<div class="report-card adm-card"><p class="report-sub">Loading…</p></div>`;
  modal.classList.add('open'); scrim.classList.add('open'); document.body.style.overflow = 'hidden';
  await paint();
}

// ───── SETTINGS PAGE ─────
function initSettings() {
  const nav = document.querySelector('.settings-nav');
  if (!nav) return;
  const me = localStorage.getItem(USER_KEY);
  if (!me) {
    // not logged in — show a 401
    const main = document.querySelector('.settings-page');
    if (main) main.innerHTML =
      `<div class="forbidden">
        <h1>401</h1>
        <p>You need to be logged in to view your settings.</p>
        <a href="/login" class="btn-dl">Log in</a>
      </div>`;
    document.title = '401 - Campus';
    return;
  }

  // header
  const suAv = document.getElementById('suAv');
  if (suAv) { suAv.src = avatarUrl(me); suAv.dataset.av = avKey(me); }
  const suName = document.getElementById('suName');
  if (suName) suName.textContent = myDisplayName(me);
  if (me) { siteWatch(me); renderSettingsStatus(); }
  const suHandle = document.getElementById('suHandle');
  if (suHandle) suHandle.textContent = '@' + myHandle(me);

  // profile fields — show current values as faded placeholders (clear when typing)
  const username = document.getElementById('setUsername');
  if (username) { username.value = ''; username.placeholder = myHandle(me); }
  const nick = document.getElementById('setNickname');
  if (nick) { nick.value = ''; nick.placeholder = myDisplayName(me); }
  const bio = document.getElementById('setBio');
  if (bio) bio.value = localStorage.getItem('campus-mybio') || '';

  document.getElementById('exportPhotos')?.addEventListener('click', openExportPhotos);
  document.getElementById('exportData')?.addEventListener('click', openExportData);
  document.getElementById('exportRooms')?.addEventListener('click', openExportRooms);

  const themeSel = document.getElementById('setTheme');
  if (themeSel) {
    themeSel.value = localStorage.getItem(THEME_KEY) || 'light';
    themeSel.addEventListener('change', () => { localStorage.setItem(THEME_KEY, themeSel.value); applyTheme(themeSel.value); syncThemeToggles(); });
  }

  // nav switching
  document.querySelectorAll('.snav[data-panel]').forEach(b => {
    b.addEventListener('click', () => {
      document.querySelector('.snav.active')?.classList.remove('active');
      b.classList.add('active');
      const p = b.dataset.panel;
      document.querySelectorAll('.spanel').forEach(s => s.classList.toggle('active', s.dataset.panel === p));
    });
  });

  // ---- Discord linking tab ----
  // Isolated flow: generate a code here, run /link <code> with the Campus bot. The server only
  // records a Discord<->account link (no admin access). See SiteController /api/site/discord/*.
  (function initDiscordTab() {
    const stText = document.getElementById('discordStatusText');
    if (!stText) return;
    const linkBtn   = document.getElementById('discordLinkBtn');
    const unlinkBtn = document.getElementById('discordUnlinkBtn');

    async function jfetch(path, method) {
      try {
        const r = await fetch(path, { method: method || 'GET', credentials: 'same-origin' });
        return r.ok ? await r.json() : null;
      } catch { return null; }
    }
    const show = (el, on) => { if (el) el.style.display = on ? '' : 'none'; };

    async function load() {
      stText.textContent = 'Checking…';
      show(linkBtn, false); show(unlinkBtn, false);
      const s = await jfetch('/api/site/discord/status');
      if (!s || !s.ok) { stText.textContent = 'Could not load status.'; return; }
      if (s.linked) {
        stText.textContent = 'Connected' + (s.discordUsername ? (' as ' + s.discordUsername) : '');
        show(unlinkBtn, true);
      } else {
        stText.textContent = 'Not connected';
        show(linkBtn, true);
      }
    }

    // "Link Discord" -> full-page redirect to Discord's authorize page (OAuth). The callback
    // links the account and returns to /settings?discord=linked. Same app as the admin login, but
    // the link-scoped state means it NEVER logs you into the admin panel.
    document.getElementById('discordLinkBtn')?.addEventListener('click', () => {
      window.location.href = '/api/site/discord/oauth/start';
    });
    document.getElementById('discordUnlinkBtn')?.addEventListener('click', async () => {
      const r = await jfetch('/api/site/discord/unlink', 'POST');
      if (!r || !r.ok) { toast('Could not unlink.'); return; }
      toast('Discord unlinked'); load(); if (typeof initSocialCards === 'function') initSocialCards();
    });

    // Coming back from the OAuth round-trip: toast the outcome and open the Discord tab.
    const dq = new URLSearchParams(location.search).get('discord');
    if (dq) {
      const msg = { linked: 'Discord linked!', expired: 'Link timed out — try again.',
                    inuse: 'That Discord is already linked to another account.',
                    error: 'Could not link Discord.' }[dq] || null;
      if (msg) toast(msg);
      document.querySelector('.snav[data-panel="services"]')?.click();
      history.replaceState(null, '', location.pathname);
    }

    // Load status the first time the Services tab is opened.
    let loaded = false;
    document.querySelector('.snav[data-panel="services"]')?.addEventListener('click', () => {
      if (!loaded) { loaded = true; load(); }
    });
  })();

  // ---- Spotify (Settings > Services) ----
  // OAuth against the server's Spotify app (SiteController /api/site/spotify/*). The card shows
  // the linked account, a live "listening to" preview and the "show to" choice.
  (function initSpotifyTab() {
    const stText = document.getElementById('spotifyStatusText');
    if (!stText) return;
    const linkBtn = document.getElementById('spotifyLinkBtn');
    const unlinkBtn = document.getElementById('spotifyUnlinkBtn');
    const visRow = document.getElementById('spotifyVisRow');
    const visSel = document.getElementById('spotifyVis');
    const preview = document.getElementById('spotifyNowPreview');
    const show = (el, on) => { if (el) el.style.display = on ? '' : 'none'; };
    let timer = null;

    async function jfetch(path, method, body) {
      try {
        const r = await fetch(path, { method: method || 'GET', credentials: 'same-origin',
          headers: body ? { 'Content-Type': 'application/json' } : undefined, body: body ? JSON.stringify(body) : undefined });
        return r.ok ? await r.json() : null;
      } catch { return null; }
    }

    async function load() {
      stText.textContent = 'Checking…';
      show(linkBtn, false); show(unlinkBtn, false); visRow.hidden = true;
      const s = await jfetch('/api/site/spotify/status');
      if (!s || !s.ok) { stText.textContent = 'Could not load status.'; return; }
      if (!s.configured) { stText.textContent = 'Spotify linking is not set up on this server yet.'; return; }
      if (s.linked) {
        if (s.notAllowed) {
          // The token is real but Spotify refuses this user: the Campus app is in Spotify's
          // Development Mode, which only serves allow-listed users (User Management, max 25).
          stText.textContent = 'Connected, but Spotify is not allowing this account yet — the Campus Spotify app is in development mode, so a Campus dev has to add your Spotify email under User Management. Your song will appear automatically once they have.';
        } else {
          stText.textContent = (s.broken ? 'Link expired — link again' : 'Connected') + (s.displayName ? (' as ' + s.displayName) : '');
        }
        show(unlinkBtn, true); if (s.broken) show(linkBtn, true);
        visRow.hidden = false; visSel.value = String(s.visibility ?? 1);
        renderSpotify(preview, s.now_playing);
        clearInterval(timer);
        timer = setInterval(async () => {
          if (document.hidden) return;
          const r = await jfetch('/api/site/spotify/status');
          if (r && r.ok) renderSpotify(preview, r.now_playing);
        }, 15000);
      } else {
        stText.textContent = 'Not connected';
        show(linkBtn, true); renderSpotify(preview, null);
      }
    }

    linkBtn?.addEventListener('click', () => { window.location.href = '/api/site/spotify/oauth/start'; });
    unlinkBtn?.addEventListener('click', async () => {
      const r = await jfetch('/api/site/spotify/unlink', 'POST');
      if (!r || !r.ok) { toast('Could not unlink.'); return; }
      toast('Spotify unlinked'); clearInterval(timer); load(); if (typeof initSocialCards === 'function') initSocialCards();
    });
    visSel?.addEventListener('change', async () => {
      const r = await jfetch('/api/site/spotify/visibility', 'POST', { visibility: Number(visSel.value) });
      toast(r && r.ok ? 'Saved' : 'Could not save.');
    });

    const sq = new URLSearchParams(location.search).get('spotify');
    if (sq) {
      const msg = { linked: 'Spotify linked!', notallowed: 'Linked, but Spotify is not allowing this account yet — ask a Campus dev to add your Spotify email to the app.',
                    expired: 'Link timed out — try again.', denied: 'Spotify access was declined.',
                    inuse: 'That Spotify account is already linked to another player.',
                    unconfigured: 'Spotify linking is not set up on this server yet.', error: 'Could not link Spotify.' }[sq] || null;
      if (msg) toast(msg);
      document.querySelector('.snav[data-panel="services"]')?.click();
      history.replaceState(null, '', location.pathname);
    }
    let loaded = false;
    document.querySelector('.snav[data-panel="services"]')?.addEventListener('click', () => {
      if (!loaded) { loaded = true; load(); initSocialCards(); }
    });
  })();

  // Services: every linkable social as a card (sign in with the service -> verified handle),
  // each with its own "Show on my profile" switch; Discord and Spotify keep their own cards and
  // only get the switch. Data from /api/site/social/status.
  async function initSocialCards() {
    const host = document.getElementById('socialCards');
    if (!host || !apiOn()) return;
    let r = null;
    try { r = await apiGet('/api/site/social/status'); } catch {}
    if (!r || !r.ok) { host.innerHTML = '<p style="opacity:.7;margin-top:14px">Could not load your services.</p>'; return; }
    const cards = (r.providers || []).filter(p => p.oauth);
    host.innerHTML = cards.map(p => {
      const status = !p.configured ? 'Not set up on this server yet'
        : p.linked ? ('Connected as ' + (p.url ? '<a href="' + escapeHtml(p.url) + '" target="_blank" rel="noopener">' + escapeHtml(p.handle) + '</a>' : escapeHtml(p.handle)))
        : 'Not connected';
      return '<div class="discord-card svc-card svc-' + p.key + '" data-svc="' + p.key + '">'
        + '<div class="discord-logo" aria-hidden="true" style="color:#fff">' + (SOCIAL_ICONS[p.key] || '').replace('<svg ', '<svg width="26" height="26" ') + '</div>'
        + '<div class="discord-info"><div class="discord-title">' + escapeHtml(p.label) + '</div><div class="discord-status">' + status + '</div>'
        + (p.linked ? '<label class="svc-show" data-svc="' + p.key + '"><span>Show on my profile</span><span class="switch"><input type="checkbox" class="svc-show-toggle" data-svc="' + p.key + '"' + (p.show ? ' checked' : '') + '><span class="slider"></span></span></label>' : '')
        + '</div>'
        + (p.linked
            ? '<button class="discord-unlink-btn svc-unlink" data-svc="' + p.key + '">Unlink</button>'
            : '<button class="discord-link-btn svc-link" data-svc="' + p.key + '"' + (p.configured ? '' : ' disabled') + '>Link ' + escapeHtml(p.label) + '</button>')
        + '</div>';
    }).join('');
    // Discord / Spotify switches (their cards are static in the HTML)
    for (const p of (r.providers || []).filter(p => !p.oauth)) {
      const row = document.querySelector('.svc-show[data-svc="' + p.key + '"]');
      const box = row && row.querySelector('.svc-show-toggle');
      if (row) row.hidden = !p.linked;
      if (box) box.checked = !!p.show;
    }
    host.querySelectorAll('.svc-link').forEach(b => b.addEventListener('click', () => { window.location.href = '/api/site/social/' + b.dataset.svc + '/start'; }));
    host.querySelectorAll('.svc-unlink').forEach(b => b.addEventListener('click', async () => {
      const { ok } = await apiPost('/api/site/social/' + b.dataset.svc + '/unlink');
      if (!ok) { toast('Could not unlink.'); return; }
      toast('Unlinked'); initSocialCards();
    }));
    document.querySelectorAll('.svc-show-toggle').forEach(t => {
      if (t.dataset.wired) return; t.dataset.wired = '1';
      t.addEventListener('change', async () => {
        const { ok } = await apiPost('/api/site/social/' + t.dataset.svc + '/show', { show: t.checked });
        toast(ok ? (t.checked ? 'Shown on your profile' : 'Hidden from your profile') : 'Could not save.');
      });
    });
  }
  // Back from a service's sign-in: toast the outcome, open Services.
  const sq2 = new URLSearchParams(location.search).get('social');
  if (sq2) {
    const [prov, outcome] = sq2.split(':');
    const label = prov ? prov.charAt(0).toUpperCase() + prov.slice(1) : 'Service';
    const msg = { linked: label + ' linked!', expired: 'Link timed out — try again.', denied: label + ' access was declined.',
                  inuse: 'That ' + label + ' account is already linked to another player.',
                  unconfigured: label + ' linking is not set up on this server yet.', error: 'Could not link ' + label + '.' }[outcome] || null;
    if (msg) toast(msg);
    document.querySelector('.snav[data-panel="services"]')?.click();
    history.replaceState(null, '', location.pathname);
  }

  // save buttons — Profile now POSTs to the server (was localStorage-only, so @name / display
  // name / bio never reached the game or another browser). The server persists them and pushes
  // an AccountUpdate so the change shows in-game without a relog.
  // Email panel: load the account's current address, save it to the server.
  const acctEmail = document.getElementById('acctEmail');
  if (acctEmail && apiOn()) {
    (async () => {
      try { const r = await apiGet('/api/site/me'); if (r && r.ok) { acctEmail.value = r.email || ''; acctEmail.dataset.saved = r.email || ''; } } catch {}
    })();
  }

  document.querySelectorAll('.ssave').forEach(btn => {
    btn.addEventListener('click', async () => {
      if (btn.dataset.save === 'Email' && acctEmail && apiOn()) {
        const email = acctEmail.value.trim();
        if (email === (acctEmail.dataset.saved || '')) { toast('Email settings saved'); return; }
        btn.disabled = true;
        const { ok, data } = await apiPost('/api/site/email', { email });
        btn.disabled = false;
        if (!ok) { toast((data && data.error) || 'Could not save your email.'); return; }
        acctEmail.dataset.saved = data.email || '';
        toast(email ? 'Email saved' : 'Email removed');
        return;
      }
      if (btn.dataset.save === 'Password' && apiOn()) {
        const cur = document.getElementById('pwCur'), nw = document.getElementById('pwNew'), cf = document.getElementById('pwConf');
        if (!cur.value) { toast('Enter your current password.'); return; }
        if (nw.value.length < 6) { toast('Password must be at least 6 characters.'); return; }
        if (nw.value !== cf.value) { toast("The passwords don't match."); return; }
        btn.disabled = true;
        const { ok, data } = await apiPost('/api/site/password', { current_password: cur.value, new_password: nw.value, confirm_password: cf.value });
        btn.disabled = false;
        if (!ok) { toast((data && data.error) || 'Could not change your password.'); return; }
        cur.value = nw.value = cf.value = '';
        toast('Password changed. Use it next time you log in, on the website and in the game.');
        return;
      }
      if (btn.dataset.save !== 'Profile') { toast(`${btn.dataset.save} settings saved`); return; }

      const payload = {};
      if (username && username.value.trim()) payload.username = username.value.trim().replace(/[^a-zA-Z0-9_.]/g, '');
      if (nick && nick.value.trim()) payload.display_name = nick.value.trim();
      if (bio) payload.bio = bio.value.trim();   // bio can be cleared, so always send it
      if (!Object.keys(payload).length) { toast('Nothing to change'); return; }

      btn.disabled = true;
      const { ok, data } = await apiPost('/api/site/profile', payload);
      btn.disabled = false;
      if (!ok) { toast((data && data.error) || 'Could not save your profile.'); return; }

      // Reflect the SERVER's truth everywhere.
      if (data.username) localStorage.setItem('campus-username', data.username);
      if (data.display_name) localStorage.setItem('campus-mynick', data.display_name);
      localStorage.setItem('campus-mybio', data.bio || '');
      if (typeof CAMPUS_ME === 'object' && CAMPUS_ME) {
        if (data.username) CAMPUS_ME.username = data.username;
        if (data.display_name) CAMPUS_ME.display_name = data.display_name;
      }
      if (username) { username.value = ''; username.placeholder = data.username || myHandle(me); }
      if (nick) { nick.value = ''; nick.placeholder = data.display_name || myDisplayName(me); }
      if (suName) suName.textContent = data.display_name || myDisplayName(me);
      if (suHandle) suHandle.textContent = '@' + (data.username || myHandle(me));
      toast('Profile settings saved');
    });
  });

  // logout actions
  const logout = document.getElementById('setLogout');
  if (logout) logout.addEventListener('click', async () => { if (apiOn()) { try { await apiPost('/api/site/logout'); } catch {} } clearIdentityCache(); window.location.href = '/'; });
  const logoutAll = document.getElementById('logoutAll');
  if (logoutAll) logoutAll.addEventListener('click', async () => { if (apiOn()) { try { await apiPost('/api/site/logout'); } catch {} } clearIdentityCache(); window.location.href = '/'; });
}

// ───── THEME (light/dark + accent) ─────
const THEME_KEY = 'campus-theme';
const ACCENT_KEY = 'campus-accent';

function hexRgb(h) { h = h.replace('#', ''); return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16)); }
function darken(h, f) { const [r, g, b] = hexRgb(h); return `rgb(${r * f | 0},${g * f | 0},${b * f | 0})`; }
function softA(h, a) { const [r, g, b] = hexRgb(h); return `rgba(${r},${g},${b},${a})`; }

const THEMES = ['light', 'dark', 'autumn', 'halloween'];
function applyTheme(t) {
  if (!THEMES.includes(t)) t = 'light';
  document.documentElement.setAttribute('data-theme', t);
  document.querySelectorAll('.cd-mode').forEach(b => b.classList.toggle('active', b.dataset.theme === t));
  autumnLeaves(t === 'autumn');
  halloweenFx(t === 'halloween');
}

// ───── SEASONS ─────
// October is Halloween: the first visit of each October switches the site to the Halloween theme
// (once - pick another theme and it sticks). After October a Halloween theme goes back to dark.
const HALLOWEEN_SEEN_KEY = 'campus-halloween-seen';
function applySeason() {
  const now = new Date();
  const october = now.getMonth() === 9;
  let saved = null;
  try { saved = localStorage.getItem(THEME_KEY); } catch { }
  try {
    if (october && localStorage.getItem(HALLOWEEN_SEEN_KEY) !== String(now.getFullYear())) {
      localStorage.setItem(HALLOWEEN_SEEN_KEY, String(now.getFullYear()));
      localStorage.setItem(THEME_KEY, 'halloween');
      return 'halloween';
    }
    if (!october && saved === 'halloween') { localStorage.setItem(THEME_KEY, 'dark'); return 'dark'; }
  } catch { }
  return saved || 'light';
}

// ───── HALLOWEEN: cobwebs in the corners, spiders on threads and spiders crawling the page ─────
// Pure decoration in a fixed overlay under the top bar: pointer-events are off, so nothing ever
// blocks a click. Crawlers wander between random spots, pause, and scuttle away from the mouse.
// Reduce motion (site setting or the OS) keeps the cobwebs and drops every spider.
const WEB_SVG = '<svg viewBox="0 0 200 200" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">'
  + '<path d="M0 0L200 200M0 0L200 92M0 0L92 200M0 0L200 22M0 0L22 200"/>'
  + [34, 68, 104, 142, 182].map(r => {
      const pts = [[r, 0], [r * .97, r * .11], [r * .9, r * .44], [r * .7, r * .7], [r * .44, r * .9], [r * .11, r * .97], [0, r]];
      let d = 'M' + pts[0].join(' ');
      for (let i = 1; i < pts.length; i++) {
        const a = pts[i - 1], b = pts[i];
        d += ' Q' + ((a[0] + b[0]) / 2 * .9).toFixed(1) + ' ' + ((a[1] + b[1]) / 2 * .9).toFixed(1) + ' ' + b[0].toFixed(1) + ' ' + b[1].toFixed(1);
      }
      return '<path d="' + d + '"/>';
    }).join('')
  + '</svg>';
const SPIDER_SVG = '<svg viewBox="0 0 40 40" aria-hidden="true">'
  + '<g fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">'
  + '<g class="legs-a"><path d="M16 17L9 11L5 5"/><path d="M15 23L7 23L2 27"/><path d="M24 20L32 18L37 13"/><path d="M25 26L31 31L33 37"/></g>'
  + '<g class="legs-b"><path d="M15 20L8 18L3 14"/><path d="M16 26L10 31L8 37"/><path d="M24 17L31 11L35 5"/><path d="M25 23L33 23L38 27"/></g>'
  + '</g>'
  + '<ellipse cx="20" cy="26" rx="6.5" ry="8" fill="currentColor"/>'
  + '<circle cx="20" cy="15.5" r="4.6" fill="currentColor"/>'
  + '<circle class="eye" cx="18.2" cy="13.8" r="1.1"/><circle class="eye" cx="21.8" cy="13.8" r="1.1"/>'
  + '</svg>';

let _hwRaf = 0, _hwBugs = [], _hwMouse = { x: -999, y: -999 }, _hwLast = 0, _hwBound = false;
function halloweenFx(on) {
  let fx = document.querySelector('.hw-fx');
  if (!on) { fx?.remove(); cancelAnimationFrame(_hwRaf); _hwRaf = 0; _hwBugs = []; return; }
  if (fx) return;
  fx = document.createElement('div'); fx.className = 'hw-fx'; fx.setAttribute('aria-hidden', 'true');
  fx.innerHTML = ['tl', 'tr', 'br', 'bl'].map(c => '<div class="hw-web ' + c + '">' + WEB_SVG + '</div>').join('');
  const phone = window.innerWidth < 640;
  const bare = !document.querySelector('.topbar');      // log in / sign up: no top bar - the overlay starts at the top and nothing dangles over the form
  if (bare) fx.classList.add('hw-bare');
  // spiders on threads
  for (let i = 0; i < (bare ? 0 : phone ? 1 : 3); i++) {
    const d = document.createElement('div'); d.className = 'hw-dangle';
    d.style.setProperty('--x', (12 + Math.random() * 76).toFixed(1) + '%');
    d.style.setProperty('--y', (90 + Math.random() * 220).toFixed(0) + 'px');
    d.style.setProperty('--d', (9 + Math.random() * 7).toFixed(1) + 's');
    d.style.setProperty('--delay', (-Math.random() * 12).toFixed(1) + 's');
    d.innerHTML = '<div class="hw-thread"></div><div class="hw-spider">' + SPIDER_SVG + '</div>';
    fx.appendChild(d);
  }
  document.body.appendChild(fx);
  // crawlers
  const W = () => fx.clientWidth, H = () => fx.clientHeight;
  _hwBugs = [];
  for (let i = 0; i < (phone ? 2 : 4); i++) {
    const el = document.createElement('div'); el.className = 'hw-spider walking'; el.innerHTML = SPIDER_SVG;
    const scale = .7 + Math.random() * .6;
    fx.appendChild(el);
    el.style.opacity = '0';   // placed on the first frame the overlay has a real size
    _hwBugs.push({ el, scale, placed: false, x: 0, y: 0, a: Math.random() * Math.PI * 2, tx: 0, ty: 0, speed: 0, pause: Math.random() * 2, flee: 0 });
  }
  if (!_hwBound) {
    _hwBound = true;
    window.addEventListener('pointermove', e => { _hwMouse.x = e.clientX; _hwMouse.y = e.clientY; }, { passive: true });
    document.addEventListener('visibilitychange', () => { _hwLast = 0; });
  }
  _hwLast = 0;
  const step = t => {
    _hwRaf = requestAnimationFrame(step);
    if (document.hidden) return;
    const dt = _hwLast ? Math.min(.05, (t - _hwLast) / 1000) : 0; _hwLast = t;
    const w = W(), h = H(), top = fx.getBoundingClientRect().top;
    for (const b of _hwBugs) {
      // A page that loads in a background tab has no size yet - wait for one before placing.
      if (!Number.isFinite(b.x) || !Number.isFinite(b.y)) b.placed = false;
      if (!b.placed) {
        if (w < 50 || h < 50) continue;
        b.x = 20 + Math.random() * (w - 40); b.y = 20 + Math.random() * (h - 40);
        b.placed = true; b.el.style.opacity = ''; hwRetarget(b, w, h);
      }
      // scuttle away from the cursor
      let mx = _hwMouse.x - b.x, my = (_hwMouse.y - top) - b.y, md = Math.hypot(mx, my);
      if (md < .5) { mx = Math.cos(b.a); my = Math.sin(b.a); md = 1; }   // cursor dead centre: no direction to flee, so just pick one
      if (md < 110 && b.flee <= 0) {
        b.flee = .9; b.pause = 0;
        b.tx = Math.max(10, Math.min(w - 10, b.x - mx / md * 220));
        b.ty = Math.max(10, Math.min(h - 10, b.y - my / md * 220));
        b.speed = 230 + Math.random() * 80;
      }
      if (b.flee > 0) b.flee -= dt;
      if (b.pause > 0) {
        b.pause -= dt; b.el.classList.remove('walking');
      } else {
        const dx = b.tx - b.x, dy = b.ty - b.y, dist = Math.hypot(dx, dy);
        if (dist < 4) { b.pause = Math.random() < .55 ? .6 + Math.random() * 2.4 : 0; hwRetarget(b, w, h); }
        else {
          // turn toward the target gradually, with a little wobble
          const want = Math.atan2(dy, dx);
          let da = want - b.a; while (da > Math.PI) da -= 2 * Math.PI; while (da < -Math.PI) da += 2 * Math.PI;
          b.a += da * Math.min(1, dt * 6) + (Math.random() - .5) * dt * 1.5;
          const v = b.speed * dt;
          b.x += Math.cos(b.a) * v; b.y += Math.sin(b.a) * v;
          b.el.classList.add('walking');
        }
      }
      b.x = Math.max(-20, Math.min(w + 20, b.x)); b.y = Math.max(-20, Math.min(h + 20, b.y));
      // the SVG faces up, so +90deg turns it to face its heading
      b.el.style.transform = 'translate(' + (b.x - 17).toFixed(1) + 'px,' + (b.y - 17).toFixed(1) + 'px) rotate(' + (b.a * 180 / Math.PI + 90).toFixed(1) + 'deg) scale(' + b.scale + ')';
    }
  };
  _hwRaf = requestAnimationFrame(step);
}
function hwRetarget(b, w, h) {
  // mostly short hops; now and then a long run across the screen
  const far = Math.random() < .3;
  const r = far ? 400 + Math.random() * 500 : 60 + Math.random() * 200, a = Math.random() * Math.PI * 2;
  b.tx = Math.max(15, Math.min(w - 15, b.x + Math.cos(a) * r));
  b.ty = Math.max(15, Math.min(h - 15, b.y + Math.sin(a) * r));
  b.speed = 40 + Math.random() * 70;
}
// Autumn: a few leaves drift down the home hero. Pure decoration; reduce-motion stops them via CSS.
function autumnLeaves(on) {
  const hero = document.querySelector('.home-hero');
  if (!hero) return;
  let box = hero.querySelector('.autumn-leaves');
  if (!on) { box?.remove(); return; }
  if (box) return;
  box = document.createElement('div'); box.className = 'autumn-leaves'; box.setAttribute('aria-hidden', 'true');
  const LEAF = '<svg viewBox="0 0 24 24"><path d="M20 3c-7 0-13 3-16 9 3-1 6-1 9 0-4 1-7 3-9 8 6-2 12-4 14-9 1-2.5 2-5 2-8z"/></svg>';
  for (let i = 0; i < 9; i++) {
    const l = document.createElement('span'); l.innerHTML = LEAF;
    l.style.setProperty('--x', (5 + Math.random() * 90).toFixed(1) + '%');
    l.style.setProperty('--d', (9 + Math.random() * 9).toFixed(1) + 's');
    l.style.setProperty('--delay', (-Math.random() * 14).toFixed(1) + 's');
    l.style.setProperty('--s', (.6 + Math.random() * .7).toFixed(2));
    l.style.setProperty('--c', ['#f08a3c', '#e0722e', '#c95a22', '#f2b04a', '#d94f5c'][i % 5]);
    box.appendChild(l);
  }
  hero.appendChild(box);
}
function applyAccent(c) {
  const s = document.documentElement.style;
  s.setProperty('--red', c);
  s.setProperty('--red-dark', darken(c, 0.82));
  s.setProperty('--red-soft', softA(c, 0.15));
  document.querySelectorAll('.cd-accent').forEach(b =>
    b.classList.toggle('active', b.dataset.accent.toLowerCase() === c.toLowerCase()));
}

// apply saved choices (runs on every page so theme persists)
applyTheme(applySeason());
const savedAccent = localStorage.getItem(ACCENT_KEY);
if (savedAccent) applyAccent(savedAccent);

document.querySelectorAll('.cd-mode').forEach(b =>
  b.addEventListener('click', () => { const t = b.dataset.theme; localStorage.setItem(THEME_KEY, t); applyTheme(t); syncThemeToggles(); }));
document.querySelectorAll('.cd-accent').forEach(b =>
  b.addEventListener('click', () => { const c = b.dataset.accent; localStorage.setItem(ACCENT_KEY, c); applyAccent(c); }));

// drawer Light/Dark toggle (under Discord)
const SUN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
const MOON_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';
const LEAF_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3c-7 0-13 3-16 9 3-1 6-1 9 0-4 1-7 3-9 8 6-2 12-4 14-9 1-2.5 2-5 2-8z"/><path d="M4 20l9-9"/></svg>';
const PUMPKIN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7c-1.2-2-.4-3.6 1-4.2"/><path d="M12 7c-5 0-8 2.6-8 6.5S7 20 12 20s8-2.6 8-6.5S17 7 12 7z"/><path d="M9 7.6C7.6 9.6 7.6 17 9 19.4M15 7.6c1.4 2 1.4 9.4 0 11.8"/></svg>';
// The drawer button cycles light -> dark -> autumn -> halloween and always names the NEXT theme.
function nextTheme() {
  const cur = document.documentElement.getAttribute('data-theme') || 'light';
  return THEMES[(THEMES.indexOf(cur) + 1) % THEMES.length];
}
function syncThemeToggles() {
  const next = nextTheme();
  const label = { light: `${SUN_SVG}<span>Light mode</span>`, dark: `${MOON_SVG}<span>Dark mode</span>`, autumn: `${LEAF_SVG}<span>Autumn mode</span>`, halloween: `${PUMPKIN_SVG}<span>Halloween mode</span>` }[next];
  document.querySelectorAll('.cd-theme-toggle').forEach(btn => { btn.innerHTML = label; });
}
document.querySelectorAll('.cd-theme-toggle').forEach(btn => {
  btn.addEventListener('click', () => {
    const next = nextTheme();
    localStorage.setItem(THEME_KEY, next);
    applyTheme(next);
    syncThemeToggles();
  });
});
syncThemeToggles();

// ───── ACCESSIBILITY PREFERENCES ─────
const A11Y_KEY = 'campus-a11y';
// map each toggle key to the <html> data-attribute it controls
const A11Y_ATTRS = {
  motion:   'data-reduce-motion',
  text:     'data-large-text',
  contrast: 'data-high-contrast',
  links:    'data-underline-links',
  spacing:  'data-readable-spacing',
  dyslexia: 'data-dyslexia-font',
  focus:    'data-focus-rings',
  cursor:   'data-big-cursor',
  taptargets: 'data-tap-targets',
};
function getA11y() { try { return JSON.parse(localStorage.getItem(A11Y_KEY) || '{}'); } catch { return {}; } }
function applyA11y(prefs) {
  const root = document.documentElement;
  Object.keys(A11Y_ATTRS).forEach(k => root.toggleAttribute(A11Y_ATTRS[k], !!prefs[k]));
  document.querySelectorAll('.cd-a11y').forEach(btn => {
    const on = !!prefs[btn.dataset.a11y];
    btn.classList.toggle('active', on);
    btn.setAttribute('aria-pressed', on ? 'true' : 'false');
  });
}
applyA11y(getA11y());
document.querySelectorAll('.cd-a11y').forEach(btn => {
  btn.addEventListener('click', () => {
    const prefs = getA11y();
    const k = btn.dataset.a11y;
    prefs[k] = !prefs[k];
    localStorage.setItem(A11Y_KEY, JSON.stringify(prefs));
    applyA11y(prefs);
    syncToggleAll();
  });
});
const a11yReset = document.getElementById('a11yReset');
if (a11yReset) a11yReset.addEventListener('click', () => {
  localStorage.removeItem(A11Y_KEY);
  applyA11y({});
  syncToggleAll();
});

// "Enable all / Disable all" — flips every accessibility setting at once
const a11yToggleAll = document.getElementById('a11yToggleAll');
function allA11yOn() { const p = getA11y(); return Object.keys(A11Y_ATTRS).every(k => !!p[k]); }
function syncToggleAll() {
  if (a11yToggleAll) a11yToggleAll.textContent = allA11yOn() ? 'Disable all' : 'Enable all';
}
if (a11yToggleAll) {
  a11yToggleAll.addEventListener('click', () => {
    const turnOn = !allA11yOn();
    const prefs = {};
    Object.keys(A11Y_ATTRS).forEach(k => { prefs[k] = turnOn; });
    localStorage.setItem(A11Y_KEY, JSON.stringify(prefs));
    applyA11y(prefs);
    syncToggleAll();
  });
  syncToggleAll();
}

initSettings();

// ───── PHOTO FEED (API-driven) ─────
//
// Point this at your "recent photos" endpoint. It should return JSON like:
//   [ { image, user, handle, room, cheers, comments, takenAt }, ... ]
// where `takenAt` is an ISO date string. Leave blank to use the fallback below.
const PHOTOS_API = ''; // e.g. 'https://api.campus.net/v1/photos/recent'

const postList = document.getElementById('postList');

// gradient palette for the author avatars (by first letter, just for colour)
const AV = [
  ['#ff5a3c', '#ffb142'], ['#f0453f', '#ff8a5c'], ['#ff6b9d', '#ffc371'],
  ['#e84393', '#ff7f6e'], ['#c44569', '#ff7f50'], ['#d63031', '#ff7675'],
];
function avColor(name) { return AV[(name.charCodeAt(0)) % AV.length]; }
function avKey(seed) { return (seed || 'player').toLowerCase().replace(/[^a-z0-9]/g, ''); }
function avatarUrl(seed) {
  const key = avKey(seed);
  try {
    const pfp = JSON.parse(localStorage.getItem('campus-pfp-' + key) || 'null');
    if (pfp && pfp.image) return pfp.image; // use the user's chosen profile picture
  } catch {}
  return `https://api.dicebear.com/9.x/thumbs/svg?seed=${encodeURIComponent(key)}`;
}

// Push the chosen profile image to the Campus server, which decodes it, stores it under
// Data/Images/player_images and points the account row at it. The optimistic UI already
// updated; this makes it stick (and makes it visible in-game).
//
// The old JSON {imageUrl} fallback is gone with server.py: that asked the backend to go
// fetch a URL on the browser's behalf, which is a server-side request forgery primitive.
// The server only accepts bytes it was handed.
async function syncProfileImageToApi(imageUrl) {
  // Deliberately NOT gated on CAMPUS_ME: syncSession() is async, so a quick change right
  // after page load would race it and silently drop the upload. Let the server decide -
  // it answers 401 when there's no session and the catch below surfaces that.
  if (!apiOn()) return;   // offline demo mode

  try {
    const blob = await (await fetch(imageUrl)).blob();
    const form = new FormData();
    form.append('image', blob, 'profile.png');

    const resp = await fetch(apiUrl('/api/profile-image'), {
      method: 'POST',
      credentials: 'same-origin',   // carries the HttpOnly session cookie
      body: form,
    });

    const out = await resp.json().catch(() => ({}));
    if (banRefused(resp, out)) return;
    if (!resp.ok || !out.ok) {
      toast('Saved locally, but the server update failed');
      console.warn('[campus] profile image API error:', out.error || resp.status);
    }
  } catch (e) {
    toast('Saved locally, but the server was unreachable');
    console.warn('[campus] profile image API unreachable:', e);
  }
}

// update every avatar image for a given user, live
function refreshAvatars(key, src) {
  document.querySelectorAll(`img[data-av="${key}"]`).forEach(im => {
    im.src = src;
    im.style.objectFit = 'cover';
  });
}
// cross-tab: when the profile picture changes in another tab, update here too
window.addEventListener('storage', e => {
  if (!e.key || !e.key.startsWith('campus-pfp-')) return;
  const key = e.key.slice('campus-pfp-'.length);
  let src = null;
  try { const d = JSON.parse(e.newValue || 'null'); if (d && d.image) src = d.image; } catch {}
  if (!src) src = `https://api.dicebear.com/9.x/thumbs/svg?seed=${encodeURIComponent(key)}`;
  refreshAvatars(key, src);
});

// "2 minutes ago", "3 hours ago", "5 days ago" - the profile's last-online line.
function lastOnlineText(iso) {
  const s = Math.floor((Date.now() - new Date(iso)) / 1000);
  if (isNaN(s) || s < 0) return '';
  if (s < 60) return 'just now';
  const unit = (n, w) => `${n} ${w}${n === 1 ? '' : 's'} ago`;
  if (s < 3600) return unit(Math.floor(s / 60), 'minute');
  if (s < 86400) return unit(Math.floor(s / 3600), 'hour');
  if (s < 86400 * 30) return unit(Math.floor(s / 86400), 'day');
  if (s < 86400 * 365) return unit(Math.floor(s / (86400 * 30)), 'month');
  return unit(Math.floor(s / (86400 * 365)), 'year');
}
function timeAgo(iso) {
  const s = Math.floor((Date.now() - new Date(iso)) / 1000);
  if (isNaN(s)) return '';
  if (s < 60) return s + 's';
  if (s < 3600) return Math.floor(s / 60) + 'm';
  if (s < 86400) return Math.floor(s / 3600) + 'h';
  return Math.floor(s / 86400) + 'd';
}
function fmt(n) { return n >= 1000 ? (n / 1000).toFixed(1).replace('.0', '') + 'k' : n; }

const HEART = '<svg viewBox="0 0 16 16" fill="none"><path d="M8 14s6-3.7 6-8a3 3 0 0 0-6-1.2A3 3 0 0 0 2 6c0 4.3 6 8 6 8Z" stroke="currentColor" stroke-width="1.5"/></svg>';
const CHEER_ICON = '<svg class="cheer-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10v11H3V10zM7 10l4.2-6.6a1.6 1.6 0 0 1 2.9 1.2L13.4 9H19a2 2 0 0 1 2 2.4l-1.5 7.5A2.5 2.5 0 0 1 17 21H7"/></svg>';
const CHAT  = '<svg viewBox="0 0 16 16" fill="none"><path d="M3 4h10v7H6l-3 2.5V4Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>';

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

// basic profanity filter
const BANNED = ['fuck','shit','bitch','asshole','bastard','cunt','dick','piss','slut','whore','nigger','nigga','faggot','retard','rape','cock','pussy','wanker','prick','twat'];
function isInappropriate(text) {
  const t = text.toLowerCase();
  const stripped = t.replace(/[^a-z]/g, ''); // catches sp4ced / punctuated evasions
  return BANNED.some(w => new RegExp(`\\b${w}\\b`, 'i').test(t) || stripped.includes(w));
}
function commentRow(c) {
  const me = localStorage.getItem(USER_KEY);
  const mine = !!c.mine || (me && me.toLowerCase() === (c.handle || c.user || '').toLowerCase());
  const action = mine
    ? `<button class="comment-del" title="Delete comment" aria-label="Delete comment"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4h11M6 4V2.7h4V4M5 4l.4 8.4a1 1 0 0 0 1 .9h3.2a1 1 0 0 0 1-.9L11 4"/></svg></button>`
    : `<button class="comment-report" title="Report comment" aria-label="Report comment"><svg viewBox="0 0 16 16" fill="none"><path d="M3 14V3M3 3h8l-1.5 3L11 9H3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`;
  const h = String(c.handle || c.user || 'player').replace(/^@/, '');
  return `<div class="comment"${c.id != null ? ` data-cid="${c.id}"` : ''}>
    <a class="comment-av-link" href="${userUrl(h)}" aria-label="@${escapeHtml(h)}"><img class="comment-av" data-av="${avKey(h)}" src="${c.avatar || avatarUrl(h)}" alt=""></a>
    <div class="comment-body"><a class="comment-user" href="${userUrl(h)}">@${escapeHtml(h)}</a> ${escapeHtml(c.text)}</div>
    ${action}
  </div>`;
}
function serverComment(c) {
  const me = (localStorage.getItem(USER_KEY) || '').toLowerCase();
  return { id: c.id, user: c.display_name || c.username, handle: c.username, avatar: c.profile_image, text: c.text,
           mine: (c.username || '').toLowerCase() === me };
}
async function loadCommentsInto(box, photoId) {
  const list = box.querySelector('.comment-list');
  if (!list || !photoId || !apiOn()) return;
  const d = await apiGet('/api/site/photos/' + photoId + '/comments');
  if (!d || !d.ok) return;
  const rows = (d.comments || []).map(serverComment);
  list.innerHTML = rows.map(commentRow).join('') || '<p class="no-comments">No comments yet - be the first!</p>';
  list.dataset.loaded = '1';
}
function commentsBlock(p) {
  const me = localStorage.getItem(USER_KEY);
  if (!me) {
    return `<div class="post-comments" hidden><a class="comment-login" href="/login">Log in to view and add comments</a></div>`;
  }
  const list = (p.thread || []).map(commentRow).join('') || '<p class="no-comments">No comments yet - be the first!</p>';
  return `<div class="post-comments" hidden>
    <div class="comment-list">${list}</div>
    <form class="comment-form">
      <img class="comment-av" data-av="${avKey(me)}" src="${avatarUrl(me)}" alt="">
      <input class="comment-input" type="text" placeholder="Add a comment…" maxlength="200" autocomplete="off">
      <button type="submit" class="comment-send">Post</button>
    </form>
    <p class="comment-error"></p>
  </div>`;
}

function renderPosts(posts) {
  if (!postList) return;
  if (!posts.length) { postList.innerHTML = '<div class="feed-loading">No photos yet - check back soon.</div>'; return; }
  postList.innerHTML = posts.map(p => {
    const [a, b] = avColor(p.user || '?');
    const ph = (p.handle || p.user || 'player');
    const av = p.avatar || avatarUrl(ph);   // real profile_image when the API provides one
    return `<article class="post"${p.id != null && /^\d+$/.test(String(p.id)) ? ` data-photo="${p.id}"` : ''}>
      <div class="post-head">
        <a class="post-av" href="${userUrl(ph)}" style="--a:${a};--b:${b}"><img data-av="${avKey(ph)}" src="${av}" alt="" onerror="this.remove()">${(p.user || '?')[0].toUpperCase()}</a>
        <div class="post-meta">
          <a class="post-user" href="${userUrl(ph)}">${escapeHtml(p.user || 'Anonymous')}</a>
          <span class="post-handle">@${escapeHtml(p.handle || 'player')}${p.room ? ` in <a href="#">^${escapeHtml(p.room)}</a>` : ''}</span>
        </div>
        <span class="post-time">${p.takenAt ? timeAgo(p.takenAt) : (p.time || '')}</span>
      </div>
      <a class="post-img" href="${imageUrl(p.id || '')}" style="background-image:url('${p.image}')"></a>
      <div class="post-foot">
        <span class="post-cap">${p.caption || ''}</span>
        <div class="post-stats">
          <button class="pstat cheer${p.cheered ? ' liked' : ''}" data-n="${(p.cheers || 0) - (p.cheered ? 1 : 0)}">${CHEER_ICON}<span>${fmt(p.cheers || 0)}</span></button>
          <button class="pstat comment-toggle" data-n="${nComments(p)}">${CHAT}<span>${nComments(p)}</span></button>
        </div>
      </div>
      ${commentsBlock(p)}
    </article>`;
  }).join('');
}

// Comment count: the live feed sends a number, the demo data carries a thread array.
function nComments(p) {
  return (typeof p.comments === 'number') ? p.comments : (p.thread || []).length;
}

// Fallback content used until the API is wired up. Each photo is a different
// crop/zoom of the game art so the feed doesn't look like one repeated image.
const FALLBACK_POSTS = [
  { id: 'clutch-round',   user: 'Clawful',     handle: 'clawful',     room: 'Paws Paintball', title: 'Clutch round on Paws Paintball 🎯', caption: 'gg everyone 🎯',          cheers: 1284, comments: 86,  takenAt: minsAgo(4),   crop: '8% 42% / 220%' },
  { id: 'midnight-build', user: 'Velvetpaw',   handle: 'velvetpaw',   room: 'Midnight Mews',  title: 'Late night build session 🌙',       caption: 'late night session 🌙',   cheers: 842,  comments: 37,  takenAt: minsAgo(22),  crop: '38% 50% / 240%' },
  { id: 'contraption',    user: 'Tinker9',     handle: 'tinker9',     room: 'Litterbox Lab',  title: 'New contraption just dropped',      caption: 'new contraption just dropped', cheers: 2613, comments: 158, takenAt: minsAgo(63),  crop: '66% 55% / 230%' },
  { id: 'final-boss',     user: 'Stitchwitch', handle: 'stitchwitch', room: 'Yarn Quest',     title: 'Finally beat the final boss 🧶',     caption: 'finally beat the final boss 🧶', cheers: 4097, comments: 289, takenAt: minsAgo(190), crop: '94% 48% / 250%' },
];
function minsAgo(m) { return new Date(Date.now() - m * 60000).toISOString(); }

// look up a photo by id (feed photos, or profile photos encoded as "user__letter")
function getPhoto(id) {
  if (!id) return null;
  const feed = FALLBACK_POSTS.find(p => p.id === id);
  if (feed) {
    const [pos, size] = feed.crop.split(' / ');
    return { user: feed.user, handle: feed.handle, image: 'assets/hero-bg.jpg', pos, size, title: feed.title, takenAt: feed.takenAt, cheers: feed.cheers };
  }
  if (id.includes('__')) {
    const [u, letter] = id.split('__');
    const up = (USER_PHOTOS[u] || []).find(x => x.id === letter);
    if (up) return { user: cap(u), handle: u, image: up.image, pos: 'center', size: 'cover', title: up.title, takenAt: null, cheers: 0 };
    const pp = PROFILE_PHOTOS.find(x => x.id === letter);
    if (pp) return { user: cap(u), handle: u, image: 'assets/hero-bg.jpg', pos: pp.pos, size: pp.size, title: 'Untitled photo', takenAt: null, cheers: 0 };
  }
  return null;
}

// special renderer for the fallback so we can apply the per-post crop
function renderFallback(posts) {
  if (!postList) return;
  postList.innerHTML = posts.map(p => {
    const [a, b] = avColor(p.user);
    const [pos, size] = p.crop.split(' / ');
    return `<article class="post">
      <div class="post-head">
        <a class="post-av" href="${userUrl(p.handle)}" style="--a:${a};--b:${b}"><img data-av="${avKey(p.handle)}" src="${avatarUrl(p.handle)}" alt="" onerror="this.remove()">${p.user[0]}</a>
        <div class="post-meta">
          <a class="post-user" href="${userUrl(p.handle)}">${p.user}</a>
          <span class="post-handle">@${p.handle} in <a href="#">^${p.room}</a></span>
        </div>
        <span class="post-time">${timeAgo(p.takenAt)}</span>
      </div>
      <a class="post-img" href="${imageUrl(p.id)}" style="background-image:url('assets/hero-bg.jpg');background-position:${pos};background-size:${size}"></a>
      <div class="post-foot">
        <span class="post-cap">${p.caption}</span>
        <div class="post-stats">
          <button class="pstat cheer" data-n="${p.cheers}">${CHEER_ICON}<span>${fmt(p.cheers)}</span></button>
          <button class="pstat comment-toggle" data-n="${(p.thread || []).length}">${CHAT}<span>${(p.thread || []).length}</span></button>
        </div>
      </div>
      ${commentsBlock(p)}
    </article>`;
  }).join('');
}

async function loadFeed() {
  if (!postList) return;
  // Real, newest-first photos from the Campus server (/api/site/photos/recent is Public +
  // ShareCamera + sorted newest-first). Falls back to the demo posts only when the API is off
  // or unreachable.
  if (apiOn()) {
    const data = await apiGet('/api/site/photos/recent?take=24');
    if (data && data.ok && Array.isArray(data.results)) {
      const posts = data.results.map(r => ({
        id: r.id,
        image: r.image,
        user: (r.author && (r.author.display_name || r.author.username)) || 'Player',
        handle: (r.author && r.author.username) || 'player',
        avatar: r.author && r.author.profile_image,
        caption: r.description || '',
        cheers: r.cheers || 0,
        cheered: !!r.cheered,
        comments: r.comments || 0,
        takenAt: r.createdAt,
      }));
      renderPosts(posts);
      return;
    }
  }
  renderFallback(FALLBACK_POSTS);
}
loadFeed();
renderImage(); // image.html - runs here so FALLBACK_POSTS/getPhoto are ready
// NOTE: renderOnlineFriends() is intentionally NOT called - hydrateOnline() (below) is the real
// one. It shows only YOUR online friends when signed in (not every online player), and writes the
// same .rail-online section, so calling both produced a duplicate "Online Friends" list.
renderPinned(); // home - pinned friends widget
initFeaturedSlideshow(); // home - featured rooms slideshow (demo first, then real below)

// Featured Rooms slideshow: shows the SAME admin-curated featured rooms the game shows
// (/api/site/rooms/featured). Falls back to hot rooms only when nothing is featured yet, so the
// showcase is never empty. Change what's featured in the admin panel and it updates both here
// and in-game.
(async function loadFeatured() {
  if (!apiOn() || !document.getElementById('featuredSlideshow')) return;
  const map = r => ({
    id: r.id, name: r.name, creator: r.creator || 'someone',
    image: r.image, players: r.players || 0, visits: r.visits || 0,
  });

  let data = await apiGet('/api/site/rooms/featured?take=8');
  if (data && data.ok && Array.isArray(data.results) && data.results.length) {
    initFeaturedSlideshow(data.results.map(map));
    return;
  }
  // Nothing featured — fall back to the hottest rooms so the showcase still has content.
  data = await apiGet('/api/site/rooms/hot?take=6');
  if (data && data.ok && Array.isArray(data.results) && data.results.length) {
    initFeaturedSlideshow(data.results.map(map));
  }
})();

// ───── SEARCH PANEL ─────
const searchBtn = document.getElementById('searchBtn');
const searchPanel = document.getElementById('searchPanel');
const searchScrim = document.getElementById('searchScrim');
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

const PEOPLE = [
  { name: 'Clawful',     sub: '@clawful · 12.4k subscribers',   a: '#ff5a3c', b: '#ffb142' },
  { name: 'Velvetpaw',   sub: '@velvetpaw · 8.1k subscribers',  a: '#6c5ce7', b: '#a29bfe' },
  { name: 'Tinker9',     sub: '@tinker9 · 3.3k subscribers',    a: '#00b894', b: '#55efc4' },
  { name: 'Stitchwitch', sub: '@stitchwitch · 21k subscribers', a: '#e84393', b: '#fd79a8' },
  { name: 'Bubbles',     sub: '@bubbles · 970 subscribers',     a: '#0984e3', b: '#74b9ff' },
  { name: 'SpookyTom',   sub: '@spooky.tom · 45k subscribers',  a: '#d63031', b: '#ff7675' },
  { name: 'Mittens',     sub: '@mittens · 1.2k subscribers',    a: '#fdcb6e', b: '#ff7675' },
  { name: 'Pounce',      sub: '@pounce · 660 subscribers',      a: '#00cec9', b: '#81ecec' },
];

const ROOMS = [
  { name: 'Whisker Heights',   sub: 'by @clawful · 67k visits',     a: '#ff5a3c', b: '#7b2ff7' },
  { name: 'Paws Paintball',    sub: 'by @clawful · 48k visits',     a: '#ff5a3c', b: '#ffb142' },
  { name: 'Midnight Mews',     sub: 'by @velvetpaw · 31k visits',   a: '#6c5ce7', b: '#a29bfe' },
  { name: 'The Litterbox Lab', sub: 'by @tinker9 · 22k visits',     a: '#00b894', b: '#55efc4' },
  { name: 'Yarn Quest',        sub: 'by @stitchwitch · 67k visits', a: '#e84393', b: '#fd79a8' },
  { name: 'Deep Dive Reef',    sub: 'by @bubbles · 19k visits',     a: '#0984e3', b: '#74b9ff' },
  { name: 'Haunted Cattery',   sub: 'by @spooky.tom · 91k visits',  a: '#d63031', b: '#ff7675' },
];

let activeTab = 'people';

function searchRow(m) {
  if (activeTab === 'people') {
    const handle = m.handle || m.name.toLowerCase();
    const av = m.avatar || avatarUrl(handle);
    return `<a href="${userUrl(handle)}" class="sresult">
      <div class="sresult-avatar" style="--a:${m.a};--b:${m.b};position:relative;overflow:hidden"><img data-av="${avKey(handle)}" src="${av}" alt="" onerror="this.remove()">${escapeHtml(m.name[0] || '?')}</div>
      <div class="sresult-text"><span class="sresult-name">${escapeHtml(m.name)}</span><span class="sresult-sub">${escapeHtml(m.sub)}</span></div>
      <svg class="sresult-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 4 4 4-4 4"/></svg>
    </a>`;
  }
  // Link rooms by NAME (how they're shared/searched), falling back to the id. The server
  // resolves /room/{slug} and /api/site/rooms/{slug} by name first.
  const roomSlug = m.name || m.roomId;
  const href = roomSlug ? `room.html?id=${encodeURIComponent(roomSlug)}` : '#';
  const thumbStyle = m.img
    ? `background-image:url('${m.img}');background-size:cover;background-position:center`
    : `--a:${m.a};--b:${m.b}`;
  return `<a href="${href}" class="sresult">
    <div class="sresult-thumb" style="${thumbStyle}"></div>
    <div class="sresult-text"><span class="sresult-name">${escapeHtml(m.name)}</span><span class="sresult-sub">${escapeHtml(m.sub)}</span></div>
    <svg class="sresult-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 4 4 4-4 4"/></svg>
  </a>`;
}

// Empty/idle state only. Real results come from liveSearch(); there are no demo placeholders.
function renderResults() {
  if (!searchResults) return;
  const q = searchInput.value.trim();
  if (searchClear) searchClear.style.display = q ? 'flex' : 'none';
  if (!q) {
    searchResults.innerHTML = `<p class="search-empty">Start typing to search ${activeTab === 'people' ? 'players' : 'rooms'}.</p>`;
    return;
  }
  searchResults.innerHTML = apiOn()
    ? '<p class="search-empty">Searching…</p>'
    : '<p class="search-empty">Search is unavailable right now.</p>';
}

// normalise a raw API result object into the shape searchRow() expects
function normalizeResult(r) {
  const imgBase = (window.CAMPUS_DATA && window.CAMPUS_DATA.imgBase) || '/img/';
  const toUrl = raw => raw ? (/^https?:|^\//.test(raw) ? raw : imgBase + raw) : '';
  if (activeTab === 'people') {
    // The site search returns camelCase: { accountId, username, displayName, profileImage }.
    // (This used to read PascalCase, so every real player came back as "Unknown".)
    const handle = r.username || '';
    const name = r.displayName || handle || 'Unknown';
    return { name, sub: handle ? '@' + handle : '', handle, accountId: r.accountId, avatar: toUrl(r.profileImage), a: '#ff5a3c', b: '#ffb142' };
  }
  // Rooms come back PascalCase: { RoomId, Name, ImageName, Stats:{ VisitCount } }.
  const name = r.Name || 'Untitled room';
  const st = r.Stats || {};
  const sub = st.VisitCount != null ? fmt(st.VisitCount) + ' visits' : '';
  return { name, sub, roomId: r.RoomId, img: toUrl(r.ImageName), a: '#ff5a3c', b: '#7b2ff7' };
}

// live search against the Campus server (SiteController reads RoomDB/PlayerDB directly)
let searchTimer = null;
async function liveSearch(q) {
  const path = activeTab === 'people'
    ? `/api/search/players?name=${encodeURIComponent(q)}`
    : `/api/search/rooms?query=${encodeURIComponent(q)}`;
  try {
    const resp = await fetch(apiUrl(path), { credentials: 'same-origin' });
    const out = await resp.json();
    if (!out.ok) throw new Error(out.error || 'search failed');
    let list = out.results;
    if (list && !Array.isArray(list)) list = list.Results || list.results || list.Accounts || list.Rooms || [];
    list = (list || []).map(normalizeResult);
    if (!list.length) { searchResults.innerHTML = '<p class="search-empty">No results found</p>'; return; }
    searchResults.innerHTML = list.map(searchRow).join('');
  } catch (e) {
    console.warn('[campus] live search failed:', e);
    searchResults.innerHTML = '<p class="search-empty">Search failed - try again.</p>';
  }
}

// Real search only - no demo fallback.
function handleSearchInput() {
  const q = searchInput.value.trim();
  if (searchClear) searchClear.style.display = q ? 'flex' : 'none';
  clearTimeout(searchTimer);
  if (!q) { renderResults(); return; }                 // empty -> hint
  if (!apiOn()) { searchResults.innerHTML = '<p class="search-empty">Search is unavailable right now.</p>'; return; }
  searchResults.innerHTML = '<p class="search-empty">Searching…</p>';
  searchTimer = setTimeout(() => liveSearch(q), 250);
}

function openSearch() {
  searchPanel.classList.add('open');
  searchPanel.inert = false;
  searchScrim.classList.add('open');
  document.body.style.overflow = 'hidden';
  renderResults();
  setTimeout(() => searchInput.focus(), 50);
}
function closeSearch() {
  const wasOpen = searchPanel.classList.contains('open');
  searchPanel.classList.remove('open');
  searchPanel.inert = true;
  searchScrim.classList.remove('open');
  document.body.style.overflow = '';
  if (wasOpen && searchBtn) searchBtn.focus(); // return focus to the trigger
}

let searchClear = null;

if (searchPanel) searchPanel.inert = !searchPanel.classList.contains('open'); // closed by default
if (searchBtn) {
  // inject a clear (✕) button into the search field
  const field = searchInput.parentElement;
  if (field) {
    searchClear = document.createElement('button');
    searchClear.className = 'search-clear';
    searchClear.type = 'button';
    searchClear.setAttribute('aria-label', 'Clear');
    searchClear.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
    searchClear.style.display = 'none';
    field.appendChild(searchClear);
    searchClear.addEventListener('click', () => { searchInput.value = ''; handleSearchInput(); searchInput.focus(); });
  }

  searchBtn.addEventListener('click', () => {
    searchPanel.classList.contains('open') ? closeSearch() : openSearch();
  });
  searchScrim.addEventListener('click', closeSearch);
  searchInput.addEventListener('input', handleSearchInput);

  document.querySelectorAll('.stab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelector('.stab.active')?.classList.remove('active');
      tab.classList.add('active');
      activeTab = tab.dataset.tab;
      searchInput.placeholder = activeTab === 'people' ? 'Search people…' : 'Search rooms…';
      handleSearchInput();
    });
  });

  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSearch(); });

  // click the dimmed background (outside the card) to close
  searchPanel.addEventListener('click', e => {
    if (e.target === searchPanel) closeSearch();
  });
}

// ───── FAQ ACCORDION ─────
document.querySelectorAll('.dl-faq .faq-q').forEach(q => {
  q.addEventListener('click', () => q.closest('.faq-item').classList.toggle('open'));
});

// ───── RATE LIMITING + TOAST ─────
// returns true if the action is allowed, false if the limit is hit
function rateLimit(action, max, windowMs) {
  const key = 'campus-rl-' + action;
  const now = Date.now();
  let arr = [];
  try { arr = JSON.parse(localStorage.getItem(key) || '[]'); } catch { arr = []; }
  arr = arr.filter(t => now - t < windowMs);
  if (arr.length >= max) { localStorage.setItem(key, JSON.stringify(arr)); return false; }
  arr.push(now);
  localStorage.setItem(key, JSON.stringify(arr));
  return true;
}

// ───── BAN BANNER ─────
// A banned account can sign in but can't change anything (the server refuses its writes). Every
// page shows this strip under the top bar: how long is left (live) and the reason. /api/site/me
// carries it as user.ban = { permanent, remaining_seconds, reason } - null when not banned.
function banLeftText(sec) {
  sec = Math.max(0, Math.floor(sec));
  const d = Math.floor(sec / 86400), h = Math.floor(sec % 86400 / 3600), m = Math.floor(sec % 3600 / 60), s = sec % 60;
  const parts = [];
  if (d) parts.push(d + (d === 1 ? ' day' : ' days'));
  if (d || h) parts.push(h + (h === 1 ? ' hour' : ' hours'));
  if (!d) parts.push(m + (m === 1 ? ' minute' : ' minutes'));
  if (!d && !h) parts.push(s + (s === 1 ? ' second' : ' seconds'));
  return parts.join(' ');
}
function renderBanBanner(me) {
  const ban = me && me.ban;
  const old = document.getElementById('siteBanBanner');
  if (!ban) { if (old) old.remove(); document.body.classList.remove('site-banned'); document.body.style.removeProperty('--ban-h'); return; }
  const bar = old || document.createElement('div');
  bar.id = 'siteBanBanner';
  bar.className = 'site-ban-banner';
  bar.setAttribute('role', 'alert');
  bar.innerHTML = '<span class="sbb-icon" aria-hidden="true">&#9888;</span>'
    + '<span class="sbb-text"><strong>This account is currently banned</strong> <span class="sbb-left"></span>'
    + '<span class="sbb-reason"></span><span class="sbb-note">You can look around, but you can\'t change anything until the ban ends. Think it\'s a mistake? <a href="/support?new=appeal">Appeal it</a>.</span></span>';
  bar.querySelector('.sbb-reason').textContent = ban.reason ? 'Reason: ' + ban.reason : '';
  if (!old) document.body.insertBefore(bar, document.body.firstChild);
  document.body.classList.add('site-banned');
  const left = bar.querySelector('.sbb-left');
  const ends = ban.permanent ? null : Date.now() + (ban.remaining_seconds || 0) * 1000;
  const tick = () => {
    if (!ends) { left.textContent = '- permanently'; return; }
    const sec = (ends - Date.now()) / 1000;
    if (sec <= 0) { left.textContent = '- the ban has ended, refresh the page'; clearInterval(bar._timer); return; }
    left.textContent = '- ' + banLeftText(sec) + ' left';
  };
  clearInterval(bar._timer);
  tick();
  bar._timer = setInterval(tick, 1000);
  // Push the page down by the banner's real height (it wraps on phones).
  const fit = () => document.body.style.setProperty('--ban-h', bar.offsetHeight + 'px');
  fit();
  window.addEventListener('resize', fit);
}

function toast(msg) {
  let t = document.getElementById('toast');
  if (!t) { t = document.createElement('div'); t.id = 'toast'; t.className = 'toast'; document.body.appendChild(t); }
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(t._timer);
  t._timer = setTimeout(() => t.classList.remove('show'), 2800);
}

// returns true if logged in; otherwise prompts to log in
function requireLogin(action) {
  if (localStorage.getItem(USER_KEY)) return true;
  toast(`Log in to ${action}`);
  return false;
}

// ───── REPORT SYSTEM ─────
const REPORT_REASONS = ['Spam or scam', 'Harassment or bullying', 'Inappropriate content', 'Hate speech', 'Impersonation', 'Other'];

function closeReport() {
  document.getElementById('reportModal')?.classList.remove('open');
  document.getElementById('reportScrim')?.classList.remove('open');
  document.body.style.overflow = '';
}

// ctx = {type: 'player'|'photo'|'comment', id} - what is being reported. With the API on,
// the report is filed to the server (it lands in the admin panel's Reports queue); the
// onSubmit callback only updates the button that opened it.
function openReport(title, onSubmit, ctx) {
  if (ctx && apiOn() && !localStorage.getItem(USER_KEY)) { toast('Log in to send a report'); return; }
  let scrim = document.getElementById('reportScrim');
  let modal = document.getElementById('reportModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'reportScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'reportModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
    scrim.addEventListener('click', closeReport);
    // click the dimmed area outside the card to close
    modal.addEventListener('click', e => { if (e.target === modal) closeReport(); });
  }

  modal.innerHTML = `
    <div class="report-card">
      <button class="report-close" aria-label="Close">✕</button>
      <h2 class="report-title">${title}</h2>
      <p class="report-sub">Tell us what's wrong. Reports are anonymous.</p>
      <div class="report-reasons">
        ${REPORT_REASONS.map(r => `<button type="button" class="report-reason" data-r="${r}">${r}</button>`).join('')}
      </div>
      <textarea class="report-details" placeholder="Add more details (optional)" maxlength="300"></textarea>
      <div class="report-actions">
        <button class="report-cancel">Cancel</button>
        <button class="report-submit" disabled>Submit report</button>
      </div>
    </div>`;

  const card = modal.querySelector('.report-card');
  let selected = null;
  card.querySelector('.report-reasons').addEventListener('click', e => {
    const b = e.target.closest('.report-reason');
    if (!b) return;
    card.querySelectorAll('.report-reason').forEach(x => x.classList.remove('sel'));
    b.classList.add('sel');
    selected = b.dataset.r;
    card.querySelector('.report-submit').disabled = false;
  });
  card.querySelector('.report-close').addEventListener('click', closeReport);
  card.querySelector('.report-cancel').addEventListener('click', closeReport);
  card.querySelector('.report-submit').addEventListener('click', async () => {
    if (!rateLimit('report', 5, 10 * 60 * 1000)) {
      toast('You\'ve sent too many reports. Please try again later.');
      closeReport();
      return;
    }
    const submit = card.querySelector('.report-submit');
    if (ctx && apiOn()) {
      submit.disabled = true; submit.textContent = 'Sending…';
      const r = await apiPost('/api/site/report', { type: ctx.type, id: String(ctx.id), photoId: ctx.photoId ? Number(ctx.photoId) : null, reason: selected, details: card.querySelector('.report-details').value.trim() });
      if (!r || !r.ok) {
        submit.disabled = false; submit.textContent = 'Submit report';
        toast((r && r.data && r.data.error) || 'Could not send the report');
        return;
      }
    }
    if (typeof onSubmit === 'function') onSubmit(selected);
    card.innerHTML = `
      <div class="report-done">
        <div class="report-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7"/></svg></div>
        <h2 class="report-title">Report submitted</h2>
        <p class="report-sub">Thanks - our moderation team will review this shortly.</p>
        <button class="report-submit report-ok">Done</button>
      </div>`;
    card.querySelector('.report-ok').addEventListener('click', closeReport);
  });

  modal.classList.add('open');
  scrim.classList.add('open');
  document.body.style.overflow = 'hidden';
}

// ───── NICKNAME MODAL ─────
function closeNick() {
  document.getElementById('nickModal')?.classList.remove('open');
  document.getElementById('nickScrim')?.classList.remove('open');
  document.body.style.overflow = '';
}
function openNickname(handle, onChange, ctx) {
  let scrim = document.getElementById('nickScrim');
  let modal = document.getElementById('nickModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'nickScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'nickModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
    scrim.addEventListener('click', closeNick);
    modal.addEventListener('click', e => { if (e.target === modal) closeNick(); });
  }
  const current = ctx ? (ctx.current || '') : ((getFriends()[handle] || {}).nickname || '');
  modal.innerHTML = `
    <div class="report-card">
      <button class="report-close" aria-label="Close">✕</button>
      <h2 class="report-title">Nickname</h2>
      <p class="report-sub">Set a custom nickname for @${handle}. You will see it on the website and in the game. Nobody else will - it never changes their real name.</p>
      <input class="nick-input" type="text" maxlength="24" placeholder="Enter a nickname" value="${escapeHtml(current)}">
      <div class="report-actions">
        <button class="report-cancel nick-remove">Remove nickname</button>
        <button class="report-submit nick-set">Set nickname</button>
      </div>
    </div>`;
  const card = modal.querySelector('.report-card');
  const input = card.querySelector('.nick-input');
  card.querySelector('.report-close').addEventListener('click', closeNick);
  async function apply(value) {
    if (ctx) {
      const { ok, data } = await apiPost('/api/site/friends/nickname', { id: ctx.id, nickname: value });
      if (!ok) { toast((data && data.error) || 'Could not save the nickname'); return; }
      if (ctx.onSaved) ctx.onSaved(data.nickname || '');
      toast(data.nickname ? `Nickname set to ${data.nickname}` : 'Nickname removed');
    } else {
      setFriendNick(handle, value);
    }
    closeNick();
    if (onChange) onChange();
  }
  card.querySelector('.nick-set').addEventListener('click', () => apply(input.value.trim()));
  card.querySelector('.nick-remove').addEventListener('click', () => apply(''));
  input.addEventListener('keydown', e => { if (e.key === 'Enter') apply(input.value.trim()); });
  modal.classList.add('open');
  scrim.classList.add('open');
  document.body.style.overflow = 'hidden';
  setTimeout(() => input.focus(), 50);
}

// ───── FRIENDS LIST (own profile) ─────
// deterministic fake presence so each friend has a stable online/last-seen value
function friendPresence(h) {
  let n = 0; for (const c of String(h)) n = (n * 31 + c.charCodeAt(0)) >>> 0;
  const online = n % 3 === 0;
  const buckets = ['just now', '5 min', '12 min', '1 hour', '3 hours', '8 hours', '1 day', '2 days', '4 days', '1 week'];
  return { online, last: buckets[n % buckets.length] };
}
function closeFriendsList() {
  document.getElementById('friendsModal')?.classList.remove('open');
  document.getElementById('friendsScrim')?.classList.remove('open');
  document.body.style.overflow = '';
}
// The friends list is REAL: /api/site/profile/{handle}/friends (All / Favourites, plus
// Requests when it's your own). Presence is the game's own (online = connected to the hub),
// favourites are the same flag the in-game star sets, and it re-renders itself when the
// server pushes a refresh (a friend comes online, a request arrives, a star is toggled in-game).
let FRIENDS_MODAL_HANDLE = null;
function openFriendsList(handle) {
  let scrim = document.getElementById('friendsScrim');
  let modal = document.getElementById('friendsModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'friendsScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'friendsModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
    scrim.addEventListener('click', closeFriendsList);
    modal.addEventListener('click', e => { if (e.target === modal) closeFriendsList(); });
  }
  const me = localStorage.getItem(USER_KEY);
  FRIENDS_MODAL_HANDLE = (handle || viewedHandle() || me || '').toLowerCase();
  let filter = 'all';
  let cache = null;

  async function load() {
    let r = null;
    try { if (apiOn()) r = await apiGet('/api/site/profile/' + encodeURIComponent(FRIENDS_MODAL_HANDLE) + '/friends'); } catch {}
    cache = (r && r.ok) ? r : { own: false, friends: [], pending: [], sent: [] };
    render();
  }

  function row(f, pending) {
    const name = escapeHtml(f.display_name || f.username);
    const av = f.profile_image || avatarUrl(f.username);
    const star = f.favourite ? ' <span class="fav-star">★</span>' : '';
    if (pending) {
      return `<div class="fl-item">
        <img class="fl-av" src="${av}" alt="">
        <div class="fl-meta"><span class="fl-name">${name}</span><span class="fl-sub">Wants to be your friend</span></div>
        <div class="fl-actions"><button class="fl-accept" data-id="${f.id}" data-n="${name}">Accept</button><button class="fl-decline" data-id="${f.id}">Decline</button></div>
      </div>`;
    }
    const status = (f.online
      ? `<span class="fl-online"><i></i>Online${f.where ? ' · ' + escapeHtml(f.where) : ''}</span>`
      : 'Offline')
      + (f.spotify && f.spotify.track ? `<br><span class="fl-spotify">${SP_ICON}${f.spotify.is_playing ? '' : 'Paused · '}${escapeHtml(f.spotify.track)} — ${escapeHtml(f.spotify.artists || '')}</span>` : '');
    const favBtn = cache.own
      ? `<button class="fl-fav${f.favourite ? ' on' : ''}" data-id="${f.id}" data-on="${f.favourite ? 1 : 0}" title="${f.favourite ? 'Remove from favourites' : 'Add to favourites'}">${f.favourite ? '★' : '☆'}</button>`
      : '';
    return `<div class="fl-item">
      <a class="fl-link" href="${userUrl(f.username)}" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
        <img class="fl-av" src="${av}" alt="">
        <div class="fl-meta"><span class="fl-name">${name}${star}</span><span class="fl-sub">${status}</span></div>
      </a>${favBtn}
    </div>`;
  }

  function render() {
    if (!cache) {
      modal.innerHTML = `<div class="report-card fl-card"><button class="report-close" aria-label="Close">✕</button><h2 class="report-title">Friends</h2><p class="fl-empty">Loading…</p></div>`;
      modal.querySelector('.report-close').addEventListener('click', closeFriendsList);
      return;
    }
    const friends = cache.friends || [];
    const pending = cache.pending || [];
    const favs = friends.filter(f => f.favourite);
    const onlineCount = friends.filter(f => f.online).length;
    const show = filter === 'favourites' ? favs : filter === 'pending' ? pending : friends;
    const rows = show.length ? show.map(f => row(f, filter === 'pending')).join('')
      : `<p class="fl-empty">${filter === 'pending' ? 'No pending requests.' : filter === 'favourites' ? 'No favourites yet.' : 'No friends yet.'}</p>`;

    modal.innerHTML = `
      <div class="report-card fl-card">
        <button class="report-close" aria-label="Close">✕</button>
        <h2 class="report-title">${cache.own ? 'Friends' : escapeHtml(cap(FRIENDS_MODAL_HANDLE)) + "'s friends"}</h2>
        <p class="report-sub">${friends.length} friend${friends.length === 1 ? '' : 's'} · ${onlineCount} online</p>
        <div class="fl-tabs">
          <button class="fl-tab${filter === 'all' ? ' active' : ''}" data-f="all">All</button>
          <button class="fl-tab${filter === 'favourites' ? ' active' : ''}" data-f="favourites">Favourites${favs.length ? ` (${favs.length})` : ''}</button>
          ${cache.own ? `<button class="fl-tab${filter === 'pending' ? ' active' : ''}" data-f="pending">Requests${pending.length ? ` (${pending.length})` : ''}</button>` : ''}
        </div>
        <div class="fl-list">${rows}</div>
      </div>`;

    modal.querySelector('.report-close').addEventListener('click', closeFriendsList);
    modal.querySelectorAll('.fl-tab').forEach(t => t.addEventListener('click', () => { filter = t.dataset.f; render(); }));
    modal.querySelectorAll('.fl-accept').forEach(b => b.addEventListener('click', async () => {
      const { ok } = await apiPost('/api/site/friends/accept', { id: Number(b.dataset.id) });
      toast(ok ? `You and ${b.dataset.n} are now friends` : 'Could not accept right now');
      load();
    }));
    modal.querySelectorAll('.fl-decline').forEach(b => b.addEventListener('click', async () => {
      await apiPost('/api/site/friends/remove', { id: Number(b.dataset.id) }); load();
    }));
    modal.querySelectorAll('.fl-fav').forEach(b => b.addEventListener('click', async () => {
      const on = b.dataset.on !== '1';
      const { ok } = await apiPost('/api/site/friends/favourite', { id: Number(b.dataset.id), on });
      if (!ok) { toast('Could not update favourites'); return; }
      toast(on ? 'Added to favourites' : 'Removed from favourites');
      load();
    }));
  }
  modal.__reload = load;
  render();
  load();
  modal.classList.add('open');
  scrim.classList.add('open');
  document.body.style.overflow = 'hidden';
}

// Subscribers / Subscriptions popup. `kind` is 'subscribers' (who subscribes to this
// profile) or 'subscriptions' (who this profile subscribes to). Same modal chrome as the
// friends list, real data from /api/site/profile/{handle}/{kind}, and it re-renders itself on a
// server refresh push (someone subscribes / unsubscribes while it's open).
let SUBS_MODAL = null;
function openSubsList(handle, kind) {
  let scrim = document.getElementById('subsScrim');
  let modal = document.getElementById('subsModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'subsScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'subsModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
    scrim.addEventListener('click', closeSubsList);
    modal.addEventListener('click', e => { if (e.target === modal) closeSubsList(); });
  }
  const me = localStorage.getItem(USER_KEY);
  const h = (handle || viewedHandle() || me || '').toLowerCase();
  let cache = null;

  async function load() {
    let r = null;
    try { if (apiOn()) r = await apiGet('/api/site/profile/' + encodeURIComponent(h) + '/' + kind); } catch {}
    cache = (r && r.ok) ? r : { own: false, results: [] };
    render();
  }

  function render() {
    const title = kind === 'subscribers'
      ? (cache && cache.own ? 'Your subscribers' : escapeHtml(cap(h)) + "'s subscribers")
      : (cache && cache.own ? 'Your subscriptions' : escapeHtml(cap(h)) + ' subscribes to');
    const list = cache ? (cache.results || []) : null;
    const rows = !list ? '<p class="fl-empty">Loading…</p>'
      : list.length ? list.map(p => {
          const name = escapeHtml(p.display_name || p.username);
          const av = p.profile_image || avatarUrl(p.username);
          const status = p.online ? `<span class="fl-online"><i></i>Online${p.where ? ' · ' + escapeHtml(p.where) : ''}</span>`
                                  : `${fmt(p.subscribers)} subscriber${p.subscribers === 1 ? '' : 's'}`;
          const canSub = me && p.username && p.username.toLowerCase() !== me.toLowerCase();
          const btn = canSub ? `<button class="fl-sub-btn${p.subscribed ? ' on' : ''}" data-id="${p.id}" data-on="${p.subscribed ? 1 : 0}">${p.subscribed ? 'Subscribed' : 'Subscribe'}</button>` : '';
          return `<div class="fl-item">
            <a class="fl-link" href="${userUrl(p.username)}" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit">
              <img class="fl-av" src="${av}" alt="">
              <div class="fl-meta"><span class="fl-name">${name}</span><span class="fl-sub">${status}</span></div>
            </a>${btn}
          </div>`;
        }).join('')
      : `<p class="fl-empty">${kind === 'subscribers' ? 'No subscribers yet.' : 'Not subscribed to anyone yet.'}</p>`;

    modal.innerHTML = `
      <div class="report-card fl-card">
        <button class="report-close" aria-label="Close">✕</button>
        <h2 class="report-title">${title}</h2>
        <p class="report-sub">${list ? `${list.length} ${kind === 'subscribers' ? 'subscriber' : 'subscription'}${list.length === 1 ? '' : 's'}` : ''}</p>
        <div class="fl-list">${rows}</div>
      </div>`;
    modal.querySelector('.report-close').addEventListener('click', closeSubsList);
    modal.querySelectorAll('.fl-sub-btn').forEach(b => b.addEventListener('click', async () => {
      if (!requireLogin('subscribe')) return;
      const on = b.dataset.on !== '1';
      const { ok, data } = await apiPost('/api/site/subscribe', { id: Number(b.dataset.id), on });
      if (!ok) { toast((data && data.error) || 'Could not update the subscription'); return; }
      toast(on ? 'Subscribed' : 'Unsubscribed');
      load();
    }));
  }
  modal.__reload = load;
  render();
  load();
  modal.classList.add('open');
  scrim.classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeSubsList() {
  document.getElementById('subsModal')?.classList.remove('open');
  document.getElementById('subsScrim')?.classList.remove('open');
  document.body.style.overflow = '';
}

// ───── CONFIRM DIALOG ─────
function closeConfirm() {
  document.getElementById('confirmModal')?.classList.remove('open');
  document.getElementById('confirmScrim')?.classList.remove('open');
  document.body.style.overflow = '';
}
function openConfirm(opts) {
  const { title, message, confirmText, onConfirm } = opts;
  let scrim = document.getElementById('confirmScrim');
  let modal = document.getElementById('confirmModal');
  if (!modal) {
    scrim = document.createElement('div'); scrim.id = 'confirmScrim'; scrim.className = 'report-scrim';
    modal = document.createElement('div'); modal.id = 'confirmModal'; modal.className = 'report-modal';
    document.body.appendChild(scrim); document.body.appendChild(modal);
    scrim.addEventListener('click', closeConfirm);
    modal.addEventListener('click', e => { if (e.target === modal) closeConfirm(); });
  }
  modal.innerHTML = `
    <div class="report-card confirm-card">
      <h2 class="report-title">${title}</h2>
      <p class="report-sub">${message}</p>
      <div class="report-actions">
        <button class="report-cancel confirm-no">Cancel</button>
        <button class="report-submit confirm-yes">${confirmText}</button>
      </div>
    </div>`;
  modal.querySelector('.confirm-no').addEventListener('click', closeConfirm);
  modal.querySelector('.confirm-yes').addEventListener('click', () => {
    closeConfirm();
    if (typeof onConfirm === 'function') onConfirm();
  });
  modal.classList.add('open');
  scrim.classList.add('open');
  document.body.style.overflow = 'hidden';
}

document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeReport(); closeNick(); closeConfirm(); } });

// ───── INTERACTIONS (cheer + follow + comments) ─────
document.addEventListener('click', e => {
  // cheer a photo
  const cheer = e.target.closest('.cheer');
  if (cheer) {
    e.preventDefault();
    if (!requireLogin('cheer photos')) return;
    if (!rateLimit('cheer', 15, 10000)) { toast('Whoa! Slow down on the cheers.'); return; }
    const liked = cheer.classList.toggle('liked');
    const base = +cheer.dataset.n;
    const span = cheer.querySelector('span');
    if (span) span.textContent = fmt(base + (liked ? 1 : 0));
    const pid = photoIdOf(cheer);
    if (pid && apiOn()) {
      // The same cheer the game records: what the site shows is what in-game shows.
      apiPost('/api/site/photos/' + pid + '/cheer').then(r => {
        if (r && r.ok && r.data) {
          cheer.classList.toggle('liked', !!r.data.cheered);
          cheer.dataset.n = (r.data.cheers || 0) - (r.data.cheered ? 1 : 0);
          if (span) span.textContent = fmt(r.data.cheers || 0);
        } else if (r && r.status === 401) { cheer.classList.toggle('liked', !liked); if (span) span.textContent = fmt(base); toast('Log in to cheer photos'); }
      });
    }
    return;
  }
  // toggle comments
  const ct = e.target.closest('.comment-toggle');
  if (ct) {
    e.preventDefault();
    const box = ct.closest('.post').querySelector('.post-comments');
    if (box) {
      box.hidden = !box.hidden;
      const list = box.querySelector('.comment-list');
      if (!box.hidden && list && !list.dataset.loaded) loadCommentsInto(box, photoIdOf(ct));
    }
    return;
  }
  // delete your own comment
  const cdel = e.target.closest('.comment-del');
  if (cdel) {
    const comment = cdel.closest('.comment');
    const list = cdel.closest('.comment-list');
    const post = cdel.closest('.post') || cdel.closest('[data-photo]');
    const pidDel = photoIdOf(cdel), cid = comment.dataset.cid;
    if (pidDel && cid && apiOn()) apiDelete('/api/site/photos/' + pidDel + '/comments/' + cid).then(r => { if (!r.ok) toast('Could not delete the comment'); });
    comment.remove();
    if (post) {
      const toggle = post.querySelector('.comment-toggle');
      if (toggle) {
        toggle.dataset.n = Math.max(0, (+toggle.dataset.n || 0) - 1);
        const s = toggle.querySelector('span');
        if (s) s.textContent = fmt(+toggle.dataset.n);
      }
    }
    if (list && !list.querySelector('.comment')) {
      list.innerHTML = '<p class="no-comments">No comments yet - be the first!</p>';
    }
    return;
  }
  // report a comment
  const rep = e.target.closest('.comment-report');
  if (rep) {
    const comment = rep.closest('.comment');
    if (comment.classList.contains('reported')) return;
    openReport('Report comment', () => {
      comment.classList.add('reported');
      rep.outerHTML = '<span class="comment-reported">Reported</span>';
    }, comment.dataset.cid ? { type: 'comment', id: comment.dataset.cid, photoId: photoIdOf(comment) } : null);
    return;
  }
  // follow / unfollow
  const fb = e.target.closest('.follow-btn');
  if (fb) {
    const on = fb.classList.toggle('following');
    fb.textContent = on ? 'Following' : 'Follow';
  }
});

// add a comment
document.addEventListener('submit', e => {
  const form = e.target.closest('.comment-form');
  if (!form) return;
  e.preventDefault();
  const me = localStorage.getItem(USER_KEY);
  if (!me) return;
  const input = form.querySelector('.comment-input');
  const text = input.value.trim();
  if (!text) return;

  const box = form.closest('.post-comments');
  const err = box.querySelector('.comment-error');

  // block inappropriate content
  if (isInappropriate(text)) {
    if (err) { err.textContent = 'This content is too inappropriate to send'; err.classList.add('show'); }
    return;
  }
  // rate limit: max 5 comments per 30s
  if (!rateLimit('comment', 5, 30000)) {
    if (err) { err.textContent = 'You\'re commenting too fast - please wait a moment.'; err.classList.add('show'); }
    return;
  }
  if (err) { err.classList.remove('show'); err.textContent = ''; }

  const list = box.querySelector('.comment-list');
  const empty = list.querySelector('.no-comments');
  if (empty) empty.remove();

  const pidNew = photoIdOf(form);
  if (pidNew && apiOn()) {
    input.value = '';
    apiPost('/api/site/photos/' + pidNew + '/comments', { text }).then(r => {
      if (r && r.ok && r.data && r.data.comment) list.insertAdjacentHTML('beforeend', commentRow(serverComment(r.data.comment)));
      else { if (err) { err.textContent = (r && r.data && r.data.error) || 'Could not post the comment'; err.classList.add('show'); } if (!list.querySelector('.comment')) list.innerHTML = '<p class="no-comments">No comments yet - be the first!</p>'; }
    });
  } else {
    list.insertAdjacentHTML('beforeend', commentRow({ user: me, handle: me, text }));
    input.value = '';
  }

  // bump the comment count
  const toggle = form.closest('.post').querySelector('.comment-toggle');
  if (toggle) {
    toggle.dataset.n = (+toggle.dataset.n || 0) + 1;
    const span = toggle.querySelector('span');
    if (span) span.textContent = fmt(+toggle.dataset.n);
  }
});

// ─────────────────────────────────────────────────────────────────────────────
// LIVE DATA
//
// Everything above renders the demo content in data.js so the page has something
// to show instantly. This section then replaces it with what is actually on the
// server: real rooms, real players, real photos, real avatars.
//
// Replace-after-render rather than render-only-after-fetch, deliberately: the page
// is useful immediately and never shows a bank of spinners, and if the API is down
// the demo content simply stays. Every fetch below is allowed to fail silently for
// that reason.
// ─────────────────────────────────────────────────────────────────────────────

// handle -> real profile image URL, filled in from whatever endpoint mentioned them.
const LIVE_AVATARS = new Map();

// avatarUrl is called all over the file and defaults to a generated DiceBear face.
// Wrap it so a real profile picture wins when we know one, without touching the
// dozen call sites.
const _avatarUrlBase = avatarUrl;
avatarUrl = function (seed) {
  const real = LIVE_AVATARS.get(avKey(seed));
  return real || _avatarUrlBase(seed);
};

// Remember an account's picture and repaint any avatar already on screen for them.
function noteAvatar(user) {
  if (!user || !user.username) return;
  const key = avKey(user.username);
  if (!user.profile_image) return;
  if (LIVE_AVATARS.get(key) === user.profile_image) return;
  LIVE_AVATARS.set(key, user.profile_image);
  refreshAvatars(key, user.profile_image);
}

async function apiGet(path) {
  const resp = await fetch(apiUrl(path), { credentials: 'same-origin' });
  if (!resp.ok) throw new Error(path + ' -> ' + resp.status);
  const out = await resp.json();
  if (out && out.ok === false) throw new Error(out.error || path);
  return out;
}

// ---- rooms ------------------------------------------------------------------

function roomThumb(r) {
  return r.image
    ? `<div class="rail-thumb" style="background-image:url('${r.image}');background-size:cover;background-position:center"></div>`
    : `<div class="rail-thumb" style="--a:#ff5a3c;--b:#7b2ff7"></div>`;
}

async function hydrateRooms() {
  if (!apiOn()) return;

  let rooms;
  try {
    rooms = (await apiGet('/api/site/rooms/hot?take=12')).results || [];
  } catch (e) {
    console.warn('[campus] rooms unavailable, keeping demo rooms:', e.message);
    return;
  }
  if (!rooms.length) return;   // empty server: demo content is better than a blank rail

  // Room names come back with the leading '^' the game uses; strip it for display
  // and re-add it in the label so it matches the client.
  rooms.forEach(r => { r.displayName = (r.name || '').replace(/^\^/, ''); });

  // Left rail. The markup for this is hardcoded in index.html, so replace the
  // items but keep the heading.
  const rail = document.getElementById('rooms');
  if (rail) {
    // This rail holds the online-friends section (inserted by hydrateOnline) ABOVE the rooms.
    // Preserve it, and always use a fixed "Top Rooms" heading - previously this reused whatever
    // .rail-title was first in the rail, which was the online section's, so the rooms ended up
    // mislabelled "Online Friends".
    const online = rail.querySelector('.rail-online');
    const pinnedBlock = rail.querySelector('.rail-pinned');   // pinned friends (renderPinned) live above the rooms too
    rail.innerHTML = (pinnedBlock ? pinnedBlock.outerHTML : '') + (online ? online.outerHTML : '')
      + '<h3 class="rail-title">Top Rooms</h3>'
      + rooms.slice(0, 8).map(r => `
        <a href="${roomUrl(r.id)}" class="rail-item">
          ${roomThumb(r)}
          <div class="rail-meta">
            <span class="rail-name">^${escapeHtml(r.displayName)}</span>
            <span class="rail-by">${r.creator ? '@' + escapeHtml(r.creator) : ''}</span>
          </div>
        </a>`).join('');
  }

  // NOTE: the featured slideshow is NOT set here anymore. It's owned by loadFeatured(), which
  // shows the admin-curated FEATURED rooms (same as in-game), falling back to hot only when
  // nothing is featured. Setting it here too would overwrite that with the top rooms.
}

// ---- presence ---------------------------------------------------------------

async function hydrateOnline() {
  if (!apiOn()) return;

  const rail = document.querySelector('.feed-layout .rail');
  if (!rail) return;

  // Signed OUT: there are no "your friends" to show, so remove the section entirely (no generic
  // "Online Now" list of strangers).
  if (!CAMPUS_ME) { rail.querySelector('.rail-online')?.remove(); return; }

  // Signed in: ONLY your own online friends (never every online player).
  let people = [];
  try {
    const f = await apiGet('/api/site/friends');
    people = (f.results || []).filter(p => p.online);
  } catch (e) {
    console.warn('[campus] presence unavailable, keeping demo list:', e.message);
    return;
  }

  people.forEach(noteAvatar);

  const existing = rail.querySelector('.rail-online');
  const heading = CAMPUS_ME ? 'Online Friends' : 'Online Now';

  if (!people.length) {
    // Real answer, and it is "nobody". Say so instead of showing invented friends.
    const emptyMsg = CAMPUS_ME ? 'None of your friends are online right now.' : 'No one is online right now.';
    const html = `<div class="rail-online"><h3 class="rail-title">${heading} · 0</h3>
      <p class="rail-by" style="padding:.5rem .25rem">${emptyMsg}</p></div>`;
    if (existing) existing.outerHTML = html; else rail.insertAdjacentHTML('afterbegin', html);
    return;
  }

  const items = people.map(p => {
    const handle = p.username || String(p.id);
    const name = p.display_name || p.username || 'Player';
    return `<a class="rail-item" href="${userUrl(handle)}">
      <span class="rail-on-av"><img class="rail-pin-av" data-av="${avKey(handle)}" src="${avatarUrl(handle)}" alt=""><i class="online-dot"></i></span>
      <div class="rail-meta">
        <span class="rail-name">${escapeHtml(name)}</span>
        <span class="rail-by">${escapeHtml(p.where || 'Online now')}</span>
      </div>
    </a>`;
  }).join('');

  const html = `<div class="rail-online"><h3 class="rail-title">${heading} · ${people.length}</h3>${items}</div>`;
  if (existing) existing.outerHTML = html; else rail.insertAdjacentHTML('afterbegin', html);
}

// ---- photos -----------------------------------------------------------------

async function hydrateFeed() {
  if (!apiOn() || !postList) return;

  let photos;
  try {
    photos = (await apiGet('/api/site/photos/recent?take=24')).results || [];
  } catch (e) {
    console.warn('[campus] photo feed unavailable, keeping fallback:', e.message);
    return;
  }

  if (!photos.length) {
    postList.innerHTML = '<div class="feed-loading">No photos have been shared yet.</div>';
    return;
  }

  photos.forEach(p => noteAvatar(p.author));

  // Map the server shape onto what renderPosts expects.
  renderPosts(photos.map(p => ({
    id: p.id,
    user: (p.author && (p.author.display_name || p.author.username)) || 'Unknown',
    handle: (p.author && p.author.username) || 'player',
    room: null,               // room NAME is not in this projection; the id alone is not useful
    image: p.image,
    caption: p.description || '',
    cheers: p.cheers || 0,
    thread: [],               // the thread itself is a separate fetch
    comments: p.comments || 0, // count comes from the server (see nComments)
    takenAt: p.createdAt,
  })));
}

// ---- go ---------------------------------------------------------------------

// syncSession() has already run above; wait for it so hydrateOnline knows whether
// anyone is signed in, then fill everything in parallel.
SESSION_READY.then(() => {
  hydrateRooms();
  hydrateOnline();
  hydrateFeed();
  if (CAMPUS_ME) noteAvatar(CAMPUS_ME);
});

// ---- topbar restyle (look only) --------------------------------------------------------------
// The brand, an inline search field and the Rooms / News / Support links in the top bar on every
// page. Nothing new behind them: the field just opens the existing search panel, the links go
// where the drawer's do.
(function topbarChrome() {
  const bar = document.querySelector('.topbar');
  if (!bar || bar.querySelector('.top-mid')) return;
  const left = bar.querySelector('.top-left');
  const right = bar.querySelector('.top-right');
  if (topbarBrand) {
    topbarBrand.classList.add('always');
    topbarBrand.addEventListener('click', () => { window.location.href = '/'; });
    topbarBrand.setAttribute('role', 'link');
    topbarBrand.tabIndex = 0;
  }
  if (left && document.getElementById('searchBtn')) {
    const mid = document.createElement('div');
    mid.className = 'top-mid';
    mid.innerHTML = '<label class="top-search"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.7" y2="16.7"/></svg><input type="text" placeholder="Search…" aria-label="Search" autocomplete="off"></label>';
    left.insertAdjacentElement('afterend', mid);
    const fake = mid.querySelector('input');
    const open = () => {
      if (typeof openSearch !== 'function' || !document.getElementById('searchPanel')) return;
      openSearch();
      const real = document.getElementById('searchInput');
      if (real) {
        if (fake.value) { real.value = fake.value; real.dispatchEvent(new Event('input', { bubbles: true })); }
        real.focus();
      }
      fake.value = '';
      fake.blur();
    };
    fake.addEventListener('focus', open);
    fake.addEventListener('click', open);
  }
  if (right) {
    const links = document.createElement('nav');
    links.className = 'top-nav-links';
    links.setAttribute('aria-label', 'Main');
    links.innerHTML =
      '<a href="/rooms"><span>Rooms</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg></a>' +
      '<a href="/news"><span>News</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h13v14a1 1 0 0 1-1 1H4z"/><path d="M17 8h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2"/><path d="M8 9h5M8 13h5"/></svg></a>' +
      '<a href="/support"><span>Support</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></a>';
    right.insertAdjacentElement('afterbegin', links);
  }
})();

// Home hero: "N players online right now in Campus!" from the same presence API the online list
// uses. Left as the neutral wording when the API is off or answers nothing.
(function heroOnline() {
  const el = document.getElementById('heroOnline');
  if (!el || !apiOn()) return;
  const paint = async () => {
    try {
      const d = await apiGet('/api/site/online?take=1');
      if (d && d.ok && typeof d.total === 'number') {
        el.textContent = d.total === 1 ? '1 player is' : `${d.total.toLocaleString()} players are`;
      }
    } catch {}
  };
  paint();
  setInterval(paint, 60000);
})();


// ---- /rooms: browse every public room (Hot / New / Originals, with a filter) -----------------
(function roomsPage() {
  const grid = document.getElementById('roomsGrid');
  if (!grid) return;
  const tabs = Array.from(document.querySelectorAll('.rtab'));
  const filter = document.getElementById('roomsFilter');
  const more = document.getElementById('roomsMore');
  const count = document.getElementById('roomsCount');
  const PAGE = 24;
  let tab = 'hot', q = '', skip = 0, total = 0, busy = false, seq = 0;

  // Deep link: /rooms?tab=rro&q=dodge
  try {
    const p = new URLSearchParams(location.search);
    if (['hot', 'new', 'rro'].includes(p.get('tab'))) tab = p.get('tab');
    if (p.get('q')) { q = p.get('q'); filter.value = q; }
  } catch {}

  const ICON_VISITS = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z"/><circle cx="12" cy="12" r="3.2"/></svg>';
  const ICON_CHEER = CHEER_ICON;

  function card(r) {
    const name = String(r.name || '').replace(/^\^/, '');
    const img = r.image
      ? `<div class="rc-img" style="background-image:url('${r.image}')"></div>`
      : `<div class="rc-img rc-img-empty">^${escapeHtml(name)}</div>`;
    return `<a class="rc" href="${roomUrl(r.name || r.id)}">
      ${img}
      <div class="rc-body">
        <span class="rc-name">^${escapeHtml(name)}</span>
        <span class="rc-by">${r.creator ? '@' + escapeHtml(r.creator) : ''}</span>
        <span class="rc-stats"><span>${ICON_VISITS}${fmt(r.visits || 0)}</span><span>${ICON_CHEER}${fmt(r.cheers || 0)}</span></span>
      </div>
    </a>`;
  }

  function fallback() {
    const list = Object.keys(window.ROOMS_DATA || {}).map(id => Object.assign({ id, name: (ROOMS_DATA[id] || {}).name || id }, ROOMS_DATA[id] || {}));
    grid.innerHTML = list.length ? list.map(card).join('') : '<div class="feed-loading">No rooms to show yet.</div>';
    more.hidden = true;
    count.textContent = '';
  }

  async function load(reset) {
    if (busy) return;
    if (!apiOn()) { fallback(); return; }
    busy = true;
    const my = ++seq;
    if (reset) { skip = 0; grid.innerHTML = '<div class="feed-loading">Loading rooms…</div>'; }
    more.disabled = true;
    try {
      const d = await apiGet(`/api/site/rooms/browse?tab=${encodeURIComponent(tab)}&q=${encodeURIComponent(q)}&skip=${skip}&take=${PAGE}`);
      if (my !== seq) return;                       // a newer request superseded this one
      if (!d || !d.ok) throw new Error((d && d.error) || 'failed');
      total = d.total || 0;
      const html = (d.results || []).map(card).join('');
      if (reset) grid.innerHTML = html || '<div class="feed-loading">No rooms match that.</div>';
      else grid.insertAdjacentHTML('beforeend', html);
      skip += (d.results || []).length;
      more.hidden = skip >= total;
      count.textContent = total ? `${total.toLocaleString()} room${total === 1 ? '' : 's'}` : '';
    } catch (e) {
      if (my === seq && reset) grid.innerHTML = '<div class="feed-loading">Could not load rooms.</div>';
      more.hidden = true;
    } finally {
      if (my === seq) { busy = false; more.disabled = false; }
    }
  }

  function setTab(next) {
    tab = next;
    tabs.forEach(b => {
      const on = b.dataset.tab === tab;
      b.classList.toggle('active', on);
      b.setAttribute('aria-selected', on ? 'true' : 'false');
    });
    try {
      const u = new URL(location.href);
      u.searchParams.set('tab', tab);
      if (q) u.searchParams.set('q', q); else u.searchParams.delete('q');
      history.replaceState(null, '', u.pathname + (u.search || ''));
    } catch {}
    load(true);
  }

  tabs.forEach(b => b.addEventListener('click', () => { if (b.dataset.tab !== tab) setTab(b.dataset.tab); }));
  let t = null;
  filter.addEventListener('input', () => {
    clearTimeout(t);
    t = setTimeout(() => { q = filter.value.trim(); setTab(tab); }, 250);
  });
  more.addEventListener('click', () => load(false));
  setTab(tab);
})();