npm - mlv2boii - Versions diffs - 1.0.9 → 1.0.11 - Mend

mlv2boii 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/index.html +1308 -195
package/package.json +1 -1

package/index.html CHANGED Viewed

@@ -24,7 +24,7 @@
     --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", ui-sans-serif, system-ui, sans-serif;
     --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
     --color-ink-950: #000000; --color-ink-900: #0a0a0b; --color-ink-850: #101012; --color-ink-800: #161618;
-    --color-ink-700: #232326; --color-ink-600: #2c2c30; --color-ink-500: #48484c; --color-ink-400: #76767b;
+    --color-ink-700: #232326; --color-ink-600: #2c2c30; --color-ink-500: #48484c; --color-ink-400: #8e8e93;
     --color-ink-300: #a1a1a6; --color-ink-200: #c7c7cc; --color-ink-100: #e5e5ea; --color-ink-50: #f5f5f7;
     --color-red-700: #8f0e20; --color-red-600: #c11228; --color-red-500: #f01a36; --color-red-400: #ff4d63; --color-red-300: #ff8b96;
   }
@@ -42,7 +42,8 @@
   ::selection { background: rgba(240,26,54,0.4); color: #fff; }
   input { caret-color: var(--color-red-400); }
   :focus-visible { outline: 2px solid var(--color-red-400); outline-offset: 2px; }
-  input:focus-visible { outline: none; }
+  .field:focus-visible, [data-pin-idx]:focus-visible { outline: none; }
+  [tabindex="-1"]:focus { outline: none; }
   .tile:focus-visible { outline: none; }
   .tile:focus-visible .tile-icon { outline: 2px solid var(--color-red-400); outline-offset: 3px; }
   .page-x { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
@@ -55,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); }
@@ -73,7 +74,7 @@
   .badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
     background: linear-gradient(180deg, #ff6b7d, #f01a36 60%, #c80f27);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.16), 0 6px 22px -2px rgba(240,26,54,0.7); }
-  .glow-line { display: inline-block; padding: 0 0.04em 0.1em;
+  .glow-line { display: inline-block; padding: 0 0 0.1em;
     background: linear-gradient(180deg, #ffb8c0 0%, #ff4d63 48%, #f01a36 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
   .btn-primary { color: #fff; background: linear-gradient(180deg, #ff6b7d, #f01a36 55%, #c80f27);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.18), 0 8px 22px -6px rgba(240,26,54,0.7); }
@@ -82,17 +83,16 @@
   .btn-ghost:hover { background: rgba(255,255,255,0.14); }
   .chip-on { background: linear-gradient(180deg, #ff6b7d, #f01a36 60%, #c80f27);
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.16), 0 6px 20px -4px rgba(240,26,54,0.65); }
-  .chip-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #111; background: var(--c);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
+  .chip-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #c11228;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }
   .chip-on .chip-count { background: #fff; color: #b50e28; box-shadow: none; }
   /* game tiles: glass card, glossy icon, glow in the category colour */
   .tile { background: rgba(255,255,255,0.05); border-radius: 28px; padding: 10px 10px 12px;
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.07);
     transition: background-color .3s ease-out, box-shadow .3s ease-out; }
-  .tile:hover { background: color-mix(in srgb, var(--c) 13%, rgba(255,255,255,0.05));
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 16px 40px -10px color-mix(in srgb, var(--c) 60%, transparent); }
-  .tile-icon { position: relative; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--c) 28%, transparent); }
+  .tile:hover { background: rgba(255,255,255,0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(240,26,54,0.55); }
+  .tile-icon { position: relative; }
   .tile-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
     background: linear-gradient(160deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 42%);
     box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -8px 14px rgba(0,0,0,0.25); }
@@ -102,6 +102,47 @@
     animation: float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
   @keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 4deg)); } }
+  /* ---------- accessibility + admin controls ---------- */
+  .skip { position: fixed; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 600; transition: top .2s; }
+  .skip:focus { top: calc(env(safe-area-inset-top) + 12px); }
+  input[type="search"]::-webkit-search-cancel-button { display: none; }
+  input[type="file"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-red-400); outline-offset: 2px; }
+  .btn-danger { color: #fff; background: #c11228; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
+  .btn-danger:hover { background: #d61a40; }
+  .tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--color-ink-200); background: rgba(255,255,255,0.1); vertical-align: 1px; }
+  .switch { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; cursor: pointer;
+    background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: background-color .2s; }
+  .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
+  .switch:checked { background: #f01a36; }
+  .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)); }
@@ -145,31 +186,45 @@
 <body class="min-h-screen bg-ink-950 font-sans text-ink-50 antialiased">
+<a href="#games-heading" class="skip">Skip to games</a>
 <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>
   <radialGradient id="gO" cx=".35" cy=".25" r=".9"><stop offset="0" stop-color="#ffb8c0"/><stop offset=".38" stop-color="#e8142f"/><stop offset="1" stop-color="#7d0a1c"/></radialGradient>
   <radialGradient id="gL" cx=".35" cy=".25" r=".9"><stop offset="0" stop-color="#ffd0d5"/><stop offset=".38" stop-color="#ff5c70"/><stop offset="1" stop-color="#c11228"/></radialGradient>
-  <radialGradient id="gB" cx=".35" cy=".25" r=".9"><stop offset="0" stop-color="#ffffff"/><stop offset=".4" stop-color="#e5e5ea"/><stop offset="1" stop-color="#9a9aa2"/></radialGradient>
-  <radialGradient id="gV" cx=".35" cy=".25" r=".9"><stop offset="0" stop-color="#85858d"/><stop offset=".4" stop-color="#2c2c30"/><stop offset="1" stop-color="#0a0a0b"/></radialGradient>
 </defs></svg>
 <!-- ================= 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>
     </a>
-    <div class="ml-auto flex min-w-0 flex-1 items-center justify-end">
+    <div role="search" class="ml-auto flex min-w-0 flex-1 items-center justify-end">
       <div id="search-wrap" class="relative">
         <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
-        <input id="search" type="text" placeholder="Search games" aria-label="Search games" autocomplete="off" enterkeyhint="search" class="field rounded-full pl-9" />
+        <input id="search" type="search" placeholder="Search games" aria-label="Search games" autocomplete="off" enterkeyhint="search" class="field rounded-full pl-9 pr-9" />
+        <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>
@@ -184,26 +239,29 @@
     <!-- floating bubbly shapes (large screens) -->
     <div id="shapes" class="pointer-events-none absolute right-2 top-4 hidden h-[360px] w-[400px] lg:block" aria-hidden="true">
