@ywkrlerche/richardwho 1.0.27 → 1.0.29

package/app.js

@@ -222,6 +222,14 @@
     };
 
     try {
+      // Played before? Start straight from the browser's saved copy, no download
+      const cached = await gameCache.get(urls[0]);
+      if (cached && currentLoad?.id === game.id) {
+        els.barFill.style.width = "100%";
+        els.loaderStatus.textContent = "Starting (saved copy)…";
+        startGameHtml(game, await cached.text());
+        return;
+      }
       const pieces = await Promise.all(urls.map(async (url, i) => {
         // Try the main link, then backups. jsDelivr sometimes fails the first fetch of a file it
         // hasn't cached yet, and a download can drop mid-way, so a retry usually succeeds.
@@ -257,17 +265,9 @@
       }));
       if (currentLoad?.id !== game.id) return;
       els.loaderStatus.textContent = "Starting…";
-      let html = await new Blob(pieces.flat()).text();
-      if (currentLoad?.id !== game.id) return;
-      if (game.src === "gn") html = stripTracking(html);
-      html = guardHistory(html);
-      const doc = freshFrame().contentDocument;
-      doc.open();
-      doc.write(html);
-      doc.close();
-      els.loader.hidden = true;
-      hookFrameKeys();
-      try { els.frame.contentWindow.focus(); } catch {}
+      const blob = new Blob(pieces.flat());
+      gameCache.put(urls[0], blob); // in the background; a full disk just means no saved copy
+      startGameHtml(game, await blob.text());
     } catch (err) {
       if (err.name === "AbortError") return;
       console.error(err);
@@ -276,6 +276,53 @@
     }
   }
 
+  function startGameHtml(game, html) {
+    if (currentLoad?.id !== game.id) return;
+    if (game.src === "gn") html = stripTracking(html);
+    html = guardHistory(html);
+    const doc = freshFrame().contentDocument;
+    doc.open();
+    doc.write(html);
+    doc.close();
+    els.loader.hidden = true;
+    hookFrameKeys();
+    try { els.frame.contentWindow.focus(); } catch {}
+    stats.startPlay(game);
+  }
+
+  // Saved copies of recently played games (browser Cache Storage), so replays start instantly.
+  // Keyed by the game's first file URL, which includes the version tag, so new versions don't reuse old copies.
+  const gameCache = {
+    NAME: "rug-games-v1",
+    KEEP: 12,
+    async get(key) {
+      try {
+        if (!window.caches) return null;
+        const hit = await (await caches.open(this.NAME)).match(key);
+        if (hit) this.touch(key);
+        return hit || null;
+      } catch { return null; }
+    },
+    async put(key, blob) {
+      try {
+        if (!window.caches) return;
+        await (await caches.open(this.NAME)).put(key, new Response(blob, { headers: { "Content-Type": "text/html" } }));
+        await this.touch(key);
+      } catch { /* out of space or not allowed: just skip saving */ }
+    },
+    async touch(key) {
+      // most-recent-first list; drop anything past KEEP
+      const list = store.get("rug-cache-list", []).filter((k) => k !== key);
+      list.unshift(key);
+      const drop = list.splice(this.KEEP);
+      store.set("rug-cache-list", list);
+      if (drop.length) {
+        const c = await caches.open(this.NAME);
+        await Promise.all(drop.map((k) => c.delete(k)));
+      }
+    },
+  };
+
   // Backup sources for a jsDelivr GitHub link, in the order to try them:
   // the same link again, jsDelivr's second network, then GitHub's own file server.
   // The extra collection's files are also published as gn-math/html at the same commit.
@@ -312,6 +359,7 @@
   }
 
   function stopGame() {
+    stats.stopPlay();
     if (!currentLoad) return;
     currentLoad.controller.abort();
     currentLoad = null;
@@ -339,7 +387,10 @@
       els.player.hidden = false;
       document.body.classList.add("playing");
       addRecent(game.id);
-      if (currentLoad?.id !== game.id) loadGame(game);
+      if (currentLoad?.id !== game.id) {
+        loadGame(game);
+        track(`Play: ${game.name}`, { name: "play_game", params: { game_name: game.name, game_category: game.tag } });
+      }
       return;
     }
     stopGame();
@@ -347,11 +398,16 @@
     document.body.classList.remove("playing");
     document.title = tabTitle();
     const h = location.hash;
-    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : "home";
+    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : h === "#chat" ? "chat" : h === "#stats" ? "stats" : "home";
     els.homeView.hidden = view !== "home";
     els.gamesView.hidden = view !== "games";
     $("view-settings").hidden = view !== "settings";
-    if (view === "settings") renderSettings();
+    $("view-chat").hidden = view !== "chat";
+    $("view-stats").hidden = view !== "stats";
+    if (view === "settings") { renderSettings(); renderAdmin(); }
+    if (view === "stats") renderStats();
+    if (view === "chat") openChat();
+    track(view[0].toUpperCase() + view.slice(1));
     document.querySelectorAll(".rail-btn[data-nav]").forEach((b) =>
       b.classList.toggle("active", b.dataset.nav === (location.hash === "#recent" ? "recent" : view)));
     if (view === "games") renderRecent();
@@ -410,6 +466,152 @@
       applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark"));
   }
 
