mlv2boii 1.0.10 → 1.0.11

package/index.html

@@ -56,11 +56,11 @@
       radial-gradient(720px 520px at 8% 108%, rgba(240,26,54,0.06), transparent 70%); }
 
   /* ---------- liquid glass ---------- */
-  .glass { background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.04), 0 10px 32px rgba(0,0,0,0.45); }
+  .glass { background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 32px rgba(0,0,0,0.4); }
   .glass-sheet { background: rgba(28,28,31,0.55); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
   .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
-    background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.22));
+    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.09));
     -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
   .glass-lite { background: rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); }
   .glass-lite:hover { background: rgba(255,255,255,0.12); }
@@ -117,6 +117,32 @@
   .switch:checked::after { transform: translateX(18px); }
   .switch:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; }
 
+  /* ---------- top bar: same recipe as the game cards so it blends in ---------- */
+  .topbar { background: rgba(255,255,255,0.045); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
+  .topbar .field { background: rgba(255,255,255,0.05); }
+
+  /* ---------- settings + tabs ---------- */
+  .tab { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--color-ink-300); transition: background-color .2s, color .2s; }
+  .tab:hover { color: #fff; }
+  .tab[aria-selected="true"] { background: rgba(255,255,255,0.14); color: #fff; }
+  .shead { margin: 22px 4px 8px; font-size: 13px; font-weight: 600; color: var(--color-ink-300); }
+  .shead:first-child { margin-top: 6px; }
+  .sgroup { border-radius: 20px; padding: 2px 16px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
+  .srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; }
+  .srow.plain { cursor: default; }
+  .sgroup > .srow:last-child, .sgroup > div:last-child { border-bottom: 0; }
+  .opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; cursor: pointer; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
+  .opt:hover { background: rgba(255,255,255,0.08); }
+  .opt:has(input:checked) { background: rgba(240,26,54,0.16); box-shadow: inset 0 0 0 1.5px rgba(240,26,54,0.75); }
+  .opt:has(input:focus-visible), .pill-opt:has(input:focus-visible) { outline: 2px solid var(--color-red-400); outline-offset: 2px; }
+  .pill-opt { cursor: pointer; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--color-ink-200); }
+  .pill-opt span { display: block; padding: 7px 12px; border-radius: 999px; }
+  .pill-opt:has(input:checked) span { background: rgba(255,255,255,0.16); color: #fff; }
+  kbd { font-family: var(--font-mono); font-size: 13px; }
+  html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition-duration: 0.01ms !important; }
+  html.rm .tile-icon { transform: none; }
+
   /* ---------- motion ---------- */
   .w { display: inline-block; opacity: 0; }
   .glowwrap { display: inline-block; filter: drop-shadow(0 0 22px rgba(240,26,54,0.55)); }
@@ -164,6 +190,10 @@
 
 <div class="ambient" aria-hidden="true"></div>
 
+<button id="panic-btn" type="button" hidden aria-label="Panic: leave this page now" title="Panic: leave this page now" class="glass-lite icon-btn fixed bottom-4 left-4 z-[45] opacity-70 hover:opacity-100">
+  <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>
+</button>
+
 <!-- shared gradients for the hero shapes -->
 <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
   <radialGradient id="gP" cx=".35" cy=".25" r=".9"><stop offset="0" stop-color="#ffc0c7"/><stop offset=".38" stop-color="#ff3347"/><stop offset="1" stop-color="#b30d25"/></radialGradient>
@@ -174,7 +204,7 @@
 <!-- ================= HEADER ================= -->
 <header class="pointer-events-none sticky top-0 z-40 pt-[calc(env(safe-area-inset-top)+0.75rem)]">
   <div class="page-x mx-auto max-w-5xl">
-  <div class="glass pointer-events-auto relative flex h-14 items-center gap-4 rounded-full pl-5 pr-2">
+  <div class="topbar pointer-events-auto relative flex h-14 items-center gap-3 rounded-full pl-5 pr-2">
     <a href="#" class="flex shrink-0 items-center gap-2.5" aria-label="mlv2 home">
       <span class="orb"></span>
       <span class="text-[17px] font-semibold tracking-[-0.02em]">mlv2</span>
@@ -186,6 +216,15 @@
         <button id="search-clear" type="button" aria-label="Clear search" class="absolute right-1.5 top-1/2 hidden h-7 w-7 -translate-y-1/2 place-items-center rounded-full text-ink-300 hover:text-white"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
       </div>
     </div>
+    <div class="flex shrink-0 items-center gap-1.5">
+      <button id="bell-btn" type="button" hidden aria-label="Announcements" class="glass-lite icon-btn relative">
+        <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+        <span id="bell-dot" hidden class="absolute right-2 top-2 h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-[#111113]"></span>
+      </button>
+      <button id="settings-btn" type="button" aria-label="Settings" aria-haspopup="dialog" class="glass-lite icon-btn">
+        <svg class="h-[18px] w-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+      </button>
+    </div>
   </div>
   </div>
 </header>
@@ -266,6 +305,9 @@
           <p id="player-title" class="truncate text-[15px] font-semibold"></p>
         </div>
         <div class="flex shrink-0 items-center gap-2">
+          <button id="player-panic" type="button" hidden aria-label="Panic: leave this page now" title="Panic: leave this page now" class="glass-lite icon-btn">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>
+          </button>
           <button id="player-fs" type="button" title="Fullscreen" aria-label="Fullscreen" class="glass-lite icon-btn">
             <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
           </button>
@@ -286,10 +328,10 @@
 </div>
 
 <!-- ================= ADMIN: PIN GATE ================= -->
-<div id="admin-login-modal" class="fixed inset-0 z-50 hidden">
-  <div class="absolute inset-0 bg-black/50 backdrop-blur-md" data-admin-login-close></div>
-  <div class="absolute inset-0 flex items-center justify-center p-4">
-    <form id="admin-login-form" role="dialog" aria-modal="true" aria-labelledby="pin-title" class="glass glass-sheet relative w-full max-w-[340px] rounded-[28px] p-6 opacity-0" data-fx>
+<div id="admin-login-modal" data-nomask class="fixed inset-0 z-50 hidden">
+  <div data-backdrop="login" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
+  <div class="pointer-events-none absolute inset-0 flex items-center justify-center p-4">
+    <form id="admin-login-form" role="dialog" aria-modal="true" aria-labelledby="pin-title" class="glass glass-sheet pointer-events-auto relative w-full max-w-[340px] rounded-[28px] p-6 opacity-0" data-fx>
       <h2 id="pin-title" class="text-[19px] font-semibold">Enter PIN</h2>
       <p class="mt-1.5 text-pretty text-[14px] text-ink-400">This unlocks the admin screen on this device. Write access is controlled by your Appwrite permissions.</p>
       <div id="pin-boxes" role="group" aria-labelledby="pin-title" class="mt-5 grid grid-cols-6 gap-2"></div>
@@ -302,38 +344,144 @@
 </div>
 
 <!-- ================= ADMIN: PANEL ================= -->
-<div id="admin-panel" class="fixed inset-0 z-50 hidden">
-  <div id="admin-backdrop" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
-  <div class="absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
-    <div id="admin-panel-card" role="dialog" aria-modal="true" aria-labelledby="admin-title" class="glass glass-sheet relative flex h-full w-full flex-col opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px]">
-      <div class="flex shrink-0 items-center justify-between gap-3 border-b border-white/[0.08] px-5 pb-3 pt-[calc(env(safe-area-inset-top)+0.75rem)]">
+<div id="admin-panel" data-nomask class="fixed inset-0 z-50 hidden">
+  <div data-backdrop="admin" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
+  <div class="pointer-events-none absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
+    <div id="admin-panel-card" role="dialog" aria-modal="true" aria-labelledby="admin-title" class="glass glass-sheet pointer-events-auto relative flex h-full w-full flex-col opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px]">
+      <div class="flex shrink-0 items-center justify-between gap-3 px-5 pb-2 pt-[calc(env(safe-area-inset-top)+0.75rem)]">
         <div class="min-w-0">
-          <h2 id="admin-title" tabindex="-1" class="text-[17px] font-semibold leading-tight">Manage games</h2>
+          <h2 id="admin-title" tabindex="-1" class="text-[17px] font-semibold leading-tight">Admin</h2>
           <p id="admin-summary" class="mt-0.5 text-[13px] text-ink-300"></p>
         </div>
         <div class="flex shrink-0 items-center gap-2">
           <button id="admin-logout" type="button" class="btn btn-ghost">Lock</button>
-          <button id="admin-close" type="button" aria-label="Close" class="glass-lite icon-btn">
-            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
-          </button>
+          <button id="admin-close" type="button" aria-label="Close" class="glass-lite icon-btn"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
         </div>
       </div>
-      <div class="flex shrink-0 gap-2 px-5 pt-4">
-        <div class="min-w-0 flex-1">
-          <label for="admin-filter" class="sr-only">Filter games</label>
-          <input id="admin-filter" type="search" placeholder="Filter games" autocomplete="off" class="field" />
+      <div id="admin-tabs" role="tablist" aria-label="Admin sections" class="flex shrink-0 gap-1 border-b border-white/[0.08] px-5 pb-3">
+        <button id="atab-games" role="tab" type="button" aria-selected="true" aria-controls="admin-tab-games" data-atab="games" class="tab">Games</button>
+        <button id="atab-ann" role="tab" type="button" aria-selected="false" tabindex="-1" aria-controls="admin-tab-ann" data-atab="ann" class="tab">Announcements</button>
+      </div>
+
+      <div id="admin-tab-games" role="tabpanel" aria-labelledby="atab-games" class="flex min-h-0 flex-1 flex-col">
+        <div class="flex shrink-0 gap-2 px-5 pt-4">
+          <div class="min-w-0 flex-1">
+            <label for="admin-filter" class="sr-only">Filter games</label>
+            <input id="admin-filter" type="search" placeholder="Filter games" autocomplete="off" class="field" />
+          </div>
+          <button id="admin-add" type="button" class="btn btn-primary shrink-0">Add game</button>
+        </div>
+        <div id="admin-body" class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          <div id="admin-form-slot"></div>
+          <ul id="admin-list" class="space-y-2" aria-label="Games"></ul>
         </div>
-        <button id="admin-add" type="button" class="btn btn-primary shrink-0">Add game</button>
       </div>
-      <div id="admin-body" class="flex-1 overflow-y-auto px-5 py-4">
-        <div id="admin-form-slot"></div>
-        <ul id="admin-list" class="space-y-2" aria-label="Games"></ul>
+
+      <div id="admin-tab-ann" role="tabpanel" aria-labelledby="atab-ann" hidden class="flex min-h-0 flex-1 flex-col">
+        <div class="flex shrink-0 items-center justify-between gap-3 px-5 pt-4">
+          <p class="text-[13px] text-ink-300">Shown to visitors when they open the site.</p>
+          <button id="ann-add" type="button" class="btn btn-primary shrink-0">New announcement</button>
+        </div>
+        <div id="ann-admin-body" class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          <div id="ann-form-slot"></div>
+          <ul id="ann-admin-list" class="space-y-2" aria-label="Announcements"></ul>
+        </div>
       </div>
       <p id="admin-live" role="status" class="sr-only"></p>
     </div>
   </div>
 </div>
 
+<!-- ================= ANNOUNCEMENTS ================= -->
+<div id="ann-modal" class="fixed inset-0 z-50 hidden">
+  <div data-backdrop="ann" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
+  <div class="pointer-events-none absolute inset-0 flex items-center justify-center p-4">
+    <div id="ann-card" role="dialog" aria-modal="true" aria-labelledby="ann-title" class="glass glass-sheet pointer-events-auto relative flex max-h-[85vh] w-full max-w-[480px] flex-col rounded-[32px] opacity-0">
+      <div class="flex shrink-0 items-center justify-between gap-3 px-6 pb-1 pt-5">
+        <h2 id="ann-title" tabindex="-1" class="text-[19px] font-semibold">Announcements</h2>
+        <button id="ann-close" type="button" aria-label="Close" class="glass-lite icon-btn"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+      </div>
+      <div id="ann-list" class="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 pb-2 pt-3"></div>
+      <div class="shrink-0 px-4 pb-4 pt-2"><button id="ann-done" type="button" class="btn btn-primary w-full">Got it</button></div>
+    </div>
+  </div>
+</div>
+
+<!-- ================= SETTINGS ================= -->
+<div id="settings-modal" data-nomask class="fixed inset-0 z-50 hidden">
+  <div data-backdrop="settings" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
+  <div class="pointer-events-none absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
+    <div id="settings-card" role="dialog" aria-modal="true" aria-labelledby="settings-title" class="glass glass-sheet pointer-events-auto relative flex h-full w-full flex-col opacity-0 sm:h-[82vh] sm:max-w-xl sm:rounded-[32px]">
+      <div class="flex shrink-0 items-center justify-between gap-3 px-5 pb-2 pt-[calc(env(safe-area-inset-top)+0.9rem)]">
+        <h2 id="settings-title" tabindex="-1" class="text-[19px] font-semibold">Settings</h2>
+        <button id="settings-close" type="button" aria-label="Close" class="glass-lite icon-btn"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
+      </div>
+      <div id="settings-tabs" role="tablist" aria-label="Settings sections" class="flex shrink-0 gap-1 px-5 pb-3">
+        <button id="stab-general" role="tab" type="button" aria-selected="true" aria-controls="spanel-general" class="tab">General</button>
+        <button id="stab-cloak" role="tab" type="button" aria-selected="false" tabindex="-1" aria-controls="spanel-cloak" class="tab">Cloak</button>
+        <button id="stab-data" role="tab" type="button" aria-selected="false" tabindex="-1" aria-controls="spanel-data" class="tab">Data</button>
+      </div>
+      <div class="min-h-0 flex-1 overflow-y-auto px-5 pb-8">
+
+        <section id="spanel-general" role="tabpanel" aria-labelledby="stab-general">
+          <h3 class="shead">Experience</h3>
+          <div class="sgroup">
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Show announcements when I open the site</span><span class="mt-0.5 block text-[13px] text-ink-300">You can always reopen them with the bell in the top bar.</span></span><input id="set-announce" type="checkbox" role="switch" class="switch" /></label>
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Reduce motion</span><span class="mt-0.5 block text-[13px] text-ink-300">Turns off animations. Already on if your device asks for it.</span></span><input id="set-reduce" type="checkbox" role="switch" class="switch" /></label>
+            <div class="srow plain"><span id="tile-label" class="text-[15px] font-medium">Tile size</span><div role="radiogroup" aria-labelledby="tile-label" class="flex shrink-0 gap-1"><label class="pill-opt"><input type="radio" name="tile" value="compact" class="sr-only" /><span>Compact</span></label><label class="pill-opt"><input type="radio" name="tile" value="default" class="sr-only" /><span>Default</span></label><label class="pill-opt"><input type="radio" name="tile" value="large" class="sr-only" /><span>Large</span></label></div></div>
+          </div>
+          <h3 class="shead">Admin</h3>
+          <div class="sgroup"><div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Admin panel</span><span class="mt-0.5 block text-[13px] text-ink-300">Add games, post announcements and change the order.</span></span><button id="open-admin" type="button" class="btn btn-ghost shrink-0">Open</button></div></div>
+        </section>
+
+        <section id="spanel-cloak" role="tabpanel" aria-labelledby="stab-cloak" hidden>
+          <h3 class="shead">Tab disguise</h3>
+          <p class="mb-3 px-1 text-[13px] text-ink-300">Changes the tab's title and icon so it looks like something else.</p>
+          <div id="cloak-options" role="radiogroup" aria-label="Tab disguise" class="grid gap-2"></div>
+          <div id="custom-cloak" hidden class="mt-3 space-y-3">
+            <div><label for="cc-title" class="text-[13px] font-medium text-ink-200">Tab title</label><input id="cc-title" maxlength="80" autocomplete="off" class="field mt-1.5" /></div>
+            <div><label for="cc-icon" class="text-[13px] font-medium text-ink-200">Icon link <span class="font-normal text-ink-300">(optional)</span></label><input id="cc-icon" type="url" inputmode="url" autocomplete="off" spellcheck="false" placeholder="https://" class="field mt-1.5" /></div>
+          </div>
+
+          <h3 class="shead">Panic button</h3>
+          <div class="sgroup">
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Enable panic button</span><span class="mt-0.5 block text-[13px] text-ink-300">Instantly leaves this page and opens the site below.</span></span><input id="panic-on" type="checkbox" role="switch" class="switch" /></label>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Shortcut</span><span class="mt-0.5 block text-[13px] text-ink-300"><span id="panic-key-hint">Works while this page has focus, not inside a game.</span></span></span><button id="panic-key" type="button" aria-describedby="panic-key-hint" class="btn btn-ghost shrink-0"></button></div>
+            <div class="py-3.5"><label for="panic-url" class="block text-[15px] font-medium">Go to</label><input id="panic-url" type="url" inputmode="url" autocomplete="off" spellcheck="false" aria-describedby="panic-url-err" class="field mt-1.5" /><p id="panic-url-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p></div>
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Show an on-screen button</span><span class="mt-0.5 block text-[13px] text-ink-300">A small button in the corner and in the game window, for phones or when a game has focus.</span></span><input id="panic-btn-on" type="checkbox" role="switch" class="switch" /></label>
+          </div>
+
+          <h3 class="shead">Privacy</h3>
+          <div class="sgroup">
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Mask text</span><span class="mt-0.5 block text-[13px] text-ink-300">Swaps letters for look-alike characters so on-screen keyword scanners can't read them. Screen readers may read masked text oddly.</span></span><input id="set-mask" type="checkbox" role="switch" class="switch" /></label>
+            <label class="srow"><span class="min-w-0"><span class="block text-[15px] font-medium">Ask before closing this tab</span><span class="mt-0.5 block text-[13px] text-ink-300">Shows your browser's “leave site?” prompt so you don't close it by accident.</span></span><input id="set-confirm" type="checkbox" role="switch" class="switch" /></label>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Open in about:blank</span><span class="mt-0.5 block text-[13px] text-ink-300">Opens the site in a blank tab and sends this tab to your panic page.</span></span><button id="launch-blank" type="button" class="btn btn-ghost shrink-0">Open</button></div>
+          </div>
+        </section>
+
+        <section id="spanel-data" role="tabpanel" aria-labelledby="stab-data" hidden>
+          <h3 class="shead">Your settings</h3>
+          <div class="sgroup">
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Export settings</span><span class="mt-0.5 block text-[13px] text-ink-300">Save your settings to a file.</span></span><button id="export-settings" type="button" class="btn btn-ghost shrink-0">Export</button></div>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Import settings</span><span class="mt-0.5 block text-[13px] text-ink-300">Load settings from a file you exported.</span></span><button id="import-settings-btn" type="button" class="btn btn-ghost shrink-0">Import</button><input id="import-settings" type="file" accept="application/json,.json" tabindex="-1" aria-label="Settings file" class="sr-only" /></div>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Show announcements again</span><span class="mt-0.5 block text-[13px] text-ink-300">Forget which announcements you've already seen.</span></span><button id="reset-seen" type="button" class="btn btn-ghost shrink-0">Reset</button></div>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Reset settings</span><span class="mt-0.5 block text-[13px] text-ink-300">Put every setting back to its default.</span></span><button id="reset-settings" type="button" class="btn btn-ghost shrink-0">Reset</button></div>
+          </div>
+
+          <h3 class="shead">Game library</h3>
+          <p id="lib-lock" class="mb-3 px-1 text-[13px] text-ink-300">Admin only. Unlock the admin panel to back up or restore your games.</p>
+          <div class="sgroup">
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Export games</span><span class="mt-0.5 block text-[13px] text-ink-300">Download every game as a file.</span></span><button id="export-games" type="button" class="btn btn-ghost shrink-0">Export</button></div>
+            <div class="srow plain"><span class="min-w-0"><span class="block text-[15px] font-medium">Import games</span><span class="mt-0.5 block text-[13px] text-ink-300">Add games from an export. Duplicates are skipped.</span></span><button id="import-games-btn" type="button" class="btn btn-ghost shrink-0">Choose file</button><input id="import-games" type="file" accept="application/json,.json" tabindex="-1" aria-label="Games file" class="sr-only" /></div>
+          </div>
+          <p id="lib-status" role="status" class="mt-3 px-1 text-[13px] text-ink-200"></p>
+          <div class="mt-3 flex gap-2"><button id="import-games-go" type="button" hidden class="btn btn-primary"></button><button id="unlock-admin" type="button" hidden class="btn btn-ghost">Unlock admin</button></div>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div id="toast-root" role="status" aria-live="polite" class="pointer-events-none fixed inset-x-0 bottom-4 z-[60] flex flex-col items-center gap-2 px-4 pb-[env(safe-area-inset-bottom)]"></div>
 
 <script src="https://cdn.jsdelivr.net/npm/appwrite@26.2.0"></script>
@@ -346,6 +494,8 @@ const CONFIG = {
   databaseId: "6a9b8b23003de0ec5cf7",
   gamesTableId: "6a9b8bb3000013a3fd80",
   iconsBucketId: "6a9b8b36002565ac5987",
+  // Announcements need their own table in the same database. Paste its ID here (see Admin > Announcements for the columns).
+  announcementsTableId: "",
 };
 
 const ADMIN_PIN = "051511";
@@ -360,7 +510,51 @@ const storage = new Storage(client);
 const isConfigured = () =>
   !CONFIG.endpoint.includes("YOUR_") && !CONFIG.projectId.includes("YOUR_") && !CONFIG.databaseId.includes("YOUR_");
 
-const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+/* ------------------------------ settings model ------------------------------ */
+const SETTINGS_KEY = "mlv2_settings";
+const isHttp = (v) => { try { const p = new URL(v).protocol; return p === "http:" || p === "https:"; } catch { return false; } };
+const ico = (svg) => "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">${svg}</svg>`);
+const SIZES = {
+  compact: "grid-cols-4 sm:grid-cols-6 md:grid-cols-7 lg:grid-cols-8",
+  default: "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6",
+  large: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+};
+const CLOAKS = {
+  off: { label: "Off", sub: "Show the normal mlv2 tab", title: null, icon: null },
+  classroom: { label: "Google Classroom", sub: "Tab reads “Classes”", title: "Classes",
+    icon: ico('<rect width="32" height="32" rx="7" fill="#1e8e3e"/><rect x="6" y="9" width="20" height="14" rx="2" fill="#fff"/><circle cx="16" cy="16" r="3" fill="#1e8e3e"/><path d="M10 26h12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>') },
+  ixl: { label: "IXL", sub: "Tab reads “IXL | Math, Language Arts, Science…”", title: "IXL | Math, Language Arts, Science, Social Studies, and Spanish",
+    icon: ico('<rect width="32" height="32" rx="7" fill="#fff"/><text x="16" y="21" font-family="Arial,sans-serif" font-size="12" font-weight="800" text-anchor="middle" fill="#0a74da">IXL</text>') },
+  github: { label: "GitHub", sub: "Tab reads “GitHub”", title: "GitHub",
+    icon: ico('<rect width="32" height="32" rx="16" fill="#0d1117"/><g transform="translate(4 4) scale(1.5)"><path fill="#fff" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></g>') },
+  blank: { label: "Blank", sub: "No visible title or icon", title: "\u00A0", icon: ico("") },
+  custom: { label: "Custom", sub: "Pick your own title and icon", title: null, icon: null },
+};
+const DEFAULTS = {
+  announceOnOpen: true, reduceMotion: false, tileSize: "default",
+  cloak: "off", customTitle: "", customIcon: "", maskText: false, confirmClose: false,
+  panic: { enabled: false, key: "`", url: "https://classroom.google.com", button: false },
+};
+function mergeSettings(base, src) {
+  const out = JSON.parse(JSON.stringify(base));
+  if (!src || typeof src !== "object") return out;
+  for (const k of Object.keys(base)) {
+    if (k === "panic") {
+      const p = src.panic && typeof src.panic === "object" ? src.panic : {};
+      for (const pk of Object.keys(base.panic)) if (typeof p[pk] === typeof base.panic[pk]) out.panic[pk] = p[pk];
+    } else if (typeof src[k] === typeof base[k]) out[k] = src[k];
+  }
+  if (!CLOAKS[out.cloak]) out.cloak = "off";
+  if (!SIZES[out.tileSize]) out.tileSize = "default";
+  if (!out.panic.key) out.panic.key = DEFAULTS.panic.key;
+  return out;
+}
+function loadSettings() { try { return mergeSettings(DEFAULTS, JSON.parse(localStorage.getItem(SETTINGS_KEY))); } catch { return mergeSettings(DEFAULTS, null); } }
+function saveSettings() { try { localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings)); } catch { /* storage blocked */ } }
+let settings = loadSettings();
+const sysReduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+let reduceMotion = sysReduce || settings.reduceMotion;
+
 function fx(targets, keyframes, options = {}) {
   if (reduceMotion) options = { ...options, duration: 0, delay: 0 };
   return animate(targets, keyframes, options);
@@ -584,7 +778,7 @@ el("retry").addEventListener("click", () => {
 /* ------------------------------- dialogs ------------------------------- */
 const isHidden = (id) => el(id).classList.contains("hidden");
 let opener = null;
-function lockBg(on) { document.querySelectorAll("body > header, body > main, body > footer").forEach((n) => n.toggleAttribute("inert", on)); }
+function lockBg(on) { document.querySelectorAll("body > header, body > main, body > footer, body > #panic-btn").forEach((n) => n.toggleAttribute("inert", on)); }
 function beginDialog() { opener = document.activeElement; lockBg(true); }
 function endDialog() { lockBg(false); if (opener && document.contains(opener)) opener.focus(); opener = null; }
 const focusSoon = (node) => requestAnimationFrame(() => node && node.focus());
@@ -593,12 +787,10 @@ document.addEventListener("keydown", (e) => {
   if (e.key === "Escape") {
     if (!isHidden("player-modal")) closePlayer();
     else if (!isHidden("admin-login-modal")) closeAdminLogin();
-    else if (!isHidden("admin-panel")) {
-      if (confirmingId) { const id = confirmingId; confirmingId = null; renderAdmin([`[data-act="delete"][data-id="${id}"]`]); }
-      else if (editingId) cancelForm();
-      else closeAdminPanel();
-    }
-  } else if (e.key === "/" && !e.ctrlKey && !e.metaKey && !e.altKey && isHidden("player-modal") && isHidden("admin-login-modal") && isHidden("admin-panel")
+    else if (!isHidden("settings-modal")) closeSettings();
+    else if (!isHidden("ann-modal")) closeAnnouncements();
+    else if (!isHidden("admin-panel")) escapeAdmin();
+  } else if (e.key === "/" && !e.ctrlKey && !e.metaKey && !e.altKey && allClosed()
     && !/^(INPUT|TEXTAREA|SELECT)$/.test(document.activeElement?.tagName || "")) {
     e.preventDefault();
     el("search").focus();
@@ -702,7 +894,6 @@ let editingId = null, confirmingId = null, adminFilter = "", previewUrl = null;
 
 const byOrder = (a, b) => (a.order ?? 0) - (b.order ?? 0);
 const hostOf = (u) => { try { return new URL(u).hostname.replace(/^www\./, ""); } catch { return u; } };
-const isHttp = (v) => { try { const p = new URL(v).protocol; return p === "http:" || p === "https:"; } catch { return false; } };
 const sr = (t) => `<span class="sr-only">${escapeHtml(t)}</span>`;
 const rowIcon = (g) => iconSrcFor(g) || monogramSrc(g.name);
 const adminSay = (msg) => { const n = el("admin-live"); n.textContent = ""; setTimeout(() => (n.textContent = msg), 60); };
@@ -711,6 +902,8 @@ const dbArgs = { databaseId: CONFIG.databaseId, tableId: CONFIG.gamesTableId };
 function openAdminPanel() {
   beginDialog();
   editingId = null; confirmingId = null; adminFilter = ""; el("admin-filter").value = "";
+  annEditing = null; annConfirming = null; annLoaded = false; dirtyWarned = false; dirty.games = dirty.ann = false;
+  selectAdminTab("atab-games");
   el("admin-panel").classList.remove("hidden");
   pop("#admin-panel-card", { y: 24, scale: 0.97, stiff: 300, damp: 28 });
   focusSoon(el("admin-title"));
@@ -718,7 +911,6 @@ function openAdminPanel() {
 }
 function closeAdminPanel() { el("admin-panel").classList.add("hidden"); endDialog(); }
 el("admin-close").addEventListener("click", closeAdminPanel);
-el("admin-backdrop").addEventListener("click", () => { if (!editingId) closeAdminPanel(); });
 el("admin-logout").addEventListener("click", () => {
   sessionStorage.removeItem(ADMIN_SESSION_KEY);
   closeAdminPanel();
@@ -829,8 +1021,9 @@ function rowHtml(g, idx, canMove) {
 }
 
 function renderAdmin(focusSels = []) {
+  dirty.games = false;
   el("admin-form-slot").innerHTML = editingId === "new" ? formHtml(null) : "";
-  const list = el("admin-list"), sum = el("admin-summary");
+  const list = el("admin-list"), sum = gamesSum;
   el("admin-add").disabled = !!editingId;
   el("admin-filter").disabled = !!editingId;
   if (adminState === "loading") { sum.textContent = ""; list.innerHTML = `<li class="py-8 text-center text-[14px] text-ink-300">Loading games…</li>`; return; }
@@ -1019,6 +1212,664 @@ async function deleteGame(id) {
   }
 }
 
+/* ============================ dialogs: shared helpers ============================ */
+const allClosed = () => ["player-modal", "admin-login-modal", "admin-panel", "settings-modal", "ann-modal"].every(isHidden);
+function openModal(id, card, focusId) {
+  beginDialog();
+  el(id).classList.remove("hidden");
+  pop("#" + card, { y: 18, scale: 0.95, stiff: 320, damp: 26 });
+  focusSoon(el(focusId));
+}
+function closeModal(id) { el(id).classList.add("hidden"); endDialog(); }
+
+// Click (or tap) on the dimmed area outside a dialog closes it. Both the press and the release must land on the backdrop,
+// so dragging a text selection out of a dialog never closes it.
+let pressedEl = null;
+document.addEventListener("pointerdown", (e) => { pressedEl = e.target; }, true);
+const BACKDROPS = { login: () => closeAdminLogin(), admin: () => tryCloseAdmin(), settings: () => closeSettings(), ann: () => closeAnnouncements() };
+document.querySelectorAll("[data-backdrop]").forEach((b) =>
+  b.addEventListener("click", (e) => { if (e.target === b && pressedEl === b) BACKDROPS[b.dataset.backdrop](); })
+);
+
+/* ============================ tabs (settings + admin) ============================ */
+function wireTabs(list, onSelect) {
+  const tabs = [...list.querySelectorAll('[role="tab"]')];
+  const activate = (t, focus) => {
+    tabs.forEach((x) => {
+      const on = x === t;
+      x.setAttribute("aria-selected", String(on));
+      x.tabIndex = on ? 0 : -1;
+      document.getElementById(x.getAttribute("aria-controls")).hidden = !on;
+    });
+    if (focus) t.focus();
+    onSelect?.(t);
+  };
+  tabs.forEach((t) => t.addEventListener("click", () => activate(t)));
+  list.addEventListener("keydown", (e) => {
+    const i = tabs.indexOf(document.activeElement);
+    if (i < 0) return;
+    let n = -1;
+    if (e.key === "ArrowRight") n = (i + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") n = (i - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") n = 0;
+    else if (e.key === "End") n = tabs.length - 1;
+    if (n >= 0) { e.preventDefault(); activate(tabs[n], true); }
+  });
+  return (id) => activate(tabs.find((t) => t.id === id));
+}
+
+/* ============================ admin: tabs, unsaved-changes guard ============================ */
+let adminTab = "games", annLoaded = false, annEditing = null, annConfirming = null, dirtyWarned = false;
+const dirty = { games: false, ann: false };
+const adminSummaries = { games: "", ann: "" };
+function setSummary(tab, text) { adminSummaries[tab] = text; if (tab === adminTab) el("admin-summary").textContent = text; }
+const gamesSum = { set textContent(v) { setSummary("games", v); } };
+const selectAdminTab = wireTabs(el("admin-tabs"), (t) => {
+  adminTab = t.dataset.atab;
+  el("admin-summary").textContent = adminSummaries[adminTab];
+  if (adminTab === "ann" && !annLoaded) { annLoaded = true; loadAnnAdmin(); }
+});
+for (const evt of ["input", "change"]) {
+  el("admin-panel-card").addEventListener(evt, (e) => { if (e.target.closest?.("form")) { dirty[adminTab] = true; dirtyWarned = false; } });
+}
+function tryCloseAdmin() {
+  if (dirty[adminTab] && !dirtyWarned) {
+    dirtyWarned = true;
+    if (!reduceMotion) animate("#admin-panel-card", { x: [0, -8, 8, -5, 5, 0] }, { duration: 0.35 });
+    toast("You have unsaved changes. Click outside again to discard them.");
+    return;
+  }
+  dirtyWarned = false;
+  closeAdminPanel();
+}
+function escapeAdmin() {
+  if (adminTab === "ann") {
+    if (annConfirming) { const id = annConfirming; annConfirming = null; renderAnnAdmin([`[data-aact="delete"][data-id="${id}"]`]); }
+    else if (annEditing) cancelAnnForm();
+    else closeAdminPanel();
+  } else if (confirmingId) { const id = confirmingId; confirmingId = null; renderAdmin([`[data-act="delete"][data-id="${id}"]`]); }
+  else if (editingId) cancelForm();
+  else closeAdminPanel();
+}
+
+/* ============================ announcements: visitors ============================ */
+const SEEN_KEY = "mlv2_seen_announcements";
+const getSeen = () => { try { const v = JSON.parse(localStorage.getItem(SEEN_KEY)); return Array.isArray(v) ? v : []; } catch { return []; } };
+const markSeen = (ids) => { try { localStorage.setItem(SEEN_KEY, JSON.stringify([...new Set([...getSeen(), ...ids])].slice(-200))); } catch { /* storage blocked */ } };
+let announcements = [], annShown = [], annAutoShown = false;
+const fmtDate = (iso) => new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+const annImage = (a) => (a.imageFileId ? String(storage.getFileView({ bucketId: CONFIG.iconsBucketId, fileId: a.imageFileId })) : a.imageUrl || "");
+
+function annCard(a) {
+  const img = annImage(a);
+  return `<article class="rounded-[28px] bg-white/[0.06] p-2 ring-1 ring-inset ring-white/10">
+    ${img ? `<img src="${escapeHtml(img)}" alt="" loading="lazy" class="aspect-[16/9] w-full rounded-[20px] object-cover" onerror="this.remove()" />` : ""}
+    <div class="px-3.5 pb-3 pt-3">
+      <h3 class="text-[17px] font-bold leading-snug">${escapeHtml(a.title)} <span aria-hidden="true">•</span> <time datetime="${escapeHtml(a.$createdAt)}">${escapeHtml(fmtDate(a.$createdAt))}</time></h3>
+      ${a.content ? `<p class="mt-1 whitespace-pre-line break-words text-[15px] leading-relaxed text-ink-100">${escapeHtml(a.content)}</p>` : ""}
+    </div>
+  </article>`;
+}
+function refreshBell() {
+  const seen = getSeen();
+  const unseen = announcements.filter((a) => !seen.includes(a.$id)).length;
+  el("bell-btn").hidden = announcements.length === 0;
+  el("bell-dot").hidden = unseen === 0;
+  el("bell-btn").setAttribute("aria-label", unseen ? `Announcements (${unseen} new)` : "Announcements");
+}
+function openAnnouncements(list) {
+  if (!list.length) return;
+  annShown = list;
+  el("ann-list").innerHTML = list.map(annCard).join("");
+  el("ann-list").scrollTop = 0;
+  openModal("ann-modal", "ann-card", "ann-title");
+}
+function closeAnnouncements() {
+  markSeen(annShown.map((a) => a.$id));
+  annShown = [];
+  closeModal("ann-modal");
+  refreshBell();
+}
+async function loadAnnouncements() {
+  if (!CONFIG.announcementsTableId) return;
+  try {
+    const res = await tablesDB.listRows({ databaseId: CONFIG.databaseId, tableId: CONFIG.announcementsTableId, queries: [Query.limit(20), Query.orderDesc("$createdAt")] });
+    announcements = res.rows.filter((a) => a.enabled !== false && a.title);
+  } catch (err) { console.warn("Announcements unavailable:", err); return; }
+  refreshBell();
+  const seen = getSeen();
+  const unseen = announcements.filter((a) => !seen.includes(a.$id));
+  if (settings.announceOnOpen && unseen.length && !annAutoShown) {
+    annAutoShown = true;
+    setTimeout(() => { if (allClosed()) openAnnouncements(unseen); }, 900);
+  }
+}
+el("bell-btn").addEventListener("click", () => openAnnouncements(announcements));
+el("ann-close").addEventListener("click", closeAnnouncements);
+el("ann-done").addEventListener("click", closeAnnouncements);
+
+/* ============================ announcements: admin ============================ */
+let annRows = [], annState = "idle", annError = "", annPreviewUrl = null;
+const annTable = () => ({ databaseId: CONFIG.databaseId, tableId: CONFIG.announcementsTableId });
+
+async function loadAnnAdmin() {
+  if (!CONFIG.announcementsTableId) { annState = "unconfigured"; renderAnnAdmin(); return; }
+  annState = "loading";
+  renderAnnAdmin();
+  try {
+    const res = await tablesDB.listRows({ ...annTable(), queries: [Query.limit(100), Query.orderDesc("$createdAt")] });
+    annRows = res.rows;
+    annState = "ready";
+  } catch (err) { annState = "error"; annError = err?.message || "Couldn't load announcements."; }
+  renderAnnAdmin();
+}
+
+function annFormHtml(a) {
+  const v = (x) => escapeHtml(x ?? "");
+  const base = a ? escapeHtml(annImage(a)) : "";
+  const hasImg = !!(a && (a.imageFileId || a.imageUrl));
+  return `<form id="ann-form" novalidate aria-labelledby="ann-form-title" class="glass-lite mb-4 rounded-2xl p-4">
+    <h3 id="ann-form-title" class="text-[16px] font-semibold">${a ? "Edit announcement" : "New announcement"}</h3>
+    <div class="mt-4 space-y-4">
+      <div>
+        <label for="af-title" class="text-[13px] font-medium text-ink-200">Title</label>
+        <input id="af-title" maxlength="120" autocomplete="off" aria-describedby="af-title-err" value="${v(a?.title)}" class="field mt-1.5" />
+        <p id="af-title-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+      </div>
+      <div>
+        <label for="af-content" class="text-[13px] font-medium text-ink-200">Message <span class="font-normal text-ink-300">(optional)</span></label>
+        <textarea id="af-content" rows="4" maxlength="2000" class="field mt-1.5 min-h-[104px] py-2.5 leading-relaxed" style="height:auto">${v(a?.content)}</textarea>
+      </div>
+      <fieldset class="min-w-0">
+        <legend class="text-[13px] font-medium text-ink-200">Image <span class="font-normal text-ink-300">(optional)</span></legend>
+        <img id="af-preview" src="${base}" data-base="${base}" alt="Image preview" ${base ? "" : "hidden"} class="mt-2 aspect-[16/9] w-full max-w-sm rounded-xl object-cover" onerror="this.hidden=true" />
+        <div class="mt-3 grid gap-3">
+          <div>
+            <label for="af-file" class="text-[13px] text-ink-300">Upload an image</label>
+            <input id="af-file" type="file" accept="image/*" aria-describedby="af-file-err" class="mt-1.5 w-full text-[13px] text-ink-300 file:mr-3 file:rounded-full file:border-0 file:bg-white/10 file:px-3.5 file:py-1.5 file:text-[13px] file:font-medium file:text-ink-50" />
+            <p id="af-file-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+          </div>
+          <div>
+            <label for="af-imgurl" class="text-[13px] text-ink-300">…or paste an image link</label>
+            <input id="af-imgurl" type="url" inputmode="url" autocomplete="off" spellcheck="false" placeholder="https://" aria-describedby="af-imgurl-err" value="${v(a?.imageUrl)}" class="field mt-1.5" />
+            <p id="af-imgurl-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+          </div>
+          ${hasImg ? `<label class="flex items-center gap-2 text-[13px] text-ink-200"><input id="af-remove" type="checkbox" class="h-4 w-4 accent-red-500" /> Remove the current image</label>` : ""}
+        </div>
+      </fieldset>
+      <label class="flex cursor-pointer items-center gap-3 text-[14px]"><input id="af-enabled" type="checkbox" role="switch" class="switch" ${a?.enabled === false ? "" : "checked"} /> Published (visible to visitors)</label>
+    </div>
+    <div class="mt-5 flex flex-wrap items-center gap-2">
+      <button type="submit" id="af-submit" class="btn btn-primary">${a ? "Save changes" : "Publish"}</button>
+      <button type="button" data-aact="cancel-form" class="btn btn-ghost">Cancel</button>
+    </div>
+  </form>`;
+}
+
+function annRowHtml(a) {
+  if (annEditing === a.$id) return `<li>${annFormHtml(a)}</li>`;
+  const n = escapeHtml(a.title), off = a.enabled === false, dis = annEditing ? "disabled" : "";
+  const snippet = escapeHtml((a.content || "").replace(/\s+/g, " ").slice(0, 70));
+  const actions = annConfirming === a.$id
+    ? `<div role="group" aria-label="Confirm delete" class="mt-3 rounded-xl bg-red-500/10 p-3 ring-1 ring-red-500/30">
+        <p class="text-[14px]">Delete <strong>${n}</strong>? This can't be undone.</p>
+        <div class="mt-3 flex gap-2">
+          <button type="button" id="ann-cancel-delete" data-aact="cancel-delete" data-id="${a.$id}" class="btn btn-ghost">Cancel</button>
+          <button type="button" data-aact="confirm-delete" data-id="${a.$id}" class="btn btn-danger">Delete</button>
+        </div>
+      </div>`
+    : `<div class="mt-3 flex flex-wrap items-center gap-2">
+        <button type="button" data-aact="edit" data-id="${a.$id}" ${dis} class="btn btn-ghost">Edit${sr(" " + a.title)}</button>
+        <button type="button" data-aact="delete" data-id="${a.$id}" ${dis} class="btn btn-ghost ml-auto hover:!text-red-300">Delete${sr(" " + a.title)}</button>
+      </div>`;
+  return `<li class="glass-lite rounded-2xl p-3">
+    <div class="flex items-center gap-3">
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-[15px] font-medium">${n}${off ? '<span class="tag">Draft</span>' : ""}</p>
+        <p class="truncate text-[13px] text-ink-300">${escapeHtml(fmtDate(a.$createdAt))}${snippet ? " · " + snippet : ""}</p>
+      </div>
+      <label class="flex shrink-0 cursor-pointer items-center gap-2 text-[13px] text-ink-200">
+        <input type="checkbox" role="switch" class="switch" data-atoggle="${a.$id}" ${off ? "" : "checked"} ${dis} />
+        <span>Published${sr(": " + a.title)}</span>
+      </label>
+    </div>
+    ${actions}
+  </li>`;
+}
+
+function renderAnnAdmin(focusSels = []) {
+  dirty.ann = false;
+  const list = el("ann-admin-list");
+  el("ann-form-slot").innerHTML = annEditing === "new" ? annFormHtml(null) : "";
+  el("ann-add").disabled = !!annEditing || annState !== "ready";
+  if (annState === "unconfigured") {
+    setSummary("ann", "Not set up yet");
+    list.innerHTML = `<li class="glass-lite rounded-2xl p-4 text-[14px] leading-relaxed text-ink-200">
+      <p class="font-semibold text-ink-50">One-time setup</p>
+      <p class="mt-2">Announcements need their own table. In Appwrite, create a table in the same database with these columns:</p>
+      <ul class="mt-2 list-disc space-y-1 pl-5 text-ink-300">
+        <li><code class="text-ink-50">title</code> string, size 120, required</li>
+        <li><code class="text-ink-50">content</code> string, size 2000</li>
+        <li><code class="text-ink-50">imageFileId</code> string, size 64</li>
+        <li><code class="text-ink-50">imageUrl</code> string, size 2048</li>
+        <li><code class="text-ink-50">enabled</code> boolean, default true</li>
+      </ul>
+      <p class="mt-2">Give it the same permissions as your games table, then paste its ID into <code class="text-ink-50">announcementsTableId</code> in the <code class="text-ink-50">CONFIG</code> block of this file.</p>
+    </li>`;
+    return;
+  }
+  if (annState === "loading") { setSummary("ann", ""); list.innerHTML = `<li class="py-8 text-center text-[14px] text-ink-300">Loading announcements…</li>`; return; }
+  if (annState === "error") {
+    setSummary("ann", "");
+    list.innerHTML = `<li class="py-8 text-center"><p class="text-[14px] text-red-300">${escapeHtml(annError)}</p><button type="button" data-aact="retry" class="btn btn-ghost mt-3">Try again</button></li>`;
+    return;
+  }
+  const pub = annRows.filter((a) => a.enabled !== false).length;
+  setSummary("ann", `${annRows.length} ${annRows.length === 1 ? "announcement" : "announcements"} · ${pub} published`);
+  list.innerHTML = annRows.length ? annRows.map(annRowHtml).join("") : `<li class="py-8 text-center text-[14px] text-ink-300">No announcements yet. Choose “New announcement” to post one.</li>`;
+  if (annEditing) { const n = el("af-title"); n.focus(); n.scrollIntoView({ block: "nearest" }); return; }
+  for (const sel of focusSels) {
+    const t = el("admin-panel-card").querySelector(sel);
+    if (t && !t.disabled) { t.focus(); break; }
+  }
+}
+function cancelAnnForm() {
+  const id = annEditing;
+  annEditing = null;
+  renderAnnAdmin([id && id !== "new" ? `[data-aact="edit"][data-id="${id}"]` : "#ann-add"]);
+}
+function updateAnnPreview() {
+  const img = el("af-preview"), file = el("af-file").files[0], url = el("af-imgurl").value.trim();
+  if (annPreviewUrl) { URL.revokeObjectURL(annPreviewUrl); annPreviewUrl = null; }
+  let src = img.dataset.base || "";
+  if (el("af-remove")?.checked) src = "";
+  else if (file && file.type.startsWith("image/")) src = annPreviewUrl = URL.createObjectURL(file);
+  else if (isHttp(url)) src = url;
+  img.hidden = !src;
+  if (src) img.src = src;
+}
+function validateAnnForm() {
+  const url = el("af-imgurl").value.trim(), f = el("af-file").files[0];
+  const checks = [
+    ["af-title", el("af-title").value.trim() ? "" : "Enter a title."],
+    ["af-imgurl", !url || isHttp(url) ? "" : "Enter a full link that starts with https://"],
+    ["af-file", !f || f.type.startsWith("image/") ? "" : "Choose an image file."],
+  ];
+  let first = null;
+  checks.forEach(([id, msg]) => { setErr(id, msg); if (msg && !first) first = id; });
+  if (first) el(first).focus();
+  return !first;
+}
+async function submitAnn(e) {
+  e.preventDefault();
+  if (!validateAnnForm()) return;
+  const isEdit = annEditing && annEditing !== "new";
+  const existing = isEdit ? annRows.find((r) => r.$id === annEditing) : null;
+  const title = el("af-title").value.trim(), content = el("af-content").value.trim(), urlField = el("af-imgurl").value.trim();
+  const file = el("af-file").files[0], enabled = el("af-enabled").checked, remove = !!el("af-remove")?.checked;
+  const btn = el("af-submit"), label = btn.textContent;
+  btn.disabled = true; btn.textContent = "Saving…";
+  let uploadedId = null, oldFile = null;
+  try {
+    let imageFileId = existing?.imageFileId || "", imageUrl = existing?.imageUrl || "";
+    if (remove) { oldFile = imageFileId; imageFileId = ""; imageUrl = ""; }
+    else if (file) {
+      uploadedId = (await storage.createFile({ bucketId: CONFIG.iconsBucketId, fileId: ID.unique(), file })).$id;
+      oldFile = imageFileId; imageFileId = uploadedId; imageUrl = "";
+    } else if (urlField && urlField !== imageUrl) { oldFile = imageFileId; imageFileId = ""; imageUrl = urlField; }
+    else if (!urlField && imageUrl && !imageFileId) imageUrl = "";
+    const data = { title, content, imageFileId, imageUrl, enabled };
+    let row;
+    if (isEdit) {
+      row = await tablesDB.updateRow({ ...annTable(), rowId: annEditing, data });
+      annRows = annRows.map((r) => (r.$id === row.$id ? row : r));
+    } else {
+      row = await tablesDB.createRow({ ...annTable(), rowId: ID.unique(), data });
+      annRows = [row, ...annRows];
+    }
+    if (oldFile) storage.deleteFile({ bucketId: CONFIG.iconsBucketId, fileId: oldFile }).catch(() => {});
+    annEditing = null;
+    renderAnnAdmin([`[data-aact="edit"][data-id="${row.$id}"]`]);
+    toast(isEdit ? `Saved “${title}”` : `Posted “${title}”`);
+    loadAnnouncements();
+  } catch (err) {
+    if (uploadedId) storage.deleteFile({ bucketId: CONFIG.iconsBucketId, fileId: uploadedId }).catch(() => {});
+    btn.disabled = false; btn.textContent = label;
+    toast(err?.message || "Couldn't save. Check your connection and try again.", "error");
+  }
+}
+async function toggleAnn(id, on) {
+  const row = annRows.find((r) => r.$id === id);
+  if (!row) return;
+  const prev = row.enabled !== false;
+  row.enabled = on;
+  renderAnnAdmin([`[data-atoggle="${id}"]`]);
+  try {
+    await tablesDB.updateRow({ ...annTable(), rowId: id, data: { enabled: on } });
+    adminSay(`${row.title} is now ${on ? "published" : "a draft"}`);
+    loadAnnouncements();
+  } catch (err) {
+    row.enabled = prev;
+    renderAnnAdmin([`[data-atoggle="${id}"]`]);
+    toast(err?.message || "Couldn't update", "error");
+  }
+}
+async function deleteAnn(id) {
+  const row = annRows.find((r) => r.$id === id);
+  if (!row) return;
+  try {
+    await tablesDB.deleteRow({ ...annTable(), rowId: id });
+    if (row.imageFileId) storage.deleteFile({ bucketId: CONFIG.iconsBucketId, fileId: row.imageFileId }).catch(() => {});
+    annRows = annRows.filter((r) => r.$id !== id);
+    annConfirming = null;
+    renderAnnAdmin(["#ann-add"]);
+    toast(`Deleted “${row.title}”`);
+    loadAnnouncements();
+  } catch (err) {
+    renderAnnAdmin(["#ann-cancel-delete"]);
+    toast(err?.message || "Couldn't delete. Try again.", "error");
+  }
+}
+el("ann-add").addEventListener("click", () => { annEditing = "new"; annConfirming = null; renderAnnAdmin(); });
+el("ann-admin-body").addEventListener("click", (e) => {
+  const b = e.target.closest("[data-aact]");
+  if (!b || b.disabled) return;
+  const { aact, id } = b.dataset;
+  if (aact === "retry") loadAnnAdmin();
+  else if (aact === "edit") { annEditing = id; annConfirming = null; renderAnnAdmin(); }
+  else if (aact === "cancel-form") cancelAnnForm();
+  else if (aact === "delete") { annConfirming = id; renderAnnAdmin(["#ann-cancel-delete"]); }
+  else if (aact === "cancel-delete") { annConfirming = null; renderAnnAdmin([`[data-aact="delete"][data-id="${id}"]`]); }
+  else if (aact === "confirm-delete") { b.disabled = true; b.textContent = "Deleting…"; deleteAnn(id); }
+});
+el("ann-admin-body").addEventListener("change", (e) => {
+  const t = e.target;
+  if (t.matches("[data-atoggle]")) toggleAnn(t.dataset.atoggle, t.checked);
+  else if (t.id === "af-file" || t.id === "af-remove") updateAnnPreview();
+});
+el("ann-admin-body").addEventListener("input", (e) => {
+  const t = e.target;
+  if (t.getAttribute?.("aria-invalid")) setErr(t.id, "");
+  if (t.id === "af-imgurl") updateAnnPreview();
+});
+el("ann-admin-body").addEventListener("submit", (e) => { if (e.target.id === "ann-form") submitAnn(e); });
+
+/* ============================ settings: apply ============================ */
+const origTitle = document.title;
+const origIcon = document.querySelector('link[rel~="icon"]')?.href || "";
+function setFavicon(href) {
+  document.head.querySelectorAll('link[rel~="icon"]').forEach((l) => l.remove());
+  const l = document.createElement("link");
+  l.rel = "icon"; l.href = href;
+  document.head.appendChild(l);
+}
+function applyCloak() {
+  const c = settings.cloak;
+  let title = origTitle, icon = origIcon;
+  if (c === "custom") { if (settings.customTitle) title = settings.customTitle; if (isHttp(settings.customIcon)) icon = settings.customIcon; }
+  else if (c !== "off") { title = CLOAKS[c].title; icon = CLOAKS[c].icon; }
+  document.title = title;
+  setFavicon(icon);
+}
+function applyMotion() {
+  reduceMotion = sysReduce || settings.reduceMotion;
+  document.documentElement.classList.toggle("rm", reduceMotion);
+}
+function applyTileSize() {
+  for (const g of [el("grid"), el("skeleton-grid")]) {
+    Object.values(SIZES).forEach((c) => g.classList.remove(...c.split(" ")));
+    g.classList.add(...SIZES[settings.tileSize].split(" "));
+  }
+}
+
+// "Mask text": swap letters for look-alike characters in everything on the page (not in the admin/settings dialogs).
+const MASK = { a: "\u0430", c: "\u0441", e: "\u0435", i: "\u0456", j: "\u0458", o: "\u043E", p: "\u0440", s: "\u0455", x: "\u0445", y: "\u0443",
+  A: "\u0410", B: "\u0412", C: "\u0421", E: "\u0415", H: "\u041D", I: "\u0406", J: "\u0408", K: "\u041A", M: "\u041C", O: "\u041E", P: "\u0420", S: "\u0405", T: "\u0422", X: "\u0425", Y: "\u04AE" };
+const maskStr = (t) => t.replace(/[acejiopsxyABCEHIJKMOPSTXY]/g, (c) => MASK[c]);
+const maskOrig = new WeakMap();
+function maskNode(n) {
+  if (n.nodeType !== 3 || !n.nodeValue.trim() || n.parentElement?.closest("script,style,textarea,[data-nomask]")) return;
+  if (!maskOrig.has(n)) maskOrig.set(n, n.nodeValue);
+  n.nodeValue = maskStr(maskOrig.get(n));
+}
+function walkText(root, fn) {
+  const w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let n;
+  while ((n = w.nextNode())) fn(n);
+}
+let maskObs = null;
+function setMask(on) {
+  maskObs?.disconnect();
+  maskObs = null;
+  if (on) {
+    walkText(document.body, maskNode);
+    maskObs = new MutationObserver((muts) => muts.forEach((m) => m.addedNodes.forEach((n) => (n.nodeType === 3 ? maskNode(n) : n.nodeType === 1 && walkText(n, maskNode)))));
+    maskObs.observe(document.body, { childList: true, subtree: true });
+  } else walkText(document.body, (n) => { if (maskOrig.has(n)) { n.nodeValue = maskOrig.get(n); maskOrig.delete(n); } });
+}
+
+/* ============================ panic button + safety ============================ */
+let panicking = false, capturingKey = false;
+function comboOf(e) {
+  const k = e.key;
+  if (["Control", "Shift", "Alt", "Meta"].includes(k)) return "";
+  const parts = [];
+  if (e.ctrlKey) parts.push("Ctrl");
+  if (e.altKey) parts.push("Alt");
+  if (e.metaKey) parts.push("Meta");
+  if (e.shiftKey && k.length > 1) parts.push("Shift");
+  parts.push(k.length === 1 ? k.toUpperCase() : k);
+  return parts.join("+");
+}
+const showCombo = (c) => c.replace(/(^|\+) $/, "$1Space");
+function panic() {
+  panicking = true;
+  document.documentElement.style.visibility = "hidden";
+  location.replace(isHttp(settings.panic.url) ? settings.panic.url : DEFAULTS.panic.url);
+  setTimeout(() => { document.documentElement.style.visibility = ""; panicking = false; }, 3000); // restore if the navigation was blocked
+}
+function updatePanicUI() {
+  const on = settings.panic.enabled && settings.panic.button;
+  el("panic-btn").hidden = !on;
+  el("player-panic").hidden = !on;
+  el("panic-key").textContent = showCombo(settings.panic.key);
+}
+document.addEventListener("keydown", (e) => {
+  if (capturingKey) {
+    const c = comboOf(e);
+    if (!c) return;
+    e.preventDefault(); e.stopPropagation();
+    capturingKey = false;
+    if (e.key !== "Escape") { settings.panic.key = c; saveSettings(); }
+    updatePanicUI();
+    el("panic-key").focus();
+    return;
+  }
+  const p = settings.panic;
+  if (!p.enabled || e.repeat || comboOf(e) !== p.key) return;
+  const typing = e.target.matches?.("input, textarea, select, [contenteditable]");
+  if (typing && !(e.ctrlKey || e.altKey || e.metaKey) && e.key.length === 1) return;
+  e.preventDefault();
+  panic();
+}, true);
+el("panic-btn").addEventListener("click", panic);
+el("player-panic").addEventListener("click", panic);
+addEventListener("beforeunload", (e) => { if (settings.confirmClose && !panicking) { e.preventDefault(); e.returnValue = ""; } });
+
+function launchBlank() {
+  const w = window.open("about:blank", "_blank");
+  if (!w) { toast("Your browser blocked the new tab. Allow pop-ups for this site and try again.", "error"); return; }
+  const d = w.document;
+  d.title = document.title;
+  d.body.style.cssText = "margin:0;background:#000";
+  const f = d.createElement("iframe");
+  f.src = location.href;
+  f.style.cssText = "position:fixed;inset:0;width:100%;height:100%;border:0";
+  f.allow = "autoplay; fullscreen; gamepad";
+  d.body.appendChild(f);
+  panic();
+}
+
+/* ============================ settings: dialog ============================ */
+const selectSettingsTab = wireTabs(el("settings-tabs"));
+function renderCloakOptions() {
+  el("cloak-options").innerHTML = Object.entries(CLOAKS).map(([k, c]) =>
+    `<label class="opt"><input type="radio" name="cloak" value="${k}" class="sr-only" /><img src="${escapeHtml(c.icon || origIcon)}" alt="" class="h-8 w-8 shrink-0 rounded-lg bg-white/10" />
+      <span class="min-w-0"><span class="block text-[15px] font-medium">${escapeHtml(c.label)}</span><span class="block truncate text-[13px] text-ink-300">${escapeHtml(c.sub)}</span></span></label>`).join("");
+}
+function syncSettingsUI() {
+  el("set-announce").checked = settings.announceOnOpen;
+  el("set-reduce").checked = settings.reduceMotion;
+  document.querySelector(`input[name="tile"][value="${settings.tileSize}"]`).checked = true;
+  document.querySelector(`input[name="cloak"][value="${settings.cloak}"]`).checked = true;
+  el("custom-cloak").hidden = settings.cloak !== "custom";
+  el("cc-title").value = settings.customTitle;
+  el("cc-icon").value = settings.customIcon;
+  el("panic-on").checked = settings.panic.enabled;
+  el("panic-url").value = settings.panic.url;
+  el("panic-btn-on").checked = settings.panic.button;
+  el("set-mask").checked = settings.maskText;
+  el("set-confirm").checked = settings.confirmClose;
+  updatePanicUI();
+}
+function applyAllSettings() { applyMotion(); applyTileSize(); applyCloak(); setMask(settings.maskText); updatePanicUI(); }
+function refreshLib() {
+  const ok = isUnlocked();
+  el("export-games").disabled = !ok;
+  el("import-games-btn").disabled = !ok;
+  el("lib-lock").hidden = ok;
+  el("unlock-admin").hidden = ok;
+}
+function openSettings() { syncSettingsUI(); refreshLib(); openModal("settings-modal", "settings-card", "settings-title"); }
+function closeSettings() { closeModal("settings-modal"); }
+el("settings-btn").addEventListener("click", openSettings);
+el("settings-close").addEventListener("click", closeSettings);
+el("open-admin").addEventListener("click", () => { closeSettings(); if (isUnlocked()) openAdminPanel(); else openAdminLogin(); });
+el("unlock-admin").addEventListener("click", () => { closeSettings(); openAdminLogin(); });
+
+const on = (id, evt, fn) => el(id).addEventListener(evt, fn);
+on("set-announce", "change", (e) => { settings.announceOnOpen = e.target.checked; saveSettings(); });
+on("set-reduce", "change", (e) => { settings.reduceMotion = e.target.checked; saveSettings(); applyMotion(); });
+document.querySelectorAll('input[name="tile"]').forEach((r) => r.addEventListener("change", () => { settings.tileSize = r.value; saveSettings(); applyTileSize(); }));
+on("cloak-options", "change", (e) => {
+  settings.cloak = e.target.value; saveSettings(); applyCloak();
+  el("custom-cloak").hidden = settings.cloak !== "custom";
+  if (settings.cloak === "custom") focusSoon(el("cc-title"));
+});
+on("cc-title", "input", (e) => { settings.customTitle = e.target.value; saveSettings(); applyCloak(); });
+on("cc-icon", "input", (e) => { settings.customIcon = e.target.value.trim(); saveSettings(); applyCloak(); });
+on("panic-on", "change", (e) => { settings.panic.enabled = e.target.checked; saveSettings(); updatePanicUI(); });
+on("panic-btn-on", "change", (e) => { settings.panic.button = e.target.checked; saveSettings(); updatePanicUI(); });
+on("panic-key", "click", () => { capturingKey = true; el("panic-key").textContent = "Press a key…"; });
+on("panic-key", "blur", () => { if (capturingKey) { capturingKey = false; updatePanicUI(); } });
+on("panic-url", "input", (e) => {
+  const v = e.target.value.trim(), err = el("panic-url-err");
+  const bad = v && !isHttp(v);
+  err.textContent = bad ? "Enter a full link that starts with https://" : "";
+  err.classList.toggle("hidden", !bad);
+  e.target.toggleAttribute("aria-invalid", !!bad);
+  if (!bad) { settings.panic.url = v || DEFAULTS.panic.url; saveSettings(); }
+});
+on("set-mask", "change", (e) => { settings.maskText = e.target.checked; saveSettings(); setMask(settings.maskText); });
+on("set-confirm", "change", (e) => { settings.confirmClose = e.target.checked; saveSettings(); });
+on("launch-blank", "click", launchBlank);
+
+/* ============================ settings: data ============================ */
+function download(name, obj) {
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" }));
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(a.href), 2000);
+}
+const libStatus = (t) => { el("lib-status").textContent = t; };
+let resetTimer = null, pendingImport = null;
+on("export-settings", "click", () => { download("mlv2-settings.json", { app: "mlv2", type: "settings", version: 1, settings }); toast("Settings exported"); });
+on("import-settings-btn", "click", () => el("import-settings").click());
+on("import-settings", "change", async (e) => {
+  const f = e.target.files[0];
+  e.target.value = "";
+  if (!f) return;
+  try {
+    const data = JSON.parse(await f.text());
+    if (data?.type !== "settings" || typeof data.settings !== "object") throw new Error("bad");
+    settings = mergeSettings(DEFAULTS, data.settings);
+    saveSettings(); applyAllSettings(); syncSettingsUI();
+    toast("Settings imported");
+  } catch { toast("That doesn't look like a settings file.", "error"); }
+});
+on("reset-seen", "click", () => { try { localStorage.removeItem(SEEN_KEY); } catch { /* storage blocked */ } refreshBell(); toast("You'll see announcements again"); });
+on("reset-settings", "click", (e) => {
+  const b = e.currentTarget;
+  if (b.dataset.armed) {
+    clearTimeout(resetTimer); delete b.dataset.armed; b.textContent = "Reset";
+    settings = mergeSettings(DEFAULTS, null);
+    saveSettings(); applyAllSettings(); syncSettingsUI();
+    toast("Settings reset");
+  } else {
+    b.dataset.armed = "1"; b.textContent = "Click again to confirm";
+    resetTimer = setTimeout(() => { delete b.dataset.armed; b.textContent = "Reset"; }, 4000);
+  }
+});
+
+async function fetchAllGames() {
+  const res = await tablesDB.listRows({ ...dbArgs, queries: [Query.limit(200), Query.orderAsc("order")] });
+  return res.rows.sort(byOrder);
+}
+on("export-games", "click", async () => {
+  if (!isUnlocked()) return refreshLib();
+  libStatus("Preparing export…");
+  try {
+    const rows = await fetchAllGames();
+    const games = rows.map((g) => ({ name: g.name, url: g.url, category: g.category || "", iconUrl: g.iconFileId ? String(iconSrcFor(g) || "") : g.iconUrl || "", enabled: g.enabled !== false }));
+    download("mlv2-games.json", { app: "mlv2", type: "games", version: 1, exportedAt: new Date().toISOString(), games });
+    libStatus(`Exported ${games.length} ${games.length === 1 ? "game" : "games"}.`);
+  } catch (err) { libStatus(err?.message || "Couldn't export your games."); }
+});
+on("import-games-btn", "click", () => el("import-games").click());
+on("import-games", "change", async (e) => {
+  const f = e.target.files[0], go = el("import-games-go");
+  e.target.value = "";
+  if (!f || !isUnlocked()) return;
+  go.hidden = true; pendingImport = null;
+  try {
+    const data = JSON.parse(await f.text());
+    if (data?.type !== "games" || !Array.isArray(data.games)) throw new Error("That file isn't an mlv2 games export.");
+    const existing = await fetchAllGames();
+    const have = new Set(existing.map((g) => g.url));
+    const valid = data.games.filter((g) => g && typeof g.name === "string" && g.name.trim() && isHttp(g.url));
+    const fresh = valid.filter((g, i, a) => !have.has(g.url) && a.findIndex((x) => x.url === g.url) === i);
+    pendingImport = { fresh, base: existing.reduce((m, r) => Math.max(m, r.order ?? -1), -1) + 1 };
+    libStatus(`Found ${valid.length} valid games. ${fresh.length} ${fresh.length === 1 ? "is" : "are"} new; the rest are already in your library.`);
+    if (fresh.length) { go.textContent = `Import ${fresh.length} new ${fresh.length === 1 ? "game" : "games"}`; go.hidden = false; }
+  } catch (err) { libStatus(err?.message || "Couldn't read that file."); }
+});
+on("import-games-go", "click", async (e) => {
+  const go = e.currentTarget;
+  if (!pendingImport || !isUnlocked()) return;
+  const { fresh, base } = pendingImport;
+  go.disabled = true;
+  let done = 0, failed = 0;
+  for (const [i, g] of fresh.entries()) {
+    libStatus(`Importing ${i + 1} of ${fresh.length}…`);
+    try {
+      await tablesDB.createRow({ ...dbArgs, rowId: ID.unique(), data: { name: g.name.trim(), url: g.url, category: String(g.category || "").trim(), iconFileId: "", iconUrl: isHttp(g.iconUrl) ? g.iconUrl : "", enabled: g.enabled !== false, order: base + i } });
+      done++;
+    } catch { failed++; }
+  }
+  go.disabled = false; go.hidden = true; pendingImport = null;
+  libStatus(`Imported ${done} ${done === 1 ? "game" : "games"}${failed ? `, ${failed} failed` : ""}.`);
+  toast(failed ? `Imported ${done}, ${failed} failed` : `Imported ${done} ${done === 1 ? "game" : "games"}`, failed ? "error" : "default");
+  loadGames();
+});
+
+/* ============================ boot ============================ */
+renderCloakOptions();
+applyAllSettings();
+loadAnnouncements();
+
 /* ---------------------------- tile hover FX ---------------------------- */
 const gridEl = el("grid");
 gridEl.addEventListener("pointermove", (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlv2boii",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "",
   "main": "index.js",
   "scripts": {