-      <div class="shape" style="left:20px;top:120px;width:190px"><div class="par" data-depth="1"><svg viewBox="0 0 120 120" class="float" style="--r:-8deg;--g:rgba(240,26,54,.4);--d:-1s">
+      <div class="shape" style="left:30px;top:90px;width:200px"><div class="par" data-depth="1"><svg viewBox="0 0 120 120" class="float" style="--r:-8deg;--g:rgba(240,26,54,.4);--d:-1s">
         <rect x="8" y="30" width="104" height="62" rx="31" fill="url(#gP)"/>
         <path d="M34 50v24M22 62h24" stroke="#fff" stroke-width="9" stroke-linecap="round" opacity=".92"/>
         <circle cx="82" cy="54" r="6" fill="#fff" opacity=".92"/><circle cx="96" cy="68" r="6" fill="#fff" opacity=".92"/>
         <ellipse cx="44" cy="40" rx="28" ry="7" fill="#fff" opacity=".45"/>
       </svg></div></div>
-      <div class="shape" style="left:250px;top:0;width:120px"><div class="par" data-depth="1.6"><svg viewBox="0 0 120 120" class="float" style="--r:10deg;--g:rgba(240,26,54,.35);--d:-3s">
+      <div class="shape" style="left:255px;top:10px;width:120px"><div class="par" data-depth="1.6"><svg viewBox="0 0 120 120" class="float" style="--r:10deg;--g:rgba(240,26,54,.35);--d:-3s">
         <polygon points="60,16 71.8,43.8 101.9,46.4 79,66.2 85.9,95.6 60,80 34.1,95.6 41,66.2 18.2,46.4 48.2,43.8" fill="url(#gO)" stroke="url(#gO)" stroke-width="14" stroke-linejoin="round"/>
         <ellipse cx="48" cy="40" rx="14" ry="5" fill="#fff" opacity=".5" transform="rotate(-25 48 40)"/>
       </svg></div></div>
-      <div class="shape" style="left:272px;top:170px;width:120px"><div class="par" data-depth="0.7"><svg viewBox="0 0 120 120" class="float" style="--r:-6deg;--g:rgba(255,255,255,.14);--d:-2s">
-        <path d="M44 34 L90 60 L44 86 Z" fill="url(#gB)" stroke="url(#gB)" stroke-width="16" stroke-linejoin="round"/>
-        <ellipse cx="50" cy="48" rx="8" ry="4" fill="#fff" opacity=".5" transform="rotate(35 50 48)"/>
+      <div class="shape" style="left:255px;top:175px;width:105px"><div class="par" data-depth="0.8"><svg viewBox="0 0 120 120" class="float" style="--r:-6deg;--g:rgba(240,26,54,.35);--d:-2s">
+        <path d="M44 34 L90 60 L44 86 Z" fill="url(#gL)" stroke="url(#gL)" stroke-width="16" stroke-linejoin="round"/>
+        <ellipse cx="50" cy="48" rx="8" ry="4" fill="#fff" opacity=".55" transform="rotate(35 50 48)"/>
       </svg></div></div>
-      <div class="shape" style="left:60px;top:270px;width:86px"><div class="par" data-depth="1.3"><svg viewBox="0 0 120 120" class="float" style="--r:8deg;--g:rgba(240,26,54,.3);--d:-4s">
-        <path d="M60 26v68M26 60h68" fill="none" stroke="url(#gL)" stroke-width="30" stroke-linecap="round"/>
+      <div class="shape" style="left:55px;top:268px;width:84px"><div class="par" data-depth="1.3"><svg viewBox="0 0 120 120" class="float" style="--r:8deg;--g:rgba(240,26,54,.3);--d:-4s">
+        <path d="M60 26v68M26 60h68" fill="none" stroke="url(#gP)" stroke-width="30" stroke-linecap="round"/>
         <ellipse cx="52" cy="30" rx="6" ry="3" fill="#fff" opacity=".55"/>
       </svg></div></div>
-      <div class="shape" style="left:150px;top:20px;width:64px"><div class="par" data-depth="2"><svg viewBox="0 0 120 120" class="float" style="--r:0deg;--g:rgba(255,255,255,.12);--d:-5s">
-        <circle cx="60" cy="60" r="40" fill="url(#gV)"/><ellipse cx="46" cy="42" rx="16" ry="8" fill="#fff" opacity=".5" transform="rotate(-30 46 42)"/>
+      <div class="shape" style="left:165px;top:14px;width:52px"><div class="par" data-depth="2"><svg viewBox="0 0 120 120" class="float" style="--r:0deg;--g:rgba(240,26,54,.35);--d:-5s">
+        <circle cx="60" cy="60" r="42" fill="url(#gP)"/><ellipse cx="46" cy="42" rx="16" ry="8" fill="#fff" opacity=".55" transform="rotate(-30 46 42)"/>
+      </svg></div></div>
+      <div class="shape" style="left:175px;top:300px;width:40px"><div class="par" data-depth="1.8"><svg viewBox="0 0 120 120" class="float" style="--r:0deg;--g:rgba(240,26,54,.3);--d:-2.5s">
+        <circle cx="60" cy="60" r="42" fill="url(#gL)"/><ellipse cx="46" cy="42" rx="16" ry="8" fill="#fff" opacity=".55" transform="rotate(-30 46 42)"/>
       </svg></div></div>
     </div>
   </section>
@@ -215,11 +273,14 @@
     <p class="mt-1 text-[14px] leading-relaxed text-ink-300">Open this file and fill in the <code class="font-mono text-ink-50">CONFIG</code> object near the bottom with your Appwrite endpoint, project, database, table and bucket IDs.</p>
   </div>
+  <h2 id="games-heading" tabindex="-1" class="sr-only">Games</h2>
+  <p id="grid-status" role="status" class="sr-only"></p>
   <div id="skeleton-grid" class="grid grid-cols-3 gap-3 sm:grid-cols-4 sm:gap-4 md:grid-cols-5 lg:grid-cols-6"></div>
-  <div id="empty-state" class="hidden flex-col items-center justify-center py-24 text-center">
+  <div id="empty-state" aria-live="polite" class="hidden flex-col items-center justify-center py-24 text-center">
     <p id="empty-title" class="text-[19px] font-semibold">No games yet</p>