+  // ---------- Play stats + achievements (saved in this browser) ----------
+  // Time counts only while a game is open AND the tab is visible.
+  const STATS_KEY = "rug-stats";
+  const ACHIEVEMENTS = [
+    { id: "first", icon: "🎮", name: "First Steps", desc: "Play your first game", goal: 1, of: (s) => s.unique },
+    { id: "ten", icon: "🔟", name: "Warming Up", desc: "Play 10 different games", goal: 10, of: (s) => s.unique },
+    { id: "25", icon: "🧭", name: "Explorer", desc: "Play 25 different games", goal: 25, of: (s) => s.unique },
+    { id: "50", icon: "🗺️", name: "Adventurer", desc: "Play 50 different games", goal: 50, of: (s) => s.unique },
+    { id: "100", icon: "💯", name: "Collector", desc: "Play 100 different games", goal: 100, of: (s) => s.unique },
+    { id: "250", icon: "👑", name: "Game Royalty", desc: "Play 250 different games", goal: 250, of: (s) => s.unique },
+    { id: "hour", icon: "⏱️", name: "One More Game", desc: "Play for 1 hour in total", goal: 60, of: (s) => s.minutes, unit: "min" },
+    { id: "10h", icon: "🛋️", name: "Couch Legend", desc: "Play for 10 hours in total", goal: 600, of: (s) => s.minutes, unit: "min" },
+    { id: "hooked", icon: "🎣", name: "Hooked", desc: "Spend 30 minutes in one game", goal: 30, of: (s) => s.topMinutes, unit: "min" },
+    { id: "replay", icon: "🔁", name: "Comfort Game", desc: "Open the same game 10 times", goal: 10, of: (s) => s.topPlays },
+    { id: "racing", icon: "🏎️", name: "Speed Freak", desc: "Play 10 racing games", goal: 10, of: (s) => s.byTag.Racing || 0 },
+    { id: "racing-all", icon: "🏁", name: "Every Racetrack", desc: "Play every racing game", goal: () => tagTotal("Racing"), of: (s) => s.byTag.Racing || 0 },
+    { id: "horror", icon: "👻", name: "Brave Soul", desc: "Play 5 horror games", goal: 5, of: (s) => s.byTag.Horror || 0 },
+    { id: "rhythm", icon: "🎵", name: "Got Rhythm", desc: "Play 5 rhythm games", goal: 5, of: (s) => s.byTag.Rhythm || 0 },
+    { id: "papa", icon: "🍕", name: "Papa's Apprentice", desc: "Play every Papa's game", goal: () => papasTotal(), of: (s) => s.papas },
+    { id: "allcats", icon: "🌈", name: "Well-Rounded", desc: "Play a game from every category", goal: () => tagList().length, of: (s) => s.tags },
+    { id: "wheel", icon: "🎡", name: "Feeling Lucky", desc: "Play a game the wheel picked", goal: 1, of: (s) => s.wheelPlays || 0 },
+    { id: "spins", icon: "🌀", name: "Spin Doctor", desc: "Spin the wheel 25 times", goal: 25, of: (s) => s.wheelSpins || 0 },
+    { id: "chat", icon: "💬", name: "Chatterbox", desc: "Send 10 chat messages", goal: 10, of: (s) => s.chatSent || 0 },
+    { id: "night", icon: "🦉", name: "Night Owl", desc: "Play a game between midnight and 4 AM", goal: 1, of: (s) => (s.night ? 1 : 0) },
+  ];
+  const tagList = () => [...new Set(games.filter((g) => g.tag !== "Tools").map((g) => g.tag))];
+  const tagTotal = (tag) => games.filter((g) => g.tag === tag).length;
+  const isPapas = (g) => /^papa'?s /i.test(g.name);
+  const papasTotal = () => games.filter(isPapas).length;
+
+  const stats = {
+    data: null,
+    current: null, // { id, since } while a game is open and visible
+    load() {
+      if (!this.data) this.data = { games: {}, wheelSpins: 0, wheelPlays: 0, chatSent: 0, night: false, unlocked: {}, ...store.get(STATS_KEY, {}) };
+      return this.data;
+    },
+    save() { store.set(STATS_KEY, this.data); },
+    bump(key) { this.load()[key] = (this.data[key] || 0) + 1; this.save(); checkAchievements(); },
+    startPlay(game) {
+      this.stopPlay();
+      const d = this.load();
+      const rec = d.games[game.id] || (d.games[game.id] = { plays: 0, ms: 0 });
+      rec.plays++;
+      rec.last = Date.now();
+      const h = new Date().getHours();
+      if (h < 4) d.night = true;
+      this.save();
+      this.current = { id: game.id, since: document.hidden ? null : Date.now() };
+      checkAchievements();
+    },
+    // Add the time since the last check to the open game (called on stop, tab hide, and every 30s)
+    flush() {
+      const c = this.current;
+      if (!c || !c.since) return;
+      const rec = this.load().games[c.id];
+      if (rec) rec.ms += Math.min(Date.now() - c.since, 60 * 60 * 1000); // cap any single gap at an hour
+      c.since = document.hidden ? null : Date.now();
+      this.save();
+    },
+    stopPlay() { this.flush(); this.current = null; },
+    summary() {
+      const d = this.load();
+      const entries = Object.entries(d.games).filter(([id]) => byId.has(id));
+      const byTag = {};
+      let papas = 0, ms = 0, topMs = 0, topPlays = 0;
+      for (const [id, r] of entries) {
+        const g = byId.get(id);
+        byTag[g.tag] = (byTag[g.tag] || 0) + 1;
+        if (isPapas(g)) papas++;
+        ms += r.ms;
+        topMs = Math.max(topMs, r.ms);
+        topPlays = Math.max(topPlays, r.plays);
+      }
+      return {
+        ...d, unique: entries.length, plays: entries.reduce((a, [, r]) => a + r.plays, 0),
+        minutes: Math.floor(ms / 60000), topMinutes: Math.floor(topMs / 60000), topPlays, byTag, papas,
+        tags: tagList().filter((t) => byTag[t]).length,
+        top: entries.sort((a, b) => b[1].ms - a[1].ms || b[1].plays - a[1].plays).slice(0, 5),
+      };
+    },
+  };
+  document.addEventListener("visibilitychange", () => {
+    if (!stats.current) return;
+    if (document.hidden) stats.flush();
+    else stats.current.since = Date.now();
+  });
+  addEventListener("pagehide", () => stats.flush());
+  setInterval(() => { stats.flush(); checkAchievements(); }, 30000);
+
+  const goalOf = (a) => (typeof a.goal === "function" ? a.goal() : a.goal);
+  function checkAchievements() {
+    if (!games.length) return;
+    const s = stats.summary(), d = stats.data;
+    for (const a of ACHIEVEMENTS) {
+      if (d.unlocked[a.id]) continue;
+      const goal = goalOf(a);
+      if (goal > 0 && a.of(s) >= goal) {
+        d.unlocked[a.id] = Date.now();
+        stats.save();
+        toast(`${a.icon} Achievement unlocked: ${a.name}`);
+      }
+    }
+    if (!$("view-stats").hidden) renderStats();
+  }
+
+  let toastTimer = 0;
+  function toast(text) {
+    const t = $("toast");
+    t.textContent = text;
+    t.classList.add("show");
+    clearTimeout(toastTimer);
+    toastTimer = setTimeout(() => t.classList.remove("show"), 4000);
+  }
+
+  function fmtTime(min) {
+    if (min < 1) return "<1 min";
+    const h = Math.floor(min / 60), m = min % 60;
+    return h ? `${h}h ${m}m` : `${m}m`;
+  }
+  function renderStats() {
+    if (!games.length) return;
+    const s = stats.summary(), d = stats.data;
+    const favTag = Object.entries(s.byTag).sort((a, b) => b[1] - a[1])[0];
+    $("stat-unique").textContent = s.unique;
+    $("stat-plays").textContent = s.plays;
+    $("stat-time").textContent = s.plays ? fmtTime(s.minutes) : "0 min";
+    $("stat-fav").textContent = favTag ? `${TAG_EMOJI[favTag[0]] || ""} ${favTag[0]}` : "–";
+    $("stat-top").innerHTML = s.top.length
+      ? s.top.map(([id, r], i) => `<li><span>${i + 1}. ${escapeHtml(byId.get(id).name)}</span><span>${fmtTime(Math.floor(r.ms / 60000))} · ${r.plays} play${r.plays === 1 ? "" : "s"}</span></li>`).join("")
+      : `<li class="muted">Play some games and your favorites show up here.</li>`;
+    const done = ACHIEVEMENTS.filter((a) => d.unlocked[a.id]).length;
+    $("ach-count").textContent = `${done} of ${ACHIEVEMENTS.length} unlocked`;
+    $("achievements").innerHTML = ACHIEVEMENTS.map((a) => {
+      const goal = goalOf(a), have = Math.min(a.of(s), goal), got = !!d.unlocked[a.id];
+      const pct = goal ? Math.round((have / goal) * 100) : 0;
+      const prog = a.unit === "min" ? `${fmtTime(have)} / ${fmtTime(goal)}` : `${have} / ${goal}`;
+      return `<div class="ach${got ? " got" : ""}" title="${escapeHtml(a.desc)}">
+        <span class="ach-icon">${got ? a.icon : "🔒"}</span>
+        <div class="ach-body"><b>${escapeHtml(a.name)}</b><small>${escapeHtml(a.desc)}</small>
+          ${got ? `<small class="ach-done">Unlocked ${new Date(d.unlocked[a.id]).toLocaleDateString()}</small>`
+                : `<div class="ach-bar"><div style="width:${pct}%"></div></div><small>${prog}</small>`}
+        </div></div>`;
+    }).join("");
+  }
+
   // ---------- Settings (saved in this browser) ----------
   const SETTINGS_KEY = "rug-settings";
   const REAL_ICON = "data:image/svg+xml," + encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='black'/><text x='50' y='70' font-size='62' text-anchor='middle' fill='white' font-family='Arial' font-weight='800'>r</text></svg>");
