added sys digger

sys_digger/index.html

@@ -15,7 +15,7 @@
             font-family: 'Courier New', monospace;
             overflow: hidden;
         }
-        canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='12' fill='none' stroke='%2300ff88' stroke-width='1' opacity='0.45'/><circle cx='16' cy='16' r='6' fill='none' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='2' x2='16' y2='9' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='23' x2='16' y2='30' stroke='%2300ff88' stroke-width='1.5'/><line x1='2' y1='16' x2='9' y2='16' stroke='%2300ff88' stroke-width='1.5'/><line x1='23' y1='16' x2='30' y2='16' stroke='%2300ff88' stroke-width='1.5'/><circle cx='16' cy='16' r='1.5' fill='%2300ff88'/></svg>") 16 16, crosshair; }
+        canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g transform='translate(16,16) rotate(-45)'><path d='M 0 -5 L -6 -5 A 5 5 0 0 0 -6 5 L 0 5 Z' fill='%23ff4444'/><path d='M 0 -5 L 6 -5 A 5 5 0 0 1 6 5 L 0 5 Z' fill='%23f5f5f5'/><path d='M -6 -5 L 6 -5 A 5 5 0 0 1 6 5 L -6 5 A 5 5 0 0 0 -6 -5 Z' fill='none' stroke='%23222222' stroke-width='1.2'/><line x1='0' y1='-5' x2='0' y2='5' stroke='%23555555' stroke-width='0.8'/></g></svg>") 16 16, auto; }
 
         #score {
             position: absolute;
@@ -60,6 +60,83 @@
             margin-top: 6px;
         }
 
+        /* ── Intro screen ── */
+        #intro {
+            display: flex;
+            position: absolute;
+            top: 0; left: 0;
+            width: 100%; height: 100%;
+            background: rgba(0, 0, 0, 0.92);
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            color: white;
+            text-align: center;
+            padding: 40px 20px;
+            z-index: 10;
+        }
+        #intro.hidden { display: none; }
+
+        #intro h1 {
+            font-size: 64px;
+            letter-spacing: 8px;
+            color: #00ff88;
+            text-shadow: 0 0 30px #00ff88, 0 0 60px #00ff8855;
+            margin-bottom: 6px;
+            animation: flicker 2s infinite alternate;
+        }
+        #intro .subtitle {
+            font-size: 15px;
+            letter-spacing: 4px;
+            color: #00ccff;
+            text-shadow: 0 0 10px #00ccff;
+            margin-bottom: 40px;
+            text-transform: uppercase;
+        }
+        #intro .instructions {
+            max-width: 480px;
+            margin-bottom: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 14px;
+        }
+        #intro .instruction-row {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 8px;
+            padding: 12px 18px;
+            text-align: left;
+        }
+        #intro .instruction-icon {
+            font-size: 26px;
+            flex-shrink: 0;
+            width: 36px;
+            text-align: center;
+        }
+        #intro .instruction-text {
+            font-size: 13px;
+            color: #aaa;
+            line-height: 1.5;
+        }
+        #intro .instruction-text strong { color: #fff; }
+        #start-btn {
+            padding: 16px 52px;
+            font-size: 20px;
+            font-family: 'Courier New', monospace;
+            font-weight: bold;
+            background: #00ff88;
+            color: #000;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            letter-spacing: 2px;
+            transition: background 0.2s, transform 0.1s;
+        }
+        #start-btn:hover { background: #00cc66; transform: scale(1.04); }
+
         /* ── Game-over overlay ── */
         #overlay {
             display: none;
@@ -197,12 +274,41 @@
 <div id="cystinstein-area">
     <div id="cystinstein-label">CYSTINSTEIN</div>
     <canvas id="cystinstein-canvas" width="130" height="130"></canvas>
-    <div id="docks-count">0 / 8 docks</div>
+    <div id="docks-count">0 / 6 docks</div>
 </div>
 
 <div id="score">Score: 0</div>
 <div id="highscore">Best: —</div>
 
+<div id="intro">
+    <h1>SYS DIGGER</h1>
+    <div class="subtitle">Protect the atom</div>
+
+    <div class="instructions">
+        <div class="instruction-row">
+            <div class="instruction-icon">⚛</div>
+            <div class="instruction-text">
+                A molecule sits at the center of the screen with <strong>anchor points</strong> around it.
+            </div>
+        </div>
+        <div class="instruction-row">
+            <div class="instruction-icon">💊</div>
+            <div class="instruction-text">
+                <strong>Click the glowing red anchor</strong> when an atom approaches to block the connection.
+            </div>
+        </div>
+        <div class="instruction-row">
+            <div class="instruction-icon">🧫</div>
+            <div class="instruction-text">
+                Each missed dock grows the <strong>Cystinstein</strong> in the top-left.
+                Allow <strong>${MAX_DOCKS} docks</strong> and it's fully formed — game over.
+            </div>
+        </div>
+    </div>
+
+    <button id="start-btn" onclick="startGame()">START</button>
+</div>
+
 <div id="overlay">
     <h1>CYSTINSTEIN FORMED!</h1>
     <p id="final-score"></p>