-    <p id="empty-sub" class="mt-2 max-w-xs text-pretty text-[15px] text-ink-400">Games you add in Appwrite with a valid link will show up here automatically.</p>
+    <p id="empty-sub" class="mt-2 max-w-xs text-pretty text-[15px] text-ink-300">Games you add in Appwrite with a valid link will show up here automatically.</p>
+    <button id="retry" type="button" class="btn btn-ghost mt-5 hidden">Try again</button>
   </div>
   <div id="grid" class="hidden grid grid-cols-3 gap-3 sm:grid-cols-4 sm:gap-4 md:grid-cols-5 lg:grid-cols-6"></div>
@@ -229,14 +290,14 @@
 <footer class="relative z-10 border-t border-white/[0.08]">
   <div class="page-x mx-auto flex max-w-5xl items-center justify-between py-4 text-[13px] text-ink-400">
     <p>mlv2 © <span id="year"></span></p>
-    <button id="admin-trigger" class="glass-lite rounded-full px-4 py-2 transition-colors duration-200 hover:text-ink-50">Admin</button>
+    <button id="admin-trigger" aria-haspopup="dialog" class="glass-lite rounded-full px-4 py-2 transition-colors duration-200 hover:text-ink-50">Admin</button>
   </div>
 </footer>
 <!-- ================= PLAYER MODAL ================= -->
 <div id="player-modal" class="fixed inset-0 z-50 hidden">
   <div class="absolute inset-0 bg-black" data-player-close></div>
-  <div id="player-panel" class="relative flex h-full w-full flex-col opacity-0">
+  <div id="player-panel" role="dialog" aria-modal="true" aria-labelledby="player-title" class="relative flex h-full w-full flex-col opacity-0">
     <div class="border-b border-white/[0.08] bg-black pt-[env(safe-area-inset-top)]">
       <div class="flex h-14 items-center justify-between gap-3 px-3 sm:px-4">
         <div class="flex min-w-0 items-center gap-3">
@@ -244,6 +305,12 @@
           <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>
           <a id="player-newtab" target="_blank" rel="noopener" title="Open in new tab" aria-label="Open in new tab" 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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6"/><path d="M10 14 21 3"/></svg>
           </a>
@@ -261,13 +328,13 @@
 </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" class="glass glass-sheet relative w-full max-w-[340px] rounded-[28px] p-6 opacity-0" data-fx>
-      <p class="text-[19px] font-semibold">Enter PIN</p>
+<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" class="mt-5 grid grid-cols-6 gap-2"></div>
+      <div id="pin-boxes" role="group" aria-labelledby="pin-title" class="mt-5 grid grid-cols-6 gap-2"></div>
       <input id="admin-pin" type="hidden" />
       <p id="admin-login-error" class="mt-3 hidden text-[14px] text-red-400" role="alert"></p>
       <button type="submit" id="admin-login-submit" class="btn btn-primary mt-5 w-full">Unlock</button>
@@ -277,48 +344,145 @@
 </div>
 <!-- ================= ADMIN: PANEL ================= -->
-<div id="admin-panel" class="fixed inset-0 z-50 hidden">
-  <div class="absolute inset-0 bg-black/50 backdrop-blur-md" data-admin-panel-close></div>
-  <div class="absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
-    <div id="admin-panel-card" class="glass glass-sheet relative flex h-full w-full flex-col opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px]" data-fx>
-      <div class="flex h-14 shrink-0 items-center justify-between border-b border-white/[0.08] px-5 pt-[env(safe-area-inset-top)] box-content">
-        <div>
-          <p class="text-[17px] font-semibold leading-none">Admin</p>
-          <p class="mt-1 text-[13px] text-ink-400">Unlocked with PIN</p>
+<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">Admin</h2>
+          <p id="admin-summary" class="mt-0.5 text-[13px] text-ink-300"></p>
         </div>
-        <div class="flex items-center gap-2">
-          <button id="admin-logout" class="btn btn-ghost">Lock</button>
-          <button data-admin-panel-close 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 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>
+        </div>
+      </div>
+      <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>
+      </div>
+      <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 class="flex-1 overflow-y-auto px-5 py-5">
-        <form id="add-game-form" class="glass-lite rounded-2xl p-4">
-          <p class="text-[15px] font-semibold">Add game</p>
-          <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <div><label for="new-name" class="text-[13px] text-ink-300">Name</label><input id="new-name" required class="field mt-1.5" /></div>
-            <div><label for="new-category" class="text-[13px] text-ink-300">Category (optional)</label><input id="new-category" class="field mt-1.5" /></div>
-            <div class="sm:col-span-2"><label for="new-url" class="text-[13px] text-ink-300">Game URL</label><input id="new-url" required type="url" placeholder="https://" class="field mt-1.5" /></div>
-            <div>
-              <label for="new-icon-file" class="text-[13px] text-ink-300">Icon upload</label>
-              <input id="new-icon-file" type="file" accept="image/*" class="mt-2 w-full text-[13px] text-ink-400 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" />
-            </div>
-            <div><label for="new-icon-url" class="text-[13px] text-ink-300">Or external icon URL</label><input id="new-icon-url" type="url" placeholder="https://" class="field mt-1.5" /></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>
-          <div class="mt-5 flex items-center gap-3">
-            <button type="submit" id="add-game-submit" class="btn btn-primary">Add game</button>
-            <span id="add-game-status" class="text-[13px] text-ink-400"></span>
+          <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>
-        </form>
-        <p class="mb-3 mt-8 text-[15px] font-semibold">Games</p>
-        <div id="admin-list" class="space-y-2"></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" class="fixed bottom-4 right-4 z-[60] flex flex-col items-end gap-2 pb-[env(safe-area-inset-bottom)]"></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>
 <script type="module">
@@ -330,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";
@@ -344,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);
@@ -361,7 +571,7 @@ let allGames = [];
 let activeCategory = "All";
 let searchTerm = "";
 const BRAND = "#f01a36";
-const PALETTE = ["#f01a36", "#ff6b7d", "#ff98a5"];
+const PALETTE = ["#f01a36"];
 let catColors = {};
 let barShown = false;
