{"allowContribute":false,"item":{"artifactHtml":"\u003cstyle\u003e\n:root{\n  --paper:#fcfefe;\n  --paper-2:#f1f8fb;\n  --ink:#0b1526;\n  --ink-2:#5b6f86;\n  --ink-3:#7a8da6;\n  --accent:#0097b2;\n  --accent-2:#00d0e6;\n  --soft:#eef6f9;\n  --soft-2:#e6f0f5;\n  --hairline:#d9e6ee;\n  --hairline-2:#cfe0ea;\n  --ok:#0e8a6b;\n  --warn:#b45309;\n  --bad:#be123c;\n  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n  --serif: ui-serif, \"Noto Serif TC\", Georgia, serif;\n  --radius:16px;\n  --radius-sm:10px;\n}\n:root[data-theme=\"dark\"]{\n  --paper:#050a14;\n  --paper-2:#0a1424;\n  --ink:#e6f0f7;\n  --ink-2:#8ea3b8;\n  --ink-3:#6b8299;\n  --accent:#7df9ff;\n  --accent-2:#00e5ff;\n  --soft:#0f1e2e;\n  --soft-2:#112233;\n  --hairline:#1a3247;\n  --hairline-2:#1e3a52;\n  --ok:#34d399;\n  --warn:#fbbf24;\n  --bad:#fb7185;\n}\n*{box-sizing:border-box}\n.wrap{\n  background:var(--paper);\n  color:var(--ink);\n  font-family:var(--sans);\n  line-height:1.6;\n  border:1px solid var(--hairline);\n  border-radius:20px;\n  overflow:hidden;\n  max-width:980px;\n  margin:0 auto;\n}\na{color:var(--accent);text-decoration:none}\na:hover{text-decoration:underline}\nheader{\n  padding:28px 28px 22px;\n  background:\n    radial-gradient(900px 400px at 85% -10%, rgba(0,215,255,0.12), transparent 60%),\n    radial-gradient(700px 400px at -10% 0%, rgba(125,249,255,0.10), transparent 60%),\n    linear-gradient(180deg, var(--paper-2), var(--paper));\n  border-bottom:1px solid var(--hairline);\n}\n.eyebrow{\n  display:inline-flex;align-items:center;gap:8px;\n  font-family:var(--mono);\n  font-size:11px;letter-spacing:.14em;text-transform:uppercase;\n  color:var(--ink-2);\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  padding:6px 10px;border-radius:999px;\n}\n.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);display:inline-block}\nh1{\n  font-family:var(--serif);\n  font-size: clamp(26px, 4vw, 38px);\n  line-height:1.15;\n  letter-spacing:.02em;\n  margin:14px 0 8px;\n  font-weight:700;\n}\nh1:empty:before{content:\"啟動 • 突破介面\"; color:var(--ink); opacity:.0; }\n.lede{\n  font-size:15px;color:var(--ink-2);max-width:72ch;margin:0;\n}\n.meta-row{\n  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;\n  font-family:var(--mono);font-size:11px;\n}\n.tag{\n  display:inline-flex;align-items:center;gap:6px;\n  padding:5px 9px;border-radius:999px;\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  color:var(--ink-2);\n  letter-spacing:.04em;\n}\n.tag.accent{border-color:rgba(0,151,178,.25);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--soft))}\n.tag.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 30%, var(--hairline))}\n.tag.warn{color:var(--warn)}\nsection{padding:22px 28px}\nsection + section{border-top:1px solid var(--hairline)}\nh2{\n  font-size:13px;letter-spacing:.14em;text-transform:uppercase;\n  font-family:var(--mono);color:var(--ink-2);\n  margin:0 0 14px;display:flex;align-items:center;gap:10px;\n}\nh2 svg{flex:0 0 auto}\nh3{font-size:15px;margin:18px 0 8px;letter-spacing:.02em}\np{margin:8px 0;color:var(--ink)}\n.small{font-size:12.5px;color:var(--ink-2)}\n.mono{font-family:var(--mono)}\n.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n@media(max-width:760px){.grid2{grid-template-columns:1fr} header,section{padding:20px 18px}}\n[data-cube=\"stats\"]{\n  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;\n  padding:16px 28px;background:var(--paper);\n  border-bottom:1px solid var(--hairline);\n}\n@media(max-width:760px){[data-cube=\"stats\"]{grid-template-columns:1fr 1fr}}\n@media(max-width:480px){[data-cube=\"stats\"]{grid-template-columns:1fr}}\n.stat{\n  background:var(--soft);\n  border:1px solid var(--hairline);\n  border-radius:14px;\n  padding:14px 14px 12px;\n  position:relative;overflow:hidden;\n}\n.stat:before{\n  content:\"\";position:absolute;inset:0 0 auto 0;height:2px;\n  background:linear-gradient(90deg, var(--accent), transparent);\n  opacity:.6;\n}\n.stat .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}\n.stat .value{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;color:var(--ink)}\n.stat .note{font-size:11.5px;color:var(--ink-2);line-height:1.4}\n.card{\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  border-radius:14px;\n  padding:14px;\n}\n.card h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);color:var(--ink-2)}\n.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;padding:8px 0}\n.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}\n.kv dd{margin:0;color:var(--ink);word-break:break-all}\n.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:12px;background:var(--paper)}\ntable{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}\nth{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;background:var(--soft);border-bottom:1px solid var(--hairline);padding:10px 12px;white-space:nowrap}\ntd{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink)}\ntr:last-child td{border-bottom:0}\ncode, pre{font-family:var(--mono)}\n.inline-code{font-size:12px;background:var(--soft);border:1px solid var(--hairline);padding:2px 6px;border-radius:6px;word-break:break-all}\npre{\n  margin:10px 0 0;\n  background:var(--soft);\n  border:1px solid var(--hairline);\n  border-radius:12px;\n  padding:14px;\n  font-size:12px;line-height:1.6;\n  overflow-x:auto;white-space:pre;word-wrap:normal;\n}\n.steps{counter-reset:step;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}\n.steps li{\n  counter-increment:step;\n  display:grid;grid-template-columns:32px 1fr;gap:12px;\n  padding:12px;border:1px solid var(--hairline);border-radius:12px;background:var(--paper);\n}\n.steps li:before{\n  content:counter(step);\n  width:28px;height:28px;border-radius:50%;\n  display:grid;place-items:center;\n  background:var(--ink);color:var(--paper);\n  font-family:var(--mono);font-size:12px;font-weight:700;\n}\n:root[data-theme=\"dark\"] .steps li:before{background:var(--accent);color:#001018}\n.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}\n.divider{height:1px;background:var(--hairline);margin:16px 0}\n.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}\n\u003c/style\u003e\n\u003cdiv class=\"wrap\"\u003e\n  \u003cheader\u003e\n    \u003cdiv class=\"eyebrow\"\u003e\u003ci\u003e\u003c/i\u003e Playables SDK v1.0.0 — zh-Hant · 單檔可玩廣告\u003c/div\u003e\n    \u003ch1\u003e導覽模塊1\u003c/h1\u003e\n    \u003cp class=\"lede\"\u003e原始檔名 \u003cspan class=\"inline-code\"\u003e啟動 • 突破介面\u003c/span\u003e。黑幕覆蓋的仙境背景，中央懸浮科技面板以 \u003cspan class=\"inline-code\"\u003erAF 3 幀\u003c/span\u003e 判定 \u003cspan class=\"inline-code\"\u003egame_ready\u003c/span\u003e，點擊「啟動」後脈衝、粒子爆發並揭露三個浮動導流按鈕。\u003c/p\u003e\n    \u003cdiv class=\"meta-row\"\u003e\n      \u003cspan class=\"tag accent\"\u003elang: zh-Hant\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003eviewport-fit: cover\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003eoverscroll-behavior: none\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003etouch-action: manipulation\u003c/span\u003e\n      \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e 冪等初始化\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/header\u003e\n\n  \u003csection data-cube=\"stats\"\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eSDK Version\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003ev1.0.0\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003ewindow.playablesSDK 冪等檢查，若已存在直接 return\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eRAF Threshold\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e3 frames\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003eframeCount ≥ 3 即送 game_ready，含後備 onFrame\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eTransport Bridges\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e3 通道\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003eiOS webkit / Android _MetaPlayablesBridge / iframe postMessage\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eLifecycle Events\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e4 事件\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003egame_ready · user_interaction_start · error · game_ended\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M7 8h10M7 12h10M7 16h6\"\u003e\u003c/path\u003e\u003c/svg\u003e 檔案總覽 · File Map\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e文件資訊\u003c/h4\u003e\n        \u003cdl class=\"kv\"\u003e\n          \u003cdt\u003eTitle\u003c/dt\u003e\u003cdd\u003e啟動 • 突破介面\u003c/dd\u003e\n          \u003cdt\u003eCharset\u003c/dt\u003e\u003cdd class=\"mono\"\u003eutf-8\u003c/dd\u003e\n          \u003cdt\u003eViewport\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewidth=device-width, initial-scale=1, viewport-fit=cover\u003c/dd\u003e\n          \u003cdt\u003eIntl Polyfill\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewindow.Intl=window.Intl||{}; Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;}\u003c/dd\u003e\n          \u003cdt\u003eBody 語系\u003c/dt\u003e\u003cdd\u003eui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif\u003c/dd\u003e\n        \u003c/dl\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e外部資源\u003c/h4\u003e\n        \u003cdl class=\"kv\"\u003e\n          \u003cdt\u003ePanel 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/Gy3HF42.jpg — \u0026lt;img class=\"panel-img\" alt=\"科技面板\"\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003eFairyland 預載\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/rLl93fh.jpg — \u0026lt;img id=\"preload-fairy\" hidden\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003eContainer 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003econtainer:///mnt/data/tech_panel_bg.jpg — \u0026lt;img id=\"未來科技\" hidden\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003e導流連結 1\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2 — 相冊ˋ (center)\u003c/dd\u003e\n          \u003cdt\u003e導流連結 2\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4 — 剪影 (bl)\u003c/dd\u003e\n          \u003cdt\u003e導流連結 3\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8 — 圖轉碼 (br)\u003c/dd\u003e\n        \u003c/dl\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e常數\u003c/th\u003e\u003cth\u003e值\u003c/th\u003e\u003cth\u003e用途\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eHANDLER_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003eplayablesGameEventHandler\u003c/td\u003e\u003ctd\u003eiOS bridge 名稱：window.webkit.messageHandlers[HANDLER_NAME].postMessage\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eANDROID_BRIDGE_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003e_MetaPlayablesBridge\u003c/td\u003e\u003ctd\u003eAndroid bridge：window[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eRAF_FRAME_THRESHOLD\u003c/td\u003e\u003ctd class=\"mono\"\u003e3\u003c/td\u003e\u003ctd\u003erAF 幀數門檻，達標即發 game_ready\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e__fbAndroidBridgeAuthToken\u003c/td\u003e\u003ctd class=\"mono\"\u003ewindow.__fbAndroidBridgeAuthToken || ''\u003c/td\u003e\u003ctd\u003eAndroid 附加 __secureToken\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n    \u003cp class=\"small\"\u003e狀態旗標：\u003cspan class=\"inline-code\"\u003egameReadySent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003efirstInteractionSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eerrorSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eframeCount\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eoriginalRAF = window.requestAnimationFrame\u003c/span\u003e。三個旗標皆為單次發送保護。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\u003e\u003c/path\u003e\u003c/svg\u003e 生命週期橋接 · Lifecycle Bridge\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003erAF Game-Ready 偵測\u003c/h4\u003e\n        \u003cp class=\"small\" style=\"margin:0 0 8px\"\u003e兩條路徑同時保障：包裝 \u003cspan class=\"inline-code\"\u003erequestAnimationFrame\u003c/span\u003e 與後備 \u003cspan class=\"inline-code\"\u003eonFrame\u003c/span\u003e。\u003c/p\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003eonFrame()\u003c/span\u003e：frameCount++，≥3 時 \u003cspan class=\"mono\"\u003esendEvent('game_ready', {frame_count, detected_at: Date.now()})\u003c/span\u003e 後 return，否則 \u003cspan class=\"mono\"\u003eoriginalRAF.call(window, onFrame)\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e覆寫 \u003cspan class=\"mono\"\u003ewindow.requestAnimationFrame\u003c/span\u003e：若未 ready，攔截 callback，在內部先 frameCount++ 並檢測門檻再呼叫原 callback；已 ready 則直通 \u003cspan class=\"mono\"\u003eoriginalRAF\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e啟動：\u003cspan class=\"mono\"\u003eif(originalRAF) originalRAF.call(window, onFrame)\u003c/span\u003e — 即使遊戲未呼叫 rAF 也能觸發\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e game_ready 僅一次\u003c/span\u003e\u003cspan class=\"tag\"\u003epayload: frame_count / detected_at\u003c/span\u003e\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e公開 API · window.playablesSDK\u003c/h4\u003e\n        \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e\n          \u003ctable style=\"min-width:0\"\u003e\n            \u003cthead\u003e\u003ctr\u003e\u003cth\u003e方法\u003c/th\u003e\u003cth\u003e行為\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ecomplete(score)\u003c/td\u003e\u003ctd\u003e\u003cspan class=\"mono\"\u003esendEvent('game_ended', {score, completed:true})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003eerror(message)\u003c/td\u003e\u003ctd\u003e若未發過 error，\u003cspan class=\"mono\"\u003esendEvent('error', {message: message||'Unknown error', auto_captured:false})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003esendEvent(eventName, payload)\u003c/td\u003e\u003ctd\u003e校驗 eventName 為非空字串後轉發至內部 sendEvent\u003c/td\u003e\u003c/tr\u003e\n            \u003c/tbody\u003e\n          \u003c/table\u003e\n        \u003c/div\u003e\n        \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e自動錯誤捕捉：\u003cspan class=\"mono\"\u003ewindow.addEventListener('error')\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message, source: filename, lineno, colno, auto_captured:true}\u003c/span\u003e；\u003cspan class=\"mono\"\u003eunhandledrejection\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message: reason.message||String(reason), type:'unhandled_promise_rejection', auto_captured:true}\u003c/span\u003e，兩者皆受 \u003cspan class=\"mono\"\u003eerrorSent\u003c/span\u003e 單次限制。\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003ch3\u003e首次互動偵測\u003c/h3\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cp class=\"small\" style=\"margin:0\"\u003e監聽 \u003cspan class=\"inline-code\"\u003etouchstart\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003emousedown\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ekeydown\u003c/span\u003e（capture: true）。首次觸發即 \u003cspan class=\"inline-code\"\u003esendEvent('user_interaction_start', null)\u003c/span\u003e 並移除三個監聽。掛載時機：\u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則等 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/p\u003e\n      \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag\"\u003efirstInteractionSent 單次\u003c/span\u003e\u003cspan class=\"tag\"\u003eremoveEventListener 清理\u003c/span\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"4\"\u003e\u003c/circle\u003e\u003c/svg\u003e 傳輸層 · Transport Layer\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e通道判斷\u003c/h4\u003e\n        \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e\n          \u003ctable style=\"min-width:0\"\u003e\n            \u003cthead\u003e\u003ctr\u003e\u003cth\u003e函式\u003c/th\u003e\u003cth\u003e判斷\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasIOSBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.webkit \u0026amp;\u0026amp; window.webkit.messageHandlers \u0026amp;\u0026amp; window.webkit.messageHandlers[HANDLER_NAME])\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasAndroidBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window[ANDROID_BRIDGE_NAME] \u0026amp;\u0026amp; typeof window[ANDROID_BRIDGE_NAME].postEvent === 'function')\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003eisInIframe()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.parent \u0026amp;\u0026amp; window.parent !== window)\u003c/td\u003e\u003c/tr\u003e\n            \u003c/tbody\u003e\n          \u003c/table\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003esendEvent(eventName, payload)\u003c/h4\u003e\n        \u003cp class=\"small\" style=\"margin:0 0 6px\"\u003e組裝 \u003cspan class=\"inline-code\"\u003e{type: eventName, payload: payload||{}, timestamp: Date.now()}\u003c/span\u003e，依優先序發送並 \u003cspan class=\"inline-code\"\u003ereturn\u003c/span\u003e：\u003c/p\u003e\n        \u003col class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003eiOS：\u003cspan class=\"mono\"\u003ewindow.webkit.messageHandlers[HANDLER_NAME].postMessage(message)\u003c/span\u003e try/catch ignore\u003c/li\u003e\n          \u003cli\u003eAndroid：\u003cspan class=\"mono\"\u003ep.__secureToken = window.__fbAndroidBridgeAuthToken||''\u003c/span\u003e；\u003cspan class=\"mono\"\u003ewindow[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003eiframe：\u003cspan class=\"mono\"\u003ewindow.parent.postMessage(message, '*')\u003c/span\u003e\u003c/li\u003e\n        \u003c/ol\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M16 7V5a4 4 0 0 0-8 0v2\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"14\" r=\"2\"\u003e\u003c/circle\u003e\u003c/svg\u003e 視覺與版面 · Scene \u0026amp; HUD\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e全螢幕場景 .scene\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003ehtml, body {margin:0; height:100%; background:#000; overflow:hidden; overscroll-behavior:none}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003ebody {color:#dffcff; -webkit-font-smoothing, touch-action:manipulation, user-select:none}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.scene {position:relative; width:100vw; height:100vh; isolation:isolate}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.fairyland-bg {inset:0; background-position:50% 62%; background-size:cover; transform:scale(1.08); filter:saturate(1.05) contrast(1.04) brightness(0.92) blur(2px)}\u003c/span\u003e；\u003cspan class=\"mono\"\u003ebody.revealed .fairyland-bg {transform:scale(1); filter:saturate(1.12) contrast(1) brightness(1) blur(0)}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.black-veil {inset:0; background:radial-gradient(ellipse at center, #000 30%, #000 70%)}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.vignette {radial-gradient transparent 58%, rgba(0,0,0,0.35) 100%; mix-blend-mode:multiply}\u003c/span\u003e；revealed 時 opacity 1\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.scanlines {repeating-linear-gradient rgba(0,255,255,0.07) 1px / transparent 2px; mix-blend-mode:screen; opacity:.28}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e懸浮面板 .panel + Hotspots\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.hud-container {inset:0; display:grid; place-items:center; z-index:4}\u003c/span\u003e；revealed 時 \u003cspan class=\"mono\"\u003eopacity:0; transform:scale(.93); filter:blur(22px) brightness(1.6)\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel {width:min(86vw,760px); aspect-ratio:16/9.5; animation:float 6.5s ease-in-out infinite}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel-img {object-fit:contain; filter:drop-shadow(0 0 14px rgba(0,225,255,.45)) drop-shadow(0 0 36px rgba(0,170,255,.22))}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003eHotspots：\u003cspan class=\"mono\"\u003e.center {left:50%; top:49.5%; width:34%; height:24%; transform:translate(-50%,-50%)}\u003c/span\u003e 含 \u003cspan class=\"mono\"\u003e.label\u003c/span\u003e（clamp 20-32px, letter-spacing .42em, text-shadow 0 0 8px/22px/48px）與 \u003cspan class=\"mono\"\u003e.ring / .ring2\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.bl {left:20.5%; bottom:19%; width:15%; height:15%}\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.br {right:20.5%; bottom:19%}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e脈衝：\u003cspan class=\"mono\"\u003e.panel.pulsing .panel-img {animation:panelPulse .9s}\u003c/span\u003e、\u003cspan class=\"mono\"\u003e.label {animation:labelFlash .7s}\u003c/span\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003ch3\u003e揭露後浮動按鈕 .floating-ui\u003c/h3\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e按鈕\u003c/th\u003e\u003cth\u003e位置\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e連結\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd\u003e相冊ˋ\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.center {left:50%; top:49.5%; transform:translate(-50%,-50%)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 12px 26px; letter-spacing .38em; backdrop-filter blur(10px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd\u003e剪影\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.bl {left:20.5%; bottom:19%; transform:translate(-50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 10px 20px; border 1px rgba(125,249,255,.22); box-shadow 0 4px 18px rgba(0,0,0,.38)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd\u003e圖轉碼\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.br {right:20.5%; bottom:19%; transform:translate(50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003ehover: border rgba(125,249,255,.55); translateY(-2px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n    \u003cp class=\"small\"\u003e浮動動畫：\u003cspan class=\"inline-code\"\u003efloatY 6.8s\u003c/span\u003e（center）、\u003cspan class=\"inline-code\"\u003efloatY2 7.2s\u003c/span\u003e（bl/br，br 延遲 -1.8s）。初始 \u003cspan class=\"inline-code\"\u003e.floating-ui {opacity:0; pointer-events:none}\u003c/span\u003e，\u003cspan class=\"inline-code\"\u003e.visible {opacity:1; pointer-events:auto}\u003c/span\u003e。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 20h9\"\u003e\u003c/path\u003e\u003cpath d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動流程 · 從點擊到揭露\u003c/h2\u003e\n    \u003col class=\"steps\"\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e背景初始化 initBackground()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e讀取 \u003cspan class=\"inline-code\"\u003e#preload-fairy.src\u003c/span\u003e 寫入 \u003cspan class=\"inline-code\"\u003efairyBg.style.backgroundImage = \"url('\"+src+\"')\"\u003c/span\u003e。若 \u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則監聽 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e點擊「啟動」 activate()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e旗標 \u003cspan class=\"inline-code\"\u003eactivated\u003c/span\u003e 防重入，\u003cspan class=\"inline-code\"\u003eactivateBtn.disabled=true\u003c/span\u003e，加入 \u003cspan class=\"inline-code\"\u003epanel.classList.add('pulsing')\u003c/span\u003e 並呼叫 \u003cspan class=\"inline-code\"\u003eburst()\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e粒子爆發 burst()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e建立 \u003cspan class=\"inline-code\"\u003e.particles\u003c/span\u003e 容器，生成 48 個 \u003cspan class=\"inline-code\"\u003e2px\u003c/span\u003e 圓點，\u003cspan class=\"inline-code\"\u003ebackground rgba(160,255,255, .6-.1)\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eboxShadow 0 0 6-16px rgba(0,225,255,.85)\u003c/span\u003e，隨機角度與距離 \u003cspan class=\"inline-code\"\u003e120-460px\u003c/span\u003e、時長 \u003cspan class=\"inline-code\"\u003e1100-1900ms\u003c/span\u003e，以 \u003cspan class=\"inline-code\"\u003eElement.animate({transform, opacity}, cubic-bezier(.15,.7,.2,1))\u003c/span\u003e 向外擴散，2200ms 後移除容器。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e680ms 後揭露\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003ebody.classList.add('revealed')\u003c/span\u003e：黑幕淡出、仙境背景清晰化、scanlines 消失、HUD 模糊縮放淡出；\u003cspan class=\"inline-code\"\u003efloatingUI.setAttribute('aria-hidden','false')\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e1550ms 後顯示導流\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003efloatingUI.classList.add('visible')\u003c/span\u003e 三個浮動按鈕可點擊，皆 \u003cspan class=\"inline-code\"\u003etarget=\"_blank\" rel=\"noopener\"\u003c/span\u003e。同時 \u003cspan class=\"inline-code\"\u003econtextmenu\u003c/span\u003e 在未 revealed 前 \u003cspan class=\"inline-code\"\u003epreventDefault()\u003c/span\u003e 以維持沉浸。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e無障礙與細節\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003erole=\"dialog\" aria-label=\"系統介面\"\u003c/span\u003e 於 .panel\u003c/li\u003e\n          \u003cli\u003e中央按鈕 \u003cspan class=\"mono\"\u003earia-label=\"啟動\"\u003c/span\u003e，支援 \u003cspan class=\"mono\"\u003ekeydown Enter / Space\u003c/span\u003e 觸發\u003c/li\u003e\n          \u003cli\u003e左右 hotspots \u003cspan class=\"mono\"\u003earia-hidden=\"true\" tabindex=\"-1\"\u003c/span\u003e 僅作視覺占位\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (max-width:640px)\u003c/span\u003e：panel 94vw，center 44%×28%，bl/br 20%×18%\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (prefers-reduced-motion:reduce)\u003c/span\u003e：取消 float 與 transition\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e狀態標籤\u003c/h4\u003e\n        \u003cdiv class=\"badge-row\"\u003e\n          \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e gameReadySent\u003c/span\u003e\n          \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e firstInteractionSent\u003c/span\u003e\n          \u003cspan class=\"tag warn\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--warn)\"\u003e\u003c/span\u003e errorSent 單次鎖\u003c/span\u003e\n          \u003cspan class=\"tag\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ink-3)\"\u003e\u003c/span\u003e frameCount 計數\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e所有事件皆帶 \u003cspan class=\"inline-code\"\u003etimestamp: Date.now()\u003c/span\u003e；Android 額外 \u003cspan class=\"inline-code\"\u003e__secureToken\u003c/span\u003e；iframe 使用 \u003cspan class=\"inline-code\"\u003epostMessage(message, '*')\u003c/span\u003e 並 try/catch 靜默忽略。\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpolyline points=\"16 18 22 12 16 6\"\u003e\u003c/polyline\u003e\u003cpolyline points=\"8 6 2 12 8 18\"\u003e\u003c/polyline\u003e\u003c/svg\u003e 完整原始碼 · 保留所有事實\u003c/h2\u003e\n    \u003cp class=\"small\"\u003e下方為原始 \u003cspan class=\"inline-code\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e 內容的等價呈現，已保留全部標籤、屬性、樣式與腳本邏輯，僅作排版可讀化，未增刪實質內容。\u003c/p\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e區塊\u003c/th\u003e\u003cth\u003e關鍵內容\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;html lang=\"zh-Hant\"\u0026gt;\u003c/td\u003e\u003ctd\u003e整體語系 zh-Hant，head 含 Playables SDK 與 Intl.t polyfill\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;div class=\"scene\"\u0026gt;\u003c/td\u003e\u003ctd\u003efairyland-bg / black-veil / vignette / scanlines / hud-container / floating-ui / particles\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;button id=\"activateBtn\"\u0026gt;\u003c/td\u003e\u003ctd\u003e中央「啟動」含 .label + .ring + .ring2，hover 時 ringPulse 1.8s\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;script\u0026gt; activate\u003c/td\u003e\u003ctd\u003eburst → pulsing → 680ms revealed → 1550ms visible，contextmenu 攔截\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"zh-Hant\"\u0026gt;\n\u0026lt;head\u0026gt;\n  \u0026lt;script\u0026gt;// Playables SDK v1.0.0 — rAF game-ready + event bridge\n  // 常數: HANDLER_NAME='playablesGameEventHandler'\n  //       ANDROID_BRIDGE_NAME='_MetaPlayablesBridge'\n  //       RAF_FRAME_THRESHOLD=3\n  // 狀態: gameReadySent, firstInteractionSent, errorSent, frameCount, originalRAF\n  // 傳輸: hasIOSBridge / hasAndroidBridge / isInIframe / sendEvent\n  // rAF: onFrame + 包裝 requestAnimationFrame\n  // 互動: touchstart/mousedown/keydown → user_interaction_start\n  // 錯誤: error / unhandledrejection → error {auto_captured:true}\n  // API: window.playablesSDK = {complete(score), error(message), sendEvent}\n  \u0026lt;/script\u0026gt;\n  \u0026lt;script\u0026gt;window.Intl=window.Intl||{};Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;};\u0026lt;/script\u0026gt;\n  \u0026lt;meta charset=\"utf-8\"\u0026gt;\n  \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\u0026gt;\n  \u0026lt;title\u0026gt;啟動 • 突破介面\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n  \u0026lt;div class=\"scene\"\u0026gt;\n    \u0026lt;div class=\"fairyland-bg\" id=\"fairyBg\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"black-veil\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"vignette\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"scanlines\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"hud-container\" id=\"hud\"\u0026gt;\n      \u0026lt;div class=\"panel\" id=\"panel\" role=\"dialog\" aria-label=\"系統介面\"\u0026gt;\n        \u0026lt;img class=\"panel-img\" src=\"https://i.meee.com.tw/Gy3HF42.jpg\" alt=\"科技面板\"\u0026gt;\n        \u0026lt;button class=\"hotspot center\" id=\"activateBtn\" aria-label=\"啟動\"\u0026gt;\n          \u0026lt;span class=\"label\"\u0026gt;啟動\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring\"\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring2\"\u0026gt;\u0026lt;/span\u0026gt;\n        \u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot bl\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot br\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n      \u0026lt;/div\u0026gt;\n    \u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"floating-ui\" id=\"floatingUI\" aria-hidden=\"true\"\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/8/2\" class=\"float-btn center\" target=\"_blank\" rel=\"noopener\"\u0026gt;相冊ˋ\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/4\" class=\"float-btn bl\" target=\"_blank\" rel=\"noopener\"\u0026gt;剪影\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/8\" class=\"float-btn br\" target=\"_blank\" rel=\"noopener\"\u0026gt;圖轉碼\u0026lt;/a\u0026gt;\n    \u0026lt;/div\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;img id=\"preload-fairy\" src=\"https://i.meee.com.tw/rLl93fh.jpg\" hidden\u0026gt;\n  \u0026lt;img id=\"未來科技\" src=\"container:///mnt/data/tech_panel_bg.jpg\" hidden\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n    \u003cp class=\"small\"\u003e註：原始碼中 CSS 含 \u003cspan class=\"inline-code\"\u003e* {box-sizing:border-box}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ehtml,body {background:#000; overflow:hidden}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.panel {aspect-ratio:16/9.5}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.float-btn {backdrop-filter:blur(10px) saturate(1.15)}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e@keyframes float / ringPulse / panelPulse / labelFlash / floatY\u003c/span\u003e 等；JS 含 \u003cspan class=\"inline-code\"\u003einitBackground / burst(48 particles) / activate\u003c/span\u003e 完整邏輯，均已在上方表格與流程中逐項對應。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection style=\"background:var(--soft);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between\"\u003e\n    \u003cdiv class=\"small\" style=\"margin:0\"\u003e設計要點：黑幕 → 脈衝 → 粒子 → 揭露 → 懸浮導流。所有橋接事件皆為單次發送，避免重複上報。\u003c/div\u003e\n    \u003cdiv class=\"mono\" style=\"font-size:11px;color:var(--ink-3)\"\u003ePlayables SDK · rAF 3幀 · 三通道橋接 · zh-Hant\u003c/div\u003e\n  \u003c/section\u003e\n\u003c/div\u003e","artifactSourceHash":"iolzldbmi5q4","content":"\u003cdiv class=\"wrap\"\u003e  \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eSDK Version\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003ev1.0.0\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003ewindow.playablesSDK 冪等檢查，若已存在直接 return\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eRAF Threshold\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e3 frames\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eframeCount ≥ 3 即送 game_ready，含後備 onFrame\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eTransport Bridges\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e3 通道\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eiOS webkit / Android _MetaPlayablesBridge / iframe postMessage\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eLifecycle Events\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e4 事件\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003egame_ready · user_interaction_start · error · game_ended\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M7 8h10M7 12h10M7 16h6\"\u003e\u003c/path\u003e\u003c/svg\u003e 檔案總覽 · File Map\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e文件資訊\u003c/h4\u003e \u003cdl class=\"kv\"\u003e \u003cdt\u003eTitle\u003c/dt\u003e\u003cdd\u003e啟動 • 突破介面\u003c/dd\u003e \u003cdt\u003eCharset\u003c/dt\u003e\u003cdd class=\"mono\"\u003eutf-8\u003c/dd\u003e \u003cdt\u003eViewport\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewidth=device-width, initial-scale=1, viewport-fit=cover\u003c/dd\u003e \u003cdt\u003eIntl Polyfill\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewindow.Intl=window.Intl||{}; Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;}\u003c/dd\u003e \u003cdt\u003eBody 語系\u003c/dt\u003e\u003cdd\u003eui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif\u003c/dd\u003e \u003c/dl\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e外部資源\u003c/h4\u003e \u003cdl class=\"kv\"\u003e \u003cdt\u003ePanel 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/Gy3HF42.jpg — \u0026lt;img class=\"panel-img\" alt=\"科技面板\"\u0026gt;\u003c/dd\u003e \u003cdt\u003eFairyland 預載\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/rLl93fh.jpg — \u0026lt;img id=\"preload-fairy\" hidden\u0026gt;\u003c/dd\u003e \u003cdt\u003eContainer 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003econtainer:///mnt/data/tech_panel_bg.jpg — \u0026lt;img id=\"未來科技\" hidden\u0026gt;\u003c/dd\u003e \u003cdt\u003e導流連結 1\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2 — 相冊ˋ (center)\u003c/dd\u003e \u003cdt\u003e導流連結 2\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4 — 剪影 (bl)\u003c/dd\u003e \u003cdt\u003e導流連結 3\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8 — 圖轉碼 (br)\u003c/dd\u003e \u003c/dl\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e常數\u003c/th\u003e\u003cth\u003e值\u003c/th\u003e\u003cth\u003e用途\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eHANDLER_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003eplayablesGameEventHandler\u003c/td\u003e\u003ctd\u003eiOS bridge 名稱：window.webkit.messageHandlers[HANDLER_NAME].postMessage\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eANDROID_BRIDGE_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003e_MetaPlayablesBridge\u003c/td\u003e\u003ctd\u003eAndroid bridge：window[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eRAF_FRAME_THRESHOLD\u003c/td\u003e\u003ctd class=\"mono\"\u003e3\u003c/td\u003e\u003ctd\u003erAF 幀數門檻，達標即發 game_ready\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e__fbAndroidBridgeAuthToken\u003c/td\u003e\u003ctd class=\"mono\"\u003ewindow.__fbAndroidBridgeAuthToken || ''\u003c/td\u003e\u003ctd\u003eAndroid 附加 __secureToken\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\"\u003e狀態旗標：\u003cspan class=\"inline-code\"\u003egameReadySent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003efirstInteractionSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eerrorSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eframeCount\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eoriginalRAF = window.requestAnimationFrame\u003c/span\u003e。三個旗標皆為單次發送保護。\u003c/p\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\u003e\u003c/path\u003e\u003c/svg\u003e 生命週期橋接 · Lifecycle Bridge\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003erAF Game-Ready 偵測\u003c/h4\u003e \u003cp class=\"small\" style=\"margin:0 0 8px\"\u003e兩條路徑同時保障：包裝 \u003cspan class=\"inline-code\"\u003erequestAnimationFrame\u003c/span\u003e 與後備 \u003cspan class=\"inline-code\"\u003eonFrame\u003c/span\u003e。\u003c/p\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003eonFrame()\u003c/span\u003e：frameCount++，≥3 時 \u003cspan class=\"mono\"\u003esendEvent('game_ready', {frame_count, detected_at: Date.now()})\u003c/span\u003e 後 return，否則 \u003cspan class=\"mono\"\u003eoriginalRAF.call(window, onFrame)\u003c/span\u003e\u003c/li\u003e \u003cli\u003e覆寫 \u003cspan class=\"mono\"\u003ewindow.requestAnimationFrame\u003c/span\u003e：若未 ready，攔截 callback，在內部先 frameCount++ 並檢測門檻再呼叫原 callback；已 ready 則直通 \u003cspan class=\"mono\"\u003eoriginalRAF\u003c/span\u003e\u003c/li\u003e \u003cli\u003e啟動：\u003cspan class=\"mono\"\u003eif(originalRAF) originalRAF.call(window, onFrame)\u003c/span\u003e — 即使遊戲未呼叫 rAF 也能觸發\u003c/li\u003e \u003c/ul\u003e \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e game_ready 僅一次\u003c/span\u003e\u003cspan class=\"tag\"\u003epayload: frame_count / detected_at\u003c/span\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e公開 API · window.playablesSDK\u003c/h4\u003e \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e \u003ctable style=\"min-width:0\"\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e方法\u003c/th\u003e\u003cth\u003e行為\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ecomplete(score)\u003c/td\u003e\u003ctd\u003e\u003cspan class=\"mono\"\u003esendEvent('game_ended', {score, completed:true})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eerror(message)\u003c/td\u003e\u003ctd\u003e若未發過 error，\u003cspan class=\"mono\"\u003esendEvent('error', {message: message||'Unknown error', auto_captured:false})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003esendEvent(eventName, payload)\u003c/td\u003e\u003ctd\u003e校驗 eventName 為非空字串後轉發至內部 sendEvent\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e自動錯誤捕捉：\u003cspan class=\"mono\"\u003ewindow.addEventListener('error')\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message, source: filename, lineno, colno, auto_captured:true}\u003c/span\u003e；\u003cspan class=\"mono\"\u003eunhandledrejection\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message: reason.message||String(reason), type:'unhandled_promise_rejection', auto_captured:true}\u003c/span\u003e，兩者皆受 \u003cspan class=\"mono\"\u003eerrorSent\u003c/span\u003e 單次限制。\u003c/p\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e首次互動偵測\u003c/h3\u003e \u003cdiv class=\"card\"\u003e \u003cp class=\"small\" style=\"margin:0\"\u003e監聽 \u003cspan class=\"inline-code\"\u003etouchstart\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003emousedown\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ekeydown\u003c/span\u003e（capture: true）。首次觸發即 \u003cspan class=\"inline-code\"\u003esendEvent('user_interaction_start', null)\u003c/span\u003e 並移除三個監聽。掛載時機：\u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則等 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/p\u003e \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag\"\u003efirstInteractionSent 單次\u003c/span\u003e\u003cspan class=\"tag\"\u003eremoveEventListener 清理\u003c/span\u003e\u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"4\"\u003e\u003c/circle\u003e\u003c/svg\u003e 傳輸層 · Transport Layer\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e通道判斷\u003c/h4\u003e \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e \u003ctable style=\"min-width:0\"\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e函式\u003c/th\u003e\u003cth\u003e判斷\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasIOSBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.webkit \u0026amp;\u0026amp; window.webkit.messageHandlers \u0026amp;\u0026amp; window.webkit.messageHandlers[HANDLER_NAME])\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasAndroidBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window[ANDROID_BRIDGE_NAME] \u0026amp;\u0026amp; typeof window[ANDROID_BRIDGE_NAME].postEvent === 'function')\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eisInIframe()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.parent \u0026amp;\u0026amp; window.parent !== window)\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003esendEvent(eventName, payload)\u003c/h4\u003e \u003cp class=\"small\" style=\"margin:0 0 6px\"\u003e組裝 \u003cspan class=\"inline-code\"\u003e{type: eventName, payload: payload||{}, timestamp: Date.now()}\u003c/span\u003e，依優先序發送並 \u003cspan class=\"inline-code\"\u003ereturn\u003c/span\u003e：\u003c/p\u003e \u003col class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003eiOS：\u003cspan class=\"mono\"\u003ewindow.webkit.messageHandlers[HANDLER_NAME].postMessage(message)\u003c/span\u003e try/catch ignore\u003c/li\u003e \u003cli\u003eAndroid：\u003cspan class=\"mono\"\u003ep.__secureToken = window.__fbAndroidBridgeAuthToken||''\u003c/span\u003e；\u003cspan class=\"mono\"\u003ewindow[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/span\u003e\u003c/li\u003e \u003cli\u003eiframe：\u003cspan class=\"mono\"\u003ewindow.parent.postMessage(message, '*')\u003c/span\u003e\u003c/li\u003e \u003c/ol\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M16 7V5a4 4 0 0 0-8 0v2\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"14\" r=\"2\"\u003e\u003c/circle\u003e\u003c/svg\u003e 視覺與版面 · Scene \u0026amp; HUD\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e全螢幕場景 .scene\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003ehtml, body {margin:0; height:100%; background:#000; overflow:hidden; overscroll-behavior:none}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003ebody {color:#dffcff; -webkit-font-smoothing, touch-action:manipulation, user-select:none}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.scene {position:relative; width:100vw; height:100vh; isolation:isolate}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.fairyland-bg {inset:0; background-position:50% 62%; background-size:cover; transform:scale(1.08); filter:saturate(1.05) contrast(1.04) brightness(0.92) blur(2px)}\u003c/span\u003e；\u003cspan class=\"mono\"\u003ebody.revealed .fairyland-bg {transform:scale(1); filter:saturate(1.12) contrast(1) brightness(1) blur(0)}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.black-veil {inset:0; background:radial-gradient(ellipse at center, #000 30%, #000 70%)}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.vignette {radial-gradient transparent 58%, rgba(0,0,0,0.35) 100%; mix-blend-mode:multiply}\u003c/span\u003e；revealed 時 opacity 1\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.scanlines {repeating-linear-gradient rgba(0,255,255,0.07) 1px / transparent 2px; mix-blend-mode:screen; opacity:.28}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e懸浮面板 .panel + Hotspots\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.hud-container {inset:0; display:grid; place-items:center; z-index:4}\u003c/span\u003e；revealed 時 \u003cspan class=\"mono\"\u003eopacity:0; transform:scale(.93); filter:blur(22px) brightness(1.6)\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel {width:min(86vw,760px); aspect-ratio:16/9.5; animation:float 6.5s ease-in-out infinite}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel-img {object-fit:contain; filter:drop-shadow(0 0 14px rgba(0,225,255,.45)) drop-shadow(0 0 36px rgba(0,170,255,.22))}\u003c/span\u003e\u003c/li\u003e \u003cli\u003eHotspots：\u003cspan class=\"mono\"\u003e.center {left:50%; top:49.5%; width:34%; height:24%; transform:translate(-50%,-50%)}\u003c/span\u003e 含 \u003cspan class=\"mono\"\u003e.label\u003c/span\u003e（clamp 20-32px, letter-spacing .42em, text-shadow 0 0 8px/22px/48px）與 \u003cspan class=\"mono\"\u003e.ring / .ring2\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.bl {left:20.5%; bottom:19%; width:15%; height:15%}\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.br {right:20.5%; bottom:19%}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e脈衝：\u003cspan class=\"mono\"\u003e.panel.pulsing .panel-img {animation:panelPulse .9s}\u003c/span\u003e、\u003cspan class=\"mono\"\u003e.label {animation:labelFlash .7s}\u003c/span\u003e\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e揭露後浮動按鈕 .floating-ui\u003c/h3\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e按鈕\u003c/th\u003e\u003cth\u003e位置\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e連結\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e相冊ˋ\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.center {left:50%; top:49.5%; transform:translate(-50%,-50%)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 12px 26px; letter-spacing .38em; backdrop-filter blur(10px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e剪影\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.bl {left:20.5%; bottom:19%; transform:translate(-50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 10px 20px; border 1px rgba(125,249,255,.22); box-shadow 0 4px 18px rgba(0,0,0,.38)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e圖轉碼\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.br {right:20.5%; bottom:19%; transform:translate(50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003ehover: border rgba(125,249,255,.55); translateY(-2px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\"\u003e浮動動畫：\u003cspan class=\"inline-code\"\u003efloatY 6.8s\u003c/span\u003e（center）、\u003cspan class=\"inline-code\"\u003efloatY2 7.2s\u003c/span\u003e（bl/br，br 延遲 -1.8s）。初始 \u003cspan class=\"inline-code\"\u003e.floating-ui {opacity:0; pointer-events:none}\u003c/span\u003e，\u003cspan class=\"inline-code\"\u003e.visible {opacity:1; pointer-events:auto}\u003c/span\u003e。\u003c/p\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 20h9\"\u003e\u003c/path\u003e\u003cpath d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動流程 · 從點擊到揭露\u003c/h2\u003e \u003col class=\"steps\"\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e背景初始化 initBackground()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e讀取 \u003cspan class=\"inline-code\"\u003e#preload-fairy.src\u003c/span\u003e 寫入 \u003cspan class=\"inline-code\"\u003efairyBg.style.backgroundImage = \"url('\"+src+\"')\"\u003c/span\u003e。若 \u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則監聽 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e點擊「啟動」 activate()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e旗標 \u003cspan class=\"inline-code\"\u003eactivated\u003c/span\u003e 防重入，\u003cspan class=\"inline-code\"\u003eactivateBtn.disabled=true\u003c/span\u003e，加入 \u003cspan class=\"inline-code\"\u003epanel.classList.add('pulsing')\u003c/span\u003e 並呼叫 \u003cspan class=\"inline-code\"\u003eburst()\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e粒子爆發 burst()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e建立 \u003cspan class=\"inline-code\"\u003e.particles\u003c/span\u003e 容器，生成 48 個 \u003cspan class=\"inline-code\"\u003e2px\u003c/span\u003e 圓點，\u003cspan class=\"inline-code\"\u003ebackground rgba(160,255,255, .6-.1)\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eboxShadow 0 0 6-16px rgba(0,225,255,.85)\u003c/span\u003e，隨機角度與距離 \u003cspan class=\"inline-code\"\u003e120-460px\u003c/span\u003e、時長 \u003cspan class=\"inline-code\"\u003e1100-1900ms\u003c/span\u003e，以 \u003cspan class=\"inline-code\"\u003eElement.animate({transform, opacity}, cubic-bezier(.15,.7,.2,1))\u003c/span\u003e 向外擴散，2200ms 後移除容器。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e680ms 後揭露\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003ebody.classList.add('revealed')\u003c/span\u003e：黑幕淡出、仙境背景清晰化、scanlines 消失、HUD 模糊縮放淡出；\u003cspan class=\"inline-code\"\u003efloatingUI.setAttribute('aria-hidden','false')\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e1550ms 後顯示導流\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003efloatingUI.classList.add('visible')\u003c/span\u003e 三個浮動按鈕可點擊，皆 \u003cspan class=\"inline-code\"\u003etarget=\"_blank\" rel=\"noopener\"\u003c/span\u003e。同時 \u003cspan class=\"inline-code\"\u003econtextmenu\u003c/span\u003e 在未 revealed 前 \u003cspan class=\"inline-code\"\u003epreventDefault()\u003c/span\u003e 以維持沉浸。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003c/ol\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e無障礙與細節\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003erole=\"dialog\" aria-label=\"系統介面\"\u003c/span\u003e 於 .panel\u003c/li\u003e \u003cli\u003e中央按鈕 \u003cspan class=\"mono\"\u003earia-label=\"啟動\"\u003c/span\u003e，支援 \u003cspan class=\"mono\"\u003ekeydown Enter / Space\u003c/span\u003e 觸發\u003c/li\u003e \u003cli\u003e左右 hotspots \u003cspan class=\"mono\"\u003earia-hidden=\"true\" tabindex=\"-1\"\u003c/span\u003e 僅作視覺占位\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (max-width:640px)\u003c/span\u003e：panel 94vw，center 44%×28%，bl/br 20%×18%\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (prefers-reduced-motion:reduce)\u003c/span\u003e：取消 float 與 transition\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e狀態標籤\u003c/h4\u003e \u003cdiv class=\"badge-row\"\u003e \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e gameReadySent\u003c/span\u003e \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e firstInteractionSent\u003c/span\u003e \u003cspan class=\"tag warn\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--warn)\"\u003e\u003c/span\u003e errorSent 單次鎖\u003c/span\u003e \u003cspan class=\"tag\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ink-3)\"\u003e\u003c/span\u003e frameCount 計數\u003c/span\u003e \u003c/div\u003e \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e所有事件皆帶 \u003cspan class=\"inline-code\"\u003etimestamp: Date.now()\u003c/span\u003e；Android 額外 \u003cspan class=\"inline-code\"\u003e__secureToken\u003c/span\u003e；iframe 使用 \u003cspan class=\"inline-code\"\u003epostMessage(message, '*')\u003c/span\u003e 並 try/catch 靜默忽略。\u003c/p\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpolyline points=\"16 18 22 12 16 6\"\u003e\u003c/polyline\u003e\u003cpolyline points=\"8 6 2 12 8 18\"\u003e\u003c/polyline\u003e\u003c/svg\u003e 完整原始碼 · 保留所有事實\u003c/h2\u003e \u003cp class=\"small\"\u003e下方為原始 \u003cspan class=\"inline-code\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e 內容的等價呈現，已保留全部標籤、屬性、樣式與腳本邏輯，僅作排版可讀化，未增刪實質內容。\u003c/p\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e區塊\u003c/th\u003e\u003cth\u003e關鍵內容\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;html lang=\"zh-Hant\"\u0026gt;\u003c/td\u003e\u003ctd\u003e整體語系 zh-Hant，head 含 Playables SDK 與 Intl.t polyfill\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;div class=\"scene\"\u0026gt;\u003c/td\u003e\u003ctd\u003efairyland-bg / black-veil / vignette / scanlines / hud-container / floating-ui / particles\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;button id=\"activateBtn\"\u0026gt;\u003c/td\u003e\u003ctd\u003e中央「啟動」含 .label + .ring + .ring2，hover 時 ringPulse 1.8s\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;script\u0026gt; activate\u003c/td\u003e\u003ctd\u003eburst → pulsing → 680ms revealed → 1550ms visible，contextmenu 攔截\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"zh-Hant\"\u0026gt;\n\u0026lt;head\u0026gt;\n  \u0026lt;script\u0026gt;// Playables SDK v1.0.0 — rAF game-ready + event bridge\n  // 常數: HANDLER_NAME='playablesGameEventHandler'\n  //       ANDROID_BRIDGE_NAME='_MetaPlayablesBridge'\n  //       RAF_FRAME_THRESHOLD=3\n  // 狀態: gameReadySent, firstInteractionSent, errorSent, frameCount, originalRAF\n  // 傳輸: hasIOSBridge / hasAndroidBridge / isInIframe / sendEvent\n  // rAF: onFrame + 包裝 requestAnimationFrame\n  // 互動: touchstart/mousedown/keydown → user_interaction_start\n  // 錯誤: error / unhandledrejection → error {auto_captured:true}\n  // API: window.playablesSDK = {complete(score), error(message), sendEvent}\n  \u0026lt;/script\u0026gt;\n  \u0026lt;script\u0026gt;window.Intl=window.Intl||{};Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;};\u0026lt;/script\u0026gt;\n  \u0026lt;meta charset=\"utf-8\"\u0026gt;\n  \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\u0026gt;\n  \u0026lt;title\u0026gt;啟動 • 突破介面\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n  \u0026lt;div class=\"scene\"\u0026gt;\n    \u0026lt;div class=\"fairyland-bg\" id=\"fairyBg\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"black-veil\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"vignette\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"scanlines\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"hud-container\" id=\"hud\"\u0026gt;\n      \u0026lt;div class=\"panel\" id=\"panel\" role=\"dialog\" aria-label=\"系統介面\"\u0026gt;\n        \u0026lt;img class=\"panel-img\" src=\"https://i.meee.com.tw/Gy3HF42.jpg\" alt=\"科技面板\"\u0026gt;\n        \u0026lt;button class=\"hotspot center\" id=\"activateBtn\" aria-label=\"啟動\"\u0026gt;\n          \u0026lt;span class=\"label\"\u0026gt;啟動\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring\"\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring2\"\u0026gt;\u0026lt;/span\u0026gt;\n        \u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot bl\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot br\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n      \u0026lt;/div\u0026gt;\n    \u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"floating-ui\" id=\"floatingUI\" aria-hidden=\"true\"\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/8/2\" class=\"float-btn center\" target=\"_blank\" rel=\"noopener\"\u0026gt;相冊ˋ\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/4\" class=\"float-btn bl\" target=\"_blank\" rel=\"noopener\"\u0026gt;剪影\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/8\" class=\"float-btn br\" target=\"_blank\" rel=\"noopener\"\u0026gt;圖轉碼\u0026lt;/a\u0026gt;\n    \u0026lt;/div\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;img id=\"preload-fairy\" src=\"https://i.meee.com.tw/rLl93fh.jpg\" hidden\u0026gt;\n  \u0026lt;img id=\"未來科技\" src=\"container:///mnt/data/tech_panel_bg.jpg\" hidden\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e \u003cp class=\"small\"\u003e註：原始碼中 CSS 含 \u003cspan class=\"inline-code\"\u003e* {box-sizing:border-box}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ehtml,body {background:#000; overflow:hidden}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.panel {aspect-ratio:16/9.5}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.float-btn {backdrop-filter:blur(10px) saturate(1.15)}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e@keyframes float / ringPulse / panelPulse / labelFlash / floatY\u003c/span\u003e 等；JS 含 \u003cspan class=\"inline-code\"\u003einitBackground / burst(48 particles) / activate\u003c/span\u003e 完整邏輯，均已在上方表格與流程中逐項對應。\u003c/p\u003e \u003c/section\u003e \u003csection style=\"background:var(--soft);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between\"\u003e \u003cdiv class=\"small\" style=\"margin:0\"\u003e設計要點：黑幕 → 脈衝 → 粒子 → 揭露 → 懸浮導流。所有橋接事件皆為單次發送，避免重複上報。\u003c/div\u003e \u003cdiv class=\"mono\" style=\"font-size:11px;color:var(--ink-3)\"\u003ePlayables SDK · rAF 3幀 · 三通道橋接 · zh-Hant\u003c/div\u003e \u003c/section\u003e \u003c/div\u003e","createdAt":1788161163338,"deletedAt":null,"displayMode":"artifact","embedRenders":{},"id":"6a952c8bb00f3fa2d9689e37","isPublic":true,"itemType":"NOTE","name":"導覽模塊1","parents":{"6a952a78b00f3fa2d9689e36":1788161163338},"preParentID":null,"updatedAt":1788162198960,"updatedBy":{"userId":"6a91ded101b34b802c0c3c","userName":"林"},"version":8,"websiteContent":"[{\"originUrl\":\"https://i.meee.com.tw/Gy3HF42.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/8/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/4\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/8\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/rLl93fh.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null}]"},"ownerName":"林","subtree":[{"artifactHtml":"\u003cstyle\u003e\n:root{\n  --paper:#fcfefe;\n  --paper-2:#f1f8fb;\n  --ink:#0b1526;\n  --ink-2:#5b6f86;\n  --ink-3:#7a8da6;\n  --accent:#0097b2;\n  --accent-2:#00d0e6;\n  --soft:#eef6f9;\n  --soft-2:#e6f0f5;\n  --hairline:#d9e6ee;\n  --hairline-2:#cfe0ea;\n  --ok:#0e8a6b;\n  --warn:#b45309;\n  --bad:#be123c;\n  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n  --serif: ui-serif, \"Noto Serif TC\", Georgia, serif;\n  --radius:16px;\n  --radius-sm:10px;\n}\n:root[data-theme=\"dark\"]{\n  --paper:#050a14;\n  --paper-2:#0a1424;\n  --ink:#e6f0f7;\n  --ink-2:#8ea3b8;\n  --ink-3:#6b8299;\n  --accent:#7df9ff;\n  --accent-2:#00e5ff;\n  --soft:#0f1e2e;\n  --soft-2:#112233;\n  --hairline:#1a3247;\n  --hairline-2:#1e3a52;\n  --ok:#34d399;\n  --warn:#fbbf24;\n  --bad:#fb7185;\n}\n*{box-sizing:border-box}\n.wrap{\n  background:var(--paper);\n  color:var(--ink);\n  font-family:var(--sans);\n  line-height:1.6;\n  border:1px solid var(--hairline);\n  border-radius:20px;\n  overflow:hidden;\n  max-width:980px;\n  margin:0 auto;\n}\na{color:var(--accent);text-decoration:none}\na:hover{text-decoration:underline}\nheader{\n  padding:28px 28px 22px;\n  background:\n    radial-gradient(900px 400px at 85% -10%, rgba(0,215,255,0.12), transparent 60%),\n    radial-gradient(700px 400px at -10% 0%, rgba(125,249,255,0.10), transparent 60%),\n    linear-gradient(180deg, var(--paper-2), var(--paper));\n  border-bottom:1px solid var(--hairline);\n}\n.eyebrow{\n  display:inline-flex;align-items:center;gap:8px;\n  font-family:var(--mono);\n  font-size:11px;letter-spacing:.14em;text-transform:uppercase;\n  color:var(--ink-2);\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  padding:6px 10px;border-radius:999px;\n}\n.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);display:inline-block}\nh1{\n  font-family:var(--serif);\n  font-size: clamp(26px, 4vw, 38px);\n  line-height:1.15;\n  letter-spacing:.02em;\n  margin:14px 0 8px;\n  font-weight:700;\n}\nh1:empty:before{content:\"啟動 • 突破介面\"; color:var(--ink); opacity:.0; }\n.lede{\n  font-size:15px;color:var(--ink-2);max-width:72ch;margin:0;\n}\n.meta-row{\n  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;\n  font-family:var(--mono);font-size:11px;\n}\n.tag{\n  display:inline-flex;align-items:center;gap:6px;\n  padding:5px 9px;border-radius:999px;\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  color:var(--ink-2);\n  letter-spacing:.04em;\n}\n.tag.accent{border-color:rgba(0,151,178,.25);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--soft))}\n.tag.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 30%, var(--hairline))}\n.tag.warn{color:var(--warn)}\nsection{padding:22px 28px}\nsection + section{border-top:1px solid var(--hairline)}\nh2{\n  font-size:13px;letter-spacing:.14em;text-transform:uppercase;\n  font-family:var(--mono);color:var(--ink-2);\n  margin:0 0 14px;display:flex;align-items:center;gap:10px;\n}\nh2 svg{flex:0 0 auto}\nh3{font-size:15px;margin:18px 0 8px;letter-spacing:.02em}\np{margin:8px 0;color:var(--ink)}\n.small{font-size:12.5px;color:var(--ink-2)}\n.mono{font-family:var(--mono)}\n.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n@media(max-width:760px){.grid2{grid-template-columns:1fr} header,section{padding:20px 18px}}\n[data-cube=\"stats\"]{\n  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;\n  padding:16px 28px;background:var(--paper);\n  border-bottom:1px solid var(--hairline);\n}\n@media(max-width:760px){[data-cube=\"stats\"]{grid-template-columns:1fr 1fr}}\n@media(max-width:480px){[data-cube=\"stats\"]{grid-template-columns:1fr}}\n.stat{\n  background:var(--soft);\n  border:1px solid var(--hairline);\n  border-radius:14px;\n  padding:14px 14px 12px;\n  position:relative;overflow:hidden;\n}\n.stat:before{\n  content:\"\";position:absolute;inset:0 0 auto 0;height:2px;\n  background:linear-gradient(90deg, var(--accent), transparent);\n  opacity:.6;\n}\n.stat .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}\n.stat .value{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;color:var(--ink)}\n.stat .note{font-size:11.5px;color:var(--ink-2);line-height:1.4}\n.card{\n  border:1px solid var(--hairline);\n  background:var(--soft);\n  border-radius:14px;\n  padding:14px;\n}\n.card h4{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono);color:var(--ink-2)}\n.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;padding:8px 0}\n.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}\n.kv dd{margin:0;color:var(--ink);word-break:break-all}\n.table-wrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:12px;background:var(--paper)}\ntable{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}\nth{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;background:var(--soft);border-bottom:1px solid var(--hairline);padding:10px 12px;white-space:nowrap}\ntd{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink)}\ntr:last-child td{border-bottom:0}\ncode, pre{font-family:var(--mono)}\n.inline-code{font-size:12px;background:var(--soft);border:1px solid var(--hairline);padding:2px 6px;border-radius:6px;word-break:break-all}\npre{\n  margin:10px 0 0;\n  background:var(--soft);\n  border:1px solid var(--hairline);\n  border-radius:12px;\n  padding:14px;\n  font-size:12px;line-height:1.6;\n  overflow-x:auto;white-space:pre;word-wrap:normal;\n}\n.steps{counter-reset:step;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}\n.steps li{\n  counter-increment:step;\n  display:grid;grid-template-columns:32px 1fr;gap:12px;\n  padding:12px;border:1px solid var(--hairline);border-radius:12px;background:var(--paper);\n}\n.steps li:before{\n  content:counter(step);\n  width:28px;height:28px;border-radius:50%;\n  display:grid;place-items:center;\n  background:var(--ink);color:var(--paper);\n  font-family:var(--mono);font-size:12px;font-weight:700;\n}\n:root[data-theme=\"dark\"] .steps li:before{background:var(--accent);color:#001018}\n.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}\n.divider{height:1px;background:var(--hairline);margin:16px 0}\n.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}\n\u003c/style\u003e\n\u003cdiv class=\"wrap\"\u003e\n  \u003cheader\u003e\n    \u003cdiv class=\"eyebrow\"\u003e\u003ci\u003e\u003c/i\u003e Playables SDK v1.0.0 — zh-Hant · 單檔可玩廣告\u003c/div\u003e\n    \u003ch1\u003e導覽模塊1\u003c/h1\u003e\n    \u003cp class=\"lede\"\u003e原始檔名 \u003cspan class=\"inline-code\"\u003e啟動 • 突破介面\u003c/span\u003e。黑幕覆蓋的仙境背景，中央懸浮科技面板以 \u003cspan class=\"inline-code\"\u003erAF 3 幀\u003c/span\u003e 判定 \u003cspan class=\"inline-code\"\u003egame_ready\u003c/span\u003e，點擊「啟動」後脈衝、粒子爆發並揭露三個浮動導流按鈕。\u003c/p\u003e\n    \u003cdiv class=\"meta-row\"\u003e\n      \u003cspan class=\"tag accent\"\u003elang: zh-Hant\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003eviewport-fit: cover\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003eoverscroll-behavior: none\u003c/span\u003e\n      \u003cspan class=\"tag\"\u003etouch-action: manipulation\u003c/span\u003e\n      \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e 冪等初始化\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/header\u003e\n\n  \u003csection data-cube=\"stats\"\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eSDK Version\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003ev1.0.0\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003ewindow.playablesSDK 冪等檢查，若已存在直接 return\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eRAF Threshold\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e3 frames\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003eframeCount ≥ 3 即送 game_ready，含後備 onFrame\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eTransport Bridges\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e3 通道\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003eiOS webkit / Android _MetaPlayablesBridge / iframe postMessage\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"stat\"\u003e\n      \u003cdiv class=\"label\"\u003eLifecycle Events\u003c/div\u003e\n      \u003cdiv class=\"value\"\u003e4 事件\u003c/div\u003e\n      \u003cdiv class=\"note\"\u003egame_ready · user_interaction_start · error · game_ended\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M7 8h10M7 12h10M7 16h6\"\u003e\u003c/path\u003e\u003c/svg\u003e 檔案總覽 · File Map\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e文件資訊\u003c/h4\u003e\n        \u003cdl class=\"kv\"\u003e\n          \u003cdt\u003eTitle\u003c/dt\u003e\u003cdd\u003e啟動 • 突破介面\u003c/dd\u003e\n          \u003cdt\u003eCharset\u003c/dt\u003e\u003cdd class=\"mono\"\u003eutf-8\u003c/dd\u003e\n          \u003cdt\u003eViewport\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewidth=device-width, initial-scale=1, viewport-fit=cover\u003c/dd\u003e\n          \u003cdt\u003eIntl Polyfill\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewindow.Intl=window.Intl||{}; Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;}\u003c/dd\u003e\n          \u003cdt\u003eBody 語系\u003c/dt\u003e\u003cdd\u003eui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif\u003c/dd\u003e\n        \u003c/dl\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e外部資源\u003c/h4\u003e\n        \u003cdl class=\"kv\"\u003e\n          \u003cdt\u003ePanel 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/Gy3HF42.jpg — \u0026lt;img class=\"panel-img\" alt=\"科技面板\"\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003eFairyland 預載\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/rLl93fh.jpg — \u0026lt;img id=\"preload-fairy\" hidden\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003eContainer 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003econtainer:///mnt/data/tech_panel_bg.jpg — \u0026lt;img id=\"未來科技\" hidden\u0026gt;\u003c/dd\u003e\n          \u003cdt\u003e導流連結 1\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2 — 相冊ˋ (center)\u003c/dd\u003e\n          \u003cdt\u003e導流連結 2\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4 — 剪影 (bl)\u003c/dd\u003e\n          \u003cdt\u003e導流連結 3\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8 — 圖轉碼 (br)\u003c/dd\u003e\n        \u003c/dl\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e常數\u003c/th\u003e\u003cth\u003e值\u003c/th\u003e\u003cth\u003e用途\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eHANDLER_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003eplayablesGameEventHandler\u003c/td\u003e\u003ctd\u003eiOS bridge 名稱：window.webkit.messageHandlers[HANDLER_NAME].postMessage\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eANDROID_BRIDGE_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003e_MetaPlayablesBridge\u003c/td\u003e\u003ctd\u003eAndroid bridge：window[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003eRAF_FRAME_THRESHOLD\u003c/td\u003e\u003ctd class=\"mono\"\u003e3\u003c/td\u003e\u003ctd\u003erAF 幀數門檻，達標即發 game_ready\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e__fbAndroidBridgeAuthToken\u003c/td\u003e\u003ctd class=\"mono\"\u003ewindow.__fbAndroidBridgeAuthToken || ''\u003c/td\u003e\u003ctd\u003eAndroid 附加 __secureToken\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n    \u003cp class=\"small\"\u003e狀態旗標：\u003cspan class=\"inline-code\"\u003egameReadySent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003efirstInteractionSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eerrorSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eframeCount\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eoriginalRAF = window.requestAnimationFrame\u003c/span\u003e。三個旗標皆為單次發送保護。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\u003e\u003c/path\u003e\u003c/svg\u003e 生命週期橋接 · Lifecycle Bridge\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003erAF Game-Ready 偵測\u003c/h4\u003e\n        \u003cp class=\"small\" style=\"margin:0 0 8px\"\u003e兩條路徑同時保障：包裝 \u003cspan class=\"inline-code\"\u003erequestAnimationFrame\u003c/span\u003e 與後備 \u003cspan class=\"inline-code\"\u003eonFrame\u003c/span\u003e。\u003c/p\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003eonFrame()\u003c/span\u003e：frameCount++，≥3 時 \u003cspan class=\"mono\"\u003esendEvent('game_ready', {frame_count, detected_at: Date.now()})\u003c/span\u003e 後 return，否則 \u003cspan class=\"mono\"\u003eoriginalRAF.call(window, onFrame)\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e覆寫 \u003cspan class=\"mono\"\u003ewindow.requestAnimationFrame\u003c/span\u003e：若未 ready，攔截 callback，在內部先 frameCount++ 並檢測門檻再呼叫原 callback；已 ready 則直通 \u003cspan class=\"mono\"\u003eoriginalRAF\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e啟動：\u003cspan class=\"mono\"\u003eif(originalRAF) originalRAF.call(window, onFrame)\u003c/span\u003e — 即使遊戲未呼叫 rAF 也能觸發\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e game_ready 僅一次\u003c/span\u003e\u003cspan class=\"tag\"\u003epayload: frame_count / detected_at\u003c/span\u003e\u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e公開 API · window.playablesSDK\u003c/h4\u003e\n        \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e\n          \u003ctable style=\"min-width:0\"\u003e\n            \u003cthead\u003e\u003ctr\u003e\u003cth\u003e方法\u003c/th\u003e\u003cth\u003e行為\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ecomplete(score)\u003c/td\u003e\u003ctd\u003e\u003cspan class=\"mono\"\u003esendEvent('game_ended', {score, completed:true})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003eerror(message)\u003c/td\u003e\u003ctd\u003e若未發過 error，\u003cspan class=\"mono\"\u003esendEvent('error', {message: message||'Unknown error', auto_captured:false})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003esendEvent(eventName, payload)\u003c/td\u003e\u003ctd\u003e校驗 eventName 為非空字串後轉發至內部 sendEvent\u003c/td\u003e\u003c/tr\u003e\n            \u003c/tbody\u003e\n          \u003c/table\u003e\n        \u003c/div\u003e\n        \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e自動錯誤捕捉：\u003cspan class=\"mono\"\u003ewindow.addEventListener('error')\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message, source: filename, lineno, colno, auto_captured:true}\u003c/span\u003e；\u003cspan class=\"mono\"\u003eunhandledrejection\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message: reason.message||String(reason), type:'unhandled_promise_rejection', auto_captured:true}\u003c/span\u003e，兩者皆受 \u003cspan class=\"mono\"\u003eerrorSent\u003c/span\u003e 單次限制。\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003ch3\u003e首次互動偵測\u003c/h3\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cp class=\"small\" style=\"margin:0\"\u003e監聽 \u003cspan class=\"inline-code\"\u003etouchstart\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003emousedown\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ekeydown\u003c/span\u003e（capture: true）。首次觸發即 \u003cspan class=\"inline-code\"\u003esendEvent('user_interaction_start', null)\u003c/span\u003e 並移除三個監聽。掛載時機：\u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則等 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/p\u003e\n      \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag\"\u003efirstInteractionSent 單次\u003c/span\u003e\u003cspan class=\"tag\"\u003eremoveEventListener 清理\u003c/span\u003e\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"4\"\u003e\u003c/circle\u003e\u003c/svg\u003e 傳輸層 · Transport Layer\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e通道判斷\u003c/h4\u003e\n        \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e\n          \u003ctable style=\"min-width:0\"\u003e\n            \u003cthead\u003e\u003ctr\u003e\u003cth\u003e函式\u003c/th\u003e\u003cth\u003e判斷\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasIOSBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.webkit \u0026amp;\u0026amp; window.webkit.messageHandlers \u0026amp;\u0026amp; window.webkit.messageHandlers[HANDLER_NAME])\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasAndroidBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window[ANDROID_BRIDGE_NAME] \u0026amp;\u0026amp; typeof window[ANDROID_BRIDGE_NAME].postEvent === 'function')\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd class=\"mono\"\u003eisInIframe()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.parent \u0026amp;\u0026amp; window.parent !== window)\u003c/td\u003e\u003c/tr\u003e\n            \u003c/tbody\u003e\n          \u003c/table\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003esendEvent(eventName, payload)\u003c/h4\u003e\n        \u003cp class=\"small\" style=\"margin:0 0 6px\"\u003e組裝 \u003cspan class=\"inline-code\"\u003e{type: eventName, payload: payload||{}, timestamp: Date.now()}\u003c/span\u003e，依優先序發送並 \u003cspan class=\"inline-code\"\u003ereturn\u003c/span\u003e：\u003c/p\u003e\n        \u003col class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003eiOS：\u003cspan class=\"mono\"\u003ewindow.webkit.messageHandlers[HANDLER_NAME].postMessage(message)\u003c/span\u003e try/catch ignore\u003c/li\u003e\n          \u003cli\u003eAndroid：\u003cspan class=\"mono\"\u003ep.__secureToken = window.__fbAndroidBridgeAuthToken||''\u003c/span\u003e；\u003cspan class=\"mono\"\u003ewindow[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003eiframe：\u003cspan class=\"mono\"\u003ewindow.parent.postMessage(message, '*')\u003c/span\u003e\u003c/li\u003e\n        \u003c/ol\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M16 7V5a4 4 0 0 0-8 0v2\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"14\" r=\"2\"\u003e\u003c/circle\u003e\u003c/svg\u003e 視覺與版面 · Scene \u0026amp; HUD\u003c/h2\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e全螢幕場景 .scene\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003ehtml, body {margin:0; height:100%; background:#000; overflow:hidden; overscroll-behavior:none}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003ebody {color:#dffcff; -webkit-font-smoothing, touch-action:manipulation, user-select:none}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.scene {position:relative; width:100vw; height:100vh; isolation:isolate}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.fairyland-bg {inset:0; background-position:50% 62%; background-size:cover; transform:scale(1.08); filter:saturate(1.05) contrast(1.04) brightness(0.92) blur(2px)}\u003c/span\u003e；\u003cspan class=\"mono\"\u003ebody.revealed .fairyland-bg {transform:scale(1); filter:saturate(1.12) contrast(1) brightness(1) blur(0)}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.black-veil {inset:0; background:radial-gradient(ellipse at center, #000 30%, #000 70%)}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.vignette {radial-gradient transparent 58%, rgba(0,0,0,0.35) 100%; mix-blend-mode:multiply}\u003c/span\u003e；revealed 時 opacity 1\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.scanlines {repeating-linear-gradient rgba(0,255,255,0.07) 1px / transparent 2px; mix-blend-mode:screen; opacity:.28}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e懸浮面板 .panel + Hotspots\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.hud-container {inset:0; display:grid; place-items:center; z-index:4}\u003c/span\u003e；revealed 時 \u003cspan class=\"mono\"\u003eopacity:0; transform:scale(.93); filter:blur(22px) brightness(1.6)\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel {width:min(86vw,760px); aspect-ratio:16/9.5; animation:float 6.5s ease-in-out infinite}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel-img {object-fit:contain; filter:drop-shadow(0 0 14px rgba(0,225,255,.45)) drop-shadow(0 0 36px rgba(0,170,255,.22))}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003eHotspots：\u003cspan class=\"mono\"\u003e.center {left:50%; top:49.5%; width:34%; height:24%; transform:translate(-50%,-50%)}\u003c/span\u003e 含 \u003cspan class=\"mono\"\u003e.label\u003c/span\u003e（clamp 20-32px, letter-spacing .42em, text-shadow 0 0 8px/22px/48px）與 \u003cspan class=\"mono\"\u003e.ring / .ring2\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.bl {left:20.5%; bottom:19%; width:15%; height:15%}\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.br {right:20.5%; bottom:19%}\u003c/span\u003e\u003c/li\u003e\n          \u003cli\u003e脈衝：\u003cspan class=\"mono\"\u003e.panel.pulsing .panel-img {animation:panelPulse .9s}\u003c/span\u003e、\u003cspan class=\"mono\"\u003e.label {animation:labelFlash .7s}\u003c/span\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003ch3\u003e揭露後浮動按鈕 .floating-ui\u003c/h3\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e按鈕\u003c/th\u003e\u003cth\u003e位置\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e連結\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd\u003e相冊ˋ\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.center {left:50%; top:49.5%; transform:translate(-50%,-50%)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 12px 26px; letter-spacing .38em; backdrop-filter blur(10px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd\u003e剪影\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.bl {left:20.5%; bottom:19%; transform:translate(-50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 10px 20px; border 1px rgba(125,249,255,.22); box-shadow 0 4px 18px rgba(0,0,0,.38)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd\u003e圖轉碼\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.br {right:20.5%; bottom:19%; transform:translate(50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003ehover: border rgba(125,249,255,.55); translateY(-2px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n    \u003cp class=\"small\"\u003e浮動動畫：\u003cspan class=\"inline-code\"\u003efloatY 6.8s\u003c/span\u003e（center）、\u003cspan class=\"inline-code\"\u003efloatY2 7.2s\u003c/span\u003e（bl/br，br 延遲 -1.8s）。初始 \u003cspan class=\"inline-code\"\u003e.floating-ui {opacity:0; pointer-events:none}\u003c/span\u003e，\u003cspan class=\"inline-code\"\u003e.visible {opacity:1; pointer-events:auto}\u003c/span\u003e。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 20h9\"\u003e\u003c/path\u003e\u003cpath d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動流程 · 從點擊到揭露\u003c/h2\u003e\n    \u003col class=\"steps\"\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e背景初始化 initBackground()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e讀取 \u003cspan class=\"inline-code\"\u003e#preload-fairy.src\u003c/span\u003e 寫入 \u003cspan class=\"inline-code\"\u003efairyBg.style.backgroundImage = \"url('\"+src+\"')\"\u003c/span\u003e。若 \u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則監聽 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e點擊「啟動」 activate()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e旗標 \u003cspan class=\"inline-code\"\u003eactivated\u003c/span\u003e 防重入，\u003cspan class=\"inline-code\"\u003eactivateBtn.disabled=true\u003c/span\u003e，加入 \u003cspan class=\"inline-code\"\u003epanel.classList.add('pulsing')\u003c/span\u003e 並呼叫 \u003cspan class=\"inline-code\"\u003eburst()\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e粒子爆發 burst()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e建立 \u003cspan class=\"inline-code\"\u003e.particles\u003c/span\u003e 容器，生成 48 個 \u003cspan class=\"inline-code\"\u003e2px\u003c/span\u003e 圓點，\u003cspan class=\"inline-code\"\u003ebackground rgba(160,255,255, .6-.1)\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eboxShadow 0 0 6-16px rgba(0,225,255,.85)\u003c/span\u003e，隨機角度與距離 \u003cspan class=\"inline-code\"\u003e120-460px\u003c/span\u003e、時長 \u003cspan class=\"inline-code\"\u003e1100-1900ms\u003c/span\u003e，以 \u003cspan class=\"inline-code\"\u003eElement.animate({transform, opacity}, cubic-bezier(.15,.7,.2,1))\u003c/span\u003e 向外擴散，2200ms 後移除容器。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e680ms 後揭露\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003ebody.classList.add('revealed')\u003c/span\u003e：黑幕淡出、仙境背景清晰化、scanlines 消失、HUD 模糊縮放淡出；\u003cspan class=\"inline-code\"\u003efloatingUI.setAttribute('aria-hidden','false')\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n      \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e1550ms 後顯示導流\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003efloatingUI.classList.add('visible')\u003c/span\u003e 三個浮動按鈕可點擊，皆 \u003cspan class=\"inline-code\"\u003etarget=\"_blank\" rel=\"noopener\"\u003c/span\u003e。同時 \u003cspan class=\"inline-code\"\u003econtextmenu\u003c/span\u003e 在未 revealed 前 \u003cspan class=\"inline-code\"\u003epreventDefault()\u003c/span\u003e 以維持沉浸。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cdiv class=\"divider\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"grid2\"\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e無障礙與細節\u003c/h4\u003e\n        \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003erole=\"dialog\" aria-label=\"系統介面\"\u003c/span\u003e 於 .panel\u003c/li\u003e\n          \u003cli\u003e中央按鈕 \u003cspan class=\"mono\"\u003earia-label=\"啟動\"\u003c/span\u003e，支援 \u003cspan class=\"mono\"\u003ekeydown Enter / Space\u003c/span\u003e 觸發\u003c/li\u003e\n          \u003cli\u003e左右 hotspots \u003cspan class=\"mono\"\u003earia-hidden=\"true\" tabindex=\"-1\"\u003c/span\u003e 僅作視覺占位\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (max-width:640px)\u003c/span\u003e：panel 94vw，center 44%×28%，bl/br 20%×18%\u003c/li\u003e\n          \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (prefers-reduced-motion:reduce)\u003c/span\u003e：取消 float 與 transition\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"card\"\u003e\n        \u003ch4\u003e狀態標籤\u003c/h4\u003e\n        \u003cdiv class=\"badge-row\"\u003e\n          \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e gameReadySent\u003c/span\u003e\n          \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e firstInteractionSent\u003c/span\u003e\n          \u003cspan class=\"tag warn\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--warn)\"\u003e\u003c/span\u003e errorSent 單次鎖\u003c/span\u003e\n          \u003cspan class=\"tag\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ink-3)\"\u003e\u003c/span\u003e frameCount 計數\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e所有事件皆帶 \u003cspan class=\"inline-code\"\u003etimestamp: Date.now()\u003c/span\u003e；Android 額外 \u003cspan class=\"inline-code\"\u003e__secureToken\u003c/span\u003e；iframe 使用 \u003cspan class=\"inline-code\"\u003epostMessage(message, '*')\u003c/span\u003e 並 try/catch 靜默忽略。\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\n  \u003csection\u003e\n    \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpolyline points=\"16 18 22 12 16 6\"\u003e\u003c/polyline\u003e\u003cpolyline points=\"8 6 2 12 8 18\"\u003e\u003c/polyline\u003e\u003c/svg\u003e 完整原始碼 · 保留所有事實\u003c/h2\u003e\n    \u003cp class=\"small\"\u003e下方為原始 \u003cspan class=\"inline-code\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e 內容的等價呈現，已保留全部標籤、屬性、樣式與腳本邏輯，僅作排版可讀化，未增刪實質內容。\u003c/p\u003e\n    \u003cdiv class=\"table-wrap\"\u003e\n      \u003ctable\u003e\n        \u003cthead\u003e\u003ctr\u003e\u003cth\u003e區塊\u003c/th\u003e\u003cth\u003e關鍵內容\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n        \u003ctbody\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;html lang=\"zh-Hant\"\u0026gt;\u003c/td\u003e\u003ctd\u003e整體語系 zh-Hant，head 含 Playables SDK 與 Intl.t polyfill\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;div class=\"scene\"\u0026gt;\u003c/td\u003e\u003ctd\u003efairyland-bg / black-veil / vignette / scanlines / hud-container / floating-ui / particles\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;button id=\"activateBtn\"\u0026gt;\u003c/td\u003e\u003ctd\u003e中央「啟動」含 .label + .ring + .ring2，hover 時 ringPulse 1.8s\u003c/td\u003e\u003c/tr\u003e\n          \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;script\u0026gt; activate\u003c/td\u003e\u003ctd\u003eburst → pulsing → 680ms revealed → 1550ms visible，contextmenu 攔截\u003c/td\u003e\u003c/tr\u003e\n        \u003c/tbody\u003e\n      \u003c/table\u003e\n    \u003c/div\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"zh-Hant\"\u0026gt;\n\u0026lt;head\u0026gt;\n  \u0026lt;script\u0026gt;// Playables SDK v1.0.0 — rAF game-ready + event bridge\n  // 常數: HANDLER_NAME='playablesGameEventHandler'\n  //       ANDROID_BRIDGE_NAME='_MetaPlayablesBridge'\n  //       RAF_FRAME_THRESHOLD=3\n  // 狀態: gameReadySent, firstInteractionSent, errorSent, frameCount, originalRAF\n  // 傳輸: hasIOSBridge / hasAndroidBridge / isInIframe / sendEvent\n  // rAF: onFrame + 包裝 requestAnimationFrame\n  // 互動: touchstart/mousedown/keydown → user_interaction_start\n  // 錯誤: error / unhandledrejection → error {auto_captured:true}\n  // API: window.playablesSDK = {complete(score), error(message), sendEvent}\n  \u0026lt;/script\u0026gt;\n  \u0026lt;script\u0026gt;window.Intl=window.Intl||{};Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;};\u0026lt;/script\u0026gt;\n  \u0026lt;meta charset=\"utf-8\"\u0026gt;\n  \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\u0026gt;\n  \u0026lt;title\u0026gt;啟動 • 突破介面\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n  \u0026lt;div class=\"scene\"\u0026gt;\n    \u0026lt;div class=\"fairyland-bg\" id=\"fairyBg\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"black-veil\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"vignette\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"scanlines\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"hud-container\" id=\"hud\"\u0026gt;\n      \u0026lt;div class=\"panel\" id=\"panel\" role=\"dialog\" aria-label=\"系統介面\"\u0026gt;\n        \u0026lt;img class=\"panel-img\" src=\"https://i.meee.com.tw/Gy3HF42.jpg\" alt=\"科技面板\"\u0026gt;\n        \u0026lt;button class=\"hotspot center\" id=\"activateBtn\" aria-label=\"啟動\"\u0026gt;\n          \u0026lt;span class=\"label\"\u0026gt;啟動\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring\"\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring2\"\u0026gt;\u0026lt;/span\u0026gt;\n        \u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot bl\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot br\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n      \u0026lt;/div\u0026gt;\n    \u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"floating-ui\" id=\"floatingUI\" aria-hidden=\"true\"\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/8/2\" class=\"float-btn center\" target=\"_blank\" rel=\"noopener\"\u0026gt;相冊ˋ\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/4\" class=\"float-btn bl\" target=\"_blank\" rel=\"noopener\"\u0026gt;剪影\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/8\" class=\"float-btn br\" target=\"_blank\" rel=\"noopener\"\u0026gt;圖轉碼\u0026lt;/a\u0026gt;\n    \u0026lt;/div\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;img id=\"preload-fairy\" src=\"https://i.meee.com.tw/rLl93fh.jpg\" hidden\u0026gt;\n  \u0026lt;img id=\"未來科技\" src=\"container:///mnt/data/tech_panel_bg.jpg\" hidden\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n    \u003cp class=\"small\"\u003e註：原始碼中 CSS 含 \u003cspan class=\"inline-code\"\u003e* {box-sizing:border-box}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ehtml,body {background:#000; overflow:hidden}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.panel {aspect-ratio:16/9.5}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.float-btn {backdrop-filter:blur(10px) saturate(1.15)}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e@keyframes float / ringPulse / panelPulse / labelFlash / floatY\u003c/span\u003e 等；JS 含 \u003cspan class=\"inline-code\"\u003einitBackground / burst(48 particles) / activate\u003c/span\u003e 完整邏輯，均已在上方表格與流程中逐項對應。\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection style=\"background:var(--soft);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between\"\u003e\n    \u003cdiv class=\"small\" style=\"margin:0\"\u003e設計要點：黑幕 → 脈衝 → 粒子 → 揭露 → 懸浮導流。所有橋接事件皆為單次發送，避免重複上報。\u003c/div\u003e\n    \u003cdiv class=\"mono\" style=\"font-size:11px;color:var(--ink-3)\"\u003ePlayables SDK · rAF 3幀 · 三通道橋接 · zh-Hant\u003c/div\u003e\n  \u003c/section\u003e\n\u003c/div\u003e","artifactSourceHash":"iolzldbmi5q4","content":"\u003cdiv class=\"wrap\"\u003e  \u003ctable\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eSDK Version\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003ev1.0.0\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003ewindow.playablesSDK 冪等檢查，若已存在直接 return\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eRAF Threshold\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e3 frames\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eframeCount ≥ 3 即送 game_ready，含後備 onFrame\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eTransport Bridges\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e3 通道\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003eiOS webkit / Android _MetaPlayablesBridge / iframe postMessage\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\u003cp\u003eLifecycle Events\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003e4 事件\u003c/p\u003e\u003c/td\u003e\u003ctd\u003e\u003cp\u003egame_ready · user_interaction_start · error · game_ended\u003c/p\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M7 8h10M7 12h10M7 16h6\"\u003e\u003c/path\u003e\u003c/svg\u003e 檔案總覽 · File Map\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e文件資訊\u003c/h4\u003e \u003cdl class=\"kv\"\u003e \u003cdt\u003eTitle\u003c/dt\u003e\u003cdd\u003e啟動 • 突破介面\u003c/dd\u003e \u003cdt\u003eCharset\u003c/dt\u003e\u003cdd class=\"mono\"\u003eutf-8\u003c/dd\u003e \u003cdt\u003eViewport\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewidth=device-width, initial-scale=1, viewport-fit=cover\u003c/dd\u003e \u003cdt\u003eIntl Polyfill\u003c/dt\u003e\u003cdd class=\"mono\"\u003ewindow.Intl=window.Intl||{}; Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;}\u003c/dd\u003e \u003cdt\u003eBody 語系\u003c/dt\u003e\u003cdd\u003eui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif\u003c/dd\u003e \u003c/dl\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e外部資源\u003c/h4\u003e \u003cdl class=\"kv\"\u003e \u003cdt\u003ePanel 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/Gy3HF42.jpg — \u0026lt;img class=\"panel-img\" alt=\"科技面板\"\u0026gt;\u003c/dd\u003e \u003cdt\u003eFairyland 預載\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://i.meee.com.tw/rLl93fh.jpg — \u0026lt;img id=\"preload-fairy\" hidden\u0026gt;\u003c/dd\u003e \u003cdt\u003eContainer 圖片\u003c/dt\u003e\u003cdd class=\"mono\"\u003econtainer:///mnt/data/tech_panel_bg.jpg — \u0026lt;img id=\"未來科技\" hidden\u0026gt;\u003c/dd\u003e \u003cdt\u003e導流連結 1\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2 — 相冊ˋ (center)\u003c/dd\u003e \u003cdt\u003e導流連結 2\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4 — 剪影 (bl)\u003c/dd\u003e \u003cdt\u003e導流連結 3\u003c/dt\u003e\u003cdd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8 — 圖轉碼 (br)\u003c/dd\u003e \u003c/dl\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e常數\u003c/th\u003e\u003cth\u003e值\u003c/th\u003e\u003cth\u003e用途\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eHANDLER_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003eplayablesGameEventHandler\u003c/td\u003e\u003ctd\u003eiOS bridge 名稱：window.webkit.messageHandlers[HANDLER_NAME].postMessage\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eANDROID_BRIDGE_NAME\u003c/td\u003e\u003ctd class=\"mono\"\u003e_MetaPlayablesBridge\u003c/td\u003e\u003ctd\u003eAndroid bridge：window[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eRAF_FRAME_THRESHOLD\u003c/td\u003e\u003ctd class=\"mono\"\u003e3\u003c/td\u003e\u003ctd\u003erAF 幀數門檻，達標即發 game_ready\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e__fbAndroidBridgeAuthToken\u003c/td\u003e\u003ctd class=\"mono\"\u003ewindow.__fbAndroidBridgeAuthToken || ''\u003c/td\u003e\u003ctd\u003eAndroid 附加 __secureToken\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\"\u003e狀態旗標：\u003cspan class=\"inline-code\"\u003egameReadySent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003efirstInteractionSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eerrorSent\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eframeCount\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eoriginalRAF = window.requestAnimationFrame\u003c/span\u003e。三個旗標皆為單次發送保護。\u003c/p\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\u003e\u003c/path\u003e\u003c/svg\u003e 生命週期橋接 · Lifecycle Bridge\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003erAF Game-Ready 偵測\u003c/h4\u003e \u003cp class=\"small\" style=\"margin:0 0 8px\"\u003e兩條路徑同時保障：包裝 \u003cspan class=\"inline-code\"\u003erequestAnimationFrame\u003c/span\u003e 與後備 \u003cspan class=\"inline-code\"\u003eonFrame\u003c/span\u003e。\u003c/p\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003eonFrame()\u003c/span\u003e：frameCount++，≥3 時 \u003cspan class=\"mono\"\u003esendEvent('game_ready', {frame_count, detected_at: Date.now()})\u003c/span\u003e 後 return，否則 \u003cspan class=\"mono\"\u003eoriginalRAF.call(window, onFrame)\u003c/span\u003e\u003c/li\u003e \u003cli\u003e覆寫 \u003cspan class=\"mono\"\u003ewindow.requestAnimationFrame\u003c/span\u003e：若未 ready，攔截 callback，在內部先 frameCount++ 並檢測門檻再呼叫原 callback；已 ready 則直通 \u003cspan class=\"mono\"\u003eoriginalRAF\u003c/span\u003e\u003c/li\u003e \u003cli\u003e啟動：\u003cspan class=\"mono\"\u003eif(originalRAF) originalRAF.call(window, onFrame)\u003c/span\u003e — 即使遊戲未呼叫 rAF 也能觸發\u003c/li\u003e \u003c/ul\u003e \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e game_ready 僅一次\u003c/span\u003e\u003cspan class=\"tag\"\u003epayload: frame_count / detected_at\u003c/span\u003e\u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e公開 API · window.playablesSDK\u003c/h4\u003e \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e \u003ctable style=\"min-width:0\"\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e方法\u003c/th\u003e\u003cth\u003e行為\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ecomplete(score)\u003c/td\u003e\u003ctd\u003e\u003cspan class=\"mono\"\u003esendEvent('game_ended', {score, completed:true})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eerror(message)\u003c/td\u003e\u003ctd\u003e若未發過 error，\u003cspan class=\"mono\"\u003esendEvent('error', {message: message||'Unknown error', auto_captured:false})\u003c/span\u003e\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003esendEvent(eventName, payload)\u003c/td\u003e\u003ctd\u003e校驗 eventName 為非空字串後轉發至內部 sendEvent\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e自動錯誤捕捉：\u003cspan class=\"mono\"\u003ewindow.addEventListener('error')\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message, source: filename, lineno, colno, auto_captured:true}\u003c/span\u003e；\u003cspan class=\"mono\"\u003eunhandledrejection\u003c/span\u003e 送 \u003cspan class=\"mono\"\u003e{message: reason.message||String(reason), type:'unhandled_promise_rejection', auto_captured:true}\u003c/span\u003e，兩者皆受 \u003cspan class=\"mono\"\u003eerrorSent\u003c/span\u003e 單次限制。\u003c/p\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e首次互動偵測\u003c/h3\u003e \u003cdiv class=\"card\"\u003e \u003cp class=\"small\" style=\"margin:0\"\u003e監聽 \u003cspan class=\"inline-code\"\u003etouchstart\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003emousedown\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ekeydown\u003c/span\u003e（capture: true）。首次觸發即 \u003cspan class=\"inline-code\"\u003esendEvent('user_interaction_start', null)\u003c/span\u003e 並移除三個監聽。掛載時機：\u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則等 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/p\u003e \u003cdiv class=\"badge-row\"\u003e\u003cspan class=\"tag\"\u003efirstInteractionSent 單次\u003c/span\u003e\u003cspan class=\"tag\"\u003eremoveEventListener 清理\u003c/span\u003e\u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"4\"\u003e\u003c/circle\u003e\u003c/svg\u003e 傳輸層 · Transport Layer\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e通道判斷\u003c/h4\u003e \u003cdiv class=\"table-wrap\" style=\"margin-top:8px\"\u003e \u003ctable style=\"min-width:0\"\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e函式\u003c/th\u003e\u003cth\u003e判斷\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasIOSBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.webkit \u0026amp;\u0026amp; window.webkit.messageHandlers \u0026amp;\u0026amp; window.webkit.messageHandlers[HANDLER_NAME])\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003ehasAndroidBridge()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window[ANDROID_BRIDGE_NAME] \u0026amp;\u0026amp; typeof window[ANDROID_BRIDGE_NAME].postEvent === 'function')\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003eisInIframe()\u003c/td\u003e\u003ctd class=\"mono\"\u003e!!(window.parent \u0026amp;\u0026amp; window.parent !== window)\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003esendEvent(eventName, payload)\u003c/h4\u003e \u003cp class=\"small\" style=\"margin:0 0 6px\"\u003e組裝 \u003cspan class=\"inline-code\"\u003e{type: eventName, payload: payload||{}, timestamp: Date.now()}\u003c/span\u003e，依優先序發送並 \u003cspan class=\"inline-code\"\u003ereturn\u003c/span\u003e：\u003c/p\u003e \u003col class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003eiOS：\u003cspan class=\"mono\"\u003ewindow.webkit.messageHandlers[HANDLER_NAME].postMessage(message)\u003c/span\u003e try/catch ignore\u003c/li\u003e \u003cli\u003eAndroid：\u003cspan class=\"mono\"\u003ep.__secureToken = window.__fbAndroidBridgeAuthToken||''\u003c/span\u003e；\u003cspan class=\"mono\"\u003ewindow[ANDROID_BRIDGE_NAME].postEvent(eventName, JSON.stringify(p))\u003c/span\u003e\u003c/li\u003e \u003cli\u003eiframe：\u003cspan class=\"mono\"\u003ewindow.parent.postMessage(message, '*')\u003c/span\u003e\u003c/li\u003e \u003c/ol\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003crect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\u003e\u003c/rect\u003e\u003cpath d=\"M16 7V5a4 4 0 0 0-8 0v2\"\u003e\u003c/path\u003e\u003ccircle cx=\"12\" cy=\"14\" r=\"2\"\u003e\u003c/circle\u003e\u003c/svg\u003e 視覺與版面 · Scene \u0026amp; HUD\u003c/h2\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e全螢幕場景 .scene\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003ehtml, body {margin:0; height:100%; background:#000; overflow:hidden; overscroll-behavior:none}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003ebody {color:#dffcff; -webkit-font-smoothing, touch-action:manipulation, user-select:none}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.scene {position:relative; width:100vw; height:100vh; isolation:isolate}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.fairyland-bg {inset:0; background-position:50% 62%; background-size:cover; transform:scale(1.08); filter:saturate(1.05) contrast(1.04) brightness(0.92) blur(2px)}\u003c/span\u003e；\u003cspan class=\"mono\"\u003ebody.revealed .fairyland-bg {transform:scale(1); filter:saturate(1.12) contrast(1) brightness(1) blur(0)}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.black-veil {inset:0; background:radial-gradient(ellipse at center, #000 30%, #000 70%)}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.vignette {radial-gradient transparent 58%, rgba(0,0,0,0.35) 100%; mix-blend-mode:multiply}\u003c/span\u003e；revealed 時 opacity 1\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.scanlines {repeating-linear-gradient rgba(0,255,255,0.07) 1px / transparent 2px; mix-blend-mode:screen; opacity:.28}\u003c/span\u003e；revealed 時 opacity 0\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e懸浮面板 .panel + Hotspots\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.hud-container {inset:0; display:grid; place-items:center; z-index:4}\u003c/span\u003e；revealed 時 \u003cspan class=\"mono\"\u003eopacity:0; transform:scale(.93); filter:blur(22px) brightness(1.6)\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel {width:min(86vw,760px); aspect-ratio:16/9.5; animation:float 6.5s ease-in-out infinite}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e.panel-img {object-fit:contain; filter:drop-shadow(0 0 14px rgba(0,225,255,.45)) drop-shadow(0 0 36px rgba(0,170,255,.22))}\u003c/span\u003e\u003c/li\u003e \u003cli\u003eHotspots：\u003cspan class=\"mono\"\u003e.center {left:50%; top:49.5%; width:34%; height:24%; transform:translate(-50%,-50%)}\u003c/span\u003e 含 \u003cspan class=\"mono\"\u003e.label\u003c/span\u003e（clamp 20-32px, letter-spacing .42em, text-shadow 0 0 8px/22px/48px）與 \u003cspan class=\"mono\"\u003e.ring / .ring2\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.bl {left:20.5%; bottom:19%; width:15%; height:15%}\u003c/span\u003e；\u003cspan class=\"mono\"\u003e.br {right:20.5%; bottom:19%}\u003c/span\u003e\u003c/li\u003e \u003cli\u003e脈衝：\u003cspan class=\"mono\"\u003e.panel.pulsing .panel-img {animation:panelPulse .9s}\u003c/span\u003e、\u003cspan class=\"mono\"\u003e.label {animation:labelFlash .7s}\u003c/span\u003e\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003c/div\u003e \u003ch3\u003e揭露後浮動按鈕 .floating-ui\u003c/h3\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e按鈕\u003c/th\u003e\u003cth\u003e位置\u003c/th\u003e\u003cth\u003e樣式\u003c/th\u003e\u003cth\u003e連結\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd\u003e相冊ˋ\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.center {left:50%; top:49.5%; transform:translate(-50%,-50%)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 12px 26px; letter-spacing .38em; backdrop-filter blur(10px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/8/2\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e剪影\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.bl {left:20.5%; bottom:19%; transform:translate(-50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003epadding 10px 20px; border 1px rgba(125,249,255,.22); box-shadow 0 4px 18px rgba(0,0,0,.38)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/4\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd\u003e圖轉碼\u003c/td\u003e\u003ctd class=\"mono\"\u003e.float-btn.br {right:20.5%; bottom:19%; transform:translate(50%,0)}\u003c/td\u003e\u003ctd class=\"mono\"\u003ehover: border rgba(125,249,255,.55); translateY(-2px)\u003c/td\u003e\u003ctd class=\"mono\"\u003ehttps://sites.google.com/view/shakewww1/2/4/8\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cp class=\"small\"\u003e浮動動畫：\u003cspan class=\"inline-code\"\u003efloatY 6.8s\u003c/span\u003e（center）、\u003cspan class=\"inline-code\"\u003efloatY2 7.2s\u003c/span\u003e（bl/br，br 延遲 -1.8s）。初始 \u003cspan class=\"inline-code\"\u003e.floating-ui {opacity:0; pointer-events:none}\u003c/span\u003e，\u003cspan class=\"inline-code\"\u003e.visible {opacity:1; pointer-events:auto}\u003c/span\u003e。\u003c/p\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpath d=\"M12 20h9\"\u003e\u003c/path\u003e\u003cpath d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z\"\u003e\u003c/path\u003e\u003c/svg\u003e 互動流程 · 從點擊到揭露\u003c/h2\u003e \u003col class=\"steps\"\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e背景初始化 initBackground()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e讀取 \u003cspan class=\"inline-code\"\u003e#preload-fairy.src\u003c/span\u003e 寫入 \u003cspan class=\"inline-code\"\u003efairyBg.style.backgroundImage = \"url('\"+src+\"')\"\u003c/span\u003e。若 \u003cspan class=\"inline-code\"\u003edocument.readyState === 'loading'\u003c/span\u003e 則監聽 \u003cspan class=\"inline-code\"\u003eDOMContentLoaded\u003c/span\u003e，否則立即執行。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e點擊「啟動」 activate()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e旗標 \u003cspan class=\"inline-code\"\u003eactivated\u003c/span\u003e 防重入，\u003cspan class=\"inline-code\"\u003eactivateBtn.disabled=true\u003c/span\u003e，加入 \u003cspan class=\"inline-code\"\u003epanel.classList.add('pulsing')\u003c/span\u003e 並呼叫 \u003cspan class=\"inline-code\"\u003eburst()\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e粒子爆發 burst()\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e建立 \u003cspan class=\"inline-code\"\u003e.particles\u003c/span\u003e 容器，生成 48 個 \u003cspan class=\"inline-code\"\u003e2px\u003c/span\u003e 圓點，\u003cspan class=\"inline-code\"\u003ebackground rgba(160,255,255, .6-.1)\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003eboxShadow 0 0 6-16px rgba(0,225,255,.85)\u003c/span\u003e，隨機角度與距離 \u003cspan class=\"inline-code\"\u003e120-460px\u003c/span\u003e、時長 \u003cspan class=\"inline-code\"\u003e1100-1900ms\u003c/span\u003e，以 \u003cspan class=\"inline-code\"\u003eElement.animate({transform, opacity}, cubic-bezier(.15,.7,.2,1))\u003c/span\u003e 向外擴散，2200ms 後移除容器。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e680ms 後揭露\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003ebody.classList.add('revealed')\u003c/span\u003e：黑幕淡出、仙境背景清晰化、scanlines 消失、HUD 模糊縮放淡出；\u003cspan class=\"inline-code\"\u003efloatingUI.setAttribute('aria-hidden','false')\u003c/span\u003e。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003cli\u003e\u003cdiv\u003e\u003cstrong\u003e1550ms 後顯示導流\u003c/strong\u003e\u003cbr\u003e\u003cspan class=\"small\"\u003e\u003cspan class=\"inline-code\"\u003efloatingUI.classList.add('visible')\u003c/span\u003e 三個浮動按鈕可點擊，皆 \u003cspan class=\"inline-code\"\u003etarget=\"_blank\" rel=\"noopener\"\u003c/span\u003e。同時 \u003cspan class=\"inline-code\"\u003econtextmenu\u003c/span\u003e 在未 revealed 前 \u003cspan class=\"inline-code\"\u003epreventDefault()\u003c/span\u003e 以維持沉浸。\u003c/span\u003e\u003c/div\u003e\u003c/li\u003e \u003c/ol\u003e \u003cdiv class=\"divider\"\u003e\u003c/div\u003e \u003cdiv class=\"grid2\"\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e無障礙與細節\u003c/h4\u003e \u003cul class=\"small\" style=\"margin:0;padding-left:16px\"\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003erole=\"dialog\" aria-label=\"系統介面\"\u003c/span\u003e 於 .panel\u003c/li\u003e \u003cli\u003e中央按鈕 \u003cspan class=\"mono\"\u003earia-label=\"啟動\"\u003c/span\u003e，支援 \u003cspan class=\"mono\"\u003ekeydown Enter / Space\u003c/span\u003e 觸發\u003c/li\u003e \u003cli\u003e左右 hotspots \u003cspan class=\"mono\"\u003earia-hidden=\"true\" tabindex=\"-1\"\u003c/span\u003e 僅作視覺占位\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (max-width:640px)\u003c/span\u003e：panel 94vw，center 44%×28%，bl/br 20%×18%\u003c/li\u003e \u003cli\u003e\u003cspan class=\"mono\"\u003e@media (prefers-reduced-motion:reduce)\u003c/span\u003e：取消 float 與 transition\u003c/li\u003e \u003c/ul\u003e \u003c/div\u003e \u003cdiv class=\"card\"\u003e \u003ch4\u003e狀態標籤\u003c/h4\u003e \u003cdiv class=\"badge-row\"\u003e \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e gameReadySent\u003c/span\u003e \u003cspan class=\"tag ok\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ok)\"\u003e\u003c/span\u003e firstInteractionSent\u003c/span\u003e \u003cspan class=\"tag warn\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--warn)\"\u003e\u003c/span\u003e errorSent 單次鎖\u003c/span\u003e \u003cspan class=\"tag\"\u003e\u003cspan class=\"status-dot\" style=\"background:var(--ink-3)\"\u003e\u003c/span\u003e frameCount 計數\u003c/span\u003e \u003c/div\u003e \u003cp class=\"small\" style=\"margin:8px 0 0\"\u003e所有事件皆帶 \u003cspan class=\"inline-code\"\u003etimestamp: Date.now()\u003c/span\u003e；Android 額外 \u003cspan class=\"inline-code\"\u003e__secureToken\u003c/span\u003e；iframe 使用 \u003cspan class=\"inline-code\"\u003epostMessage(message, '*')\u003c/span\u003e 並 try/catch 靜默忽略。\u003c/p\u003e \u003c/div\u003e \u003c/div\u003e \u003c/section\u003e \u003csection\u003e \u003ch2\u003e\u003csvg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"\u003e\u003cpolyline points=\"16 18 22 12 16 6\"\u003e\u003c/polyline\u003e\u003cpolyline points=\"8 6 2 12 8 18\"\u003e\u003c/polyline\u003e\u003c/svg\u003e 完整原始碼 · 保留所有事實\u003c/h2\u003e \u003cp class=\"small\"\u003e下方為原始 \u003cspan class=\"inline-code\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/span\u003e 內容的等價呈現，已保留全部標籤、屬性、樣式與腳本邏輯，僅作排版可讀化，未增刪實質內容。\u003c/p\u003e \u003cdiv class=\"table-wrap\"\u003e \u003ctable\u003e \u003cthead\u003e\u003ctr\u003e\u003cth\u003e區塊\u003c/th\u003e\u003cth\u003e關鍵內容\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e \u003ctbody\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;html lang=\"zh-Hant\"\u0026gt;\u003c/td\u003e\u003ctd\u003e整體語系 zh-Hant，head 含 Playables SDK 與 Intl.t polyfill\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;div class=\"scene\"\u0026gt;\u003c/td\u003e\u003ctd\u003efairyland-bg / black-veil / vignette / scanlines / hud-container / floating-ui / particles\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;button id=\"activateBtn\"\u0026gt;\u003c/td\u003e\u003ctd\u003e中央「啟動」含 .label + .ring + .ring2，hover 時 ringPulse 1.8s\u003c/td\u003e\u003c/tr\u003e \u003ctr\u003e\u003ctd class=\"mono\"\u003e\u0026lt;script\u0026gt; activate\u003c/td\u003e\u003ctd\u003eburst → pulsing → 680ms revealed → 1550ms visible，contextmenu 攔截\u003c/td\u003e\u003c/tr\u003e \u003c/tbody\u003e \u003c/table\u003e \u003c/div\u003e \u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"zh-Hant\"\u0026gt;\n\u0026lt;head\u0026gt;\n  \u0026lt;script\u0026gt;// Playables SDK v1.0.0 — rAF game-ready + event bridge\n  // 常數: HANDLER_NAME='playablesGameEventHandler'\n  //       ANDROID_BRIDGE_NAME='_MetaPlayablesBridge'\n  //       RAF_FRAME_THRESHOLD=3\n  // 狀態: gameReadySent, firstInteractionSent, errorSent, frameCount, originalRAF\n  // 傳輸: hasIOSBridge / hasAndroidBridge / isInIframe / sendEvent\n  // rAF: onFrame + 包裝 requestAnimationFrame\n  // 互動: touchstart/mousedown/keydown → user_interaction_start\n  // 錯誤: error / unhandledrejection → error {auto_captured:true}\n  // API: window.playablesSDK = {complete(score), error(message), sendEvent}\n  \u0026lt;/script\u0026gt;\n  \u0026lt;script\u0026gt;window.Intl=window.Intl||{};Intl.t=function(s){return(Intl._locale\u0026amp;\u0026amp;Intl._locale[s])||s;};\u0026lt;/script\u0026gt;\n  \u0026lt;meta charset=\"utf-8\"\u0026gt;\n  \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\u0026gt;\n  \u0026lt;title\u0026gt;啟動 • 突破介面\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n  \u0026lt;div class=\"scene\"\u0026gt;\n    \u0026lt;div class=\"fairyland-bg\" id=\"fairyBg\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"black-veil\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"vignette\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"scanlines\"\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"hud-container\" id=\"hud\"\u0026gt;\n      \u0026lt;div class=\"panel\" id=\"panel\" role=\"dialog\" aria-label=\"系統介面\"\u0026gt;\n        \u0026lt;img class=\"panel-img\" src=\"https://i.meee.com.tw/Gy3HF42.jpg\" alt=\"科技面板\"\u0026gt;\n        \u0026lt;button class=\"hotspot center\" id=\"activateBtn\" aria-label=\"啟動\"\u0026gt;\n          \u0026lt;span class=\"label\"\u0026gt;啟動\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring\"\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;span class=\"ring2\"\u0026gt;\u0026lt;/span\u0026gt;\n        \u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot bl\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n        \u0026lt;button class=\"hotspot br\" aria-hidden=\"true\" tabindex=\"-1\"\u0026gt;\u0026lt;/button\u0026gt;\n      \u0026lt;/div\u0026gt;\n    \u0026lt;/div\u0026gt;\n    \u0026lt;div class=\"floating-ui\" id=\"floatingUI\" aria-hidden=\"true\"\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/8/2\" class=\"float-btn center\" target=\"_blank\" rel=\"noopener\"\u0026gt;相冊ˋ\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/4\" class=\"float-btn bl\" target=\"_blank\" rel=\"noopener\"\u0026gt;剪影\u0026lt;/a\u0026gt;\n      \u0026lt;a href=\"https://sites.google.com/view/shakewww1/2/4/8\" class=\"float-btn br\" target=\"_blank\" rel=\"noopener\"\u0026gt;圖轉碼\u0026lt;/a\u0026gt;\n    \u0026lt;/div\u0026gt;\n  \u0026lt;/div\u0026gt;\n  \u0026lt;img id=\"preload-fairy\" src=\"https://i.meee.com.tw/rLl93fh.jpg\" hidden\u0026gt;\n  \u0026lt;img id=\"未來科技\" src=\"container:///mnt/data/tech_panel_bg.jpg\" hidden\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e \u003cp class=\"small\"\u003e註：原始碼中 CSS 含 \u003cspan class=\"inline-code\"\u003e* {box-sizing:border-box}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003ehtml,body {background:#000; overflow:hidden}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.panel {aspect-ratio:16/9.5}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e.float-btn {backdrop-filter:blur(10px) saturate(1.15)}\u003c/span\u003e、\u003cspan class=\"inline-code\"\u003e@keyframes float / ringPulse / panelPulse / labelFlash / floatY\u003c/span\u003e 等；JS 含 \u003cspan class=\"inline-code\"\u003einitBackground / burst(48 particles) / activate\u003c/span\u003e 完整邏輯，均已在上方表格與流程中逐項對應。\u003c/p\u003e \u003c/section\u003e \u003csection style=\"background:var(--soft);border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between\"\u003e \u003cdiv class=\"small\" style=\"margin:0\"\u003e設計要點：黑幕 → 脈衝 → 粒子 → 揭露 → 懸浮導流。所有橋接事件皆為單次發送，避免重複上報。\u003c/div\u003e \u003cdiv class=\"mono\" style=\"font-size:11px;color:var(--ink-3)\"\u003ePlayables SDK · rAF 3幀 · 三通道橋接 · zh-Hant\u003c/div\u003e \u003c/section\u003e \u003c/div\u003e","createdAt":1788161163338,"deletedAt":null,"displayMode":"artifact","embedRenders":{},"id":"6a952c8bb00f3fa2d9689e37","isPublic":true,"itemType":"NOTE","name":"導覽模塊1","parents":{"6a952a78b00f3fa2d9689e36":1788161163338},"preParentID":null,"updatedAt":1788162198960,"updatedBy":{"userId":"6a91ded101b34b802c0c3c","userName":"林"},"version":8,"websiteContent":"[{\"originUrl\":\"https://i.meee.com.tw/Gy3HF42.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/8/2\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/4\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://sites.google.com/view/shakewww1/2/4/8\",\"title\":null,\"content\":null,\"imageUrl\":null},{\"originUrl\":\"https://i.meee.com.tw/rLl93fh.jpg\",\"title\":null,\"content\":null,\"imageUrl\":null}]"}]}