From ce997ddc723c56d4114fe4000cfbdace7c0cb97c Mon Sep 17 00:00:00 2001
From: ylhan <ylhan@hyonglin.com>
Date: Fri, 9 Oct 2026 03:06:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A1=B5=E6=94=B9=E7=89=88(?=
 =?UTF-8?q?=E6=B7=B1=E8=89=B2=E4=B8=BB=E8=A7=86=E8=A7=89+=E6=9E=81?=
 =?UTF-8?q?=E5=85=89=E8=83=8C=E6=99=AF+=E5=8A=A8=E6=95=88),=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=B5=B7=E7=BB=B5=E5=AE=9D=E5=AE=9D=E5=A4=A7=E5=86=92?=
 =?UTF-8?q?=E9=99=A9=E6=B8=B8=E6=88=8F=E4=B8=8E=E5=A8=B1=E4=B9=90=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 homepage/index.html         | 524 +++++++++++++++++-----
 homepage/spongebob-1-1.html | 859 ++++++++++++++++++++++++++++++++++++
 2 files changed, 1284 insertions(+), 99 deletions(-)
 create mode 100644 homepage/spongebob-1-1.html

diff --git a/homepage/index.html b/homepage/index.html
index bc31a4c..9812efe 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -5,46 +5,61 @@
   <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data:; script-src 'self' 'unsafe-inline'; connect-src https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: *;">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3C/svg%3E">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="theme-color" content="#05070f">
   <title>hyonglin.top</title>
   <style>
-    /* ===== 主题变量（默认浅色，深色自适应） ===== */
+    /* ===== 主题：默认深色（主视觉），可切换浅色并记住 ===== */
     :root {
-      --bg: #f2f5fb;
-      --text: #141b2e;
+      --bg: #05070f;
+      --bg-2: #0a0f1f;
+      --text: #f0f4ff;
+      --muted: #93a0c0;
+      --card: rgba(148,163,216,.07);
+      --card-2: rgba(148,163,216,.025);
+      --border: rgba(148,180,255,.13);
+      --inset: rgba(8,12,24,.55);
+      --inner: inset 0 1px 0 rgba(255,255,255,.07);
+      --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
+      --shadow-hover: 0 2px 6px rgba(0,0,0,.55), 0 22px 52px rgba(0,0,0,.6);
+      --grad: linear-gradient(120deg, #818cf8, #38bdf8 55%, #22d3ee);
+      --line: rgba(148,180,255,.07);
+      --noise-op: .06;
+      --aurora-op: .5;
+      --sky-a: rgba(59,130,246,.38); --sky-b: rgba(34,211,238,.16);
+      --orb-op: .5;
+      --ga: rgba(99,102,241,.30);
+      --gb: rgba(34,211,238,.22);
+      --spot: rgba(129,140,248,.14);
+    }
+    :root[data-theme="light"] {
+      --bg: #eef2fa;
+      --bg-2: #e4eaf6;
+      --text: #101728;
       --muted: #5c6a84;
-      --card: rgba(255,255,255,.66);
-      --border: rgba(15,30,70,.08);
-      --inset: rgba(255,255,255,.9);
-      --shadow: 0 10px 30px rgba(30,50,100,.08);
-      --shadow-hover: 0 16px 40px rgba(30,50,100,.14);
+      --card: rgba(255,255,255,.62);
+      --card-2: rgba(255,255,255,.4);
+      --border: rgba(15,30,70,.09);
+      --inset: rgba(255,255,255,.85);
+      --inner: inset 0 1px 0 rgba(255,255,255,.65);
+      --shadow: 0 1px 2px rgba(30,50,100,.05), 0 10px 30px rgba(30,50,100,.08);
+      --shadow-hover: 0 2px 4px rgba(30,50,100,.06), 0 18px 44px rgba(30,50,100,.16);
       --grad: linear-gradient(120deg, #6366f1, #0ea5e9 55%, #22d3ee);
+      --line: rgba(20,40,90,.055);
+      --noise-op: .035;
+      --aurora-op: .28;
       --sky-a: #dbeafe; --sky-b: #cffafe;
       --orb-op: .5;
-      --ga: rgba(99,102,241,.17);
-      --gb: rgba(34,211,238,.15);
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: #0a0f1e;
-        --text: #eef2ff;
-        --muted: #8b97b3;
-        --card: rgba(255,255,255,.055);
-        --border: rgba(255,255,255,.09);
-        --inset: rgba(10,15,30,.45);
-        --shadow: 0 10px 30px rgba(0,0,0,.35);
-        --shadow-hover: 0 16px 42px rgba(0,0,0,.5);
-        --sky-a: rgba(59,130,246,.28); --sky-b: rgba(34,211,238,.16);
-        --orb-op: .38;
-        --ga: rgba(129,140,248,.22);
-        --gb: rgba(34,211,238,.20);
-      }
+      --ga: rgba(99,102,241,.16);
+      --gb: rgba(34,211,238,.14);
+      --spot: rgba(99,102,241,.10);
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; }
+    html { scroll-behavior: smooth; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-      background: var(--bg);
+      background: linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg));
       color: var(--text);
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
@@ -52,54 +67,183 @@
     }
     ::selection { background: #6366f1; color: #fff; }
 
-    /* ===== 背景光斑（JS 驱动：缓慢漂移 + 鼠标视差）与跟随光晕 ===== */
+    /* ===== 背景分层：极光 + 网格 + 噪点 + 光斑 + 跟随光晕 ===== */
+    .aurora {
+      position: fixed; inset: -25%; z-index: 0; pointer-events: none;
+      opacity: var(--aurora-op); filter: blur(110px); will-change: transform;
+      background: conic-gradient(from 210deg at 50% 38%,
+        rgba(99,102,241,.42), rgba(34,211,238,.30), rgba(217,70,239,.30),
+        rgba(56,189,248,.34), rgba(99,102,241,.42));
+      -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 26%, #000 18%, transparent 68%);
+      mask-image: radial-gradient(ellipse 62% 52% at 50% 26%, #000 18%, transparent 68%);
+      animation: spin 70s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(1turn); } }
+    .bg-grid {
+      position: fixed; inset: 0; z-index: 0; pointer-events: none;
+      background-image:
+        linear-gradient(var(--line) 1px, transparent 1px),
+        linear-gradient(90deg, var(--line) 1px, transparent 1px);
+      background-size: 46px 46px;
+      -webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 8%, #000 25%, transparent 72%);
+      mask-image: radial-gradient(ellipse 100% 78% at 50% 8%, #000 25%, transparent 72%);
+    }
+    .bg-noise {
+      position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--noise-op);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
+    }
     .orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: var(--orb-op); will-change: transform; }
