mlv2boii 1.0.9 → 1.0.10

package/index.html

@@ -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)); }
@@ -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,21 @@
     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; }
+
   /* ---------- motion ---------- */
   .w { display: inline-block; opacity: 0; }
   .glowwrap { display: inline-block; filter: drop-shadow(0 0 22px rgba(240,26,54,0.55)); }
@@ -145,6 +160,8 @@
 
 <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>
 
 <!-- shared gradients for the hero shapes -->
@@ -152,8 +169,6 @@
   <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 ================= -->
@@ -164,10 +179,11 @@
       <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>
@@ -184,26 +200,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 +234,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 +251,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 +266,9 @@
           <p id="player-title" class="truncate text-[15px] font-semibold"></p>
         </div>
         <div class="flex shrink-0 items-center gap-2">
+          <button id="player-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>
@@ -264,10 +289,10 @@
 <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>
+    <form id="admin-login-form" role="dialog" aria-modal="true" aria-labelledby="pin-title" class="glass glass-sheet relative w-full max-w-[340px] rounded-[28px] p-6 opacity-0" data-fx>
+      <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>
@@ -278,47 +303,38 @@
 
 <!-- ================= 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 id="admin-backdrop" class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
   <div class="absolute inset-0 flex items-start justify-center p-0 sm:items-center sm:p-4">
-    <div id="admin-panel-card" 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-card" role="dialog" aria-modal="true" aria-labelledby="admin-title" class="glass glass-sheet relative flex h-full w-full flex-col opacity-0 sm:h-[85vh] sm:max-w-2xl sm:rounded-[32px]">
+      <div class="flex shrink-0 items-center justify-between gap-3 border-b border-white/[0.08] px-5 pb-3 pt-[calc(env(safe-area-inset-top)+0.75rem)]">
+        <div class="min-w-0">
+          <h2 id="admin-title" tabindex="-1" class="text-[17px] font-semibold leading-tight">Manage games</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">
+        <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 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>
-          <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>
-          </div>
-        </form>
-        <p class="mb-3 mt-8 text-[15px] font-semibold">Games</p>
-        <div id="admin-list" class="space-y-2"></div>
+      <div class="flex shrink-0 gap-2 px-5 pt-4">
+        <div class="min-w-0 flex-1">
+          <label for="admin-filter" class="sr-only">Filter games</label>
+          <input id="admin-filter" type="search" placeholder="Filter games" autocomplete="off" class="field" />
+        </div>
+        <button id="admin-add" type="button" class="btn btn-primary shrink-0">Add game</button>
+      </div>
+      <div id="admin-body" class="flex-1 overflow-y-auto px-5 py-4">
+        <div id="admin-form-slot"></div>
+        <ul id="admin-list" class="space-y-2" aria-label="Games"></ul>
       </div>
+      <p id="admin-live" role="status" class="sr-only"></p>
     </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">
@@ -361,7 +377,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 +411,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 +471,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 +542,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 +556,119 @@ 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").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("admin-panel")) {
+      if (confirmingId) { const id = confirmingId; confirmingId = null; renderAdmin([`[data-act="delete"][data-id="${id}"]`]); }
+      else if (editingId) cancelForm();
+      else closeAdminPanel();
+    }
+  } else if (e.key === "/" && !e.ctrlKey && !e.metaKey && !e.altKey && isHidden("player-modal") && isHidden("admin-login-modal") && isHidden("admin-panel")
+    && !/^(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 +676,348 @@ 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 isHttp = (v) => { try { const p = new URL(v).protocol; return p === "http:" || p === "https:"; } catch { return false; } };
+const sr = (t) => `<span class="sr-only">${escapeHtml(t)}</span>`;
+const rowIcon = (g) => iconSrcFor(g) || monogramSrc(g.name);
+const adminSay = (msg) => { const n = el("admin-live"); n.textContent = ""; setTimeout(() => (n.textContent = msg), 60); };
+const dbArgs = { databaseId: CONFIG.databaseId, tableId: CONFIG.gamesTableId };
+
+function openAdminPanel() {
+  beginDialog();
+  editingId = null; confirmingId = null; adminFilter = ""; el("admin-filter").value = "";
+  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-backdrop").addEventListener("click", () => { if (!editingId) 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 = []) {
+  el("admin-form-slot").innerHTML = editingId === "new" ? formHtml(null) : "";
+  const list = el("admin-list"), sum = el("admin-summary");
+  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");
+  }
+}
 
-    statusEl.textContent = "Added.";
-    el("add-game-form").reset();
-    await renderAdminList();
-    await loadGames();
-    toast(`${name} added`);
+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) {
-    statusEl.textContent = "";
-    toast(err?.message || "Couldn't add game", "error");
-  } finally {
-    submitBtn.disabled = false;
-    setTimeout(() => (statusEl.textContent = ""), 2500);
+    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");
+  }
+}
 
 /* ---------------------------- tile hover FX ---------------------------- */
 const gridEl = el("grid");
@@ -781,7 +1043,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 ------------------------------ */

package/package.json

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