@@ -395,7 +605,7 @@ function toast(message, tone = "default") {
   const root = el("toast-root");
   const node = document.createElement("div");
   const toneClasses = tone === "error" ? "text-red-300" : "text-ink-50";
-  node.className = `glass glass-sheet relative rounded-full ${toneClasses} px-4 py-2.5 text-[14px] opacity-0`;
+  node.className = `glass glass-sheet pointer-events-auto relative rounded-full ${toneClasses} px-4 py-2.5 text-[14px] opacity-0`;
   node.textContent = message;
   root.appendChild(node);
   pop(node, { y: 16, scale: 0.9, stiff: 420, damp: 24 });
@@ -455,6 +665,7 @@ let gridShown = false;
 function renderGrid() {
   const grid = el("grid");
   const games = currentFiltered();
+  el("grid-status").textContent = allGames.length === 0 ? "No games yet" : games.length === 0 ? "No games match your search" : `${games.length} ${games.length === 1 ? "game" : "games"} shown`;
   el("skeleton-grid").classList.add("hidden");
   if (allGames.length === 0) {
@@ -525,6 +736,8 @@ async function loadGames() {
     renderGrid();
   } catch (err) {
     console.error("Failed to load games:", err);
+    if (allGames.length) { toast("Couldn't refresh the game list", "error"); return; }
+    el("retry").classList.remove("hidden");
     el("skeleton-grid").classList.add("hidden");
     el("empty-title").textContent = "Couldn't load games";
     el("empty-sub").textContent = err?.message
@@ -537,84 +750,117 @@ async function loadGames() {
 loadGames();
 /* --------------------------- search / filter --------------------------- */
+const searchEl = el("search"), clearBtn = el("search-clear");
 let searchDebounce;
-el("search").addEventListener("input", (e) => {
+function applySearch() { searchTerm = searchEl.value.trim().toLowerCase(); renderGrid(); }
+searchEl.addEventListener("input", () => {
+  clearBtn.classList.toggle("hidden", !searchEl.value);
+  clearBtn.classList.toggle("grid", !!searchEl.value);
   clearTimeout(searchDebounce);
-  searchDebounce = setTimeout(() => {
-    searchTerm = e.target.value.trim().toLowerCase();
-    renderGrid();
-  }, 120);
+  searchDebounce = setTimeout(applySearch, 120);
+});
+clearBtn.addEventListener("click", () => {
+  searchEl.value = "";
+  clearBtn.classList.add("hidden");
+  clearBtn.classList.remove("grid");
+  applySearch();
+  searchEl.focus();
+});
+searchEl.addEventListener("keydown", (e) => { if (e.key === "Escape" && searchEl.value) clearBtn.click(); });
+el("retry").addEventListener("click", () => {
+  el("retry").classList.add("hidden");
+  el("empty-state").classList.add("hidden");
+  el("empty-state").classList.remove("flex");
+  el("skeleton-grid").classList.remove("hidden");
+  loadGames();
+});
+/* ------------------------------- dialogs ------------------------------- */
+const isHidden = (id) => el(id).classList.contains("hidden");
+let opener = null;
+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());
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    if (!isHidden("player-modal")) closePlayer();
+    else if (!isHidden("admin-login-modal")) closeAdminLogin();
+    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();
+  }
 });
 /* ------------------------------- player ------------------------------- */
 function openPlayer(game) {
   if (!game) return;
+  beginDialog();
   el("player-title").textContent = game.name;
+  el("player-frame").title = game.name;
   el("player-icon").src = iconSrcFor(game) || monogramSrc(game.name);
   el("player-newtab").href = game.url;
-  el("player-frame").src = game.url;
   el("player-loading").style.display = "grid";
+  el("player-frame").src = game.url;
   el("player-modal").classList.remove("hidden");
   document.documentElement.style.overflow = "hidden";
   pop("#player-panel", { y: 20, scale: 0.94, stiff: 260, damp: 26 });
+  focusSoon(el("player-close"));
 }
 function closePlayer() {
   fx("#player-panel", { opacity: [1, 0], scale: [1, 0.98] }, { duration: 0.18, ease: "easeIn" }).finished.then(() => {
     el("player-modal").classList.add("hidden");
-    el("player-frame").src = "";
+    el("player-frame").src = "about:blank";
     document.documentElement.style.overflow = "";
+    endDialog();
   });
 }
 el("player-close").addEventListener("click", closePlayer);
 document.querySelector("[data-player-close]").addEventListener("click", closePlayer);
-document.addEventListener("keydown", (e) => {
-  if (e.key === "Escape") {
-    if (!el("player-modal").classList.contains("hidden")) closePlayer();
-    if (!el("admin-panel").classList.contains("hidden")) closeAdminPanel();
-    if (!el("admin-login-modal").classList.contains("hidden")) closeAdminLogin();
-  }
-});
+el("player-fs").addEventListener("click", () => { const f = el("player-frame"); (f.requestFullscreen || f.webkitRequestFullscreen)?.call(f); });
-/* -------------------------------- admin -------------------------------- */
+/* ------------------------------ admin: PIN ------------------------------ */
+function isUnlocked() { return sessionStorage.getItem(ADMIN_SESSION_KEY) === "1"; }
 function openAdminLogin() {
+  beginDialog();
   el("admin-login-modal").classList.remove("hidden");
   pop("#admin-login-form", { y: 16, scale: 0.92, stiff: 380, damp: 24 });
   resetPinBoxes();
-  pinInputs[0]?.focus();
+  focusSoon(pinInputs[0]);
 }
 function closeAdminLogin() {
   el("admin-login-modal").classList.add("hidden");
   el("admin-login-error").classList.add("hidden");
+  endDialog();
 }
-function openAdminPanel() {
-  el("admin-panel").classList.remove("hidden");
-  pop("#admin-panel-card", { y: 24, scale: 0.97, stiff: 300, damp: 28 });
-  renderAdminList();
-}
-function closeAdminPanel() { el("admin-panel").classList.add("hidden"); }
-function isUnlocked() { return sessionStorage.getItem(ADMIN_SESSION_KEY) === "1"; }
 el("admin-trigger").addEventListener("click", () => { if (isUnlocked()) openAdminPanel(); else openAdminLogin(); });
-document.querySelector("[data-admin-login-close]").addEventListener("click", closeAdminLogin);
-document.querySelector("[data-admin-panel-close]").addEventListener("click", closeAdminPanel);
+document.querySelectorAll("[data-admin-login-close]").forEach((n) => n.addEventListener("click", closeAdminLogin));
 const pinBoxesEl = el("pin-boxes");
 pinBoxesEl.innerHTML = Array.from({ length: 6 })
-  .map((_, i) => `<input data-pin-idx="${i}" type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" aria-label="Digit ${i + 1}"
+  .map((_, i) => `<input data-pin-idx="${i}" type="password" inputmode="numeric" pattern="[0-9]*" maxlength="1" autocomplete="off" aria-label="Digit ${i + 1} of 6"
         class="h-12 w-full rounded-[12px] bg-white/[0.07] text-center text-[20px] tabular-nums outline-none ring-1 ring-inset ring-white/10 transition-shadow focus:ring-2 focus:ring-red-500" />`)
   .join("");
 const pinInputs = Array.from(pinBoxesEl.querySelectorAll("[data-pin-idx]"));
 function resetPinBoxes() { pinInputs.forEach((i) => (i.value = "")); el("admin-pin").value = ""; }
 function syncPinValue() { el("admin-pin").value = pinInputs.map((i) => i.value).join(""); }
+function submitIfFull() { if (el("admin-pin").value.length === 6) el("admin-login-form").requestSubmit(); }
 pinInputs.forEach((input, idx) => {
   input.addEventListener("input", () => {
     input.value = input.value.replace(/[^0-9]/g, "").slice(0, 1);
     syncPinValue();
     if (input.value && idx < pinInputs.length - 1) pinInputs[idx + 1].focus();
+    submitIfFull();
   });
   input.addEventListener("keydown", (e) => {
     if (e.key === "Backspace" && !input.value && idx > 0) pinInputs[idx - 1].focus();
+    if (e.key === "ArrowLeft" && idx > 0) pinInputs[idx - 1].focus();
+    if (e.key === "ArrowRight" && idx < pinInputs.length - 1) pinInputs[idx + 1].focus();
   });
   input.addEventListener("paste", (e) => {
     e.preventDefault();
@@ -622,140 +868,1007 @@ pinInputs.forEach((input, idx) => {
     digits.forEach((d, i) => pinInputs[i] && (pinInputs[i].value = d));
     syncPinValue();
     pinInputs[Math.min(digits.length, pinInputs.length - 1)]?.focus();
+    submitIfFull();
   });
 });
 el("admin-login-form").addEventListener("submit", (e) => {
   e.preventDefault();
   const errBox = el("admin-login-error");
   syncPinValue();
   if (el("admin-pin").value === ADMIN_PIN) {
     sessionStorage.setItem(ADMIN_SESSION_KEY, "1");
-    errBox.classList.add("hidden");
     closeAdminLogin();
     openAdminPanel();
   } else {
-    errBox.textContent = "Wrong PIN.";
-    if (!reduceMotion) animate("#pin-boxes", { x: [0, -10, 10, -8, 8, -4, 0] }, { duration: 0.45 });
+    errBox.textContent = "That PIN isn't right. Try again.";
     errBox.classList.remove("hidden");
+    if (!reduceMotion) animate("#pin-boxes", { x: [0, -10, 10, -8, 8, -4, 0] }, { duration: 0.45 });
     resetPinBoxes();
     pinInputs[0]?.focus();
   }
 });
+/* ---------------------------- admin: manage games ---------------------------- */
+let adminRows = [], adminState = "loading", adminError = "";
+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 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); };
+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"));
+  loadAdmin();
+}
+function closeAdminPanel() { el("admin-panel").classList.add("hidden"); endDialog(); }
+el("admin-close").addEventListener("click", closeAdminPanel);
 el("admin-logout").addEventListener("click", () => {
   sessionStorage.removeItem(ADMIN_SESSION_KEY);
   closeAdminPanel();
-  toast("Locked");
+  toast("Admin locked");
 });
-async function renderAdminList() {
-  const list = el("admin-list");
-  list.innerHTML = `<p class="text-[14px] text-ink-400">Loading…</p>`;
+async function loadAdmin() {
+  adminState = "loading";
+  renderAdmin();
   try {
-    const res = await tablesDB.listRows({
-      databaseId: CONFIG.databaseId,
-      tableId: CONFIG.gamesTableId,
-      queries: [Query.limit(200), Query.orderAsc("order")],
-    });
-    if (res.rows.length === 0) {
-      list.innerHTML = `<p class="text-[14px] text-ink-400">No games added yet.</p>`;
-      return;
-    }
-    list.innerHTML = res.rows
-      .map(
-        (g) => `
-      <div class="glass-lite flex items-center gap-3 rounded-2xl p-3" data-row="${g.$id}">
-        <img src="${iconSrcFor(g) || monogramSrc(g.name)}" alt="" class="tile-img h-10 w-10 shrink-0 rounded-[22.37%] object-cover" onerror="this.onerror=null;this.src='${monogramSrc(g.name)}'" />
-        <div class="min-w-0 flex-1">
-          <input data-field="name" data-id="${g.$id}" value="${escapeHtml(g.name)}" aria-label="Name" class="w-full border-b border-transparent bg-transparent text-[15px] font-medium outline-none focus:border-red-500" />
-          <input data-field="url" data-id="${g.$id}" value="${escapeHtml(g.url)}" aria-label="URL" class="mt-0.5 w-full border-b border-transparent bg-transparent text-[13px] text-ink-400 outline-none focus:border-red-500" />
+    const res = await tablesDB.listRows({ ...dbArgs, queries: [Query.limit(200), Query.orderAsc("order")] });
+    adminRows = res.rows.sort(byOrder);
+    adminState = "ready";
+  } catch (err) {
+    adminState = "error";
+    adminError = err?.message || "Couldn't load your games.";
+  }
+  renderAdmin();
+}
+function formHtml(g) {
+  const isEdit = !!g;
+  const v = (x) => escapeHtml(x ?? "");
+  const cats = [...new Set(adminRows.map((r) => r.category).filter(Boolean))];
+  const hasIcon = isEdit && (g.iconFileId || g.iconUrl);
+  const base = escapeHtml(isEdit ? rowIcon(g) : monogramSrc("+"));
+  return `<form id="game-form" novalidate aria-labelledby="game-form-title" class="glass-lite mb-4 rounded-2xl p-4">
+    <h3 id="game-form-title" class="text-[16px] font-semibold">${isEdit ? `Edit ${v(g.name)}` : "Add a game"}</h3>
+    <div class="mt-4 grid gap-4 sm:grid-cols-2">
+      <div>
+        <label for="gf-name" class="text-[13px] font-medium text-ink-200">Name</label>
+        <input id="gf-name" required autocomplete="off" aria-describedby="gf-name-err" value="${v(g?.name)}" class="field mt-1.5" />
+        <p id="gf-name-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+      </div>
+      <div>
+        <label for="gf-category" class="text-[13px] font-medium text-ink-200">Category <span class="font-normal text-ink-300">(optional)</span></label>
+        <input id="gf-category" list="category-options" autocomplete="off" value="${v(g?.category)}" class="field mt-1.5" />
+        <datalist id="category-options">${cats.map((c) => `<option value="${v(c)}"></option>`).join("")}</datalist>
+      </div>
+      <div class="sm:col-span-2">
+        <label for="gf-url" class="text-[13px] font-medium text-ink-200">Game link</label>
+        <input id="gf-url" type="url" inputmode="url" required autocomplete="off" spellcheck="false" placeholder="https://" aria-describedby="gf-url-hint gf-url-err" value="${v(g?.url)}" class="field mt-1.5" />
+        <p id="gf-url-hint" class="mt-1.5 text-[13px] text-ink-300">The page that opens when someone taps the game.</p>
+        <p id="gf-url-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+      </div>
+    </div>
+    <fieldset class="mt-4 min-w-0">
+      <legend class="text-[13px] font-medium text-ink-200">Icon</legend>
+      <div class="mt-2 flex items-start gap-4">
+        <img id="gf-preview" src="${base}" data-base="${base}" alt="Icon preview" class="tile-img h-16 w-16 shrink-0 rounded-[22.37%] object-cover" onerror="this.onerror=null;this.src=this.dataset.base" />
+        <div class="grid min-w-0 flex-1 gap-3">
+          <div>
+            <label for="gf-file" class="text-[13px] text-ink-300">Upload an image</label>
+            <input id="gf-file" type="file" accept="image/*" aria-describedby="gf-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="gf-file-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+          </div>
+          <div>
+            <label for="gf-iconurl" class="text-[13px] text-ink-300">…or paste an image link</label>
+            <input id="gf-iconurl" type="url" inputmode="url" autocomplete="off" spellcheck="false" placeholder="https://" aria-describedby="gf-iconurl-err" value="${v(g?.iconUrl)}" class="field mt-1.5" />
+            <p id="gf-iconurl-err" role="alert" class="mt-1.5 hidden text-[13px] text-red-300"></p>
+          </div>
+          ${hasIcon ? `<label class="flex items-center gap-2 text-[13px] text-ink-200"><input id="gf-remove" type="checkbox" class="h-4 w-4 accent-red-500" /> Remove the current icon (shows initials instead)</label>` : ""}
+        </div>
+      </div>
+    </fieldset>
+    <label class="mt-4 flex cursor-pointer items-center gap-3 text-[14px]"><input id="gf-enabled" type="checkbox" role="switch" class="switch" ${g?.enabled === false ? "" : "checked"} /> Show on the site</label>
+    <div class="mt-5 flex flex-wrap items-center gap-2">
+      <button type="submit" id="gf-submit" class="btn btn-primary">${isEdit ? "Save changes" : "Add game"}</button>
+      <button type="button" data-act="cancel-form" class="btn btn-ghost">Cancel</button>
+    </div>
+  </form>`;
+}
+function rowHtml(g, idx, canMove) {
+  if (editingId === g.$id) return `<li data-row="${g.$id}">${formHtml(g)}</li>`;
+  const n = escapeHtml(g.name);
+  const off = g.enabled === false;
+  const dis = editingId ? "disabled" : "";
+  const meta = [g.category, hostOf(g.url)].filter(Boolean).map(escapeHtml).join(" · ");
+  const arrow = (dir, d, label, disabled) => `<button type="button" data-act="${dir}" data-id="${g.$id}" aria-label="${label} ${n}" ${disabled || dis ? "disabled" : ""} class="glass-lite icon-btn"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg></button>`;
+  const actions = confirmingId === g.$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="cancel-delete" data-act="cancel-delete" data-id="${g.$id}" class="btn btn-ghost">Cancel</button>
+          <button type="button" data-act="confirm-delete" data-id="${g.$id}" class="btn btn-danger">Delete</button>
         </div>
-        <input data-field="category" data-id="${g.$id}" value="${escapeHtml(g.category || "")}" placeholder="Category" aria-label="Category" class="field hidden !w-28 sm:block" />
-        <label class="hidden shrink-0 items-center gap-2 text-[13px] text-ink-300 sm:flex">
-          <input type="checkbox" data-field="enabled" data-id="${g.$id}" ${g.enabled === false ? "" : "checked"} class="h-4 w-4 accent-red-500" /> On
-        </label>
-        <button data-delete="${g.$id}" title="Delete" aria-label="Delete" class="glass-lite icon-btn hover:!text-red-400">
-          <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="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg>
-        </button>
       </div>`
-      )
-      .join("");
-    if (!reduceMotion) animate("#admin-list > div", { opacity: [0, 1], y: [8, 0] }, { duration: 0.3, delay: stagger(0.03), ease: "easeOut" });
-    list.querySelectorAll("input[data-field]").forEach((input) => {
-      const commit = async () => {
-        const id = input.dataset.id;
-        const field = input.dataset.field;
-        const value = input.type === "checkbox" ? input.checked : input.value.trim();
-        try {
-          await tablesDB.updateRow({ databaseId: CONFIG.databaseId, tableId: CONFIG.gamesTableId, rowId: id, data: { [field]: value } });
-          toast("Saved");
-          await loadGames();
-        } catch (err) {
-          toast(err?.message || "Update failed", "error");
-        }
-      };
-      input.addEventListener(input.type === "checkbox" ? "change" : "blur", commit);
-    });
+    : `<div class="mt-3 flex flex-wrap items-center gap-2">
+        ${canMove ? arrow("up", "m6 15 6-6 6 6", "Move up:", idx === 0) + arrow("down", "m6 9 6 6 6-6", "Move down:", idx === adminRows.length - 1) : ""}
+        <button type="button" data-act="edit" data-id="${g.$id}" ${dis} class="btn btn-ghost">Edit${sr(" " + g.name)}</button>
+        <button type="button" data-act="delete" data-id="${g.$id}" ${dis} class="btn btn-ghost ml-auto hover:!text-red-300">Delete${sr(" " + g.name)}</button>
+      </div>`;
+  return `<li data-row="${g.$id}" class="glass-lite rounded-2xl p-3">
+    <div class="flex items-center gap-3">
+      <img src="${escapeHtml(rowIcon(g))}" alt="" class="tile-img h-12 w-12 shrink-0 rounded-[22.37%] object-cover ${off ? "opacity-50" : ""}" onerror="this.onerror=null;this.src='${monogramSrc(g.name)}'" />
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-[15px] font-medium">${n}${off ? '<span class="tag">Hidden</span>' : ""}</p>
+        <p class="truncate text-[13px] text-ink-300">${meta}</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-toggle="${g.$id}" ${off ? "" : "checked"} ${dis} />
+        <span>Visible${sr(" on site: " + g.name)}</span>
+      </label>
+    </div>
+    ${actions}
+  </li>`;
+}
-    list.querySelectorAll("[data-delete]").forEach((btn) =>
-      btn.addEventListener("click", async () => {
-        if (!confirm("Delete this game?")) return;
-        try {
-          await tablesDB.deleteRow({ databaseId: CONFIG.databaseId, tableId: CONFIG.gamesTableId, rowId: btn.dataset.delete });
-          toast("Deleted");
-          await renderAdminList();
-          await loadGames();
-        } catch (err) {
-          toast(err?.message || "Delete failed", "error");
-        }
-      })
-    );
-  } catch (err) {
-    list.innerHTML = `<p class="text-[14px] text-red-400">${escapeHtml(err?.message || "Failed to load games.")}</p>`;
+function renderAdmin(focusSels = []) {
+  dirty.games = false;
+  el("admin-form-slot").innerHTML = editingId === "new" ? formHtml(null) : "";
+  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; }
+  if (adminState === "error") {
+    sum.textContent = "";
+    list.innerHTML = `<li class="py-8 text-center"><p class="text-[14px] text-red-300">${escapeHtml(adminError)}</p><button type="button" data-act="retry" class="btn btn-ghost mt-3">Try again</button></li>`;
+    return;
+  }
+  const q = adminFilter;
+  const rows = q ? adminRows.filter((g) => `${g.name} ${g.category || ""}`.toLowerCase().includes(q)) : adminRows;
+  const visible = adminRows.filter((g) => g.enabled !== false).length;
+  sum.textContent = q ? `Showing ${rows.length} of ${adminRows.length}` : `${adminRows.length} ${adminRows.length === 1 ? "game" : "games"} · ${visible} visible`;
+  list.innerHTML = rows.length
+    ? rows.map((g) => rowHtml(g, adminRows.indexOf(g), !q)).join("")
+    : `<li class="py-8 text-center text-[14px] text-ink-300">${adminRows.length ? `No games match “${escapeHtml(adminFilter)}”.` : "No games yet. Choose “Add game” to add your first one."}</li>`;
+  if (editingId) { const n = el("gf-name"); 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; }
   }
 }
-el("add-game-form").addEventListener("submit", async (e) => {
+function cancelForm() {
+  const id = editingId;
+  editingId = null;
+  renderAdmin([id && id !== "new" ? `[data-act="edit"][data-id="${id}"]` : "#admin-add"]);
+}
+el("admin-add").addEventListener("click", () => { editingId = "new"; confirmingId = null; renderAdmin(); });
+el("admin-filter").addEventListener("input", (e) => { adminFilter = e.target.value.trim().toLowerCase(); renderAdmin(); });
+el("admin-body").addEventListener("click", (e) => {
+  const b = e.target.closest("[data-act]");
+  if (!b || b.disabled) return;
+  const { act, id } = b.dataset;
+  if (act === "retry") loadAdmin();
+  else if (act === "edit") { editingId = id; confirmingId = null; renderAdmin(); }
+  else if (act === "cancel-form") cancelForm();
+  else if (act === "delete") { confirmingId = id; renderAdmin(["#cancel-delete"]); }
+  else if (act === "cancel-delete") { confirmingId = null; renderAdmin([`[data-act="delete"][data-id="${id}"]`]); }
+  else if (act === "confirm-delete") { b.disabled = true; b.textContent = "Deleting…"; deleteGame(id); }
+  else if (act === "up") moveGame(id, -1);
+  else if (act === "down") moveGame(id, 1);
+});
+el("admin-body").addEventListener("change", (e) => {
+  const t = e.target;
+  if (t.matches("[data-toggle]")) toggleGame(t.dataset.toggle, t.checked);
+  else if (t.id === "gf-file" || t.id === "gf-remove") updatePreview();
+});
+el("admin-body").addEventListener("input", (e) => {
+  const t = e.target;
+  if (t.getAttribute?.("aria-invalid")) setErr(t.id, "");
+  if (t.id === "gf-iconurl") updatePreview();
+});
+el("admin-body").addEventListener("submit", (e) => { if (e.target.id === "game-form") submitGameForm(e); });
+function updatePreview() {
+  const img = el("gf-preview"), file = el("gf-file").files[0], url = el("gf-iconurl").value.trim();
+  if (previewUrl) { URL.revokeObjectURL(previewUrl); previewUrl = null; }
+  if (el("gf-remove")?.checked) img.src = monogramSrc(el("gf-name").value || "?");
+  else if (file && file.type.startsWith("image/")) img.src = previewUrl = URL.createObjectURL(file);
+  else if (isHttp(url)) img.src = url;
+  else img.src = img.dataset.base;
+}
+function setErr(id, msg) {
+  const inp = el(id), p = el(id + "-err");
+  p.textContent = msg || "";
+  p.classList.toggle("hidden", !msg);
+  if (msg) inp.setAttribute("aria-invalid", "true"); else inp.removeAttribute("aria-invalid");
+}
+function validateGameForm() {
+  const name = el("gf-name").value.trim(), url = el("gf-url").value.trim(), iu = el("gf-iconurl").value.trim(), f = el("gf-file").files[0];
+  const checks = [
+    ["gf-name", name ? "" : "Enter a name."],
+    ["gf-url", !url ? "Enter the game link." : isHttp(url) ? "" : "Enter a full link that starts with https://"],
+    ["gf-iconurl", !iu || isHttp(iu) ? "" : "Enter a full link that starts with https://"],
+    ["gf-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;
+}
+function flashRow(id) {
+  const li = el("admin-list").querySelector(`[data-row="${id}"]`);
+  if (!li) return;
+  li.scrollIntoView({ block: "nearest" });
+  if (!reduceMotion) animate(li, { backgroundColor: ["rgba(240,26,54,0.4)", "rgba(255,255,255,0.07)"] }, { duration: 1.2 });
+}
+async function submitGameForm(e) {
   e.preventDefault();
-  const statusEl = el("add-game-status");
-  const submitBtn = el("add-game-submit");
-  submitBtn.disabled = true;
-  statusEl.textContent = "Saving…";
+  if (!validateGameForm()) return;
+  const isEdit = editingId && editingId !== "new";
+  const existing = isEdit ? adminRows.find((r) => r.$id === editingId) : null;
+  const name = el("gf-name").value.trim(), url = el("gf-url").value.trim(), category = el("gf-category").value.trim();
+  const iconField = el("gf-iconurl").value.trim(), file = el("gf-file").files[0], enabled = el("gf-enabled").checked, remove = !!el("gf-remove")?.checked;
+  const btn = el("gf-submit"), label = btn.textContent;
+  btn.disabled = true; btn.textContent = "Saving…";
+  let uploadedId = null, oldFile = null;
   try {
-    const name = el("new-name").value.trim();
-    const url = el("new-url").value.trim();
-    const category = el("new-category").value.trim();
-    const iconUrlField = el("new-icon-url").value.trim();
-    const iconFile = el("new-icon-file").files[0];
-    let iconFileId = "";
-    if (iconFile) {
-      const uploaded = await storage.createFile({ bucketId: CONFIG.iconsBucketId, fileId: ID.unique(), file: iconFile });
-      iconFileId = uploaded.$id;
+    let iconFileId = existing?.iconFileId || "", iconUrl = existing?.iconUrl || "";
+    if (remove) { oldFile = iconFileId; iconFileId = ""; iconUrl = ""; }
+    else if (file) {
+      uploadedId = (await storage.createFile({ bucketId: CONFIG.iconsBucketId, fileId: ID.unique(), file })).$id;
+      oldFile = iconFileId; iconFileId = uploadedId; iconUrl = "";
+    } else if (iconField && iconField !== iconUrl) { oldFile = iconFileId; iconFileId = ""; iconUrl = iconField; }
+    else if (!iconField && iconUrl && !iconFileId) iconUrl = "";
+    const data = { name, url, category, iconFileId, iconUrl, enabled };
+    let row;
+    if (isEdit) {
+      row = await tablesDB.updateRow({ ...dbArgs, rowId: editingId, data });
+      adminRows = adminRows.map((r) => (r.$id === row.$id ? row : r));
+    } else {
+      data.order = adminRows.reduce((m, r) => Math.max(m, r.order ?? -1), -1) + 1;
+      row = await tablesDB.createRow({ ...dbArgs, rowId: ID.unique(), data });
+      adminRows = [...adminRows, row].sort(byOrder);
     }
+    if (oldFile) storage.deleteFile({ bucketId: CONFIG.iconsBucketId, fileId: oldFile }).catch(() => {});
+    editingId = null;
+    renderAdmin([`[data-act="edit"][data-id="${row.$id}"]`]);
+    flashRow(row.$id);
+    toast(isEdit ? `Saved ${name}` : `Added ${name}`);
+    loadGames();
+  } 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");
+  }
+}
-    await tablesDB.createRow({
-      databaseId: CONFIG.databaseId,
-      tableId: CONFIG.gamesTableId,
-      rowId: ID.unique(),
-      data: { name, url, category, iconFileId, iconUrl: iconFileId ? "" : iconUrlField, order: allGames.length, enabled: true },
+async function toggleGame(id, on) {
+  const row = adminRows.find((r) => r.$id === id);
+  if (!row) return;
+  const prev = row.enabled !== false;
+  row.enabled = on;
+  renderAdmin([`[data-toggle="${id}"]`]);
+  try {
+    await tablesDB.updateRow({ ...dbArgs, rowId: id, data: { enabled: on } });
+    adminSay(`${row.name} is now ${on ? "visible" : "hidden"}`);
+    loadGames();
+  } catch (err) {
+    row.enabled = prev;
+    renderAdmin([`[data-toggle="${id}"]`]);
+    toast(err?.message || "Couldn't update visibility", "error");
+  }
+}
+async function moveGame(id, dir) {
+  const list = [...adminRows].sort(byOrder);
+  const i = list.findIndex((r) => r.$id === id), j = i + dir;
+  if (i < 0 || j < 0 || j >= list.length) return;
+  const prev = list.map((r) => ({ ...r }));
+  [list[i], list[j]] = [list[j], list[i]];
+  const changes = [];
+  list.forEach((r, k) => { if (r.order !== k) { r.order = k; changes.push(r); } });
+  adminRows = list;
+  const name = list[j].name;
+  renderAdmin([`[data-act="${dir < 0 ? "up" : "down"}"][data-id="${id}"]`, `[data-act="${dir < 0 ? "down" : "up"}"][data-id="${id}"]`]);
+  adminSay(`${name} moved to position ${j + 1} of ${list.length}`);
+  try {
+    await Promise.all(changes.map((r) => tablesDB.updateRow({ ...dbArgs, rowId: r.$id, data: { order: r.order } })));
+    loadGames();
+  } catch (err) {
+    adminRows = prev;
+    renderAdmin();
+    toast(err?.message || "Couldn't change the order", "error");
+  }
+}
+async function deleteGame(id) {
+  const row = adminRows.find((r) => r.$id === id);
+  if (!row) return;
+  try {
+    await tablesDB.deleteRow({ ...dbArgs, rowId: id });
+    if (row.iconFileId) storage.deleteFile({ bucketId: CONFIG.iconsBucketId, fileId: row.iconFileId }).catch(() => {});
+    adminRows = adminRows.filter((r) => r.$id !== id);
+    confirmingId = null;
+    renderAdmin(["#admin-add"]);
+    toast(`Deleted ${row.name}`);
+    loadGames();
+  } catch (err) {
+    renderAdmin(["#cancel-delete"]);
+    toast(err?.message || "Couldn't delete. Try again.", "error");
+  }
+}
+/* ============================ 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();
+}
-    statusEl.textContent = "Added.";
-    el("add-game-form").reset();
-    await renderAdminList();
-    await loadGames();
-    toast(`${name} added`);
+/* ============================ 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) {
-    statusEl.textContent = "";
-    toast(err?.message || "Couldn't add game", "error");
-  } finally {
-    submitBtn.disabled = false;
-    setTimeout(() => (statusEl.textContent = ""), 2500);
+    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");
@@ -781,7 +1894,7 @@ gridEl.addEventListener("pointerout", (e) => {
 });
 el("player-frame").addEventListener("load", () => {
-  if (el("player-frame").getAttribute("src")) el("player-loading").style.display = "none";
+  if (el("player-frame").getAttribute("src") !== "about:blank") el("player-loading").style.display = "none";
 });
 /* ------------------------------ hero motion ------------------------------ */