@@ -504,6 +706,12 @@
     $("set-per-row").addEventListener("change", (e) => setPerRow(Number(e.target.value)));
     $("set-typing").addEventListener("change", (e) => { settings.typing = e.target.checked; saveSettings(); startTypingPlaceholder(); });
     $("set-boot").addEventListener("change", (e) => { settings.boot = e.target.checked; saveSettings(); });
+    $("set-reset-stats").addEventListener("click", () => {
+      if (!confirm("Reset your stats and achievements on this device?")) return;
+      stats.data = null;
+      store.set(STATS_KEY, {});
+      renderStats();
+    });
     $("set-clear-recent").addEventListener("click", () => {
       store.set(RECENT_KEY, []);
       renderRecent();
@@ -560,6 +768,7 @@
     ctx.stroke();
   }
   function spinWheel(pool) {
+    stats.bump("wheelSpins");
     const picks = [...pool].sort(() => Math.random() - 0.5).slice(0, Math.min(12, pool.length));
     wheel.items = picks.length >= 2 ? picks : [...picks, ...picks];
     const n = wheel.items.length, a = (Math.PI * 2) / n;
@@ -616,23 +825,56 @@
   function bindWheel() {
     $("wheel-skip").addEventListener("click", finishWheel);
     $("wheel-again").addEventListener("click", () => spinWheel(wheelPool));
-    $("wheel-play").addEventListener("click", () => { const g = wheel.winner; closeWheel(); play(g.id); });
+    $("wheel-play").addEventListener("click", () => { const g = wheel.winner; closeWheel(); stats.bump("wheelPlays"); play(g.id); });
     $("wheel-close").addEventListener("click", closeWheel);
     $("wheel-wrap").addEventListener("click", (e) => { if (e.target.id === "wheel-wrap") closeWheel(); });
   }
 
+  // ---------- Google Analytics (only when a measurement ID is set in config.js) ----------
+  // The tab title is disguised, so pages and games are reported by their real names instead.
+  function track(page, extra) {
+    if (!window.gtag) return;
+    window.gtag("event", "page_view", { page_title: page, page_location: location.href.split("#")[0] + (location.hash || "#home") });
+    if (extra) window.gtag("event", extra.name, extra.params);
+  }
+  function startAnalytics() {
+    const id = CFG.googleAnalytics;
+    if (!id || !/^G-[A-Z0-9]+$/i.test(id)) return;
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = function () { window.dataLayer.push(arguments); };
+    window.gtag("js", new Date());
+    // We send page views ourselves (see track); no ad features
+    window.gtag("config", id, { send_page_view: false, allow_google_signals: false, allow_ad_personalization_signals: false });
+    loadScript(`https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`).catch(() => {});
+  }
+
   // ---------- Live "people online" count ----------
   // Needs a free Firebase Realtime Database (see SETUP.md). Without one, the count stays hidden.
   function loadScript(src) {
     return new Promise((ok, fail) => { const s = document.createElement("script"); s.src = src; s.onload = ok; s.onerror = fail; document.head.appendChild(s); });
   }
+  // One shared Firebase connection for the online count and the chat (null when not configured)
+  let firebaseApp = null;
+  function getFirebase() {
+    if (!CFG.firebase || !CFG.firebase.databaseURL) return Promise.resolve(null);
+    if (!firebaseApp) {
+      firebaseApp = (async () => {
+        const v = "10.12.2";
+        await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-app-compat.js`);
+        await Promise.all([
+          loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-database-compat.js`),
+          loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-auth-compat.js`),
+        ]);
+        return window.firebase.initializeApp(CFG.firebase, "rug");
+      })().catch((err) => { console.warn("Firebase unavailable:", err); return null; });
+    }
+    return firebaseApp;
+  }
+
   async function startPresence() {
-    if (!CFG.firebase || !CFG.firebase.databaseURL) return;
     try {
-      const v = "10.12.2";
-      await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-app-compat.js`);
-      await loadScript(`https://www.gstatic.com/firebasejs/${v}/firebase-database-compat.js`);
-      const app = window.firebase.initializeApp(CFG.firebase, "presence");
+      const app = await getFirebase();
+      if (!app) return;
       const db = app.database();
       const me = db.ref("online").push();
       db.ref(".info/connected").on("value", (snap) => {
@@ -650,6 +892,217 @@
     }
   }
 
+  // ---------- Censored chat room ----------
+  // Two layers: this filter (stars out swears, refuses links/personal info) and the database's own
+  // rules (see SETUP.md), which reject the same things even if someone skips this page's code.
+  const BAD_ANYWHERE = ["fuck", "shit", "bitch", "cunt", "nigg", "faggot", "fagot", "whore", "slut", "pussy",
+    "penis", "vagina", "porn", "retard", "asshole", "bastard", "molest", "pedo", "dildo", "boob", "nazi", "hitler",
+    "kill yourself", "killyourself"];
+  const BAD_WHOLE_WORD = ["ass", "fag", "cum", "tit", "tits", "hoe", "kys", "sex", "nig", "dick", "cock", "rape",
+    "raped", "rapist", "raping", "damn", "piss", "crap", "wank", "twat", "prick"];
+  const LEET = { 0: "o", 1: "i", 3: "e", 4: "a", 5: "s", 7: "t", 8: "b", "@": "a", $: "s", "!": "i", "|": "i" };
+  // Real words that happen to contain a filtered one
+  const SAFE_WORDS = ["scunthorpe", "shiitake", "cockpit", "peacock", "hancock", "dickens", "assassin", "cocktail", "therapist"];
+  const plain = (s) => s.toLowerCase().replace(/[0134578@$!|]/g, (c) => LEET[c] || c).replace(/[^a-z ]/g, "");
+  const squash = (s) => plain(s).replace(/(.)\1+/g, "$1"); // "fuuuck" -> "fuck"
+  function isBadWord(word) {
+    const p = plain(word).replace(/ /g, ""), w = squash(word).replace(/ /g, "");
+    if (!w || SAFE_WORDS.includes(p)) return false;
+    // whole-word list: check before and after squashing, since squashing turns "ass" into "as"
+    return BAD_WHOLE_WORD.includes(p) || BAD_WHOLE_WORD.includes(w) ||
+      BAD_ANYWHERE.some((b) => w.includes(squash(b).replace(/ /g, "")));
+  }
+  // Returns { text } (with swears starred out) or { error } when the message can't be sent at all
+  function cleanMessage(raw) {
+    const text = raw.replace(/\s+/g, " ").trim();
+    if (!text) return { error: "Type a message first." };
+    if (/(https?:|www\.|discord\.gg|\b[a-z0-9-]+\.(com|net|org|io|gg|xyz|co|me|tv|ly|app|dev|link)\b)/i.test(text)) return { error: "Links aren't allowed in chat." };
+    if (/\S+@\S+\.\S+/.test(text)) return { error: "Don't share email addresses." };
+    if (/(\d[\s().-]*){7,}/.test(text)) return { error: "Don't share phone numbers." };
+    const masked = text.split(" ").map((w) => (isBadWord(w) ? "*".repeat(w.length) : w)).join(" ");
+    // spaced-out tricks like "f u c k" survive word-by-word checks; catch them on the whole line
+    const joined = squash(masked.split(" ").filter((w) => !SAFE_WORDS.includes(plain(w))).join(" ")).replace(/ /g, "");
+    if (BAD_ANYWHERE.some((b) => joined.includes(squash(b).replace(/ /g, "")))) return { error: "That message was blocked." };
+    return { text: masked };
+  }
+  function cleanName(raw) {
+    // Refuse (don't silently strip) other characters: a wrong or not-yet-saved admin code like "Code123!"
+    // must never be posted as a nickname
+    if (/[^\w .-]/.test(raw)) return { error: "Nicknames can only use letters, numbers, spaces, . _ and -." };
+    const name = raw.replace(/\s+/g, " ").trim().slice(0, 16);
+    if (name.length < 2) return { error: "Pick a nickname (2–16 letters)." };
+    if (name.split(/[ ._-]/).some(isBadWord) || isBadWord(name.replace(/[ ._-]/g, ""))) return { error: "Pick a different nickname." };
+    return { name };
+  }
+
+  const chat = { started: false, uid: null, lastSent: 0, admin: false, triedName: "" };
+  const ADMIN_NAME = "Richard"; // what the admin's messages show as (reserved: the database refuses it from non-admins)
+  function setAdminName() {
+    $("chat-name").value = ADMIN_NAME;
+    $("chat-name").readOnly = !!chat.admin;
+  }
+  function chatNote(text, err) { const n = $("chat-note"); n.textContent = text || ""; n.classList.toggle("err", !!err); }
+
+  // Who is this browser? Reuses a saved sign-in (Google for admins), otherwise signs in anonymously:
+  // no account, just a random per-browser id used for rate limits and bans.
+  async function ensureUser(app) {
+    const auth = app.auth();
+    const existing = await new Promise((ok) => { const off = auth.onAuthStateChanged((u) => { off(); ok(u); }); });
+    const user = existing || (await auth.signInAnonymously()).user;
+    chat.uid = user.uid;
+    // Admins are listed under chat/admins in the database (only editable from the Firebase console)
+    // The entry holds the admin code (the database only accepts the right one), so any entry means admin.
+    // If the code is changed later, old entries stop working on the database side.
+    try { chat.admin = (await app.database().ref(`chat/admins/${user.uid}`).once("value")).val() !== null; } catch { chat.admin = false; }
+    $("chat-log").classList.toggle("admin", chat.admin);
+    return user;
+  }
+
+  async function openChat() {
+    if (chat.started) return;
+    const app = await getFirebase();
+    if (!app) { $("chat-off").hidden = false; $("chat-log").hidden = true; $("chat-form").hidden = true; return; }
+    chat.started = true;
+    $("chat-form").hidden = false;
+    $("chat-name").value = store.get("rug-chat-name", "");
+    chatNote("Connecting…");
+    try {
+      await ensureUser(app);
+    } catch (err) {
+      chatNote("Chat couldn't connect. Try again later.", true);
+      return;
+    }
+    if (chat.admin) setAdminName();
+    chatNote(chat.admin ? "You're admin: 🗑 deletes a message, 🚫 bans its sender." : "");
+    const log = $("chat-log");
+    log.innerHTML = `<p class="chat-empty" id="chat-empty">No messages yet. Say hi!</p>`;
+    if (chat.ref) chat.ref.off(); // reconnecting (signed in/out): drop the old listener so messages don't double
+    const ref = chat.ref = app.database().ref("chat/messages").orderByChild("ts").limitToLast(60);
+    ref.on("child_added", (snap) => {
+      const m = snap.val();
+      if (!m || typeof m.text !== "string") return;
+      $("chat-empty")?.remove();
+      const nearBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 60;
+      const t = new Date(m.ts || Date.now());
+      const div = document.createElement("div");
+      div.className = "chat-msg" + (m.uid === chat.uid ? " me" : "");
+      div.dataset.key = snap.key;
+      div.dataset.uid = m.uid || "";
+      // filter again on display, in case anything slipped past older rules
+      const shown = cleanMessage(m.text).text || "[removed]";
+      div.innerHTML = `${m.admin ? `<span class="badge-admin">⭐ ADMIN</span>` : ""}<span class="who">${escapeHtml(m.name || "?")}</span>${escapeHtml(shown)}<span class="when">${t.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}</span>` +
+        `<button class="mod" type="button" data-mod="delete" title="Delete message">🗑</button><button class="mod" type="button" data-mod="ban" title="Ban this person">🚫</button>`;
+      log.appendChild(div);
+      while (log.children.length > 80) log.firstChild.remove();
+      if (nearBottom || m.uid === chat.uid) log.scrollTop = log.scrollHeight;
+    });
+    // Deleted by an admin: disappears for everyone
+    ref.on("child_removed", (snap) => {
+      log.querySelector(`[data-key="${CSS.escape(snap.key)}"]`)?.remove();
+      if (!log.querySelector(".chat-msg")) log.innerHTML = `<p class="chat-empty" id="chat-empty">No messages yet. Say hi!</p>`;
+    });
+  }
+
+  // ---------- Admin tools (chat) ----------
+  async function adminAction(e) {
+    const btn = e.target.closest("[data-mod]");
+    if (!btn || !chat.admin) return;
+    const row = btn.closest(".chat-msg");
+    const db = (await getFirebase()).database();
+    try {
+      if (btn.dataset.mod === "delete") {
+        await db.ref(`chat/messages/${row.dataset.key}`).remove();
+      } else if (btn.dataset.mod === "ban" && row.dataset.uid && row.dataset.uid !== chat.uid) {
+        if (!confirm("Ban this person from chat? They'll still be able to read.")) return;
+        await db.ref(`chat/banned/${row.dataset.uid}`).set(true);
+        chatNote("Banned. Their old messages stay until you delete them.");
+      }
+    } catch {
+      chatNote("That didn't work. Are you still signed in as an admin?", true);
+    }
+  }
+
+  async function renderAdmin() {
+    const app = await getFirebase();
+    $("admin-group").hidden = !app;
+    if (!app) return;
+    await ensureUser(app);
+    $("admin-status").textContent = chat.admin ? "Admin on this browser ✓" : "Not an admin on this browser";
+    $("admin-leave").hidden = !chat.admin;
+    $("admin-tools-row").hidden = !chat.admin;
+  }
+
+  // "#code" as a nickname: the database compares it with the secret code (which visitors can't read).
+  // Returns true if this browser is now admin.
+  async function claimAdmin(code) {
+    const app = await getFirebase();
+    try {
+      await app.database().ref(`chat/admins/${chat.uid}`).set(code);
+    } catch {
+      return false;
+    }
+    chat.admin = true;
+    $("chat-log").classList.add("admin");
+    return true;
+  }
+
+  function bindAdmin() {
+    $("chat-log").addEventListener("click", adminAction);
+    $("admin-leave").addEventListener("click", async () => {
+      try { await (await getFirebase()).database().ref(`chat/admins/${chat.uid}`).remove(); } catch {}
+      chat.admin = false;
+      chat.triedName = "";
+      $("chat-log").classList.remove("admin");
+      $("chat-name").readOnly = false;
+      $("chat-name").value = store.get("rug-chat-name", "");
+      await renderAdmin();
+    });
+    $("admin-clear").addEventListener("click", async () => {
+      if (!chat.admin || !confirm("Delete every chat message for everyone?")) return;
+      try { await (await getFirebase()).database().ref("chat/messages").remove(); }
+      catch { alert("Couldn't clear the chat."); }
+    });
+  }
+  async function sendChat(e) {
+    e.preventDefault();
+    const app = await getFirebase();
+    if (!app || !chat.uid) return;
+    // Typing the admin code as your nickname makes this browser admin (the database checks it;
+    // the code itself is never posted). Each new nickname is tried once.
+    const rawName = $("chat-name").value.trim();
+    if (!chat.admin && rawName && rawName !== chat.triedName) {
+      chat.triedName = rawName;
+      if (await claimAdmin(rawName)) {
+        setAdminName();
+        chatNote("You're admin now ✓ Your messages show as Richard, with 🗑 delete and 🚫 ban on every message.");
+        if (!$("chat-text").value.trim()) return;
+      }
+    }
+    const n = chat.admin ? { name: ADMIN_NAME } : cleanName(rawName);
+    if (n.error) { chatNote(n.error, true); $("chat-name").focus(); return; }
+    if (!chat.admin && n.name.toLowerCase() === ADMIN_NAME.toLowerCase()) { chatNote("That name is taken.", true); return; }
+    const m = cleanMessage($("chat-text").value);
+    if (m.error) { chatNote(m.error, true); return; }
+    const wait = 3000 - (Date.now() - chat.lastSent);
+    if (wait > 0) { chatNote(`Slow down. Wait ${Math.ceil(wait / 1000)}s.`, true); return; }
+    if (!chat.admin) store.set("rug-chat-name", n.name); // never save the admin code as a remembered name
+    const db = app.database();
+    const key = db.ref("chat/messages").push().key;
+    const TS = window.firebase.database.ServerValue.TIMESTAMP;
+    chat.lastSent = Date.now();
+    try {
+      await db.ref().update({
+        [`chat/messages/${key}`]: { name: n.name, text: m.text, ts: TS, uid: chat.uid, ...(chat.admin ? { admin: true } : {}) },
+        [`chat/last/${chat.uid}`]: TS,
+      });
+      $("chat-text").value = "";
+      stats.bump("chatSent");
+      chatNote("");
+    } catch {
+      chatNote("Message blocked (filtered word, or sending too fast).", true);
+    }
+  }
+
   // ---------- Arrow keys and controller move focus between tiles and buttons ----------
   function focusables() {
     const scope = els.player.hidden ? document : els.player;
@@ -781,6 +1234,27 @@
     window.addEventListener("popstate", route);
   }
 
+  // ---------- Logo hover: spotlight follows the mouse, logo tilts toward it ----------
+  function bindWordmark() {
+    const w = document.querySelector(".wordmark");
+    if (!w || matchMedia("(hover: none), (prefers-reduced-motion: reduce)").matches) return;
+    w.addEventListener("mousemove", (e) => {
+      const r = w.getBoundingClientRect();
+      const x = (e.clientX - r.left) / r.width, y = (e.clientY - r.top) / r.height;
+      w.classList.add("hovering");
+      w.style.setProperty("--mx", `${(x * 100).toFixed(1)}%`);
+      w.style.setProperty("--my", `${(y * 100).toFixed(1)}%`);
+      w.style.setProperty("--spot", `${Math.round(r.height * 1.1)}px`);
+      w.style.setProperty("--ry", `${((x - 0.5) * 14).toFixed(2)}deg`);
+      w.style.setProperty("--rx", `${((0.5 - y) * 12).toFixed(2)}deg`);
+      w.style.setProperty("--sc", "1.03");
+    });
+    w.addEventListener("mouseleave", () => {
+      w.classList.remove("hovering");
+      ["--ry", "--rx", "--sc", "--spot"].forEach((p) => w.style.removeProperty(p));
+    });
+  }
+
   // ---------- Home search: placeholder that types itself ----------
   let timer = 0; // shared, so restarting (from Settings) replaces the running animation
   function startTypingPlaceholder() {
@@ -901,6 +1375,10 @@
     bind();
     bindSettings();
     bindWheel();
+    bindWordmark();
+    $("chat-form").addEventListener("submit", sendChat);
+    bindAdmin();
+    startAnalytics();
     startPresence();
     // long enough to read a joke or two (skipped when the loading screen is off)
     const minShow = new Promise((r) => setTimeout(r, settings.boot !== false ? 1500 : 0));
@@ -933,7 +1411,7 @@
     renderGrid();
     startMarquee();
     route();
-    finishBoot("Done! (that was not 3 hours)");
+    finishBoot("Done");
   }
 
   init();

package/config.js

@@ -6,7 +6,7 @@ window.RUG_CONFIG = {
 
   // Branch the games live on. jsDelivr caches branches for up to 12h;
   // use a tag like "v1" here if you want instant, permanent URLs.
-  branch: "main",
+  branch: "v1", // a fixed tag on every rug-games repo: jsDelivr caches tags for a year (branches only 12h)
 
   // Where the panic button sends you
   panicUrl: "https://classroom.google.com/",
@@ -14,9 +14,21 @@ window.RUG_CONFIG = {
   // Keys that trigger panic (KeyboardEvent.key values)
   panicKeys: ["`", "]"],
 
-  // Live "people online" count on the home page. Paste your Firebase web config here
+  // Google Analytics 4 measurement ID, e.g. "G-ABC123XYZ" (from analytics.google.com).
+  // Leave null to turn analytics off. Shows visitors, live users and top games in YOUR GA dashboard.
+  googleAnalytics: "G-6VWCQ493PZ", // property "richardsunblockedgames"
+
+  // Live "people online" count on the home page and the chat room. Paste your Firebase web config here
   // (see SETUP.md). Leave null to hide the count.
-  firebase: null,
+  firebase: {
+    apiKey: "AIzaSyBxVxBFMwlSLx5FGP-Wna3ozHGZEAGXSKs",
+    authDomain: "richardwho-e8f22.firebaseapp.com",
+    databaseURL: "https://richardwho-e8f22-default-rtdb.firebaseio.com",
+    projectId: "richardwho-e8f22",
+    storageBucket: "richardwho-e8f22.firebasestorage.app",
+    messagingSenderId: "991096262738",
+    appId: "1:991096262738:web:8b6460399396051ee6cf8b",
+  },
 
   // npm package the site is published as (used to find the newest version)
   npmPackage: "@ywkrlerche/richardwho",

package/index.html

@@ -46,6 +46,12 @@
       <button class="rail-btn" type="button" id="random-btn" title="Random game" aria-label="Random game">
         <svg viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2.5 3a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM12 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM7.5 15a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm9 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>
       </button>
+      <button class="rail-btn" type="button" data-nav="chat" title="Chat" aria-label="Chat">
+        <svg viewBox="0 0 24 24"><path d="M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm3 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"/></svg>
+      </button>
+      <button class="rail-btn" type="button" data-nav="stats" title="Stats &amp; achievements" aria-label="Stats and achievements">
+        <svg viewBox="0 0 24 24"><path d="M7 3h10v2h4v3a5 5 0 0 1-4.6 5A5 5 0 0 1 13 15.9V18h3v3H8v-3h3v-2.1A5 5 0 0 1 7.6 13 5 5 0 0 1 3 8V5h4V3Zm0 4H5v1a3 3 0 0 0 2 2.8V7Zm12 0h-2v3.8A3 3 0 0 0 19 8V7Z"/></svg>
+      </button>
       <button class="rail-btn" type="button" data-nav="recent" title="Recently played" aria-label="Recently played">
         <svg viewBox="0 0 24 24"><path d="M13 3a9 9 0 1 1-8.95 10h2.02A7 7 0 1 0 13 5a6.98 6.98 0 0 0-4.94 2.06L10 9H4V3l2.64 2.64A8.97 8.97 0 0 1 13 3Zm-1 5h2v4.6l3.2 1.9-1 1.7L12 13.7V8Z"/></svg>
       </button>
@@ -129,6 +135,50 @@
       </section>
     </section>
 
+    <!-- CHAT -->
+    <section id="view-chat" class="view chat" hidden>
+      <header class="games-head"><div><h1>Chat</h1><p class="lede">Be nice. Messages are filtered, and links and personal info are blocked.</p></div></header>
+      <div class="chat-box">
+        <div class="chat-off" id="chat-off" hidden>
+          <p><strong>Chat isn't switched on yet.</strong></p>
+          <p>It needs the site's free Firebase database (see SETUP.md).</p>
+        </div>
+        <div class="chat-log" id="chat-log" aria-live="polite"></div>
+        <form class="chat-form" id="chat-form" autocomplete="off" hidden>
+          <input id="chat-name" class="chat-name" maxlength="16" placeholder="Nickname" spellcheck="false" aria-label="Nickname">
+          <input id="chat-text" class="chat-text" maxlength="200" placeholder="Say something…" aria-label="Message">
+          <button class="pill-btn" type="submit" id="chat-send">Send</button>
+        </form>
+        <p class="chat-note" id="chat-note"></p>
+      </div>
+    </section>
+
+    <!-- STATS & ACHIEVEMENTS -->
+    <section id="view-stats" class="view settings stats-page" hidden>
+      <header class="games-head"><div><h1>Stats</h1><p class="lede">Your play time and achievements. Saved on this device only.</p></div></header>
+
+      <div class="set-group">
+        <h2>Your stats</h2>
+        <div class="stat-tiles">
+          <div class="stat"><b id="stat-unique">0</b><span>games played</span></div>
+          <div class="stat"><b id="stat-plays">0</b><span>times played</span></div>
+          <div class="stat"><b id="stat-time">–</b><span>time played</span></div>
+          <div class="stat"><b id="stat-fav">–</b><span>favorite category</span></div>
+        </div>
+        <h3 class="set-sub">Most played</h3>
+        <ol class="stat-top" id="stat-top"></ol>
+      </div>
+
+      <div class="set-group">
+        <h2>Achievements <small class="ach-count" id="ach-count"></small></h2>
+        <div class="achievements" id="achievements"></div>
+      </div>
+
+      <div class="set-group">
+        <div class="set-row"><span>Start over</span><button class="pill-btn" type="button" id="set-reset-stats">Reset stats &amp; achievements</button></div>
+      </div>
+    </section>
+
     <!-- SETTINGS -->
     <section id="view-settings" class="view settings" hidden>
       <header class="games-head"><div><h1>Settings</h1><p class="lede">Saved on this device only.</p></div></header>
@@ -174,10 +224,20 @@
         <label class="set-row"><span>Funny loading screen</span><input type="checkbox" id="set-boot"></label>
       </div>
 
+      <div class="set-group" id="admin-group" hidden>
+        <h2>Chat admin</h2>
+        <p class="set-help">Admins can delete chat messages and ban people. To become admin, type the admin code as your chat nickname and press Send. Your messages then show as Richard.</p>
+        <div class="set-row"><span id="admin-status">Not an admin on this browser</span>
+          <button class="pill-btn" type="button" id="admin-leave" hidden>Stop being admin here</button>
+        </div>
+        <div class="set-row" id="admin-tools-row" hidden><span>Chat</span>
+          <button class="pill-btn danger" type="button" id="admin-clear">Clear all chat</button>
+        </div>
+      </div>
+
       <div class="set-group">
         <h2>Your data</h2>
-        <div class="set-row"><span>Recently played</span><button class="pill-btn" type="button" id="set-clear-recent">Clear</button></div>
-        <div class="set-row"><span>All settings</span><button class="pill-btn danger" type="button" id="set-reset">Reset to default</button></div>
+        <div class="set-row"><span>Recently played</span><button class="pill-btn" type="button" id="set-clear-recent">Clear</button></div>        <div class="set-row"><span>All settings</span><button class="pill-btn danger" type="button" id="set-reset">Reset to default</button></div>
       </div>
     </section>
   </main>
@@ -231,6 +291,8 @@
     </div>
   </section>
 
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+
   <footer class="corner-links">
     <span><kbd>`</kbd> or <kbd>]</kbd> panic</span>
     <span id="footer-count"></span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ywkrlerche/richardwho",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "Richards Unblocked Games",
   "license": "UNLICENSED",
   "files": [

package/style.css

@@ -11,8 +11,10 @@
   --soft-2: rgba(255, 255, 255, .1);
   --accent: #3b82f6;
   --danger: #ef4444;
-  --glow-blue: rgba(30, 64, 175, .55);
-  --glow-orange: rgba(194, 92, 30, .35);
+  --glow-blue: rgba(37, 78, 205, .55);
+  --glow-cyan: rgba(14, 165, 233, .30);
+  --glow-violet: rgba(99, 76, 230, .32);
+  --shine: #93c5fd;
   --rail-w: 58px;
   --per-row: 6;
   --font: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
@@ -29,7 +31,9 @@
   --soft: rgba(0, 0, 0, .05);
   --soft-2: rgba(0, 0, 0, .09);
   --glow-blue: rgba(59, 130, 246, .28);
-  --glow-orange: rgba(249, 115, 22, .2);
+  --glow-cyan: rgba(14, 165, 233, .18);
+  --glow-violet: rgba(124, 58, 237, .14);
+  --shine: #2563eb;
   color-scheme: light;
 }
 
@@ -63,8 +67,8 @@ kbd { font: 600 11px ui-monospace, Consolas, monospace; padding: 1px 6px; border
 .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
 .aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
 .aurora .a1 { width: 70vw; height: 26vh; left: 22vw; top: 8vh; background: var(--glow-blue); transform: rotate(-12deg); animation: drift 18s ease-in-out infinite alternate; }
-.aurora .a2 { width: 34vw; height: 20vh; right: -6vw; top: -6vh; background: var(--glow-orange); animation: drift 22s ease-in-out infinite alternate-reverse; }
-.aurora .a3 { width: 40vw; height: 18vh; left: 8vw; top: 26vh; background: color-mix(in srgb, var(--glow-blue) 55%, transparent); animation: drift 26s ease-in-out infinite alternate; }
+.aurora .a2 { width: 36vw; height: 22vh; right: -4vw; top: -4vh; background: var(--glow-cyan); animation: drift 22s ease-in-out infinite alternate-reverse; }
+.aurora .a3 { width: 42vw; height: 20vh; left: 6vw; top: 28vh; background: var(--glow-violet); animation: drift 26s ease-in-out infinite alternate; }
 @keyframes drift { from { translate: 0 0; } to { translate: 4vw 3vh; } }
 body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 
@@ -101,11 +105,36 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 
 /* ---------- Home ---------- */
 .home { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 12vh; }
+/* Animated logo: fades up on load, a light sweeps across it, and a soft blue glow breathes behind it */
+.wordmark, .boot-word {
+  background: linear-gradient(100deg, var(--text) 0%, var(--text) 42%, var(--shine) 50%, var(--text) 58%, var(--text) 100%);
+  background-size: 260% 100%;
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: shine 5.5s ease-in-out infinite, glow 4s ease-in-out infinite alternate;
+}
 .wordmark {
   margin: 0 0 30px; font-size: clamp(64px, 11vw, 150px); font-weight: 800; letter-spacing: -.055em; line-height: .9;
-  background: linear-gradient(180deg, var(--text) 55%, color-mix(in srgb, var(--text) 70%, transparent));
-  -webkit-background-clip: text; background-clip: text; color: transparent;
+  padding: 0 .04em .08em; /* room for the glow and descenders */
+  cursor: default; user-select: none;
+  /* layer 1: hover spotlight that follows the mouse (--mx/--my set in app.js); layer 2: the sweeping shine */
+  background-image:
+    radial-gradient(circle var(--spot, 0px) at var(--mx, 50%) var(--my, 50%), var(--shine), transparent 70%),
+    linear-gradient(100deg, var(--text) 0%, var(--text) 42%, var(--shine) 50%, var(--text) 58%, var(--text) 100%);
+  background-size: 100% 100%, 260% 100%;
+  background-repeat: no-repeat, repeat; /* the shine layer must repeat or the word loses its fill */
+  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
+  transition: transform .35s cubic-bezier(.2, .8, .2, 1), --spot .3s;
+  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both, shine2 5.5s ease-in-out 1s infinite, glow 4s ease-in-out infinite alternate;
+}
+.wordmark.hovering { transition: transform .12s ease-out; }
+@property --spot { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@keyframes shine { 0% { background-position: 100% 0; } 55%, 100% { background-position: -60% 0; } }
+@keyframes shine2 { 0% { background-position: 0 0, 100% 0; } 55%, 100% { background-position: 0 0, -60% 0; } }
+@keyframes glow {
+  from { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--shine) 20%, transparent)); }
+  to { filter: drop-shadow(0 0 42px color-mix(in srgb, var(--shine) 45%, transparent)); }
 }
+@keyframes rise { from { opacity: 0; translate: 0 14px; letter-spacing: -.02em; filter: blur(6px); } to { opacity: 1; translate: 0 0; } }
 .home-search {
   position: relative; width: min(640px, 100%); height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 22px;
   background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line-2); border-radius: 4px;
@@ -221,6 +250,61 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 .disguise .none-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 13px; }
 .disguise[aria-pressed="true"] { border-color: var(--text); background: var(--soft-2); box-shadow: inset 0 0 0 1px var(--text); }
 
+/* ---------- Chat ---------- */
+.chat { padding-top: 26px; padding-bottom: 40px; max-width: 820px; }
+.chat-box { border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 88%, transparent); display: flex; flex-direction: column; height: min(68vh, 640px); }
+.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
+.chat-msg { font-size: 14px; line-height: 1.4; word-wrap: break-word; }
+.chat-msg .who { font-weight: 700; margin-right: 6px; }
+.chat-msg .when { color: var(--muted); font-size: 11px; margin-left: 6px; }
+.chat-msg.me .who { text-decoration: underline; text-underline-offset: 3px; }
+.chat-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; }
+.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
+.chat-form input { height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--text); }
+.chat-name { width: 130px; flex: none; }
+.chat-text { flex: 1; min-width: 0; }
+.chat .pill-btn { color: var(--bg); background: var(--text); border-color: var(--text); height: 40px; padding: 0 18px; }
+.chat-note { margin: 0; padding: 0 12px 10px; min-height: 1.3em; color: var(--muted); font-size: 12px; }
+.chat-note.err { color: var(--danger); }
+.chat-off { margin: auto; text-align: center; color: var(--muted); padding: 30px; }
+.chat-off p { margin: 4px 0; }
+.chat-msg .mod { display: none; margin-left: 8px; border: 1px solid var(--line-2); background: var(--soft); color: var(--text); border-radius: 3px; font-size: 11px; padding: 1px 6px; }
+.chat-msg .mod:hover { background: color-mix(in srgb, var(--danger) 30%, transparent); }
+.chat-log.admin .chat-msg .mod { display: inline-block; }
+.chat-msg .badge-admin { color: #facc15; font-size: 11px; font-weight: 700; margin-right: 6px; }
+.admin-id { font: 12px ui-monospace, Consolas, monospace; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 4px; user-select: all; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
+@media (max-width: 720px) { .chat-name { width: 90px; } }
+
+/* ---------- Stats + achievements ---------- */
+.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
+.stat { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: var(--soft); }
+.stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.stat span { color: var(--muted); font-size: 12px; }
+.set-sub { margin: 4px 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
+.stat-top { list-style: none; margin: 0; padding: 0; }
+.stat-top li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
+.stat-top li span:last-child { color: var(--muted); font-size: 13px; white-space: nowrap; }
+.stat-top .muted { color: var(--muted); }
+.ach-count { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 8px; }
+.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
+.ach { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); opacity: .7; }
+.ach.got { opacity: 1; border-color: color-mix(in srgb, #facc15 55%, var(--line)); background: color-mix(in srgb, #facc15 8%, var(--soft)); }
+.ach-icon { font-size: 22px; line-height: 1; }
+.ach-body { display: grid; gap: 2px; min-width: 0; }
+.ach-body b { font-size: 13.5px; }
+.ach-body small { color: var(--muted); font-size: 11.5px; }
+.ach-done { color: #ca8a04 !important; }
+.ach-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 4px; }
+.ach-bar div { height: 100%; background: var(--text); }
+@media (max-width: 720px) { .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+.toast {
+  position: fixed; left: 50%; bottom: 22px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
+  padding: 12px 18px; border-radius: 8px; background: #111; color: #fff; border: 1px solid #facc15;
+  font-weight: 700; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5); transition: opacity .25s, transform .25s;
+}
+.toast.show { opacity: 1; transform: translate(-50%, 0); }
+
 /* ---------- Random game wheel ---------- */
 .wheel-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
 .wheel-card { position: relative; width: min(440px, 100%); text-align: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 20px 20px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
@@ -265,7 +349,10 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 .corner-links { position: fixed; right: 14px; bottom: 12px; z-index: 5; display: flex; gap: 8px; }
 .corner-links > span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--panel) 85%, transparent); font-size: 12px; color: var(--muted); }
 body.playing { overflow: hidden; }
-body:has(#view-games:not([hidden])) .corner-links { display: none; }
+body:has(#view-games:not([hidden])) .corner-links,
+body:has(#view-stats:not([hidden])) .corner-links,
+body:has(#view-settings:not([hidden])) .corner-links,
+body:has(#view-chat:not([hidden])) .corner-links { display: none; }
 
 /* ---------- Responsive ---------- */
 @media (max-width: 1100px) { .grid, .recent-row { grid-template-columns: repeat(min(var(--per-row), 4), minmax(0, 1fr)); } }
@@ -284,4 +371,4 @@ body:has(#view-games:not([hidden])) .corner-links { display: none; }
   .corner-links { display: none; }
   .clock { top: 8px; right: 8px; }
 }
-@media (prefers-reduced-motion: reduce) { .aurora span, .sweep::after { animation: none; } }
+@media (prefers-reduced-motion: reduce) { .aurora span, .sweep::after, .wordmark, .boot-word { animation: none; } }