-    .orb1 { width: 480px; height: 480px; top: -160px; left: -120px; background: #a5b4fc; }
-    .orb2 { width: 420px; height: 420px; bottom: -140px; right: -100px; background: #67e8f9; }
-    .orb3 { width: 360px; height: 360px; top: 32%; right: -150px; background: #f5d0fe; opacity: calc(var(--orb-op) * .8); }
+    .orb1 { width: 520px; height: 520px; top: -180px; left: -130px; background: #6366f1; }
+    .orb2 { width: 460px; height: 460px; bottom: -150px; right: -110px; background: #22d3ee; }
+    .orb3 { width: 380px; height: 380px; top: 32%; right: -160px; background: #d946ef; opacity: calc(var(--orb-op) * .7); }
     .glow { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; opacity: 0; }
     .glow-a { width: 560px; height: 560px; background: radial-gradient(circle, var(--ga), transparent 65%); }
     .glow-b { width: 420px; height: 420px; background: radial-gradient(circle, var(--gb), transparent 65%); }
 
-    .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 36px 20px 44px; }
+    /* ===== 顶栏 ===== */
+    header.topbar {
+      position: sticky; top: 0; z-index: 10;
+      display: flex; align-items: center; gap: 14px;
+      max-width: 1080px; margin: 0 auto; padding: 14px 20px;
+    }
+    header.topbar::before {
+      content: ''; position: absolute; inset: 0; z-index: -1;
+      background: color-mix(in srgb, var(--bg) 72%, transparent);
+      backdrop-filter: blur(14px) saturate(1.3);
+      -webkit-backdrop-filter: blur(14px) saturate(1.3);
+      border-bottom: 1px solid var(--border);
+      opacity: 0; transition: opacity .25s ease;
+    }
+    header.topbar.stuck::before { opacity: 1; }
+    .brand {
+      display: flex; align-items: center; gap: 10px;
+      font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
+      color: var(--text); text-decoration: none;
+    }
+    .brand .logo {
+      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
+      background: var(--grad);
+      box-shadow: 0 4px 18px rgba(99,102,241,.5);
+      transition: transform .3s cubic-bezier(.3,.7,.3,1.4);
+    }
+    .brand:hover .logo { transform: rotate(-8deg) scale(1.08); }
+    .top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
+    .chip {
+      display: inline-flex; align-items: center; gap: 8px;
+      font-size: .74rem; color: var(--muted);
+      border: 1px solid var(--border); background: var(--inset);
+      padding: 6px 12px; border-radius: 999px;
+    }
+    .dot {
+      width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0;
+      box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 0 8px rgba(52,211,153,.8);
+      animation: pulse 2.6s ease-out infinite;
+    }
+    @keyframes pulse {
+      0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 0 8px rgba(52,211,153,.8); }
+      70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0), 0 0 8px rgba(52,211,153,.8); }
+      100% { box-shadow: 0 0 0 0 rgba(52,211,153,0), 0 0 8px rgba(52,211,153,.8); }
+    }
+    .tbtn {
+      width: 36px; height: 36px; border-radius: 11px; cursor: pointer;
+      border: 1px solid var(--border); background: var(--inset);
+      font-size: 1rem; line-height: 1; color: var(--text);
+      display: flex; align-items: center; justify-content: center;
+      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
+    }
+    .tbtn:hover { transform: translateY(-1px); border-color: #818cf8; box-shadow: 0 6px 20px rgba(99,102,241,.3); }
+    .tbtn:active { transform: scale(.94); }
+
+    .wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 18px 20px 44px; }
 
     /* ===== Bento 网格 ===== */
     .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
 
     .card {
-      background: var(--card);
+      background: linear-gradient(180deg, var(--card), var(--card-2));
       border: 1px solid var(--border);
-      border-radius: 22px;
-      padding: 20px 22px;
+      border-radius: 24px;
+      padding: 22px 24px;
       backdrop-filter: blur(16px) saturate(1.3);
       -webkit-backdrop-filter: blur(16px) saturate(1.3);
-      box-shadow: var(--shadow);
+      box-shadow: var(--inner), var(--shadow);
       position: relative;
       overflow: hidden;
-      animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
-      animation-delay: var(--d, 0s);
+      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
     }
-    @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
+    /* 滚动进入：模糊浮现（IntersectionObserver 触发） */
+    .card:not(.in) { opacity: 0; }
+    .card.in { animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--d, 0s); }
+    @keyframes rise {
+      from { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(10px); }
+      to   { opacity: 1; transform: none; filter: blur(0); }
+    }
+    /* 跟随光标的卡内聚光 */
+    .card::before {
+      content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
+      background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 62%);
+      opacity: 0; transition: opacity .3s ease;
+    }
+    .card:hover::before { opacity: 1; }
+    /* 悬停渐变发光描边 */
+    .card::after {
+      content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
+      padding: 1px;
+      background: linear-gradient(135deg,
+        color-mix(in srgb, var(--ac, #818cf8) 75%, transparent), transparent 38%,
+        transparent 62%, color-mix(in srgb, var(--ac, #22d3ee) 55%, transparent));
+      -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
+      -webkit-mask-composite: xor; mask-composite: exclude;
+      opacity: 0; transition: opacity .3s ease;
+    }
+    .card:hover::after { opacity: 1; }
+    .card:not(.hero):hover {
+      transform: translateY(-4px);
+      box-shadow: var(--inner), var(--shadow-hover), 0 0 44px -14px color-mix(in srgb, var(--ac, #818cf8) 45%, transparent);
+    }
+    .card > * { position: relative; z-index: 2; }
 
-    /* ===== Hero：标题 + 搜索 ===== */
-    .hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
-    .hero h1 {
-      font-size: clamp(2.2rem, 5vw, 3.3rem);
-      font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
-      background: var(--grad);
-      -webkit-background-clip: text; background-clip: text; color: transparent;
+    /* ===== Hero：问候 + 标题 + 搜索（3D 倾斜） ===== */
+    .hero {
+      grid-column: span 4; grid-row: span 2;
+      display: flex; flex-direction: column; justify-content: center;
+      background:
+        radial-gradient(460px 320px at 88% -12%, color-mix(in srgb, #818cf8 20%, transparent), transparent 62%),
+        linear-gradient(180deg, var(--card), var(--card-2));
+      transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
+      will-change: transform;
     }
-    .hero p.sub { color: var(--muted); margin-top: 10px; font-size: .98rem; }
+    .eyebrow {
+      display: inline-flex; align-items: center; gap: 8px;
+      font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
+      color: var(--muted); margin-bottom: 14px;
+    }
+    .eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px rgba(99,102,241,.8); }
+    .hero h1 {
+      font-size: clamp(2.8rem, 6.6vw, 4.4rem);
+      font-weight: 800; letter-spacing: -.04em; line-height: 1.02;
+      background: var(--grad); background-size: 220% 100%;
+      -webkit-background-clip: text; background-clip: text; color: transparent;
+      filter: drop-shadow(0 0 26px rgba(99,102,241,.35));
+      animation: grademove 9s ease-in-out infinite alternate;
+    }
+    @keyframes grademove { to { background-position: 100% 0; } }
+    .hero p.sub { color: var(--muted); margin-top: 14px; font-size: 1.02rem; }
+    .hero p.sub strong { color: var(--text); font-weight: 650; }
 
     form.search {
       display: flex; align-items: center; gap: 8px;
-      margin-top: 26px; padding: 6px 6px 6px 16px;
+      margin-top: 28px; padding: 6px 6px 6px 16px;
       background: var(--inset);
       border: 1px solid var(--border);
       border-radius: 999px;
-      transition: border-color .16s ease, box-shadow .16s ease;
+      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
+    }
+    form.search:focus-within {
+      border-color: #818cf8;
+      box-shadow: 0 0 0 3px rgba(99,102,241,.22), 0 12px 36px rgba(99,102,241,.25);
+      transform: translateY(-1px);
     }
-    form.search:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
     form.search .sicon { font-size: 1rem; opacity: .8; flex-shrink: 0; }
     form.search select {
       flex-shrink: 0; cursor: pointer;
@@ -108,31 +252,47 @@
       padding: 7px 10px; outline: none; max-width: 118px;
     }
     form.search select:focus-visible { border-color: #818cf8; color: var(--text); }
+    form.search select option { color: #101728; }
     form.search input {
       flex: 1; min-width: 0; background: none; border: none; outline: none;
       color: var(--text); font-size: .95rem; padding: 9px 0;
     }
     form.search input::placeholder { color: var(--muted); }
+    form.search kbd {
+      flex-shrink: 0; font-family: inherit; font-size: .72rem; color: var(--muted);
+      border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
+      padding: 2px 7px; background: var(--card);
+    }
     form.search button {
       border: none; cursor: pointer; flex-shrink: 0;
-      padding: 10px 24px; border-radius: 999px;
+      padding: 10px 26px; border-radius: 999px;
       font-size: .9rem; font-weight: 600; color: #fff;
-      background: var(--grad);
-      transition: transform .14s ease, filter .14s ease;
+      background: var(--grad); background-size: 180% 100%;
+      box-shadow: 0 6px 22px rgba(99,102,241,.45);
+      transition: transform .14s ease, filter .14s ease, box-shadow .2s ease, background-position .4s ease;
     }
-    form.search button:hover { transform: scale(1.03); filter: brightness(1.08); }
+    form.search button:hover { transform: scale(1.05); filter: brightness(1.12); background-position: 100% 0; box-shadow: 0 8px 30px rgba(56,189,248,.5); }
+    form.search button:active { transform: scale(.97); }
 
     /* ===== 天气卡 ===== */
-    .sky { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(165deg, var(--sky-a), var(--sky-b)); }
-    .card .label { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
-    .sky .emoji { font-size: 3.2rem; line-height: 1; }
-    .sky .temp { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
+    .sky {
+      grid-column: span 2; grid-row: span 2;
+      display: flex; flex-direction: column; justify-content: center; gap: 6px;
+      background: linear-gradient(165deg, var(--sky-a), var(--sky-b));
+      --ac: #38bdf8;
+    }
+    .card .label { font-size: .72rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
+    .sky .emoji { font-size: 3.6rem; line-height: 1; animation: floaty 4.5s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(251,191,36,.35)); }
+    @keyframes floaty { 50% { transform: translateY(-8px); } }
+    .sky .temp { font-size: clamp(2.4rem, 4.6vw, 3.1rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
     .wcity { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
 
     /* ===== 日期 / 时间卡 ===== */
     .clockcard, .datecard { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; }
-    .clockcard .value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
-    .datecard .value { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
+    .clockcard .value { font-size: clamp(2.1rem, 4.6vw, 2.9rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
+    .clockcard .value .sec { font-size: .55em; color: var(--muted); font-weight: 600; }
+    .datecard .value { font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
+    .datecard .value .wk { color: var(--muted); font-weight: 600; }
 
     /* ===== 服务分组面板 ===== */
     .panel { grid-column: span 3; }
@@ -147,68 +307,115 @@
       border: 1px solid var(--border);
       border-radius: 14px;
       text-decoration: none; color: var(--text);
-      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
+      position: relative;
+      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
     }
     ul.tiles a:hover {
       transform: translateY(-3px);
-      border-color: color-mix(in srgb, var(--ac) 55%, transparent);
-      box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 22%, transparent);
+      border-color: color-mix(in srgb, var(--ac) 60%, transparent);
+      background: color-mix(in srgb, var(--ac) 8%, var(--inset));
+      box-shadow: 0 8px 26px color-mix(in srgb, var(--ac) 30%, transparent);
     }
+    ul.tiles a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
+    ul.tiles a .go {
+      margin-left: auto; flex-shrink: 0;
+      font-size: .85rem; color: var(--ac);
+      opacity: 0; transform: translate(-5px, 5px);
+      transition: opacity .18s ease, transform .18s ease;
+    }
+    ul.tiles a:hover .go { opacity: 1; transform: none; }
     ul.tiles .icon {
       font-size: 1.1rem; width: 36px; height: 36px; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       border-radius: 11px;
-      background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 32%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
+      background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 38%, transparent), color-mix(in srgb, var(--ac) 12%, transparent));
+      box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 40%, transparent);
+      transition: transform .25s cubic-bezier(.3,.7,.3,1.5), box-shadow .25s ease;
     }
+    ul.tiles a:hover .icon { transform: scale(1.12) rotate(-6deg); box-shadow: 0 0 16px 0 color-mix(in srgb, var(--ac) 45%, transparent); }
     ul.tiles .meta { display: flex; flex-direction: column; min-width: 0; }
     ul.tiles .name { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     ul.tiles .desc { color: var(--muted); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
     /* 分组配色 */
-    .s-self  { --ac: #10b981; }
-    .s-ai    { --ac: #8b5cf6; }
-    .s-cloud { --ac: #3b82f6; }
-    .s-util  { --ac: #f59e0b; }
+    .s-self  { --ac: #34d399; }
+    .s-ai    { --ac: #a78bfa; }
+    .s-cloud { --ac: #60a5fa; }
+    .s-util  { --ac: #fbbf24; }
+    .s-game  { --ac: #f472b6; grid-column: span 6; }
+    ul.tiles li.wide { grid-column: 1 / -1; }
 
     /* ===== 页脚 ===== */
-    footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 0; }
+    footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+    footer.card:hover { transform: none; box-shadow: none; }
+    footer.card::before, footer.card::after { display: none; }
     footer { grid-column: span 6; text-align: center; color: var(--muted); font-size: .8rem; }
-    footer a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); margin-left: 6px; }
-    footer a:hover { color: #6366f1; border-color: #6366f1; }
+    .switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
+    .switch a {
+      color: var(--muted); text-decoration: none; font-size: .78rem;
+      padding: 6px 14px; border-radius: 999px;
+      border: 1px solid var(--border); background: var(--inset);
+      transition: transform .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
+    }
+    .switch a:hover { color: var(--text); border-color: #818cf8; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(99,102,241,.25); }
+    .switch a[aria-current="page"] {
+      color: #fff; border-color: transparent; background: var(--grad);
+      box-shadow: 0 6px 20px rgba(99,102,241,.45);
+    }
 
     /* ===== 响应式 ===== */
     @media (max-width: 880px) {
       .grid { grid-template-columns: repeat(2, 1fr); }
-      .hero { grid-column: span 2; grid-row: auto; }
+      .hero { grid-column: span 2; grid-row: auto; transform: none !important; }
       .sky { grid-column: span 2; grid-row: auto; flex-direction: row; align-items: center; gap: 18px; }
       .sky .emoji { font-size: 2.6rem; }
       .panel { grid-column: span 2; }
+      .chip { display: none; }
     }
     @media (max-width: 540px) {
       .grid { grid-template-columns: 1fr; gap: 12px; }
       .clockcard, .datecard, footer { grid-column: auto; }
-      .wrap { padding: 22px 14px 32px; }
+      .wrap { padding: 12px 14px 32px; }
+      header.topbar { padding: 12px 14px; }
+      form.search kbd { display: none; }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .card { animation: none; }
-      ul.tiles a, form.search button { transition: none; }
+      html { scroll-behavior: auto; }
+      .card:not(.in) { opacity: 1; }
+      .card.in { animation: none; }
+      .hero h1, .sky .emoji, .dot, .aurora { animation: none; }
+      .hero { transform: none !important; }
+      .card, ul.tiles a, ul.tiles .icon, form.search, form.search button, .switch a, .tbtn, .brand .logo { transition: none; }
     }
   </style>
+  <noscript><style>.card { opacity: 1 !important; } .topbar::before { opacity: 1; }</style></noscript>
 </head>
 <body>
+  <div class="aurora"></div>
+  <div class="bg-grid"></div>
+  <div class="bg-noise"></div>
   <div class="orb orb1" id="orb1"></div>
   <div class="orb orb2" id="orb2"></div>
   <div class="orb orb3" id="orb3"></div>
   <div class="glow glow-a" id="glowa"></div>
   <div class="glow glow-b" id="glowb"></div>
 
+  <header class="topbar" id="topbar">
+    <a class="brand" href="/"><span class="logo"></span>hyonglin.top</a>
+    <div class="top-right">
+      <span class="chip"><span class="dot"></span>服务运行中</span>
+      <button id="themeBtn" class="tbtn" type="button">☀️</button>
+    </div>
+  </header>
+
   <main class="wrap">
     <div class="grid">
-      <!-- Hero：标题 + Bing 搜索 -->
+      <!-- Hero：问候 + 标题 + 搜索 -->
       <section class="card hero" style="--d:.05s">
+        <span class="eyebrow" id="greet">个人主页</span>
         <h1>hyonglin.top</h1>
-        <p class="sub">个人服务导航 · 随时可达</p>
+        <p class="sub">个人服务导航 · <strong>随时可达</strong>，按 <kbd style="font-family:inherit;font-size:.8em;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;">/</kbd> 快速搜索</p>
         <form class="search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
           <span class="sicon">🔍</span>
           <select name="engine" id="engine" aria-label="搜索引擎">
@@ -218,6 +425,7 @@
             <option value="duckduckgo">DuckDuckGo</option>
           </select>
           <input type="text" name="q" placeholder="输入关键词，回车搜索…" autocomplete="off" aria-label="搜索">
+          <kbd>/</kbd>
           <button type="submit">搜索</button>
         </form>
       </section>
@@ -232,7 +440,7 @@
 
       <!-- 时间 / 日期 -->
       <section class="card clockcard" style="--d:.2s">
-        <div class="label">时间</div>
+        <div class="label">时间 · 本地</div>
         <div class="value" id="clockval">--:--:--</div>
       </section>
       <section class="card datecard" style="--d:.26s">
@@ -241,51 +449,145 @@
       </section>
 
       <!-- 自建服务 -->
-      <section class="card panel s-self" style="--d:.34s">
+      <section class="card panel s-self" style="--d:.3s">
         <h2>📡 自建服务<span class="count">5</span></h2>
         <ul class="tiles">
-          <li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span></a></li>
-          <li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span></a></li>
-          <li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span></a></li>
-          <li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span></a></li>
-          <li><a href="/xinquandashboard"><span class="icon">🖼️</span><span class="meta"><span class="name">Xinquan Dashboard</span><span class="desc">hyonglin.top/xinquandashboard</span></span></a></li>
+          <li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span><span class="go">↗</span></a></li>
+          <li><a href="/xinquandashboard"><span class="icon">🖼️</span><span class="meta"><span class="name">Xinquan Dashboard</span><span class="desc">hyonglin.top/xinquandashboard</span></span><span class="go">↗</span></a></li>
         </ul>
       </section>
 
       <!-- AI 助手 -->
-      <section class="card panel s-ai" style="--d:.4s">
+      <section class="card panel s-ai" style="--d:.36s">
         <h2>🤖 AI 助手<span class="count">2</span></h2>
         <ul class="tiles">
-          <li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span></a></li>
-          <li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span></a></li>
+          <li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span><span class="go">↗</span></a></li>
         </ul>
       </section>
 
       <!-- 云服务 -->
-      <section class="card panel s-cloud" style="--d:.46s">
+      <section class="card panel s-cloud" style="--d:.42s">
         <h2>☁️ 云服务<span class="count">3</span></h2>
         <ul class="tiles">
-          <li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span></a></li>
-          <li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span></a></li>
-          <li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span></a></li>
+          <li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span><span class="go">↗</span></a></li>
         </ul>
       </section>
 
       <!-- 常用 -->
-      <section class="card panel s-util" style="--d:.52s">
+      <section class="card panel s-util" style="--d:.48s">
         <h2>🔧 常用<span class="count">3</span></h2>
         <ul class="tiles">
-          <li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span></a></li>
-          <li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span></a></li>
-          <li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span></a></li>
+          <li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span><span class="go">↗</span></a></li>
+          <li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span><span class="go">↗</span></a></li>
         </ul>
       </section>
 
-      <footer style="--d:.58s" class="card"><span><a href="/terminal/">终端版</a> · <a href="/" aria-current="page">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>hyonglin.top</footer>
+      <!-- 娱乐 -->
+      <section class="card panel s-game" style="--d:.54s">
+        <h2>🎮 娱乐<span class="count">1</span></h2>
+        <ul class="tiles">
+          <li class="wide"><a href="/spongebob-1-1.html"><span class="icon">🍍</span><span class="meta"><span class="name">海绵宝宝大冒险 · 比奇堡 1-1</span><span class="desc">横版闯关小游戏 · 方向键移动，空格跳跃，Shift 加速，P 暂停，R 重开</span></span><span class="go">↗</span></a></li>
+        </ul>
+      </section>
+
+      <footer style="--d:.6s" class="card">
+        <nav class="switch">
+          <a href="/terminal/">终端版</a>
+          <a href="/" aria-current="page">Bento</a>
+          <a href="/brutal/">Brutal</a>
+          <a href="/swiss/">Swiss</a>
+          <a href="/hud/">HUD</a>
+        </nav>
+        <span>© <span id="year">2025</span> hyonglin.top</span>
+      </footer>
     </div>
   </main>
 
   <script>
+  /* ===== 主题切换：默认深色，点 ☀️/🌙 切换并记住 ===== */
+  (function(){
+    var root = document.documentElement;
+    var btn = document.getElementById('themeBtn');
+    if (!btn) return;
+    var saved = null;
+    try { saved = localStorage.getItem('theme'); } catch (e) {}
+    if (saved === 'dark' || saved === 'light') root.setAttribute('data-theme', saved);
+    function isDark() { return root.getAttribute('data-theme') !== 'light'; }
+    function label() {
+      btn.textContent = isDark() ? '☀️' : '🌙';
+      btn.setAttribute('aria-label', isDark() ? '切换到浅色模式' : '切换到深色模式');
+    }
+    btn.addEventListener('click', function(){
+      var next = isDark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { localStorage.setItem('theme', next); } catch (e) {}
+      label();
+    });
+    label();
+  })();
+
+  /* ===== 顶栏滚动后浮现毛玻璃底 ===== */
+  (function(){
+    var bar = document.getElementById('topbar');
+    if (!bar) return;
+    function onScroll() { bar.classList.toggle('stuck', window.scrollY > 8); }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+  })();
+
+  /* ===== 卡片滚动进入动画（模糊浮现，逐个错峰） ===== */
+  (function(){
+    var cards = Array.prototype.slice.call(document.querySelectorAll('.card'));
+    var reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced || !('IntersectionObserver' in window)) {
+      cards.forEach(function(c){ c.classList.add('in'); });
+      return;
+    }
+    var io = new IntersectionObserver(function(entries){
+      entries.forEach(function(en){
+        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
+      });
+    }, { threshold: .08 });
+    cards.forEach(function(c){ io.observe(c); });
+  })();
+
+  /* ===== 卡内聚光：跟随光标的高光点 ===== */
+  (function(){
+    if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    document.querySelectorAll('.card').forEach(function(card){
+      card.addEventListener('pointermove', function(e){
+        var r = card.getBoundingClientRect();
+        card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
+        card.style.setProperty('--my', (e.clientY - r.top) + 'px');
+      }, { passive: true });
+    });
+  })();
+
+  /* ===== Hero 3D 倾斜：随光标轻微透视转动 ===== */
+  (function(){
+    if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    var hero = document.querySelector('.hero');
+    if (!hero) return;
+    hero.addEventListener('pointermove', function(e){
+      var r = hero.getBoundingClientRect();
+      var px = (e.clientX - r.left) / r.width - .5;
+      var py = (e.clientY - r.top) / r.height - .5;
+      hero.style.setProperty('--ry', (px * 5).toFixed(2) + 'deg');
+      hero.style.setProperty('--rx', (-py * 4).toFixed(2) + 'deg');
+    }, { passive: true });
+    hero.addEventListener('pointerleave', function(){
+      hero.style.setProperty('--ry', '0deg');
+      hero.style.setProperty('--rx', '0deg');
+    });
+  })();
+
   /* ===== 动态光晕：三团背景光斑缓慢漂移 + 鼠标视差，两团柔光跟随光标（带延迟拖尾） ===== */
   (function(){
     if (!window.matchMedia || matchMedia('(prefers-reduced-motion: reduce)').matches) return; // 减少动态效果：保持静态
@@ -342,15 +644,39 @@
     apply();
   })();
 
-  /* ===== 日期 + 时钟 ===== */
+  /* ===== “/” 快捷键聚焦搜索 ===== */
+  (function(){
+    var input = document.querySelector('form.search input');
+    if (!input) return;
+    document.addEventListener('keydown', function(e){
+      var tag = (document.activeElement && document.activeElement.tagName) || '';
+      if (e.key === '/' && tag !== 'INPUT' && tag !== 'SELECT' && tag !== 'TEXTAREA') {
+        e.preventDefault();
+        input.focus();
+      }
+    });
+  })();
+
+  /* ===== 问候语 ===== */
+  (function(){
+    var el = document.getElementById('greet');
+    if (!el) return;
+    var h = new Date().getHours();
+    var g = h < 5 ? '夜深了' : h < 11 ? '早上好' : h < 13 ? '中午好' : h < 18 ? '下午好' : h < 23 ? '晚上好' : '夜深了';
+    el.textContent = g + ' · hyonglin';
+  })();
+
+  /* ===== 日期 + 时钟（秒数弱化显示） ===== */
   var week = ['日','一','二','三','四','五','六'];
   function pad2(n) { return (n < 10 ? '0' : '') + n; }
   function updateClock() {
     var now = new Date();
     var c = document.getElementById('clockval');
-    if (c) c.textContent = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + ':' + pad2(now.getSeconds());
+    if (c) c.innerHTML = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + '<span class="sec">:' + pad2(now.getSeconds()) + '</span>';
     var d = document.getElementById('dateval');
-    if (d) d.textContent = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' 周' + week[now.getDay()];
+    if (d) d.innerHTML = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' <span class="wk">周' + week[now.getDay()] + '</span>';
+    var y = document.getElementById('year');
+    if (y) y.textContent = now.getFullYear();
   }
   setInterval(updateClock, 1000);
   updateClock();
diff --git a/homepage/spongebob-1-1.html b/homepage/spongebob-1-1.html
new file mode 100644
index 0000000..455cf50
--- /dev/null
+++ b/homepage/spongebob-1-1.html
@@ -0,0 +1,859 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>海绵宝宝大冒险 · 比奇堡 1-1</title>
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2254%22%20height%3D%2258%22%20rx%3D%229%22%20fill%3D%22%23f7d842%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2211%22%20r%3D%222.6%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2219%22%20r%3D%222.1%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2246%22%20r%3D%222.3%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2253%22%20cy%3D%2250%22%20r%3D%221.9%22%20fill%3D%22%23e3c02c%22%2F%3E%3Cpath%20d%3D%22M18%2017l-2-4M24%2015.5v-4.5M30%2017l2-4M36%2017l-2-4M42%2015.5v-4.5M48%2017l2-4%22%20stroke%3D%22%23333%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2227%22%20r%3D%229%22%20fill%3D%22%23fff%22%20stroke%3D%22%23caa42a%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2227%22%20r%3D%229%22%20fill%3D%22%23fff%22%20stroke%3D%22%23caa42a%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2225.5%22%20cy%3D%2227%22%20r%3D%224%22%20fill%3D%22%235aa7e8%22%2F%3E%3Ccircle%20cx%3D%2243.5%22%20cy%3D%2227%22%20r%3D%224%22%20fill%3D%22%235aa7e8%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2227%22%20r%3D%222%22%20fill%3D%22%23111%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2227%22%20r%3D%222%22%20fill%3D%22%23111%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2239%22%20r%3D%223.4%22%20fill%3D%22%23f0a35e%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2239%22%20r%3D%223.4%22%20fill%3D%22%23f0a35e%22%2F%3E%3Cpath%20d%3D%22M20%2037q12%2014%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%237a4a12%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2242.5%22%20width%3D%224.6%22%20height%3D%226.5%22%20rx%3D%221%22%20fill%3D%22%23fff%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%22.8%22%2F%3E%3Crect%20x%3D%2232.6%22%20y%3D%2242.5%22%20width%3D%224.6%22%20height%3D%226.5%22%20rx%3D%221%22%20fill%3D%22%23fff%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E">
+<style>
+  html,body{margin:0;padding:0;background:#06213a;height:100%;overflow:hidden;
+    font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;}
+  #wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
+  canvas{max-width:100vw;max-height:100vh;aspect-ratio:960/544;width:100%;
+    image-rendering:pixelated;box-shadow:0 0 40px #000a;border-radius:6px;background:#7ec8ff;}
+  #pad{position:fixed;inset:auto 0 0 0;display:none;justify-content:space-between;
+    padding:14px 18px 22px;pointer-events:none;user-select:none;-webkit-user-select:none;}
+  #pad .grp{display:flex;gap:14px;pointer-events:auto;}
+  .pbtn{width:64px;height:64px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff55;
+    color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;touch-action:none;}
+  .pbtn:active{background:#ffffff55;}
+  @media (pointer:coarse){ #pad{display:flex;} }
+</style>
+</head>
+<body>
+<div id="wrap"><canvas id="game" width="960" height="544"></canvas></div>
+<div id="pad">
+  <div class="grp">
+    <div class="pbtn" data-k="ArrowLeft">◀</div>
+    <div class="pbtn" data-k="ArrowRight">▶</div>
+  </div>
+  <div class="grp">
+    <div class="pbtn" data-k="ShiftLeft">跑</div>
+    <div class="pbtn" data-k="Space">跳</div>
+  </div>
+</div>
+<script>
+'use strict';
+/* =========================================================
+   海绵宝宝大冒险 · 比奇堡 1-1
+   仿《超级马里奥》第一关的横版平台游戏（单文件，无外部资源）
+   方向键 / WASD 移动，空格 / ↑ 跳跃，Shift 加速跑，P 暂停，R 重开
+   ========================================================= */
+const cv = document.getElementById('game');
+const ctx = cv.getContext('2d');
+const W = 960, H = 544, T = 32, LW = 224, LH = 17;
+
+/* ---------------- 输入 ---------------- */
+const keys = {}, pressed = {};
+const PREVENT = ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'];
+addEventListener('keydown', e => {
+  if (PREVENT.includes(e.code)) e.preventDefault();
+  initAudio();
+  if (!keys[e.code]) pressed[e.code] = true;
+  keys[e.code] = true;
+  if ((state === 'start' || state === 'over' || state === 'win') &&
+      (e.code === 'Enter' || e.code === 'Space' || e.code === 'KeyR')) startGame();
+  if (e.code === 'KeyP' && (state === 'play' || state === 'dying')) paused = !paused;
+  if (e.code === 'KeyM') muted = !muted;
+});
+addEventListener('keyup', e => { keys[e.code] = false; });
+cv.addEventListener('pointerdown', () => {
+  initAudio();
+  if (state === 'start' || state === 'over' || state === 'win') startGame();
+});
+document.querySelectorAll('.pbtn').forEach(b => {
+  const k = b.dataset.k;
+  const on = e => { e.preventDefault(); initAudio();
+    if (state === 'start' || state === 'over' || state === 'win') { startGame(); return; }
+    if (!keys[k]) pressed[k] = true; keys[k] = true; };
+  const off = e => { e.preventDefault(); keys[k] = false; };
+  b.addEventListener('pointerdown', on);
+  b.addEventListener('pointerup', off);
+  b.addEventListener('pointercancel', off);
+  b.addEventListener('pointerleave', off);
+});
+const kLeft  = () => keys.ArrowLeft  || keys.KeyA;
+const kRight = () => keys.ArrowRight || keys.KeyD;
+const kDown  = () => keys.ArrowDown  || keys.KeyS;
+const kJump  = () => keys.Space || keys.ArrowUp || keys.KeyW;
+const kJumpPressed = () => pressed.Space || pressed.ArrowUp || pressed.KeyW;
+
+/* ---------------- 音效（WebAudio 合成） ---------------- */
+let AC = null, muted = false;
+function initAudio() {
+  if (!AC) { try { AC = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) {} }
+  if (AC && AC.state === 'suspended') AC.resume();
+}
+function tone(f0, f1, dur, type, vol, delay) {
+  if (!AC || muted) return;
+  type = type || 'square'; vol = vol || 0.07; delay = delay || 0;
+  const t = AC.currentTime + delay;
+  const o = AC.createOscillator(), g = AC.createGain();
+  o.type = type;
+  o.frequency.setValueAtTime(f0, t);
+  if (f1) o.frequency.exponentialRampToValueAtTime(Math.max(1, f1), t + dur);
+  g.gain.setValueAtTime(vol, t);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
+  o.connect(g); g.connect(AC.destination);
+  o.start(t); o.stop(t + dur + 0.03);
+}
+const sfx = {
+  jump()  { tone(300, 700, 0.18, 'square', 0.05); },
+  coin()  { tone(988, 0, 0.07, 'square', 0.06); tone(1319, 0, 0.18, 'square', 0.06, 0.07); },
+  stomp() { tone(320, 80, 0.13, 'triangle', 0.13); },
+  bump()  { tone(170, 90, 0.1, 'square', 0.07); },
+  brick() { tone(240, 50, 0.16, 'sawtooth', 0.09); },
+  power() { [523, 659, 784, 1047].forEach((f, i) => tone(f, 0, 0.12, 'square', 0.06, i * 0.08)); },
+  hurt()  { tone(440, 110, 0.35, 'sawtooth', 0.08); },
+  die()   { tone(600, 70, 0.9, 'square', 0.08); },
+  win()   { [659, 784, 1047, 1319, 1047, 1319, 1568].forEach((f, i) => tone(f, 0, 0.16, 'square', 0.07, i * 0.13)); },
+  tick()  { tone(1200, 0, 0.04, 'square', 0.04); }
+};
+
+/* ---------------- 关卡数据 ---------------- */
+let map = [], blockInfo = {};
+const FLAG_X = 214;                 // 旗杆所在列
+const POLE_PX = FLAG_X * T + 14;    // 旗杆像素 x
+
+function buildLevel() {
+  map = Array.from({ length: LH }, () => new Array(LW).fill(0));
+  blockInfo = {};
+  const set = (x, y, v) => { if (x >= 0 && x < LW && y >= 0 && y < LH) map[y][x] = v; };
+  const rect = (x1, y1, x2, y2, v) => { for (let y = y1; y <= y2; y++) for (let x = x1; x <= x2; x++) set(x, y, v); };
+  const pipe = (x, h) => { for (let y = 15 - h; y <= 14; y++) { set(x, y, 5); set(x + 1, y, 5); } };
+  const q = (x, y, kind) => { set(x, y, 3); blockInfo[x + ',' + y] = kind; };
+
+  // 地面（留出 5 处深坑）
+  const segs = [[0,68],[71,107],[110,152],[155,175],[178,201],[204,223]];
+  for (const [a, b] of segs) for (let x = a; x <= b; x++) { map[15][x] = 1; map[16][x] = 1; }
+
+  // 砖块与问号块（还原 1-1 的节奏）
+  q(16,11,'coin');
+  set(20,11,2); q(21,11,'coin'); set(22,11,2); q(23,11,'coin'); set(24,11,2);
+  q(22,7,'patty');
+  pipe(31,2); pipe(41,3); pipe(50,4); pipe(60,4);
+  set(35,11,2); q(36,11,'coin'); set(37,11,2);
+  q(45,11,'patty');
+  rect(55,11,57,11,2);
+  q(64,11,'coin'); q(65,7,'coin');
+  set(73,11,2); q(74,11,'coin'); set(75,11,2);
+  rect(79,7,81,7,2); set(80,11,2);
+  rect(84,11,86,11,2);
+  q(90,11,'patty');
+  q(94,11,'coin');
+  set(97,7,2); q(98,7,'coin'); set(99,7,2); set(98,11,2);
+  rect(103,11,105,11,2);
+  q(112,11,'coin');
+  rect(116,7,118,7,2); set(117,11,2);
+  pipe(121,2);
+  set(126,11,2); q(127,11,'coin'); set(128,11,2); q(129,11,'coin'); set(130,11,2);
+  q(134,7,'patty'); set(134,11,2);
+  pipe(138,3);
+  rect(143,11,145,11,2);
+  q(149,11,'coin');
+  set(158,11,2); q(159,11,'coin'); set(160,11,2);
+  q(164,11,'coin'); q(168,7,'coin'); set(168,11,2); q(172,11,'coin');
+  set(180,11,2); set(181,11,2); q(182,11,'coin'); set(183,11,2); set(184,11,2);
+  q(188,11,'coin');
+  // 终点前阶梯
+  for (let i = 0; i < 7; i++) rect(192 + i, 15 - (i + 1), 192 + i, 14, 6);
+  // 旗杆基座（装饰，不挡人）
+  set(FLAG_X, 14, 8);
+}
+
+/* 敌人配置：痞老板(步行) + 水母(漂浮) */
+const ENEMY_DEFS = [
+  ['p',26],['p',34],['p',44],['p',53],['p',58],['p',66],['p',78],
+  ['p',85,11],['p',104,11],['p',117,7],
+  ['p',128],['p',144],['p',159],['p',181],['p',189],
+  ['j',37,10],['j',62,9],['j',76,10],['j',92,9],['j',113,10],
+  ['j',131,9],['j',147,10],['j',166,9],['j',174,10],['j',190,9]
+];
+
+/* ---------------- 实体与状态 ---------------- */
+const P = { x:96, y:0, w:20, h:28, vx:0, vy:0, dir:1, onGround:false,
+            big:false, inv:0, anim:0, jumpHeld:false, jbuf:0, coyote:0 };
+let enemies = [], items = [], popcoins = [], parts = [], popups = [], bumps = [];
+let camX = 0, score = 0, coins = 0, lives = 3, time = 300, timeAcc = 0;
+let state = 'start', paused = false, deathT = 0, winT = 0, flagY = 118, combo = 0;
+let now = 0;
+
+function resetLevel(full) {
+  buildLevel();
+  enemies = ENEMY_DEFS.map(d => {
+    if (d[0] === 'p') {
+      const topY = (d[2] !== undefined ? d[2] : 15) * T;
+      return { type:'p', x:d[1]*T+6, y:topY-22, w:20, h:22, vx:-0.8, vy:0,
+               baseX:d[1]*T, baseY:topY-22, active:false, squash:0, dead:false };
+    }
+    return { type:'j', x:d[1]*T+6, y:d[2]*T, w:26, h:26,
+             baseX:d[1]*T+6, baseY:d[2]*T, t:Math.random()*100,
+             active:false, squash:0, dead:false };
+  });
+  items = []; popcoins = []; parts = []; popups = []; bumps = [];
+  P.big = false; P.h = 28; P.w = 20;
+  P.x = 96; P.y = 15*T - P.h; P.vx = 0; P.vy = 0; P.dir = 1; P.inv = 60;
+  P.jbuf = 0; P.coyote = 0; P.onGround = false;
+  camX = 0; time = 300; timeAcc = 0; combo = 0;
+  flagY = 118; winT = 0; deathT = 0;
+  if (full) { score = 0; coins = 0; lives = 3; }
+}
+function startGame() { resetLevel(true); state = 'play'; paused = false; }
+
+/* ---------------- 瓦片辅助 ---------------- */
+function tileAt(tx, ty) {
+  if (tx < 0 || tx >= LW) return 1;      // 左右墙
+  if (ty < 0 || ty >= LH) return 0;
+  return map[ty][tx];
+}
+function solid(v) { return v >= 1 && v <= 7; }
+
+function addPopup(x, y, txt) { popups.push({ x, y, txt, t: 0 }); }
+function addParts(x, y, color, n) {
+  for (let i = 0; i < n; i++)
+    parts.push({ x, y, vx:(Math.random()-0.5)*5, vy:-Math.random()*6-2,
+                 c:color, s:4+Math.random()*4, life:60 });
+}
+
+/* 顶砖块 */
+function bumpBlock(tx, ty) {
+  const v = map[ty][tx];
+  bumps.push({ tx, ty, t: 0 });
+  if (v === 3) {
+    const kind = blockInfo[tx + ',' + ty];
+    map[ty][tx] = 4;
+    if (kind === 'patty') {
+      items.push({ x: tx*T+6, y: ty*T, vx: 1.6, vy: 0, w: 20, h: 16, rise: 16, t: 0 });
+      sfx.power();
+    } else {
+      popcoins.push({ x: tx*T+16, y: ty*T, t: 0 });
+      coins++; score += 200; sfx.coin();
+      if (coins >= 100) { coins -= 100; lives++; addPopup(tx*T, ty*T-20, '1-UP!'); }
+    }
+  } else if (v === 2) {
+    if (P.big) {
+      map[ty][tx] = 0;
+      addParts(tx*T+16, ty*T+16, '#c9684a', 6);
+      score += 50; sfx.brick();
+    } else sfx.bump();
+  } else sfx.bump();
+  // 顶砖块震死站在上面的痞老板
+  for (const e of enemies) {
+    if (!e.dead && e.type === 'p' && Math.abs(e.x + e.w/2 - (tx*T+16)) < 26 &&
+        Math.abs(e.y + e.h - ty*T) < 4) killEnemy(e, false);
+  }
+}
+
+function killEnemy(e, stomped) {
+  e.dead = true; e.squash = 1; e.vy = -6;
+  if (stomped) {
+    combo = Math.min(combo + 1, 5);
+    const pts = 100 * Math.pow(2, combo - 1);
+    score += pts; addPopup(e.x, e.y - 8, '' + pts);
+    sfx.stomp();
+  } else { score += 100; sfx.stomp(); }
+}
+
+/* ---------------- 玩家物理 ---------------- */
+function moveX(o, dx) {
+  o.x += dx;
+  const y0 = Math.floor(o.y / T), y1 = Math.floor((o.y + o.h - 1) / T);
+  if (dx > 0) {
+    const tx = Math.floor((o.x + o.w - 1) / T);
+    for (let ty = y0; ty <= y1; ty++) if (solid(tileAt(tx, ty))) { o.x = tx*T - o.w; o.hitWallR = true; return; }
+  } else if (dx < 0) {
+    const tx = Math.floor(o.x / T);
+    for (let ty = y0; ty <= y1; ty++) if (solid(tileAt(tx, ty))) { o.x = (tx+1)*T; o.hitWallL = true; return; }
+  }
+}
+function moveY(o, dy, isPlayer) {
+  o.y += dy;
+  const x0 = Math.floor(o.x / T), x1 = Math.floor((o.x + o.w - 1) / T);
+  o.onGround = false;
+  if (dy > 0) {
+    const ty = Math.floor((o.y + o.h) / T);
+    for (let tx = x0; tx <= x1; tx++) if (solid(tileAt(tx, ty))) {
+      o.y = ty*T - o.h; o.vy = 0; o.onGround = true; return;
+    }
+  } else if (dy < 0) {
+    const ty = Math.floor(o.y / T);
+    let best = null;
+    for (let tx = x0; tx <= x1; tx++) if (solid(tileAt(tx, ty))) {
+      if (!best || Math.abs(tx*T + 16 - (o.x + o.w/2)) < Math.abs(best*T + 16 - (o.x + o.w/2))) best = tx;
+    }
+    if (best !== null) {
+      o.y = (ty+1)*T; o.vy = 0;
+      if (isPlayer) bumpBlock(best, ty);
+      return;
+    }
+  }
+}
+
+/* ---------------- 更新 ---------------- */
+function update() {
+  if (state === 'dying') {
+    P.vy += 0.55; P.y += P.vy; deathT++;
+    if (deathT > 110) {
+      lives--;
+      if (lives <= 0) state = 'over';
+      else { resetLevel(false); state = 'play'; }
+    }
+    return;
+  }
+  if (state === 'win') {
+    winT++;
+    flagY = Math.min(flagY + 5, 414);
+    if (P.y + P.h < 15*T - 2) { P.vy += 0.6; P.y = Math.min(P.y + P.vy, 15*T - P.h); }
+    if (winT === 100) { score += time * 50; }
+    camUpdate();
+    return;
+  }
+  if (state !== 'play') return;
+
+  // 计时
+  timeAcc++;
+  if (timeAcc >= 24) { timeAcc = 0; time--; if (time === 50) sfx.tick();
+    if (time <= 0) { die(); return; } }
+
+  /* --- 玩家 --- */
+  const maxWalk = 3.1, maxRun = 4.7, acc = 0.32, fric = 0.22;
+  const run = keys.ShiftLeft || keys.ShiftRight;
+  const maxV = run ? maxRun : maxWalk;
+  if (kLeft())  { P.vx = Math.max(P.vx - acc, -maxV); P.dir = -1; }
+  else if (kRight()) { P.vx = Math.min(P.vx + acc, maxV); P.dir = 1; }
+  else {
+    if (P.vx > 0) P.vx = Math.max(0, P.vx - fric);
+    else if (P.vx < 0) P.vx = Math.min(0, P.vx + fric);
+  }
+  if (kJumpPressed()) P.jbuf = 7; else if (P.jbuf > 0) P.jbuf--;
+  if (P.onGround) P.coyote = 6; else if (P.coyote > 0) P.coyote--;
+  if (P.jbuf > 0 && P.coyote > 0) {
+    P.jbuf = 0; P.coyote = 0;
+    P.vy = P.vx > 3.6 ? -12.2 : -11.2;
+    P.onGround = false; P.jumpHeld = true; sfx.jump();
+  }
+  if (!kJump()) P.jumpHeld = false;
+  const g = (P.vy < 0 && P.jumpHeld && kJump()) ? 0.34 : 0.62;
+  P.vy = Math.min(P.vy + g, 13);
+  if (P.inv > 0) P.inv--;
+  if (Math.abs(P.vx) > 0.2 && P.onGround) P.anim += Math.abs(P.vx);
+
+  moveX(P, P.vx);
+  moveY(P, P.vy, true);
+  if (P.x < camX) { P.x = camX; P.vx = Math.max(0, P.vx); }
+  if (P.x < 0) { P.x = 0; P.vx = 0; }
+
+  // 掉坑
+  if (P.y > LH*T + 40) { die(); return; }
+
+  // 到达旗杆（身体碰到旗杆线即过关）
+  if (P.x + P.w >= POLE_PX) {
+    state = 'win'; winT = 0; P.vx = 0; P.vy = 0;
+    P.x = POLE_PX - P.w/2 - 2;
+    sfx.win();
+    return;
+  }
+
+  /* --- 敌人 --- */
+  combo = P.onGround ? 0 : combo;
+  for (const e of enemies) {
+    if (e.dead) {
+      e.vy += 0.5; e.y += e.vy;
+      continue;
+    }
+    if (!e.active) {
+      if (e.x < camX + W + 32 && e.x > camX - 100) e.active = true;
+      else continue;
+    }
+    if (e.x < camX - 200) { e.dead = true; continue; }
+    if (e.type === 'p') {
+      e.hitWallL = e.hitWallR = false;
+      moveX(e, e.vx);
+      if (e.hitWallL) e.vx = Math.abs(e.vx);
+      if (e.hitWallR) e.vx = -Math.abs(e.vx);
+      e.vy = Math.min(e.vy + 0.5, 12);
+      moveY(e, e.vy, false);
+      e.anim = (e.anim || 0) + 0.2;
+    } else {
+      e.t += 0.03;
+      e.x = e.baseX + Math.sin(e.t * 0.7) * 46;
+      e.y = e.baseY + Math.sin(e.t * 1.3) * 46;
+    }
+    // 与玩家碰撞
+    if (P.inv <= 0 &&
+        P.x < e.x + e.w && P.x + P.w > e.x &&
+        P.y < e.y + e.h && P.y + P.h > e.y) {
+      if (P.vy > 0.5 && P.y + P.h - e.y < 16 + P.vy) {
+        killEnemy(e, true);
+        P.vy = kJump() ? -11 : -8;
+      } else hurt();
+    }
+  }
+  enemies = enemies.filter(e => !(e.dead && e.y > LH*T + 80));
+
+  /* --- 道具（蟹黄堡） --- */
+  for (const it of items) {
+    it.t++;
+    if (it.rise > 0) { it.y -= 1; it.rise--; continue; }
+    it.hitWallL = it.hitWallR = false;
+    moveX(it, it.vx);
+    if (it.hitWallL) it.vx = Math.abs(it.vx);
+    if (it.hitWallR) it.vx = -Math.abs(it.vx);
+    it.vy = Math.min(it.vy + 0.4, 10);
+    moveY(it, it.vy, false);
+    if (P.x < it.x + it.w && P.x + P.w > it.x && P.y < it.y + it.h && P.y + P.h > it.y) {
+      it.got = true; score += 1000; addPopup(it.x, it.y - 10, '1000');
+      if (!P.big) {
+        P.big = true; P.y -= 16; P.h = 44; P.w = 22;
+        sfx.power();
+      } else sfx.coin();
+    }
+  }
+  items = items.filter(it => !it.got && it.y < LH*T + 60);
+
+  /* --- 其他动画 --- */
+  for (const c of popcoins) c.t++;
+  popcoins = popcoins.filter(c => c.t < 26);
+  for (const p of parts) { p.vy += 0.4; p.x += p.vx; p.y += p.vy; p.life--; }
+  parts = parts.filter(p => p.life > 0);
+  for (const u of popups) u.t++;
+  popups = popups.filter(u => u.t < 50);
+  for (const b of bumps) b.t++;
+  bumps = bumps.filter(b => b.t < 12);
+
+  camUpdate();
+}
+
+function camUpdate() {
+  const target = P.x + P.w/2 - W * 0.38;
+  camX = Math.max(camX, Math.min(Math.max(0, target), LW*T - W));
+  camX = Math.max(0, Math.min(camX, LW*T - W));
+}
+
+function hurt() {
+  if (P.inv > 0) return;
+  if (P.big) {
+    P.big = false; P.h = 28; P.w = 20; P.y += 16; P.inv = 120;
+    sfx.hurt();
+  } else die();
+}
+function die() {
+  if (state !== 'play') return;
+  state = 'dying'; deathT = 0; P.vy = -11; sfx.die();
+}
+
+/* ---------------- 绘制 ---------------- */
+function rr(g, x, y, w, h, r) {
+  g.beginPath();
+  g.moveTo(x+r, y);
+  g.arcTo(x+w, y, x+w, y+h, r);
+  g.arcTo(x+w, y+h, x, y+h, r);
+  g.arcTo(x, y+h, x, y, r);
+  g.arcTo(x, y, x+w, y, r);
+  g.closePath();
+}
+
+/* 背景气泡 */
+const bubbles = Array.from({ length: 34 }, () => ({
+  x: Math.random()*LW*T, y: Math.random()*H, r: 2+Math.random()*5, s: 0.3+Math.random()*0.7
+}));
+
+function drawBG() {
+  const g = ctx;
+  const grad = g.createLinearGradient(0, 0, 0, H);
+  grad.addColorStop(0, '#8fd3ff'); grad.addColorStop(0.55, '#3f9be0'); grad.addColorStop(1, '#1c5fae');
+  g.fillStyle = grad; g.fillRect(0, 0, W, H);
+  // 光柱
+  g.save(); g.globalAlpha = 0.10; g.fillStyle = '#fff';
+  for (let i = 0; i < 5; i++) {
+    const x = ((i*430 - camX*0.2) % (W+400) + W+400) % (W+400) - 200;
+    g.beginPath(); g.moveTo(x, 0); g.lineTo(x+90, 0); g.lineTo(x+210, H); g.lineTo(x+60, H); g.fill();
+  }
+  g.restore();
+  // 远景珊瑚剪影
+  g.save(); g.globalAlpha = 0.25; g.fillStyle = '#0d3f73';
+  for (let i = 0; i < 40; i++) {
+    const wx = i*260 + (i%3)*70, sx = wx - camX*0.4;
+    if (sx < -200 || sx > W+200) continue;
+    const hh = 60 + (i*37 % 90);
+    g.beginPath(); g.ellipse(sx, 15*T, 90+(i%4)*22, hh, 0, Math.PI, 0); g.fill();
+    g.beginPath(); g.ellipse(sx+120, 15*T, 40+(i%3)*18, hh*0.6, 0, Math.PI, 0); g.fill();
+  }
+  g.restore();
+  // 上升气泡
+  g.save(); g.globalAlpha = 0.35; g.strokeStyle = '#eaffff'; g.lineWidth = 1.5;
+  for (const b of bubbles) {
+    b.y -= b.s; if (b.y < -10) { b.y = H + 10; b.x = camX + Math.random()*W; }
+    const sx = b.x - camX*0.6;
+    if (sx < -20 || sx > W+20) continue;
+    g.beginPath(); g.arc(sx, b.y, b.r, 0, 7); g.stroke();
+  }
+  g.restore();
+}
+
+function drawTile(tx, ty, v) {
+  const g = ctx;
+  let x = tx*T - camX, y = ty*T;
+  const b = bumps.find(b => b.tx === tx && b.ty === ty);
+  if (b) y -= Math.sin(b.t/12*Math.PI) * 8;
+  if (v === 1) { // 沙地
+    g.fillStyle = '#e0a95f'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#f5cf8d'; g.fillRect(x, y, T, 5);
+    g.fillStyle = '#b97f3e';
+    g.fillRect(x+4, y+12, 4, 3); g.fillRect(x+18, y+20, 5, 3); g.fillRect(x+26, y+9, 3, 3);
+    g.strokeStyle = '#00000018'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
+  } else if (v === 2) { // 珊瑚砖
+    g.fillStyle = '#c9684a'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#e88a68'; g.fillRect(x, y, T, 4);
+    g.fillStyle = '#8f4630';
+    g.fillRect(x, y+15, T, 2); g.fillRect(x+15, y+2, 2, 13); g.fillRect(x+7, y+17, 2, 15); g.fillRect(x+24, y+17, 2, 15);
+    g.strokeStyle = '#00000030'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
+  } else if (v === 3) { // 问号块（蟹堡包按钮）
+    const pulse = 0.5 + 0.5*Math.sin(now/220 + tx);
+    g.fillStyle = '#f2a93b'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#ffd98a'; g.fillRect(x+2, y+2, T-4, 4);
+    g.fillStyle = '#a8641c'; g.fillRect(x, y+T-4, T, 4);
+    g.fillStyle = '#7a4a12';
+    g.fillRect(x+3, y+3, 4, 4); g.fillRect(x+T-7, y+3, 4, 4);
+    g.fillRect(x+3, y+T-7, 4, 4); g.fillRect(x+T-7, y+T-7, 4, 4);
+    g.fillStyle = `rgba(255,255,255,${0.55 + 0.45*pulse})`;
+    g.font = 'bold 20px monospace'; g.textAlign = 'center';
+    g.fillText('?', x+T/2, y+T-8);
+  } else if (v === 4) { // 已用
+    g.fillStyle = '#9a6a3c'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#7a4a26'; g.fillRect(x+4, y+4, T-8, T-8);
+    g.strokeStyle = '#00000030'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
+  } else if (v === 5) { // 珊瑚管
+    const isTop = tileAt(tx, ty-1) !== 5;
+    g.fillStyle = '#e0607e'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#f99ab0'; g.fillRect(x+3, y, 6, T);
+    g.fillStyle = '#a83a55'; g.fillRect(x+T-6, y, 6, T);
+    if (isTop) {
+      g.fillStyle = '#e0607e'; g.fillRect(x-3, y, T+6, 12);
+      g.fillStyle = '#f99ab0'; g.fillRect(x-3, y, T+6, 4);
+      g.strokeStyle = '#00000040'; g.strokeRect(x-2.5, y+0.5, T+5, 11);
+    }
+  } else if (v === 6) { // 岩石阶梯
+    g.fillStyle = '#9a8f84'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#c2b8ab'; g.fillRect(x, y, T, 4);
+    g.fillStyle = '#6f655c'; g.fillRect(x, y+T-4, T, 4);
+    g.fillStyle = '#7d736a'; g.fillRect(x+8, y+12, 6, 4); g.fillRect(x+20, y+20, 5, 3);
+    g.strokeStyle = '#00000025'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
+  } else if (v === 7 || v === 8) { // 旗杆基座
+    g.fillStyle = '#5b8bd0'; g.fillRect(x, y, T, T);
+    g.fillStyle = '#8fb4ea'; g.fillRect(x, y, T, 5);
+    g.fillStyle = '#33568f'; g.fillRect(x, y+T-5, T, 5);
+  }
+}
+
+function drawFlag() {
+  const g = ctx, x = POLE_PX - camX;
+  if (x < -80 || x > W+80) return;
+  g.fillStyle = '#cfd8e3'; g.fillRect(x-2, 96, 4, 15*T-96);
+  g.fillStyle = '#fff'; g.beginPath(); g.arc(x, 92, 6, 0, 7); g.fill();
+  // 旗帜：锚图案
+  g.save(); g.translate(x, flagY);
+  g.fillStyle = '#d43b3b';
+  g.beginPath(); g.moveTo(0, 0); g.lineTo(46, 12); g.lineTo(0, 26); g.closePath(); g.fill();
+  g.strokeStyle = '#fff'; g.lineWidth = 2;
+  g.beginPath(); g.moveTo(14, 6); g.lineTo(14, 19);
+  g.arc(14, 17, 6, 0, Math.PI); g.moveTo(9, 9); g.lineTo(19, 9); g.stroke();
+  g.restore();
+}
+
+function drawKrustyKrab() {
+  const g = ctx, x = 217*T - camX;
+  if (x < -300 || x > W+60) return;
+  const gy = 15*T;
+  // 船形主体
+  g.fillStyle = '#c98a4b'; rr(g, x, gy-96, 150, 96, 10); g.fill();
+  g.fillStyle = '#8a5a2b'; g.fillRect(x, gy-96, 150, 10);
+  g.fillStyle = '#f7e6c5'; g.fillRect(x+14, gy-74, 40, 34);
+  g.fillStyle = '#7ec8ff'; g.fillRect(x+18, gy-70, 32, 26);
+  g.fillStyle = '#8a3b2b'; rr(g, x+86, gy-66, 40, 66, 6); g.fill();
+  g.fillStyle = '#f7e6c5'; g.font = 'bold 11px sans-serif'; g.textAlign = 'center';
+  g.fillText('KRUSTY KRAB', x+75, gy-82);
+  // 顶部锚招牌
+  g.strokeStyle = '#2b4a8f'; g.lineWidth = 5;
+  g.beginPath(); g.moveTo(x+75, gy-140); g.lineTo(x+75, gy-104);
+  g.arc(x+75, gy-110, 14, 0.15*Math.PI, 0.85*Math.PI); g.moveTo(x+61, gy-132); g.lineTo(x+89, gy-132); g.stroke();
+  g.beginPath(); g.arc(x+75, gy-144, 6, 0, 7); g.stroke();
+}
+
+/* 海绵宝宝 */
+function drawBob(g, x, y, w, h, dir, anim, big, inv, jumping, run) {
+  if (inv && Math.floor(now/90) % 2) return;
+  g.save();
+  g.translate(x + w/2, y + h);
+  g.scale(dir * (w/22), h/44);
+  const swing = jumping ? 0 : (Math.abs(anim) > 0.1 ? Math.sin(anim*0.45) : 0);
+  // 腿
+  g.strokeStyle = '#f7d842'; g.lineWidth = 3;
+  g.beginPath();
+  g.moveTo(-4, -14); g.lineTo(-4 - swing*4, -2);
+  g.moveTo(4, -14);  g.lineTo(4 + swing*4, -2);
+  g.stroke();
+  // 鞋
+  g.fillStyle = '#222';
+  g.beginPath(); g.ellipse(-5 - swing*4, -1, 6, 3, 0, 0, 7); g.fill();
+  g.beginPath(); g.ellipse(5 + swing*4, -1, 6, 3, 0, 0, 7); g.fill();
+  // 袜子条纹
+  g.fillStyle = '#fff'; g.fillRect(-6 - swing*4, -8, 4, 4); g.fillRect(3 + swing*4, -8, 4, 4);
+  g.fillStyle = '#d43b3b'; g.fillRect(-6 - swing*4, -8, 4, 1.5); g.fillRect(3 + swing*4, -8, 4, 1.5);
+  // 裤子
+  g.fillStyle = '#8a5a2b'; g.fillRect(-11, -18, 22, 5);
+  g.fillStyle = '#333'; g.fillRect(-11, -18, 22, 1.6);
+  // 衬衫 + 领带
+  g.fillStyle = '#fff'; g.fillRect(-9, -21, 18, 3.5);
+  g.fillStyle = '#d43b3b';
+  g.beginPath(); g.moveTo(0, -21); g.lineTo(-3, -16); g.lineTo(0, -12); g.lineTo(3, -16); g.closePath(); g.fill();
+  // 身体
+  g.fillStyle = '#f7d842'; rr(g, -12, -44, 24, 24, 4); g.fill();
+  g.strokeStyle = '#c9a91f'; g.lineWidth = 1.2; rr(g, -12, -44, 24, 24, 4); g.stroke();
+  // 海绵孔
+  g.fillStyle = '#e3c02c';
+  g.beginPath(); g.arc(-7, -40, 1.8, 0, 7); g.arc(6, -38, 1.5, 0, 7);
+  g.arc(-3, -27, 1.6, 0, 7); g.arc(8, -25, 1.4, 0, 7); g.fill();
+  // 手臂
+  g.strokeStyle = '#f7d842'; g.lineWidth = 2.6;
+  const armY = jumping ? -40 : -32 + swing*3;
+  g.beginPath();
+  g.moveTo(-12, -34); g.lineTo(-17, armY);
+  g.moveTo(12, -34);  g.lineTo(17, armY);
+  g.stroke();
+  g.fillStyle = '#fff';
+  g.beginPath(); g.arc(-17, armY, 2.6, 0, 7); g.arc(17, armY, 2.6, 0, 7); g.fill();
+  // 眼睛
+  g.fillStyle = '#fff';
+  g.beginPath(); g.arc(-4.4, -36, 4.6, 0, 7); g.arc(4.4, -36, 4.6, 0, 7); g.fill();
+  g.strokeStyle = '#caa42a'; g.lineWidth = 0.8;
+  g.beginPath(); g.arc(-4.4, -36, 4.6, 0, 7); g.stroke(); g.beginPath(); g.arc(4.4, -36, 4.6, 0, 7); g.stroke();
+  g.fillStyle = '#5aa7e8';
+  g.beginPath(); g.arc(-3.6, -36, 2.1, 0, 7); g.arc(5.2, -36, 2.1, 0, 7); g.fill();
+  g.fillStyle = '#111';
+  g.beginPath(); g.arc(-3.2, -36, 1.1, 0, 7); g.arc(5.6, -36, 1.1, 0, 7); g.fill();
+  // 睫毛
+  g.strokeStyle = '#333'; g.lineWidth = 0.9;
+  g.beginPath();
+  g.moveTo(-6, -41); g.lineTo(-7, -43.5); g.moveTo(-4, -41.6); g.lineTo(-4, -44.2); g.moveTo(-2, -41); g.lineTo(-1, -43.5);
+  g.moveTo(2.8, -41); g.lineTo(3.8, -43.5); g.moveTo(4.8, -41.6); g.lineTo(4.8, -44.2); g.moveTo(6.8, -41); g.lineTo(7.8, -43.5);
+  g.stroke();
+  // 腮红雀斑
+  g.fillStyle = '#f0a35e';
+  g.beginPath(); g.arc(-7.5, -29, 2, 0, 7); g.arc(7.5, -29, 2, 0, 7); g.fill();
+  g.fillStyle = '#c98a3f';
+  g.beginPath(); g.arc(-8.5, -28, 0.5, 0, 7); g.arc(-6.5, -27.4, 0.5, 0, 7);
+  g.arc(8.5, -28, 0.5, 0, 7); g.arc(6.5, -27.4, 0.5, 0, 7); g.fill();
+  // 嘴和门牙
+  g.strokeStyle = '#7a4a12'; g.lineWidth = 1.1;
+  g.beginPath(); g.arc(0, -29, 5.5, 0.25*Math.PI, 0.75*Math.PI); g.stroke();
+  g.fillStyle = '#fff'; g.fillRect(-2.6, -25.4, 2.5, 3.4); g.fillRect(0.2, -25.4, 2.5, 3.4);
+  g.strokeStyle = '#c9a91f'; g.lineWidth = 0.5; g.strokeRect(-2.6, -25.4, 2.5, 3.4); g.strokeRect(0.2, -25.4, 2.5, 3.4);
+  g.restore();
+}
+
+function drawPlankton(g, e) {
+  const x = e.x - camX, y = e.y;
+  if (x < -60 || x > W+60) return;
+  g.save(); g.translate(x + e.w/2, y + e.h);
+  if (e.dead) g.scale(1, -0.5);
+  const sw = Math.sin((e.anim || 0) * 3);
+  // 腿
+  g.strokeStyle = '#3f8f2f'; g.lineWidth = 2;
+  g.beginPath();
+  g.moveTo(-3, -4); g.lineTo(-5 + sw*3, 0);
+  g.moveTo(3, -4);  g.lineTo(5 - sw*3, 0);
+  g.stroke();
+  // 身体
+  g.fillStyle = '#57b04a';
+  g.beginPath(); g.ellipse(0, -13, 7, 10, 0, 0, 7); g.fill();
+  // 手臂
+  g.strokeStyle = '#57b04a'; g.lineWidth = 1.8;
+  g.beginPath();
+  g.moveTo(-6, -14); g.lineTo(-10, -10 + sw*2);
+  g.moveTo(6, -14);  g.lineTo(10, -10 - sw*2);
+  g.stroke();
+  // 触角
+  g.beginPath(); g.moveTo(-2, -22); g.lineTo(-4, -27); g.moveTo(2, -22); g.lineTo(4, -27); g.stroke();
+  // 独眼
+  g.fillStyle = '#fff'; g.beginPath(); g.arc(0, -16, 5, 0, 7); g.fill();
+  g.fillStyle = '#d43b3b'; g.beginPath(); g.arc(0.8, -16, 2.4, 0, 7); g.fill();
+  g.fillStyle = '#111'; g.beginPath(); g.arc(1, -16, 1.1, 0, 7); g.fill();
+  // 怒眉
+  g.strokeStyle = '#2c5e22'; g.lineWidth = 1.6;
+  g.beginPath(); g.moveTo(-5, -21); g.lineTo(4, -19); g.stroke();
+  g.restore();
+}
+
+function drawJelly(g, e) {
+  const x = e.x - camX, y = e.y;
+  if (x < -60 || x > W+60) return;
+  g.save(); g.translate(x + e.w/2, y + 10);
+  if (e.dead) g.scale(1, -0.6);
+  const wob = Math.sin(now/150 + e.baseX);
+  // 触须
+  g.strokeStyle = 'rgba(255,140,190,0.8)'; g.lineWidth = 2;
+  for (let i = -2; i <= 2; i++) {
+    g.beginPath(); g.moveTo(i*5, 2);
+    g.quadraticCurveTo(i*5 + wob*3, 8, i*5 - wob*3, 14);
+    g.stroke();
+  }
+  // 伞盖
+  g.fillStyle = 'rgba(255,150,200,0.9)';
+  g.beginPath(); g.arc(0, 2, 13, Math.PI, 0); g.quadraticCurveTo(8, 6, 0, 4);
+  g.quadraticCurveTo(-8, 6, -13, 2); g.fill();
+  g.fillStyle = 'rgba(255,255,255,0.75)';
+  g.beginPath(); g.arc(-5, -5, 2.4, 0, 7); g.arc(4, -7, 1.8, 0, 7); g.fill();
+  // 眼睛
+  g.fillStyle = '#fff'; g.beginPath(); g.arc(-3.5, -1, 2.6, 0, 7); g.arc(3.5, -1, 2.6, 0, 7); g.fill();
+  g.fillStyle = '#111'; g.beginPath(); g.arc(-3.5, -1, 1.1, 0, 7); g.arc(3.5, -1, 1.1, 0, 7); g.fill();
+  g.restore();
+}
+
+function drawPatty(g, it) {
+  const x = it.x - camX, y = it.y;
+  if (x < -40 || x > W+40) return;
+  const bob = Math.sin(it.t/8) * 1.5;
+  g.save(); g.translate(x, y + bob);
+  g.fillStyle = '#e8b25f'; rr(g, 0, 8, 20, 6, 3); g.fill();          // 下面包
+  g.fillStyle = '#6b3a1e'; rr(g, -1, 4, 22, 5, 2); g.fill();         // 肉饼
+  g.fillStyle = '#69c04a'; g.fillRect(-1, 3, 22, 2);                 // 生菜
+  g.fillStyle = '#f0c477';                                           // 上面包
+  g.beginPath(); g.moveTo(0, 4); g.quadraticCurveTo(10, -5, 20, 4); g.closePath(); g.fill();
+  g.fillStyle = '#fff';
+  g.beginPath(); g.arc(6, 0.5, 0.9, 0, 7); g.arc(12, -0.5, 0.9, 0, 7); g.fill();
+  g.restore();
+}
+
+function drawHUD() {
+  const g = ctx;
+  g.save();
+  g.fillStyle = 'rgba(0,20,50,0.45)';
+  rr(g, 10, 8, W-20, 34, 8); g.fill();
+  g.fillStyle = '#fff'; g.font = 'bold 16px monospace'; g.textAlign = 'left';
+  g.fillText(String(score).padStart(6, '0'), 26, 31);
+  // 泡泡计数
+  g.strokeStyle = '#cfefff'; g.lineWidth = 2;
+  g.beginPath(); g.arc(140, 25, 7, 0, 7); g.stroke();
+  g.fillStyle = '#fff'; g.fillText('× ' + String(coins).padStart(2, '0'), 154, 31);
+  g.textAlign = 'center'; g.fillText('世界  1-1', W/2, 31);
+  g.textAlign = 'right';
+  g.fillText('TIME ' + String(Math.max(0, time)).padStart(3, '0'), W-150, 31);
+  // 生命：小海绵脸
+  for (let i = 0; i < Math.min(Math.max(0, lives), 5); i++) {
+    const lx = W - 118 + i*26;
+    g.fillStyle = '#f7d842'; rr(g, lx, 15, 18, 18, 3); g.fill();
+    g.fillStyle = '#fff';
+    g.beginPath(); g.arc(lx+6, 22, 3.4, 0, 7); g.arc(lx+12.6, 22, 3.4, 0, 7); g.fill();
+    g.fillStyle = '#111';
+    g.beginPath(); g.arc(lx+6.6, 22, 1.2, 0, 7); g.arc(lx+13.2, 22, 1.2, 0, 7); g.fill();
+    g.strokeStyle = '#7a4a12'; g.lineWidth = 1.2;
+    g.beginPath(); g.arc(lx+9, 26, 4, 0.2*Math.PI, 0.8*Math.PI); g.stroke();
+  }
+  g.restore();
+}
+
+function drawOverlay() {
+  const g = ctx;
+  if (state === 'play' && !paused) return;
+  g.save();
+  g.fillStyle = 'rgba(2,18,40,0.72)'; g.fillRect(0, 0, W, H);
+  g.textAlign = 'center';
+  const title = (txt, y, size, color) => {
+    g.font = 'bold ' + size + 'px "Microsoft YaHei",sans-serif';
+    g.lineWidth = 6; g.strokeStyle = '#3a2c00';
+    g.strokeText(txt, W/2, y);
+    g.fillStyle = color; g.fillText(txt, W/2, y);
+  };
+  const sub = (txt, y, color) => {
+    g.font = '18px "Microsoft YaHei",sans-serif';
+    g.fillStyle = color || '#dcefff'; g.fillText(txt, W/2, y);
+  };
+  if (state === 'start') {
+    title('海绵宝宝大冒险', 170, 56, '#f7d842');
+    title('比奇堡 1-1', 225, 34, '#8fd3ff');
+    sub('方向键 / WASD 移动　·　空格 / ↑ 跳跃　·　Shift 加速跑', 300);
+    sub('踩扁痞老板和水母，顶问号块收集泡泡，找到蟹黄堡变大！', 332);
+    sub('P 暂停　·　M 静音', 362, '#9fc4e8');
+    if (Math.floor(now/500) % 2) title('按 空格 / 回车 开始', 430, 26, '#fff');
+  } else if (state === 'over') {
+    title('游戏结束', 220, 54, '#ff7b6b');
+    sub('分数 ' + score + '　·　海绵宝宝需要你的帮助！', 280);
+    if (Math.floor(now/500) % 2) title('按 R / 空格 重新开始', 360, 26, '#fff');
+  } else if (state === 'win') {
+    if (winT > 150) {
+      title('过关啦！', 200, 54, '#f7d842');
+      sub('海绵宝宝成功抵达蟹堡王！', 260);
+      sub('剩余时间奖励已计入　·　总分 ' + score, 296);
+      if (Math.floor(now/500) % 2) title('按 R / 空格 再来一次', 380, 26, '#fff');
+    }
+  } else if (state === 'dying') {
+    title('哎呀！', 260, 44, '#ff9b6b');
+  } else if (paused) {
+    title('已暂停', 260, 44, '#fff');
+    sub('按 P 继续', 310);
+  }
+  g.restore();
+}
+
+/* ---------------- 渲染 ---------------- */
+function render() {
+  const g = ctx;
+  drawBG();
+  drawKrustyKrab();
+  drawFlag();
+
+  const tx0 = Math.floor(camX / T), tx1 = Math.min(LW - 1, tx0 + Math.ceil(W / T) + 1);
+  for (let ty = 0; ty < LH; ty++)
+    for (let tx = tx0; tx <= tx1; tx++) {
+      const v = map[ty][tx];
+      if (v) drawTile(tx, ty, v);
+    }
+
+  for (const it of items) drawPatty(g, it);
+  for (const e of enemies) (e.type === 'p' ? drawPlankton : drawJelly)(g, e);
+
+  // 顶出的泡泡
+  for (const c of popcoins) {
+    const x = c.x - camX, y = c.y - c.t * 1.8;
+    g.strokeStyle = '#eaffff'; g.lineWidth = 2;
+    g.beginPath(); g.arc(x, y, 8 - c.t*0.15, 0, 7); g.stroke();
+    g.fillStyle = 'rgba(200,240,255,0.5)';
+    g.beginPath(); g.arc(x-2.5, y-2.5, 2.4, 0, 7); g.fill();
+  }
+  // 碎块
+  for (const p of parts) {
+    g.fillStyle = p.c; g.fillRect(p.x - camX, p.y, p.s, p.s);
+  }
+  // 玩家
+  if (state !== 'start')
+    drawBob(g, P.x - camX, P.y, P.w, P.h, P.dir, P.anim, P.big, P.inv > 0, !P.onGround, Math.abs(P.vx) > 2);
+  // 分数气泡
+  g.font = 'bold 14px monospace'; g.textAlign = 'center';
+  for (const u of popups) {
+    g.fillStyle = `rgba(255,255,255,${1 - u.t/50})`;
+    g.fillText(u.txt, u.x - camX, u.y - u.t * 0.8);
+  }
+  drawHUD();
+  drawOverlay();
+}
+
+/* ---------------- 主循环 ---------------- */
+let last = 0, acc = 0;
+const STEP = 1000 / 60;
+function loop(t) {
+  requestAnimationFrame(loop);
+  const dt = Math.min(100, t - last); last = t;
+  acc += dt;
+  while (acc >= STEP) {
+    if (!paused) update();
+    Object.keys(pressed).forEach(k => pressed[k] = false);
+    acc -= STEP; now += STEP;
+  }
+  render();
+}
+resetLevel(true);
+requestAnimationFrame(loop);
+</script>
+</body>
+</html>