@ywkrlerche/richardwho 1.0.28 → 1.0.29

package/app.js

@@ -287,6 +287,7 @@
     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.
@@ -358,6 +359,7 @@
   }
 
   function stopGame() {
+    stats.stopPlay();
     if (!currentLoad) return;
     currentLoad.controller.abort();
     currentLoad = null;
@@ -396,12 +398,14 @@
     document.body.classList.remove("playing");
     document.title = tabTitle();
     const h = location.hash;
-    const view = h === "#games" || h === "#recent" ? "games" : h === "#settings" ? "settings" : h === "#chat" ? "chat" : "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";
     $("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) =>
@@ -462,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>");
@@ -556,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();
@@ -612,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;
@@ -668,7 +825,7 @@
   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(); });
   }
@@ -939,6 +1096,7 @@
         [`chat/last/${chat.uid}`]: TS,
       });
       $("chat-text").value = "";
+      stats.bump("chatSent");
       chatNote("");
     } catch {
       chatNote("Message blocked (filtered word, or sending too fast).", true);
@@ -1076,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() {
@@ -1196,6 +1375,7 @@
     bind();
     bindSettings();
     bindWheel();
+    bindWordmark();
     $("chat-form").addEventListener("submit", sendChat);
     bindAdmin();
     startAnalytics();

package/index.html

@@ -49,6 +49,9 @@
       <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>
@@ -150,6 +153,32 @@
       </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>
@@ -208,8 +237,7 @@
 
       <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>
@@ -263,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.28",
+  "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;
@@ -246,6 +275,36 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
 .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); }
@@ -290,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)); } }
@@ -309,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; } }