playsout-web-sdk 1.0.62 → 1.0.63

package/dist/chunk-GZLJ3BX5.js

@@ -0,0 +1,1929 @@
+import {b as b$1,c}from'./chunk-DXJDUM6W.js';var M="privy-bridge";var b="DIAMOND",le="2025.01";var de=()=>`host-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,m=s=>typeof s!="string"||s.length>128?"":s,ce=s=>{let o=Number(s);return !Number.isSafeInteger(o)||o<=0?0:o},y=class{constructor(o){this.orders=new Map;this.pendingPayment=null;this.attached=false;this.options=o,this.handleMessage=this.handleMessage.bind(this);}attach(){this.attached||typeof window>"u"||(window.addEventListener("message",this.handleMessage),this.attached=true);}detach(){!this.attached||typeof window>"u"||(window.removeEventListener("message",this.handleMessage),this.attached=false,this.cancelPendingPayment({code:"USER_CANCELLED",message:"Host view closed"}));}cancelPendingPayment(o={code:"USER_CANCELLED",message:"Payment cancelled"}){if(!this.pendingPayment)return;let e=this.pendingPayment;this.pendingPayment=null,this.updateOrderStatus(e.order.hostOrderId,"cancelled"),this.sendError(e.request,o);}handleMessage(o){let e=this.options.getIframe();if(!e?.contentWindow||o.source!==e.contentWindow)return;let t=this.getGameOrigin();if(!t||o.origin!==t)return;let i=o.data;if(this.isValidRequest(i))switch(i.method){case "bridge.handshake":this.handleHandshake(i);return;case "auth.getUser":this.handleGetUser(i);return;case "pay.createOrder":this.handleCreateOrder(i);return;case "pay.request":this.handlePaymentRequest(i);return;case "pay.query":this.handlePaymentQuery(i);return;default:this.sendError(i,{code:"INVALID_METHOD",message:"Unsupported method"});}}isValidRequest(o){return !!(o&&o.channel===M&&o.type==="request"&&typeof o.id=="string"&&o.id.length>0&&o.id.length<=128&&typeof o.method=="string"&&o.method.length>0&&o.method.length<=128)}getGameOrigin(){let o=this.options.getGameUrl();if(!o||typeof window>"u")return "";try{return new URL(o,window.location.href).origin}catch{return ""}}postToGame(o){let e=this.options.getIframe(),t=this.getGameOrigin();!e?.contentWindow||!t||e.contentWindow.postMessage(o,t);}sendResponse(o,e){this.postToGame({channel:M,version:"1.0",type:"response",id:o.id,method:o.method,payload:e});}sendError(o,e){this.postToGame({channel:M,version:"1.0",type:"response",id:o.id,method:o.method,error:e});}handleHandshake(o){this.sendResponse(o,{hostVersion:le,capabilities:["auth.getUser","pay.createOrder","pay.request","pay.query"],capabilitiesDetail:{auth:{methods:["account"],scopes:["basic"]},pay:{methods:["balance"],currency:b,flow:["createOrder","request"]}},config:{currency:b}});}handleGetUser(o){let e=this.options.getUser();if(!e){this.sendError(o,{code:"AUTH_REQUIRED",message:"User not logged in"});return}this.sendResponse(o,{uid:e.uid,nickname:e.nickname,avatarUrl:e.avatarUrl||"",locale:this.options.getLocale(),roles:["player"]});}handleCreateOrder(o){let e=o.payload||{},t=m(e.orderId),i=m(e.productId),a=ce(e.amount);if(!t||!a){this.sendError(o,{code:"INVALID_REQUEST",message:"Invalid order payload"});return}let n=de(),r=Math.floor((Date.now()+6e5)/1e3),l={orderId:t,hostOrderId:n,amount:a,currency:b,productId:i,status:"created",expiresAt:r};this.orders.set(n,l),this.sendResponse(o,{orderId:t,hostOrderId:n,amount:a,currency:b,productId:i,expiresAt:r});}async handlePaymentRequest(o){let e=o.payload||{},t=m(e.orderId),i=m(e.hostOrderId);if(!t||!i){this.sendError(o,{code:"INVALID_REQUEST",message:"Missing orderId or hostOrderId"});return}if(this.pendingPayment){this.sendError(o,{code:"PAYMENT_PENDING",message:"Payment already in progress"});return}let a=this.orders.get(i);if(!a||a.orderId!==t){this.sendError(o,{code:"INVALID_REQUEST",message:"Order not found"});return}if(a.status==="success"){this.sendError(o,{code:"ORDER_ALREADY_PAID",message:"Order already paid"});return}if(a.expiresAt<=Math.floor(Date.now()/1e3)){this.updateOrderStatus(i,"expired"),this.sendError(o,{code:"ORDER_EXPIRED",message:"Order expired"});return}this.updateOrderStatus(i,"pending"),this.pendingPayment={request:o,order:a};let n=await this.options.requestPayment({orderId:a.orderId,hostOrderId:a.hostOrderId,amount:a.amount,currency:a.currency,productId:a.productId});if(this.pendingPayment?.request.id===o.id){if(this.pendingPayment=null,n.status==="success"){this.updateOrderStatus(i,"success"),this.sendResponse(o,{success:true,orderId:t,hostOrderId:i,balance:n.balance});return}this.updateOrderStatus(i,n.status==="insufficient"?"created":"cancelled"),this.sendError(o,{code:n.status==="insufficient"?"INSUFFICIENT_BALANCE":"USER_CANCELLED",message:n.status==="insufficient"?"Insufficient balance":"User cancelled payment"});}}handlePaymentQuery(o){let e=o.payload||{},t=m(e.hostOrderId),i=m(e.orderId),a;if(t?a=this.orders.get(t):i&&(a=Array.from(this.orders.values()).find(n=>n.orderId===i)),!a){this.sendError(o,{code:"INVALID_REQUEST",message:"Order not found"});return}this.sendResponse(o,{orderId:a.orderId,hostOrderId:a.hostOrderId,amount:a.amount,currency:a.currency,status:a.status,expiresAt:a.expiresAt});}updateOrderStatus(o,e){let t=this.orders.get(o);t&&this.orders.set(o,{...t,status:e});}};var v={home:{searchPlaceholder:"Search by title or category",noGames:"No games found"},profile:{title:"Profile",settings:"Settings",language:"Language",guest:"Guest",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"All",Adventure:"Adventure",Simulation:"Simulation",Casual:"Casual",Arcade:"Arcade",Moba:"Moba",Puzzle:"Puzzle",RPG:"RPG","Tower Defense":"Tower Defense"},game:{header:{back:"Back"}},store:{title:"Gem Store",hot:"HOT",buy:"BUY",cancel:"Cancel",unit:"Gems",successTitle:"Payment Successful",successMessage:"You received {amount} gems!"},payment:{title:"Confirm Purchase",description:"Spend {amount} gems for this in-game item?",amountLabel:"{amount} gems",balance:"Current balance: {balance} gems",insufficientTitle:"Insufficient Balance",insufficientMessage:"Current balance is {balance} gems. This purchase needs {amount} gems.",cancel:"Cancel",confirm:"Confirm",successTitle:"Payment Successful",successMessage:"{amount} gems have been deducted."},video:{title:"Micro Dramas",editorsChoice:"EDITOR'S CHOICE",popular:"Popular Releases",updatedToday:"Updated Today",liveAction:"Live-Action",motionComics:"AI Motion Comics",hot:"HOT",watch:"Watch",watchEpisode:"Watch Episode 1",episodes:"episodes",like:"Like",favorite:"Favorite",share:"Share",next:"NEXT",close:"Close",playVideo:"Play video",pauseVideo:"Pause video",videoProgress:"Video progress",unlockTitle:"Unlock Next Episode",adUnlockSubtitle:"Watch a short ad to unlock the next episode.",cancel:"Cancel",watchAd:"Watch Ad",loadingAd:"Loading ad...",adKeyMissing:"Add an AppLixir API key to enable ad unlocks.",adUnavailable:"No ad is available right now. Please try again later.",adIncomplete:"Watch the full ad to unlock this episode.",neonDreams:"Neon Dreams: City of Secrets",neonDreamsDescription:"A high-stakes thriller where digital shadows come to life",loveUnderStars:"Love Under Stars",loveUnderStarsDescription:"A chance meeting leads to a cosmic romance",ceoSecretHeir:"CEO's Secret Heir",ceoSecretHeirDescription:"Intrigue and power struggles in a corporate empire",neonShadows:"Neon Shadows",neonShadowsDescription:"A hacker steals a memory she was never meant to have",lastPercent:"The Last 0.1%",lastPercentDescription:"Every person is born with a survival percentage"}};var x={home:{searchPlaceholder:"\u6309\u6807\u9898\u6216\u7C7B\u522B\u641C\u7D22",noGames:"\u672A\u627E\u5230\u6E38\u620F"},profile:{title:"\u4E2A\u4EBA\u4E2D\u5FC3",settings:"\u8BBE\u7F6E",language:"\u8BED\u8A00",guest:"\u6E38\u5BA2",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"\u5168\u90E8",Adventure:"\u5192\u9669",Simulation:"\u6A21\u62DF",Casual:"\u4F11\u95F2",Arcade:"\u8857\u673A",Moba:"MOBA",Puzzle:"\u76CA\u667A",RPG:"\u89D2\u8272\u626E\u6F14","Tower Defense":"\u5854\u9632"},game:{header:{back:"\u8FD4\u56DE"}},store:{title:"\u5B9D\u77F3\u5546\u5E97",hot:"\u70ED\u95E8",buy:"\u8D2D\u4E70",cancel:"\u53D6\u6D88",unit:"\u5B9D\u77F3",successTitle:"\u652F\u4ED8\u6210\u529F",successMessage:"\u60A8\u83B7\u5F97\u4E86 {amount} \u5B9D\u77F3\uFF01"},payment:{title:"\u786E\u8BA4\u8D2D\u4E70",description:"\u662F\u5426\u6D88\u8017 {amount} \u5B9D\u77F3\u8D2D\u4E70\u8BE5\u6E38\u620F\u9053\u5177\uFF1F",amountLabel:"{amount} \u5B9D\u77F3",balance:"\u5F53\u524D\u4F59\u989D\uFF1A{balance} \u5B9D\u77F3",insufficientTitle:"\u4F59\u989D\u4E0D\u8DB3",insufficientMessage:"\u5F53\u524D\u4F59\u989D\u4E3A {balance} \u5B9D\u77F3\uFF0C\u672C\u6B21\u8D2D\u4E70\u9700\u8981 {amount} \u5B9D\u77F3\u3002",cancel:"\u53D6\u6D88",confirm:"\u786E\u8BA4",successTitle:"\u652F\u4ED8\u6210\u529F",successMessage:"\u5DF2\u6263\u9664 {amount} \u5B9D\u77F3\u3002"},video:{title:"\u7CBE\u5F69\u77ED\u5267",editorsChoice:"\u7F16\u8F91\u7CBE\u9009",popular:"\u70ED\u95E8\u4E0A\u7EBF",updatedToday:"\u4ECA\u65E5\u66F4\u65B0",liveAction:"\u771F\u4EBA\u77ED\u5267",motionComics:"AI \u52A8\u6001\u6F2B",hot:"\u70ED\u95E8",watch:"\u89C2\u770B",watchEpisode:"\u89C2\u770B\u7B2C 1 \u96C6",episodes:"\u96C6",like:"\u70B9\u8D5E",favorite:"\u6536\u85CF",share:"\u5206\u4EAB",next:"\u4E0B\u4E00\u96C6",close:"\u5173\u95ED",playVideo:"\u64AD\u653E\u89C6\u9891",pauseVideo:"\u6682\u505C\u89C6\u9891",videoProgress:"\u89C6\u9891\u8FDB\u5EA6",unlockTitle:"\u89E3\u9501\u4E0B\u4E00\u96C6",adUnlockSubtitle:"\u89C2\u770B\u4E00\u6BB5\u5E7F\u544A\u5373\u53EF\u89E3\u9501\u4E0B\u4E00\u96C6\u3002",cancel:"\u53D6\u6D88",watchAd:"\u89C2\u770B\u5E7F\u544A",loadingAd:"\u5E7F\u544A\u52A0\u8F7D\u4E2D...",adKeyMissing:"\u8BF7\u914D\u7F6E AppLixir API Key \u540E\u4F7F\u7528\u5E7F\u544A\u89E3\u9501\u3002",adUnavailable:"\u5F53\u524D\u6682\u65E0\u53EF\u7528\u5E7F\u544A\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5\u3002",adIncomplete:"\u5B8C\u6574\u89C2\u770B\u5E7F\u544A\u540E\u624D\u80FD\u89E3\u9501\u672C\u96C6\u3002",neonDreams:"\u9713\u8679\u68A6\u5883\uFF1A\u79D8\u5BC6\u4E4B\u57CE",neonDreamsDescription:"\u6570\u5B57\u9634\u5F71\u82CF\u9192\uFF0C\u4E00\u573A\u9AD8\u98CE\u9669\u60CA\u609A\u6545\u4E8B\u5C31\u6B64\u5C55\u5F00",loveUnderStars:"\u661F\u7A7A\u4E0B\u7684\u7231\u604B",loveUnderStarsDescription:"\u4E00\u6B21\u5076\u7136\u76F8\u9047\uFF0C\u5F00\u542F\u8DE8\u8D8A\u661F\u6CB3\u7684\u6D6A\u6F2B",ceoSecretHeir:"\u603B\u88C1\u7684\u79D8\u5BC6\u7EE7\u627F\u4EBA",ceoSecretHeirDescription:"\u5546\u4E1A\u5E1D\u56FD\u4E2D\u7684\u9634\u8C0B\u4E0E\u6743\u529B\u4E89\u593A",neonShadows:"\u9713\u8679\u6697\u5F71",neonShadowsDescription:"\u4E00\u540D\u9ED1\u5BA2\u5077\u8D70\u4E86\u672C\u4E0D\u8BE5\u62E5\u6709\u7684\u8BB0\u5FC6",lastPercent:"\u6700\u540E\u7684 0.1%",lastPercentDescription:"\u6BCF\u4E2A\u4EBA\u51FA\u751F\u65F6\u90FD\u62E5\u6709\u4E00\u4E2A\u751F\u5B58\u6982\u7387"}};var C={home:{searchPlaceholder:"\u30BF\u30A4\u30C8\u30EB\u307E\u305F\u306F\u30AB\u30C6\u30B4\u30EA\u3067\u691C\u7D22",noGames:"\u30B2\u30FC\u30E0\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},profile:{title:"\u30D7\u30ED\u30D5\u30A3\u30FC\u30EB",settings:"\u8A2D\u5B9A",language:"\u8A00\u8A9E",guest:"\u30B2\u30B9\u30C8",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"\u3059\u3079\u3066",Adventure:"\u30A2\u30C9\u30D9\u30F3\u30C1\u30E3\u30FC",Simulation:"\u30B7\u30DF\u30E5\u30EC\u30FC\u30B7\u30E7\u30F3",Casual:"\u30AB\u30B8\u30E5\u30A2\u30EB",Arcade:"\u30A2\u30FC\u30B1\u30FC\u30C9",Moba:"MOBA",Puzzle:"\u30D1\u30BA\u30EB",RPG:"RPG","Tower Defense":"\u30BF\u30EF\u30FC\u30C7\u30A3\u30D5\u30A7\u30F3\u30B9"},game:{header:{back:"\u623B\u308B"}},store:{title:"\u30B8\u30A7\u30E0\u30B9\u30C8\u30A2",hot:"HOT",buy:"\u8CFC\u5165",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",unit:"\u30B8\u30A7\u30E0",successTitle:"\u652F\u6255\u3044\u5B8C\u4E86",successMessage:"{amount}\u30B8\u30A7\u30E0\u3092\u53D7\u3051\u53D6\u308A\u307E\u3057\u305F\uFF01"},payment:{title:"\u8CFC\u5165\u78BA\u8A8D",description:"\u3053\u306E\u30B2\u30FC\u30E0\u5185\u30A2\u30A4\u30C6\u30E0\u306B {amount} \u30B8\u30A7\u30E0\u3092\u4F7F\u7528\u3057\u307E\u3059\u304B\uFF1F",amountLabel:"{amount} \u30B8\u30A7\u30E0",balance:"\u73FE\u5728\u306E\u6B8B\u9AD8: {balance} \u30B8\u30A7\u30E0",insufficientTitle:"\u6B8B\u9AD8\u4E0D\u8DB3",insufficientMessage:"\u73FE\u5728\u306E\u6B8B\u9AD8\u306F {balance} \u30B8\u30A7\u30E0\u3067\u3059\u3002\u3053\u306E\u8CFC\u5165\u306B\u306F {amount} \u30B8\u30A7\u30E0\u304C\u5FC5\u8981\u3067\u3059\u3002",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",confirm:"\u78BA\u8A8D",successTitle:"\u652F\u6255\u3044\u5B8C\u4E86",successMessage:"{amount} \u30B8\u30A7\u30E0\u304C\u5DEE\u3057\u5F15\u304B\u308C\u307E\u3057\u305F\u3002"}};var B={home:{searchPlaceholder:"\uC81C\uBAA9 \uB610\uB294 \uCE74\uD14C\uACE0\uB9AC\uB85C \uAC80\uC0C9",noGames:"\uAC8C\uC784\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4"},profile:{title:"\uD504\uB85C\uD544",settings:"\uC124\uC815",language:"\uC5B8\uC5B4",guest:"\uC190\uB2D8",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"\uC804\uCCB4",Adventure:"\uC5B4\uB4DC\uBCA4\uCC98",Simulation:"\uC2DC\uBBAC\uB808\uC774\uC158",Casual:"\uCE90\uC8FC\uC5BC",Arcade:"\uC544\uCF00\uC774\uB4DC",Moba:"MOBA",Puzzle:"\uD37C\uC990",RPG:"RPG","Tower Defense":"\uD0C0\uC6CC \uB514\uD39C\uC2A4"},game:{header:{back:"\uB4A4\uB85C"}},store:{title:"\uBCF4\uC11D \uC0C1\uC810",hot:"\uC778\uAE30",buy:"\uAD6C\uB9E4",cancel:"\uCDE8\uC18C",unit:"\uBCF4\uC11D",successTitle:"\uACB0\uC81C \uC131\uACF5",successMessage:"{amount}\uAC1C\uC758 \uBCF4\uC11D\uC744 \uBC1B\uC558\uC2B5\uB2C8\uB2E4!"},payment:{title:"\uAD6C\uB9E4 \uD655\uC778",description:"\uC774 \uAC8C\uC784 \uC544\uC774\uD15C\uC5D0 \uBCF4\uC11D {amount}\uAC1C\uB97C \uC0AC\uC6A9\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?",amountLabel:"\uBCF4\uC11D {amount}\uAC1C",balance:"\uD604\uC7AC \uC794\uC561: \uBCF4\uC11D {balance}\uAC1C",insufficientTitle:"\uC794\uC561 \uBD80\uC871",insufficientMessage:"\uD604\uC7AC \uC794\uC561\uC740 \uBCF4\uC11D {balance}\uAC1C\uC785\uB2C8\uB2E4. \uC774 \uAD6C\uB9E4\uC5D0\uB294 \uBCF4\uC11D {amount}\uAC1C\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4.",cancel:"\uCDE8\uC18C",confirm:"\uD655\uC778",successTitle:"\uACB0\uC81C \uC131\uACF5",successMessage:"\uBCF4\uC11D {amount}\uAC1C\uAC00 \uCC28\uAC10\uB418\uC5C8\uC2B5\uB2C8\uB2E4."}};var z={home:{searchPlaceholder:"\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E15\u0E32\u0E21\u0E0A\u0E37\u0E48\u0E2D\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48",noGames:"\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E40\u0E01\u0E21"},profile:{title:"\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C",settings:"\u0E01\u0E32\u0E23\u0E15\u0E31\u0E49\u0E07\u0E04\u0E48\u0E32",language:"\u0E20\u0E32\u0E29\u0E32",guest:"\u0E1C\u0E39\u0E49\u0E40\u0E22\u0E35\u0E48\u0E22\u0E21\u0E0A\u0E21",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",Adventure:"\u0E1C\u0E08\u0E0D\u0E20\u0E31\u0E22",Simulation:"\u0E08\u0E33\u0E25\u0E2D\u0E07\u0E2A\u0E16\u0E32\u0E19\u0E01\u0E32\u0E23\u0E13\u0E4C",Casual:"\u0E41\u0E04\u0E0A\u0E0A\u0E27\u0E25",Arcade:"\u0E2D\u0E32\u0E23\u0E4C\u0E40\u0E04\u0E14",Moba:"\u0E42\u0E21\u0E1A\u0E32",Puzzle:"\u0E1B\u0E23\u0E34\u0E28\u0E19\u0E32",RPG:"RPG","Tower Defense":"\u0E1B\u0E49\u0E2D\u0E07\u0E01\u0E31\u0E19\u0E2B\u0E2D\u0E04\u0E2D\u0E22"},game:{header:{back:"\u0E01\u0E25\u0E31\u0E1A"}},store:{title:"\u0E23\u0E49\u0E32\u0E19\u0E04\u0E49\u0E32\u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35",hot:"\u0E21\u0E32\u0E41\u0E23\u0E07",buy:"\u0E0B\u0E37\u0E49\u0E2D",cancel:"\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",unit:"\u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35",successTitle:"\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08",successMessage:"\u0E04\u0E38\u0E13\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A {amount} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35!"},payment:{title:"\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E01\u0E32\u0E23\u0E0B\u0E37\u0E49\u0E2D",description:"\u0E43\u0E0A\u0E49 {amount} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E0B\u0E37\u0E49\u0E2D\u0E44\u0E2D\u0E40\u0E17\u0E21\u0E43\u0E19\u0E40\u0E01\u0E21\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48?",amountLabel:"{amount} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35",balance:"\u0E22\u0E2D\u0E14\u0E04\u0E07\u0E40\u0E2B\u0E25\u0E37\u0E2D\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19: {balance} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35",insufficientTitle:"\u0E22\u0E2D\u0E14\u0E04\u0E07\u0E40\u0E2B\u0E25\u0E37\u0E2D\u0E44\u0E21\u0E48\u0E1E\u0E2D",insufficientMessage:"\u0E22\u0E2D\u0E14\u0E04\u0E07\u0E40\u0E2B\u0E25\u0E37\u0E2D\u0E1B\u0E31\u0E08\u0E08\u0E38\u0E1A\u0E31\u0E19\u0E04\u0E37\u0E2D {balance} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35 \u0E01\u0E32\u0E23\u0E0B\u0E37\u0E49\u0E2D\u0E19\u0E35\u0E49\u0E15\u0E49\u0E2D\u0E07\u0E43\u0E0A\u0E49 {amount} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35",cancel:"\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",confirm:"\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19",successTitle:"\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08",successMessage:"\u0E2B\u0E31\u0E01 {amount} \u0E2D\u0E31\u0E0D\u0E21\u0E13\u0E35\u0E41\u0E25\u0E49\u0E27"}};var R={home:{searchPlaceholder:"T\xECm ki\u1EBFm theo ti\xEAu \u0111\u1EC1 ho\u1EB7c danh m\u1EE5c",noGames:"Kh\xF4ng t\xECm th\u1EA5y tr\xF2 ch\u01A1i"},profile:{title:"H\u1ED3 s\u01A1",settings:"C\xE0i \u0111\u1EB7t",language:"Ng\xF4n ng\u1EEF",guest:"Kh\xE1ch",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"T\u1EA5t c\u1EA3",Adventure:"Phi\xEAu l\u01B0u",Simulation:"M\xF4 ph\u1ECFng",Casual:"Ph\u1ED5 th\xF4ng",Arcade:"Arcade",Moba:"Moba",Puzzle:"Gi\u1EA3i \u0111\u1ED1",RPG:"RPG","Tower Defense":"Th\u1EE7 th\xE0nh"},game:{header:{back:"Quay l\u1EA1i"}},store:{title:"C\u1EEDa h\xE0ng \u0110\xE1 qu\xFD",hot:"HOT",buy:"MUA",cancel:"H\u1EE7y",unit:"\u0110\xE1 qu\xFD",successTitle:"Thanh to\xE1n th\xE0nh c\xF4ng",successMessage:"B\u1EA1n \u0111\xE3 nh\u1EADn \u0111\u01B0\u1EE3c {amount} \u0111\xE1 qu\xFD!"},payment:{title:"X\xE1c nh\u1EADn mua",description:"D\xF9ng {amount} \u0111\xE1 qu\xFD \u0111\u1EC3 mua v\u1EADt ph\u1EA9m trong game n\xE0y?",amountLabel:"{amount} \u0111\xE1 qu\xFD",balance:"S\u1ED1 d\u01B0 hi\u1EC7n t\u1EA1i: {balance} \u0111\xE1 qu\xFD",insufficientTitle:"S\u1ED1 d\u01B0 kh\xF4ng \u0111\u1EE7",insufficientMessage:"S\u1ED1 d\u01B0 hi\u1EC7n t\u1EA1i l\xE0 {balance} \u0111\xE1 qu\xFD. Giao d\u1ECBch n\xE0y c\u1EA7n {amount} \u0111\xE1 qu\xFD.",cancel:"H\u1EE7y",confirm:"X\xE1c nh\u1EADn",successTitle:"Thanh to\xE1n th\xE0nh c\xF4ng",successMessage:"\u0110\xE3 tr\u1EEB {amount} \u0111\xE1 qu\xFD."}};var $={home:{searchPlaceholder:"Cari berdasarkan judul atau kategori",noGames:"Game tidak ditemukan"},profile:{title:"Profil",settings:"Pengaturan",language:"Bahasa",guest:"Tamu",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"Semua",Adventure:"Petualangan",Simulation:"Simulasi",Casual:"Kasual",Arcade:"Arcade",Moba:"Moba",Puzzle:"Teka-teki",RPG:"RPG","Tower Defense":"Pertahanan Menara"},game:{header:{back:"Kembali"}},store:{title:"Toko Permata",hot:"HOT",buy:"BELI",cancel:"Batal",unit:"Permata",successTitle:"Pembayaran Berhasil",successMessage:"Anda menerima {amount} permata!"},payment:{title:"Konfirmasi Pembelian",description:"Gunakan {amount} permata untuk membeli item game ini?",amountLabel:"{amount} permata",balance:"Saldo saat ini: {balance} permata",insufficientTitle:"Saldo Tidak Cukup",insufficientMessage:"Saldo saat ini {balance} permata. Pembelian ini membutuhkan {amount} permata.",cancel:"Batal",confirm:"Konfirmasi",successTitle:"Pembayaran Berhasil",successMessage:"{amount} permata telah dikurangi."}};var U={home:{searchPlaceholder:"Cari mengikut tajuk atau kategori",noGames:"Tiada permainan dijumpai"},profile:{title:"Profil",settings:"Tetapan",language:"Bahasa",guest:"Pelawat",languages:{en:"English",zh:"\u4E2D\u6587",ja:"\u65E5\u672C\u8A9E",ko:"\uD55C\uAD6D\uC5B4",th:"\u0E44\u0E17\u0E22",vi:"Ti\u1EBFng Vi\u1EC7t",id:"Bahasa Indonesia",ms:"Bahasa Melayu",es:"Espa\xF1ol"}},categories:{All:"Semua",Adventure:"Pengembaraan",Simulation:"Simulasi",Casual:"Santai",Arcade:"Arked",Moba:"Moba",Puzzle:"Teka-teki",RPG:"RPG","Tower Defense":"Pertahanan Menara"},game:{header:{back:"Kembali"}},store:{title:"Kedai Permata",hot:"HOT",buy:"BELI",cancel:"Batal",unit:"Permata",successTitle:"Pembayaran Berjaya",successMessage:"Anda menerima {amount} permata!"},payment:{title:"Sahkan Pembelian",description:"Gunakan {amount} permata untuk membeli item permainan ini?",amountLabel:"{amount} permata",balance:"Baki semasa: {balance} permata",insufficientTitle:"Baki Tidak Mencukupi",insufficientMessage:"Baki semasa ialah {balance} permata. Pembelian ini memerlukan {amount} permata.",cancel:"Batal",confirm:"Sahkan",successTitle:"Pembayaran Berjaya",successMessage:"{amount} permata telah ditolak."}};var w=s=>typeof window>"u"?s:c(s),ve="https://games.playsout.com/resources/icon/fonts",k=s=>{if(typeof window>"u")return s;let o=s.replace(/^\.\//,"");return `${ve}/${o}`},g={en:v,zh:x,ja:C,ko:B,th:z,vi:R,id:$,ms:U};function A(s,o){let e=o.split("."),t=s;for(let i of e)if(t&&typeof t=="object"&&i in t)t=t[i];else return o;return typeof t=="string"?t:o}function G(s,o={}){return s.replace(/\{(\w+)\}/g,(e,t)=>String(o[t]??`{${t}}`))}var N=`
+:root {
+  --playsout-primary: #6366f1;
+  --playsout-bg: #0f1419;
+  --playsout-bg-card: #1e2a3a;
+  --playsout-text: #f8fafc;
+  --playsout-text-muted: #94a3b8;
+  --playsout-border: #334155;
+  --playsout-radius: 8px;
+  --playsout-padding: 12px;
+}
+
+/* Adelle Sans \u5B57\u4F53 */
+@font-face {
+  font-family: "Adelle Sans";
+  src: url('${k("./AdelleSans-Regular.woff2")}') format('woff2'),
+       url('${k("./AdelleSans-Regular.woff")}') format('woff');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+}
+@font-face {
+  font-family: "Adelle Sans";
+  src: url('${k("./AdelleSans-Semibold.woff2")}') format('woff2'),
+       url('${k("./AdelleSans-Semibold.woff")}') format('woff');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+}
+
+/* \u5168\u5C40\u5B57\u4F53 + \u80CC\u666F */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Adelle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+/* \u684C\u9762\u7AEF\u5916\u5C42\u5BB9\u5668\uFF1A\u5C45\u4E2D + \u6E10\u53D8\u80CC\u666F */
+@media (min-width: 769px) {
+  body {
+    background: linear-gradient(135deg, #1e3a8a 0%, #1e1b4b 50%, #0f1419 100%);
+    background-attachment: fixed;
+  }
+}
+
+/* \u79FB\u52A8\u7AEF\u6EDA\u52A8\u5BB9\u5668 */
+.playsout-scroll-container {
+  min-height: 100vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.playsout-scroll-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* mobile-container: \u4E0E demo \u5B8C\u5168\u4E00\u81F4 */
+.mobile-container {
+  max-width: 414px;        /* iPhone 13 Pro Max \u5BBD\u5EA6\uFF0C\u4E0E demo \u4E00\u81F4 */
+  margin: 0 auto;
+  background-color: #0f1419;
+  min-height: 100vh;
+  position: relative;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  border-radius: 0.25rem; /* rounded-md */
+}
+
+@media (max-width: 768px) {
+  .mobile-container {
+    max-width: none;
+    margin: 0;
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+.playsout-widget {
+  background: var(--playsout-bg);
+  color: var(--playsout-text);
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Header */
+.widget-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1rem; /* py-4 px-4 */
+  background: var(--playsout-bg);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.widget-logo {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.widget-logo img {
+  width: 40px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.widget-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem; /* gap-3 */
+}
+
+/* Gems Button: demo \u98CE\u683C */
+.widget-gems-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem; /* gap-1.5 */
+  padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
+  border-radius: 9999px; /* rounded-full */
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.widget-gems-btn:hover {
+  background: #2a3b50;
+}
+.widget-gems-amount {
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 700;
+  color: white;
+}
+.widget-gems-icon {
+  color: #a855f7; /* \u7D2B\u8272 */
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+/* Profile Button: demo \u98CE\u683C */
+.widget-profile-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem; /* w-10 */
+  height: 2.5rem; /* h-10 */
+  border-radius: 50%;
+  background: #1e2a3a;
+  cursor: pointer;
+  transition: background 0.15s;
+  border: none;
+}
+.widget-profile-btn:hover {
+  background: #2a3b50;
+}
+.widget-profile-btn svg {
+  width: 1.25rem; /* w-5 h-5 */
+  height: 1.25rem;
+  color: #94a3b8;
+}
+
+/* Banner */
+.widget-banner {
+  padding: 0 1rem 1.5rem; /* px-4 pb-6\uFF0C\u4E0E demo \u4E00\u81F4 */
+}
+
+.banner-image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 750 / 300;
+  object-fit: cover;
+  border-radius: 1rem; /* rounded-2xl */
+  border: 1px solid #1e2a3a; /* border-game-card */
+  background: #1e2a3a;
+  display: block;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* Search */
+.widget-search {
+  padding: 0 1rem 1.5rem; /* px-4 pb-6 */
+  position: relative;
+}
+
+.search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #94a3b8;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 100%;
+  background: #1a1a1a;
+  color: white;
+  border: 1px solid #2a2a2a;
+  border-radius: 1rem; /* rounded-2xl */
+  padding: 0.875rem 1rem 0.875rem 2.75rem; /* py-3.5 pl-11 */
+  font-size: 0.875rem;
+  outline: none;
+  transition: border-color 0.2s;
+  -webkit-appearance: none;
+}
+
+.search-input:focus {
+  border-color: #06b6d4; /* focus:border-cyan-500 */
+}
+
+.search-input::placeholder {
+  color: #6b7280; /* placeholder-gray-500 */
+}
+
+/* \u53F3\u4FA7 Search \u6309\u94AE\uFF08\u4E0E demo \u4E00\u81F4\uFF09 */
+.search-btn {
+  position: absolute;
+  right: 0.5rem; /* right-2 */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2.25rem; /* w-9 */
+  height: 2.25rem; /* h-9 */
+  border-radius: 0.75rem; /* rounded-xl */
+  background: #2a3b50;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #22d3ee; /* text-cyan-400 */
+  transition: background 0.15s;
+}
+.search-btn:hover {
+  background: #374151;
+}
+
+/* Categories */
+.widget-categories {
+  padding: 0 1rem 2rem; /* px-4 mb-8 */
+}
+
+.categories-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem; /* gap-3 */
+}
+
+.category-btn {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
+  border-radius: 9999px; /* rounded-full */
+  border: 1px solid transparent;
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  background: #1E232F;
+  white-space: nowrap;
+}
+
+.category-btn:hover {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.category-btn.active {
+  background: #1E232F;
+  border-color: rgba(6, 182, 212, 0.5); /* border-cyan-500/50 */
+}
+
+.category-btn.active .category-label {
+  color: white;
+}
+
+.category-icon {
+  width: 1rem; /* w-4 */
+  height: 1rem; /* h-4 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.category-label {
+  color: #9ca3af; /* text-gray-400 */
+  transition: color 0.15s;
+}
+
+/* Games Section */
+.widget-games {
+  padding: 0 1rem 1rem; /* px-4 pb-4 */
+}
+
+.section-title {
+  font-size: 1rem; /* text-base \u2248 16px */
+  font-weight: 600;
+  margin-bottom: 1rem; /* mb-4 */
+  color: #94a3b8; /* text-game-text */
+}
+
+.games-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem; /* gap-2\uFF088px\uFF09\uFF0C\u4E0E demo \u4E00\u81F4 */
+}
+
+/* Game Card: \u4E0E demo globals.css \u4E00\u81F4 */
+.game-card {
+  background: #1e2a3a; /* bg-game-card */
+  border-radius: 0.75rem; /* rounded-xl */
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: transform 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+
+.game-card:hover {
+  transform: translateY(-2px); /* -translate-y-0.5 \u2248 2px */
+}
+
+.game-image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1; /* 1:1 \u65B9\u5F62\uFF0C\u4E0E demo \u4E00\u81F4 */
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.game-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: #1e2a3a;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+/* NEW/HOT \u5FBD\u6807\uFF1A\u4E0E\u6807\u9898\u540C\u4E00\u884C */
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem; /* gap-2 */
+  height: 1rem; /* height: 16px */
+  min-height: 1rem;
+  overflow: visible;
+}
+
+.game-tag {
+  font-size: 0.5rem; /* text-[8px] */
+  font-weight: 700;
+  padding: 2px 3px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.game-tag.new {
+  background: #dc2626; /* \u7EA2\u8272\uFF0C\u4E0E demo \u4E00\u81F4 */
+  color: white;
+}
+
+.game-tag.hot {
+  background: #f59e0b; /* \u6A59\u8272\uFF0C\u4E0E demo \u4E00\u81F4 */
+  color: white;
+}
+
+.game-info {
+  padding: 6px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(30, 42, 58, 0.95); /* \u4E0E demo \u5B8C\u5168\u4E00\u81F4 */
+}
+
+.game-title {
+  font-size: 0.6875rem; /* text-[11px] */
+  font-weight: 600;
+  color: white;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1rem; /* line-height: 16px */
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.divider {
+  height: 1px;
+  background-color: #2a3b50; /* \u4E0E demo divider \u4E00\u81F4 */
+  margin: 4px 0;
+}
+
+.game-category {
+  font-size: 0.5625rem; /* text-[9px] */
+  color: #64748b;
+  margin: 0;
+  line-height: 0.75rem; /* line-height: 12px */
+  text-align: left;
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--playsout-text-muted);
+}
+
+.empty-state-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+/* Loading */
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  color: var(--playsout-text-muted);
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--playsout-border);
+  border-top-color: var(--playsout-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* No Results */
+.no-results {
+  text-align: center;
+  padding: 48px 16px;
+  color: var(--playsout-text-muted);
+}
+
+/* ========== Store Modal ========== */
+.store-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+/* ========== Profile Modal ========== */
+.profile-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+.profile-modal {
+  width: 100%;
+  max-width: 28rem;
+  background: #111827;
+  border-top: 1px solid #374151;
+  border-radius: 1.5rem 1.5rem 0 0;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@media (min-width: 640px) {
+  .profile-modal {
+    border-radius: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+.profile-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #374151;
+}
+
+.profile-modal-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: white;
+}
+
+.profile-modal-close {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+}
+.profile-modal-close:hover {
+  color: white;
+}
+
+.profile-modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.profile-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.profile-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #e5e7eb;
+  border-left: 3px solid #06b6d4;
+  padding-left: 0.75rem;
+}
+
+/* \u7528\u6237\u4FE1\u606F\u5FBD\u7AE0\uFF08\u7B80\u6D01\u98CE\u683C\uFF09 */
+.profile-user-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: 2rem;
+  margin-bottom: 1.25rem;
+}
+
+.profile-user-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #a5b4fc;
+  flex-shrink: 0;
+}
+
+.profile-username-text {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #e0e7ff;
+}
+
+.profile-settings {
+  background: #1a1a1a;
+  border-radius: 0.75rem;
+  border: 1px solid #2a2a2a;
+  overflow: hidden;
+}
+
+.profile-setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.profile-setting-item:hover {
+  background: #252525;
+}
+
+.profile-setting-label {
+  color: white;
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.profile-setting-value {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+.profile-language-select {
+  background: transparent;
+  border: none;
+  color: #9ca3af;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+.profile-language-select option {
+  background: #1a1a1a;
+  color: white;
+}
+
+/* ========== Language Select Modal ========== */
+.language-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+.language-modal {
+  width: 100%;
+  max-width: 28rem;
+  background: #1a1a1a;
+  border-radius: 1.5rem 1.5rem 0 0;
+  border: 1px solid #2a2a2a;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@media (min-width: 640px) {
+  .language-modal {
+    border-radius: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+.language-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid #2a2a2a;
+}
+
+.language-modal-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: white;
+}
+
+.language-modal-close {
+  background: none;
+  border: none;
+  color: #9ca3af;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+}
+.language-modal-close:hover {
+  color: white;
+}
+
+.language-modal-list {
+  overflow-y: auto;
+  padding: 0.5rem;
+  max-height: 60vh;
+}
+
+.language-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  color: #d1d5db;
+}
+
+.language-option:hover {
+  background: #252525;
+}
+
+.language-option.active {
+  background: rgba(6, 182, 212, 0.1);
+  color: #22d3ee;
+  border: 1px solid rgba(6, 182, 212, 0.5);
+}
+
+.language-option-label {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.language-option-check {
+  font-size: 1rem;
+}
+
+.store-modal {
+  width: 100%;
+  max-width: 28rem; /* max-w-sm */
+  background: #111827; /* gray-900 */
+  border-top: 1px solid #374151;
+  border-radius: 1.5rem 1.5rem 0 0; /* rounded-t-3xl */
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@media (min-width: 640px) {
+  .store-modal {
+    border-radius: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+.store-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  border-bottom: 1px solid #374151;
+}
+
+.store-modal-title {
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 700;
+  color: white;
+  letter-spacing: 0.025em;
+}
+
+.store-modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.store-pack {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: #1f2937; /* gray-800 */
+  border-radius: 0.75rem;
+  border: 1px solid #374151;
+  transition: background 0.15s;
+  position: relative;
+}
+.store-pack:hover {
+  background: #1a2233;
+}
+
+.store-pack-hot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: linear-gradient(135deg, #ef4444, #ec4899); /* red-500 to pink-500 */
+  color: white;
+  font-size: 0.625rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 0 0.75rem 0 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.store-pack-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.store-pack-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: #374151;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #4b5563;
+  flex-shrink: 0;
+}
+
+.store-pack-icon svg {
+  color: #9333ea; /* purple-600 */
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: rgba(147, 51, 234, 0.1);
+  stroke: currentColor;
+}
+
+.store-pack-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.store-pack-amount {
+  font-size: 1rem;
+  font-weight: 700;
+  color: white;
+}
+
+.store-pack-amount span {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #a78bfa; /* purple-400 */
+}
+
+.store-pack-price {
+  font-size: 0.75rem;
+  color: #9ca3af; /* gray-400 */
+}
+
+.store-buy-btn {
+  background: linear-gradient(135deg, #0891b2, #2563eb); /* cyan-600 to blue-600 */
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.375rem 1rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.2);
+}
+.store-buy-btn:hover {
+  background: linear-gradient(135deg, #22d3ee, #3b82f6); /* cyan-500 to blue-500 */
+  transform: scale(0.97);
+}
+
+.store-modal-footer {
+  padding: 0.75rem;
+  padding-bottom: 1.5rem;
+  border-top: 1px solid #374151;
+  border-radius: 0 0 1.5rem 1.5rem;
+  background: #111827;
+}
+
+@media (min-width: 640px) {
+  .store-modal-footer {
+    padding-bottom: 0.75rem;
+    border-radius: 0 0 1.5rem 1.5rem;
+  }
+}
+
+.store-cancel-btn {
+  width: 100%;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+  padding: 0.25rem;
+}
+.store-cancel-btn:hover {
+  color: #e5e7eb;
+}
+
+/* ========== Payment Modal ========== */
+.payment-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1500;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+.payment-modal {
+  width: 100%;
+  max-width: 28rem;
+  background: #ffffff;
+  border-top: 1px solid #f3f4f6;
+  border-radius: 1.5rem 1.5rem 0 0;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@media (min-width: 640px) {
+  .payment-modal {
+    max-width: 20rem;
+    border-radius: 1.5rem;
+    margin: 1rem;
+  }
+}
+
+.payment-modal-content {
+  padding: 1.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.payment-modal-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+
+.payment-modal-desc {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  line-height: 1.375;
+  margin-bottom: 1rem;
+}
+
+.payment-cost-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  background: #f9fafb;
+  border: 1px solid #f3f4f6;
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.payment-cost-amount {
+  font-size: 1.875rem;
+  font-weight: 900;
+  color: #9333ea;
+  line-height: 1;
+}
+
+.payment-cost-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #9333ea;
+  fill: rgba(147, 51, 234, 0.12);
+  stroke: currentColor;
+}
+
+.payment-balance {
+  width: 100%;
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+}
+
+.payment-insufficient {
+  width: 100%;
+  background: #fef2f2;
+  border: 1px solid #fee2e2;
+  border-radius: 0.75rem;
+  color: #dc2626;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.625rem;
+  margin-bottom: 1rem;
+}
+
+.payment-actions {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.payment-action-btn {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  border-radius: 0.75rem;
+  padding: 0.75rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.15s, background 0.15s;
+}
+
+.payment-action-btn:active {
+  transform: scale(0.97);
+}
+
+.payment-cancel-btn {
+  background: #f3f4f6;
+  color: #4b5563;
+}
+
+.payment-cancel-btn:hover {
+  background: #e5e7eb;
+}
+
+.payment-confirm-btn {
+  background: linear-gradient(135deg, #22c55e, #059669);
+  color: #ffffff;
+  box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.22);
+}
+
+.payment-confirm-btn:hover {
+  background: linear-gradient(135deg, #4ade80, #10b981);
+}
+
+/* ========== Toast ========== */
+.toast-container {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  pointer-events: none;
+  width: 100%;
+  max-width: 24rem;
+}
+
+.toast {
+  background: #ffffff;
+  color: #0f172a;
+  border: 1px solid #e2e8f0;
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
+  animation: toastIn 0.2s ease-out;
+  max-width: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  pointer-events: auto;
+}
+
+.toast-icon {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  background: #dcfce7;
+  border: 1px solid #bbf7d0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #16a34a;
+}
+
+.toast-warning .toast-icon {
+  background: #fef3c7;
+  border-color: #fde68a;
+}
+
+.toast-warning .toast-icon svg {
+  color: #d97706;
+}
+
+.toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast-title {
+  font-weight: 600;
+  color: #0f172a;
+  line-height: 1.375;
+}
+
+.toast-message {
+  color: #475569;
+  font-size: 0.8125rem;
+  margin-top: 0.125rem;
+  line-height: 1.375;
+}
+
+@keyframes modalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes modalSlideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* \u767B\u5F55\u63D0\u793A Toast */
+.login-prompt-toast {
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
+  border-color: rgba(251, 191, 36, 0.4);
+}
+
+.login-prompt-toast .toast-icon {
+  color: #fbbf24;
+}
+
+.login-prompt-toast .toast-title {
+  color: #fef3c7;
+}
+
+/* ========== \u6E38\u620F\u8BE6\u60C5\u9875\u6837\u5F0F\uFF08iframe \u5D4C\u5165\u6A21\u5F0F\uFF09========== */
+.detail-nav {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 0.5rem;
+  background-color: #1a2332;
+  border-bottom: 1px solid #1e2a3a;
+  color: #ffffff;
+  gap: 0.5rem;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.detail-back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  padding: 0 0.5rem;
+  height: 2rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  color: #ffffff;
+  cursor: pointer;
+  transition: color 0.2s, background 0.2s;
+  flex-shrink: 0;
+}
+
+.detail-back-btn:hover {
+  color: #3b82f6;
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+.detail-back-btn:active {
+  background-color: rgba(59, 130, 246, 0.2);
+}
+
+.detail-back-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.detail-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail-spacer {
+  width: 2rem;
+  flex-shrink: 0;
+}
+
+.detail-iframe-container {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+  background-color: #0f1419;
+}
+
+.detail-iframe {
+  width: 100%;
+  height: calc(100vh - 4rem);
+  border: none;
+  display: block;
+}
+`,V=`
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="icon-adventure" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/>
+    <line x1="13" x2="19" y1="19" y2="13"/>
+    <line x1="16" x2="20" y1="16" y2="20"/>
+    <line x1="19" x2="21" y1="21" y2="19"/>
+  </symbol>
+  <symbol id="icon-simulation" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/>
+    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+    <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/>
+    <path d="M2 7h20"/>
+    <path d="M22 7v3a2 2 0 0 1-2 2 2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/>
+  </symbol>
+  <symbol id="icon-casual" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="6" x2="10" y1="11" y2="11"/>
+    <line x1="8" x2="8" y1="9" y2="13"/>
+    <line x1="15" x2="15.01" y1="12" y2="12"/>
+    <line x1="18" x2="18.01" y1="10" y2="10"/>
+    <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/>
+  </symbol>
+  <symbol id="icon-arcade" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
+  </symbol>
+  <symbol id="icon-moba" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M9 10h.01"/>
+    <path d="M15 10h.01"/>
+    <path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/>
+  </symbol>
+  <symbol id="icon-puzzle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/>
+    <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/>
+    <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/>
+    <path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/>
+    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/>
+    <path d="M3.477 10.896a4 4 0 0 1 .585-.396"/>
+    <path d="M19.938 10.5a4 4 0 0 1 .585.396"/>
+    <path d="M6 18a4 4 0 0 1-1.967-.516"/>
+    <path d="M19.967 17.484A4 4 0 0 1 18 18"/>
+  </symbol>
+  <symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+  </symbol>
+  <symbol id="icon-warning" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+  </symbol>
+  <symbol id="icon-gem" viewBox="0 0 24 24">
+    <path d="M10.5 3 8 9l4 13 4-13-2.5-6"/>
+    <path d="M17 3a2 2 0 0 1 1.6.8l3 4a2 2 0 0 1 .013 2.382l-7.99 10.986a2 2 0 0 1-3.247 0l-7.99-10.986A2 2 0 0 1 2.4 7.8l2.998-3.997A2 2 0 0 1 7 3z"/>
+    <path d="M2 9h20"/>
+  </symbol>
+</svg>
+`,p="All",_="#22d3ee",O="arcade",H=["Doge OS","Adventure","Simulation","Casual","Arcade","Moba","Puzzle","RPG","Tower Defense"],xe={[p]:{name:"All",iconType:"icon",iconKey:"arcade",color:"#22d3ee"},"Doge OS":{name:"Doge OS",iconType:"image",iconSrc:"https://games.playsout.com/resources/icon/image/doge32.png",color:"#FBBF24"},Adventure:{name:"Adventure",iconType:"icon",iconKey:"adventure",color:"#FF7D54"},Simulation:{name:"Simulation",iconType:"icon",iconKey:"simulation",color:"#4ADE80"},Casual:{name:"Casual",iconType:"icon",iconKey:"casual",color:"#60A5FA"},Arcade:{name:"Arcade",iconType:"icon",iconKey:"arcade",color:"#A78BFA"},Moba:{name:"Moba",iconType:"icon",iconKey:"moba",color:"#FACC15"},Puzzle:{name:"Puzzle",iconType:"icon",iconKey:"puzzle",color:"#FB923C"},RPG:{name:"RPG",iconType:"icon",iconKey:"adventure",color:"#34d399"},"Tower Defense":{name:"Tower Defense",iconType:"icon",iconKey:"simulation",color:"#f97316"}},h=class extends HTMLElement{constructor(){super();this._locale="zh";this.games=[];this.filteredGames=[];this.selectedCategory=p;this.searchQuery="";this.bannerUrl="";this.userPoints=1e3;this._detailMode="iframe";this.currentView="list";this.currentGame=null;this.currentIframeSrc="";this.pendingPaymentResolver=null;this.gemPacks=[{amount:12,price:.99,hot:false},{amount:60,price:4.99,hot:true},{amount:180,price:14.99,hot:false},{amount:360,price:29.99,hot:false}];this.toastTimeout=null;this.shadow=this.attachShadow({mode:"open"}),this.bridge=new y({getIframe:()=>this.shadow.querySelector(".detail-iframe"),getGameUrl:()=>this.currentIframeSrc,getBalance:()=>this.userPoints,getUser:()=>this.getBridgeUser(),getLocale:()=>this._locale,requestPayment:()=>Promise.resolve({status:"cancelled",balance:this.userPoints})});}static get observedAttributes(){return ["locale","banner-url","user-points","detail-mode"]}t(e,t){let i=g[this._locale]??g.en,a=A(i,e);if(a!==e)return G(a,t??{});let n=A(g.en,e);return G(n,t??{})}hasTranslation(e){let t=g[this._locale]??g.en;return A(t,e)!==e}getBridgeUser(){let e=window.__playsout_sdk_instance,t=typeof e?.isInitialized=="function"?e.isInitialized():e?.isInitialized,i=typeof e?.isLoggedIn=="function"?e.isLoggedIn():e?.isLoggedIn,a=t&&i&&typeof e?.getUser=="function"?e.getUser():null;return a?{uid:String(a.userId||a.id||a.username||"user"),nickname:String(a.username||a.name||"User"),avatarUrl:a.avatar||a.avatarUrl||""}:null}isGameEnabled(e){return e.enable!==false&&e.isEnabled!==false}getEnabledGames(){return this.games.filter(e=>this.isGameEnabled(e))}getVisibleCategories(){return Array.from(new Set(this.getEnabledGames().map(t=>t.category).filter(Boolean))).sort((t,i)=>{let a=H.indexOf(t),n=H.indexOf(i);return a===-1&&n===-1?0:a===-1?1:n===-1?-1:a-n})}getCategoryUi(e){return xe[e]??{name:e,iconType:"icon",iconKey:O,color:_}}renderCategoryButton(e){let t=this.selectedCategory===e,i=this.getCategoryUi(e),a=i.color||_,n=i.iconType==="image"&&i.iconSrc?`<img src="${w(i.iconSrc)}" alt="" style="width:1rem;height:1rem;object-fit:contain;" />`:`<svg width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" color="${a}" style="color:${a}"><use href="#icon-${i.iconKey||O}"/></svg>`,r=i.name||e,l=this.hasTranslation(`categories.${e}`)?this.t(`categories.${e}`):r;return `
+      <button class="category-btn${t?" active":""}" data-category="${e}">
+        <span class="category-icon">${n}</span>
+        <span class="category-label">${l}</span>
+      </button>`}setUserPoints(e,t,i){let a=this.userPoints;this.userPoints=Math.max(0,Math.floor(e)),this.updateUI(),this.dispatchEvent(new CustomEvent("gem-balance-change",{bubbles:true,composed:true,detail:{balance:this.userPoints,previousBalance:a,delta:this.userPoints-a,reason:t,orderId:i}}));}connectedCallback(){this.bridge.attach(),this.render(),this.loadGames();}disconnectedCallback(){this.resolvePendingPayment({status:"cancelled",balance:this.userPoints}),this.bridge.detach(),this.toastTimeout&&(clearTimeout(this.toastTimeout),this.toastTimeout=null);}attributeChangedCallback(e,t,i){if(t!==i){switch(e){case "locale":this._locale=i||"zh";break;case "banner-url":this.bannerUrl=i||"";break;case "user-points":{let a=parseInt(i||"1000",10);this.userPoints=Number.isFinite(a)?a:1e3;}break;case "detail-mode":this._detailMode=i||"link";break}this.shadow.innerHTML&&(e==="locale"?(this.resolvePendingPayment({status:"cancelled",balance:this.userPoints}),this.bridge.cancelPendingPayment(),this.render(),this.loadGames()):this.updateUI());}}async loadGames(){this.showLoading();let e=window.__playsout_sdk_instance;if(!e||!e.isInitialized){let t=()=>{e&&e.isInitialized&&(b$1.off("initialized",t),this.loadGames());};e?b$1.on("initialized",t):this.pollForSDK();return}this.doLoadGames(e);}pollForSDK(){let e=setInterval(()=>{let t=window.__playsout_sdk_instance;t&&t.isInitialized&&(clearInterval(e),this.loadGames());},100);setTimeout(()=>{clearInterval(e),this.games.length||(this.showError(),console.warn("[PlaysoutWidget] SDK initialization timeout"));},1e4);}async doLoadGames(e){try{this.games=await e.getGames(),this.updateFilteredGames(),this.render(),this.renderGames();}catch(t){console.error("[PlaysoutWidget] Failed to load games:",t),this.showError();}}filterGames(){this.updateFilteredGames(),this.renderGames();}updateFilteredGames(){let e=this.getVisibleCategories();this.selectedCategory!==p&&!e.includes(this.selectedCategory)&&(this.selectedCategory=p);let t=this.getEnabledGames();if(this.selectedCategory!==p&&(t=t.filter(i=>i.category===this.selectedCategory)),this.searchQuery){let i=this.searchQuery.toLowerCase();t=t.filter(a=>a.title.toLowerCase().includes(i)||a.category.toLowerCase().includes(i));}this.filteredGames=t;}showLoading(){let e=this.shadow.querySelector(".widget-content");e&&(e.innerHTML=`
+        <div class="loading">
+          <div class="loading-spinner"></div>
+        </div>
+      `);}showError(){let e=this.shadow.querySelector(".widget-content");e&&(e.innerHTML=`
+        <div class="empty-state">
+          <div class="empty-state-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
+              <use href="#icon-warning"/>
+            </svg>
+          </div>
+          <p>Failed to load games</p>
+        </div>
+      `);}render(){let e=this.bannerUrl||c("./home-banner.webp"),t=this.getVisibleCategories(),i=t.length>0?[p,...t]:[];if(this.currentView==="detail"&&this.currentGame){this.renderGameDetail();return}this.shadow.innerHTML=`
+      <style>${N}</style>
+      ${V}
+      <div class="playsout-scroll-container">
+        <div class="mobile-container">
+          <div class="playsout-widget">
+        <!-- Header -->
+        <header class="widget-header">
+          <div class="widget-logo">
+            <img src="${w("./logowhite.png")}" alt="Playsout" />
+          </div>
+          <div class="widget-user">
+            <!-- Profile Button -->
+            <button class="widget-profile-btn" id="profile-btn" aria-label="Profile">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+                <circle cx="12" cy="7" r="4"/>
+              </svg>
+            </button>
+          </div>
+        </header>
+        
+        <!-- Banner -->
+        <div class="widget-banner">
+          <img
+            class="banner-image"
+            src="${e?w(e):""}"
+            alt="Playsout Games"
+          />
+        </div>
+        
+        <!-- Search -->
+        <div class="widget-search">
+          <div class="search-wrapper">
+            <span class="search-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+              </svg>
+            </span>
+            <input 
+              type="text" 
+              class="search-input" 
+              id="search-input"
+              placeholder="${this.t("home.searchPlaceholder")}"
+            />
+            <button class="search-btn" id="search-btn" aria-label="Search">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Categories -->
+        <div class="widget-categories">
+          <div class="categories-wrapper" id="categories">
+            ${i.map(a=>this.renderCategoryButton(a)).join("")}
+          </div>
+        </div>
+        
+        <!-- Games Content -->
+        <div class="widget-content">
+          <div class="loading">
+            <div class="loading-spinner"></div>
+          </div>
+        </div>
+        </div>
+      </div>
+      </div>
+    `,this.attachEventListeners();}updateUI(){let e=this.shadow.querySelector(".banner-image");e&&this.bannerUrl&&(e.src=this.bannerUrl);let t=this.shadow.querySelector("#gems-amount");t&&(t.textContent=String(this.userPoints));}showStoreModal(){this.hideStoreModal();let e=document.createElement("div");e.className="store-modal-overlay",e.id="store-modal-overlay",e.innerHTML=`
+      <div class="store-modal" id="store-modal">
+        <div class="store-modal-header">
+          <h2 class="store-modal-title">${this.t("store.title")}</h2>
+        </div>
+        <div class="store-modal-content">
+          ${this.gemPacks.map(t=>`
+            <div class="store-pack">
+              ${t.hot?`<div class="store-pack-hot">${this.t("store.hot")}</div>`:""}
+              <div class="store-pack-left">
+                <div class="store-pack-icon">
+                  <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <use href="#icon-gem"/>
+                  </svg>
+                </div>
+                <div class="store-pack-info">
+                  <span class="store-pack-amount">${t.amount} <span>${this.t("store.unit")}</span></span>
+                  <span class="store-pack-price">US$${t.price}</span>
+                </div>
+              </div>
+              <button class="store-buy-btn" data-amount="${t.amount}">${this.t("store.buy")}</button>
+            </div>
+          `).join("")}
+        </div>
+        <div class="store-modal-footer">
+          <button class="store-cancel-btn" id="store-cancel">${this.t("store.cancel")}</button>
+        </div>
+      </div>
+    `,this.shadow.appendChild(e),e.querySelectorAll(".store-buy-btn").forEach(t=>{t.addEventListener("click",()=>{let i=parseInt(t.dataset.amount||"0",10);this.handleGemPurchase(i);});}),e.querySelector("#store-cancel")?.addEventListener("click",()=>{this.hideStoreModal();}),e.addEventListener("click",t=>{t.target===e&&this.hideStoreModal();});}hideStoreModal(){this.shadow.querySelector("#store-modal-overlay")?.remove();}showPaymentModal(e){return this.hidePaymentModal(),new Promise(t=>{this.pendingPaymentResolver=t;let i=document.createElement("div");i.className="payment-modal-overlay",i.id="payment-modal-overlay";let a=this.userPoints<e.amount;i.innerHTML=`
+        <div class="payment-modal" role="dialog" aria-modal="true" aria-labelledby="payment-modal-title">
+          <div class="payment-modal-content">
+            <h2 class="payment-modal-title" id="payment-modal-title">${this.t("payment.title")}</h2>
+            <p class="payment-modal-desc">${this.t("payment.description",{amount:e.amount})}</p>
+            <div class="payment-cost-card" aria-label="${this.t("payment.amountLabel",{amount:e.amount})}">
+              <span class="payment-cost-amount">${e.amount}</span>
+              <svg class="payment-cost-icon" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <use href="#icon-gem"/>
+              </svg>
+            </div>
+            <div class="payment-balance">${this.t("payment.balance",{balance:this.userPoints})}</div>
+            ${a?`<div class="payment-insufficient">${this.t("payment.insufficientMessage",{balance:this.userPoints,amount:e.amount})}</div>`:""}
+            <div class="payment-actions">
+              <button class="payment-action-btn payment-cancel-btn" id="payment-cancel-btn">${this.t("payment.cancel")}</button>
+              <button class="payment-action-btn payment-confirm-btn" id="payment-confirm-btn">${this.t("payment.confirm")}</button>
+            </div>
+          </div>
+        </div>
+      `,this.shadow.appendChild(i),i.querySelector("#payment-cancel-btn")?.addEventListener("click",()=>{this.resolvePendingPayment({status:"cancelled",balance:this.userPoints});}),i.querySelector("#payment-confirm-btn")?.addEventListener("click",()=>{if(this.userPoints<e.amount){this.showToast(this.t("payment.insufficientTitle"),this.t("payment.insufficientMessage",{balance:this.userPoints,amount:e.amount}),"warning"),this.resolvePendingPayment({status:"insufficient",balance:this.userPoints});return}this.setUserPoints(this.userPoints-e.amount,"payment",e.orderId),this.showToast(this.t("payment.successTitle"),this.t("payment.successMessage",{amount:e.amount})),this.resolvePendingPayment({status:"success",balance:this.userPoints});}),i.addEventListener("click",n=>{n.target===i&&this.resolvePendingPayment({status:"cancelled",balance:this.userPoints});});})}hidePaymentModal(){this.shadow.querySelector("#payment-modal-overlay")?.remove();}resolvePendingPayment(e){let t=this.pendingPaymentResolver;this.pendingPaymentResolver=null,this.hidePaymentModal(),t&&t(e);}showProfileModal(){this.hideProfileModal();let e=document.createElement("div");e.className="profile-modal-overlay",e.id="profile-modal-overlay";let t=window.__playsout_sdk_instance,n=((typeof t?.isInitialized=="function"?t.isInitialized():t?.isInitialized)?t.getUser():null)?.username||this.t("profile.guest");e.innerHTML=`
+      <div class="profile-modal" id="profile-modal">
+        <div class="profile-modal-header">
+          <h2 class="profile-modal-title">${this.t("profile.title")}</h2>
+          <button class="profile-modal-close" id="profile-close-btn">\u2715</button>
+        </div>
+        <div class="profile-modal-content">
+          <!-- \u7528\u6237\u4FE1\u606F\u5FBD\u7AE0 -->
+          <div class="profile-user-badge">
+            <svg class="profile-user-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+              <circle cx="12" cy="7" r="4"></circle>
+            </svg>
+            <span class="profile-username-text">${n}</span>
+          </div>
+          
+          <section class="profile-section">
+            <h3 class="profile-section-title">${this.t("profile.settings")}</h3>
+            <div class="profile-settings">
+              <div class="profile-setting-item" id="profile-language-btn">
+                <span class="profile-setting-label">${this.t("profile.language")}</span>
+                <div class="profile-setting-value">
+                  <span id="profile-current-lang">${this.t(`profile.languages.${this._locale}`)}</span>
+                  <span>\u203A</span>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    `,this.shadow.appendChild(e),e.querySelector("#profile-close-btn")?.addEventListener("click",()=>{this.hideProfileModal();}),e.addEventListener("click",c=>{c.target===e&&this.hideProfileModal();});let r=()=>{let c=window.__playsout_sdk_instance,se=(c?.getUser?c.getUser():null)?.username||this.t("profile.guest"),D=this.shadow.querySelector(".profile-username-text");D&&(D.textContent=se);},l=()=>{let c=this.shadow.querySelector(".profile-username-text");c&&(c.textContent=this.t("profile.guest")),this.hideProfileModal();},d=window.__playsout_sdk_instance;d?.on&&(d.on("login",r),d.on("logout",r),d.on("authExpired",l)),e.querySelector("#profile-language-btn")?.addEventListener("click",()=>{this.showLanguageSelectModal();});}hideProfileModal(){this.shadow.querySelector("#profile-modal-overlay")?.remove(),this.shadow.querySelector("#language-modal-overlay")?.remove();}showLanguageSelectModal(){this.shadow.querySelector("#language-modal-overlay")?.remove();let e=document.createElement("div");e.className="language-modal-overlay",e.id="language-modal-overlay";let t=[{code:"en",label:"English"},{code:"zh",label:"\u4E2D\u6587"},{code:"ja",label:"\u65E5\u672C\u8A9E"},{code:"ko",label:"\uD55C\uAD6D\uC5B4"},{code:"th",label:"\u0E44\u0E17\u0E22"},{code:"vi",label:"Ti\u1EBFng Vi\u1EC7t"},{code:"id",label:"Bahasa Indonesia"},{code:"ms",label:"Bahasa Melayu"},{code:"es",label:"Espa\xF1ol"}];e.innerHTML=`
+      <div class="language-modal">
+        <div class="language-modal-header">
+          <h3 class="language-modal-title">${this.t("profile.language")}</h3>
+          <button class="language-modal-close" id="language-close-btn">\u2715</button>
+        </div>
+        <div class="language-modal-list">
+          ${t.map(i=>`
+            <button class="language-option${i.code===this._locale?" active":""}" data-lang="${i.code}">
+              <span class="language-option-label">${i.label}</span>
+              ${i.code===this._locale?'<span class="language-option-check">\u2713</span>':""}
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `,this.shadow.appendChild(e),e.querySelector("#language-close-btn")?.addEventListener("click",()=>{this.shadow.querySelector("#language-modal-overlay")?.remove();}),e.addEventListener("click",i=>{i.target===e&&this.shadow.querySelector("#language-modal-overlay")?.remove();}),e.querySelectorAll(".language-option").forEach(i=>{i.addEventListener("click",()=>{let a=i.dataset.lang;if(a&&a!==this._locale){this._locale=a,this.setAttribute("locale",this._locale),this.dispatchEvent(new CustomEvent("locale-change",{bubbles:true,composed:true,detail:this._locale}));let n=this.shadow.querySelector("#profile-current-lang");n&&(n.textContent=this.t(`profile.languages.${this._locale}`)),this.shadow.querySelector("#language-modal-overlay")?.remove();}});});}handleGemPurchase(e){this.setUserPoints(this.userPoints+e,"store"),this.hideStoreModal(),this.showToast(this.t("store.successTitle"),this.t("store.successMessage",{amount:e}));}showToast(e,t="",i="success"){this.toastTimeout&&clearTimeout(this.toastTimeout),this.shadow.querySelector("#toast-container")?.remove();let a=document.createElement("div");a.className="toast-container",a.id="toast-container",a.innerHTML=`
+      <div class="toast${i==="warning"?" toast-warning":""}">
+        <div class="toast-icon">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            ${i==="warning"?'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>':'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>'}
+          </svg>
+        </div>
+        <div class="toast-content">
+          <div class="toast-title">${e}</div>
+          ${t?`<div class="toast-message">${t}</div>`:""}
+        </div>
+      </div>
+    `,this.shadow.appendChild(a),this.toastTimeout=window.setTimeout(()=>{a.style.opacity="0",a.style.transition="opacity 0.2s",setTimeout(()=>a.remove(),200);},3e3);}renderGames(){let e=this.shadow.querySelector(".widget-content");if(e){if(this.filteredGames.length===0){e.innerHTML=`
+        <div class="widget-games">
+          <div class="no-results">
+            <p>${this.t("home.noGames")}</p>
+          </div>
+        </div>
+      `;return}e.innerHTML=`
+      <div class="widget-games">
+        <div class="games-grid">
+          ${this.filteredGames.map((t,i)=>this.renderGameCard(t,i)).join("")}
+        </div>
+      </div>
+    `,e.querySelectorAll(".game-card").forEach(t=>{t.addEventListener("click",()=>{let i=t.getAttribute("data-game-id"),a=this.games.find(n=>n.id===i);if(a){let n=window.__playsout_sdk_instance,r=typeof n?.isInitialized=="function"?n.isInitialized():n?.isInitialized,l=typeof n?.isLoggedIn=="function"?n.isLoggedIn():n?.isLoggedIn;if(!r||!l){this.showLoginPrompt();return}if(this.dispatchEvent(new CustomEvent("game-click",{detail:a,bubbles:true,composed:true})),this._detailMode==="iframe"&&a.externalUrl)this.currentGame=a,this.currentView="detail",this.render();else {let d=a.externalUrl||`/games/${a.id}`;window.location.href=d;}}});});}}showLoginPrompt(){this.toastTimeout&&clearTimeout(this.toastTimeout),this.shadow.querySelector("#toast-container")?.remove();let e=document.createElement("div");e.className="toast-container";let t=this.t.bind(this);e.innerHTML=`
+      <div class="toast login-prompt-toast">
+        <div class="toast-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="8" x2="12" y2="12"></line>
+            <line x1="12" y1="16" x2="12.01" y2="16"></line>
+          </svg>
+        </div>
+        <div class="toast-content">
+          <div class="toast-title">${t("auth.mustLogin")}</div>
+        </div>
+      </div>
+    `,this.shadow.appendChild(e),this.toastTimeout=window.setTimeout(()=>{e.style.opacity="0",e.style.transform="translateY(10px)",e.style.transition="all 0.2s ease-out",setTimeout(()=>e.remove(),200);},1e3);}renderGameCard(e,t){let i=[];e.isNew&&i.push('<span class="game-tag new">NEW</span>'),e.isHot&&i.push('<span class="game-tag hot">HOT</span>');let a=t<8?"eager":"lazy";return `
+      <div class="game-card" data-game-id="${e.id}">
+        <div class="game-image-wrapper">
+          <img
+            class="game-image"
+            src="${w(e.image)}"
+            alt="${e.title}"
+            loading="${a}"
+            draggable="false"
+          />
+        </div>
+        <div class="game-info">
+          <div class="title-row">
+            <h3 class="game-title">${e.title}</h3>
+            ${i.length>0?i.join(""):""}
+          </div>
+          <div class="divider"></div>
+          <p class="game-category">${this.hasTranslation(`categories.${e.category}`)?this.t(`categories.${e.category}`):e.category}</p>
+        </div>
+      </div>
+    `}renderGameDetail(){if(!this.currentGame)return;let e=this.currentGame,t=e.externalUrl||`/games/${e.id}`;this.currentIframeSrc=t,this.shadow.innerHTML=`
+      <style>${N}</style>
+      ${V}
+      <div class="playsout-scroll-container">
+        <div class="mobile-container">
+          <div class="playsout-widget">
+            <!-- \u5BFC\u822A\u680F -->
+            <header class="detail-nav">
+              <button class="detail-back-btn" id="detail-back-btn" aria-label="${this.t("game.header.back")}">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M15 18l-6-6 6-6"/>
+                </svg>
+                <span class="detail-back-text">${this.t("game.header.back")}</span>
+              </button>
+              <span class="detail-title">${e.title}</span>
+              <div class="detail-spacer"></div>
+            </header>
+
+            <!-- \u6E38\u620F iframe -->
+            <div class="detail-iframe-container">
+              <iframe
+                src="${t}"
+                class="detail-iframe"
+                allow="fullscreen"
+                sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,this.shadow.getElementById("detail-back-btn")?.addEventListener("click",()=>{this.resolvePendingPayment({status:"cancelled",balance:this.userPoints}),this.bridge.cancelPendingPayment(),this.currentView="list",this.currentGame=null,this.currentIframeSrc="",this.render(),this.loadGames();});}attachEventListeners(){this.shadow.getElementById("gems-btn")?.addEventListener("click",()=>{this.showStoreModal();}),this.shadow.getElementById("profile-btn")?.addEventListener("click",()=>{this.showProfileModal();});let e=this.shadow.getElementById("search-input");e?.addEventListener("input",i=>{let a=i.target;this.searchQuery=a.value,this.filterGames();}),this.shadow.getElementById("search-btn")?.addEventListener("click",()=>{e?.focus();});let t=this.shadow.getElementById("categories");t?.addEventListener("click",i=>{let n=i.target.closest(".category-btn");if(n){let r=n.getAttribute("data-category")||"";this.selectedCategory=r||p,t.querySelectorAll(".category-btn").forEach(l=>{l.classList.remove("active");}),n.classList.add("active"),this.filterGames();}});}};customElements.get("playsout-widget")||customElements.define("playsout-widget",h);var j="ae1f9827-86d2-4794-b5f7-b3414dd4a470";var K="./arrow-DVB3ZH4I.png";var q="./bofang-7CYHXAOR.png";var F="./clock-UCOJBATJ.png";var W="./comment-CYSCAN7M.png";var Q="./fenxiang-SHOVHZII.png";var Y="./like-UTHO5POC.png";var X="./live-like-4WE6H52V.png";var Z="./next-T6TSGXOI.png";var J="./share-2WNZMMZ6.png";var ee="./shoucang-CSI3UBYK.png";var te="./shuqian-KOBOMTMJ.png";var ie="./shuqian1-VMWYGXP3.png";var Be=30,ae="https://cdn.applixir.com/applixir.app.v6.1.0.js",u="https://games.playsout.com/resources/icon/short-drama",ze=`${u}/videos`,E=null,Re=0,L={id:2,type:"live",titleKey:"neonDreams",descriptionKey:"neonDreamsDescription",episodes:24,likes:"1.5M"},re=[{id:4,type:"live",titleKey:"loveUnderStars",descriptionKey:"loveUnderStarsDescription",episodes:24,likes:"450K"},{id:3,type:"live",titleKey:"ceoSecretHeir",descriptionKey:"ceoSecretHeirDescription",episodes:50,likes:"1.2M"},{id:5,type:"motion",titleKey:"neonShadows",descriptionKey:"neonShadowsDescription",episodes:24,likes:"650K"},{id:6,type:"motion",titleKey:"lastPercent",descriptionKey:"lastPercentDescription",episodes:50,likes:"1.2M"}],P=[L,...re],$e=`${u}/images/short-banner.png`,Ue={3:`${u}/images/covers/short-3.webp`,4:`${u}/images/covers/short-4.webp`,5:`${u}/images/covers/short-5.webp`,6:`${u}/images/covers/short-6.webp`},oe={en:v,zh:x},ne=()=>{if(window.initializeAndOpenPlayer)return Promise.resolve();if(E)return E;let s=new Promise((o,e)=>{let t=document.querySelector(`script[src="${ae}"]`),i=t??document.createElement("script");i.addEventListener("load",()=>window.initializeAndOpenPlayer?o():e(new Error("AppLixir SDK unavailable")),{once:true}),i.addEventListener("error",()=>e(new Error("Failed to load AppLixir SDK")),{once:true}),t||(i.src=ae,i.async=true,document.head.appendChild(i));}).catch(o=>{throw E=null,o});return E=s,s},Ge=`
+:host {
+  display: block;
+  width: 100%;
+  color: #fff;
+  font-family: "Adelle Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+button { font: inherit; }
+.video-widget {
+  position: relative;
+  width: min(100%, 414px);
+  height: 100dvh;
+  margin: 0 auto;
+  overflow: hidden;
+  background: #030616;
+  border-radius: 18px;
+}
+.scroll-area {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 14px 28px;
+  scrollbar-width: none;
+}
+.scroll-area::-webkit-scrollbar { display: none; }
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 52px;
+  font-size: 20px;
+  font-weight: 900;
+}
+.balance {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 10px;
+  border: 1px solid #292d48;
+  border-radius: 999px;
+  background: #11152a;
+  font-size: 13px;
+}
+.balance img { width: 18px; height: 18px; object-fit: contain; }
+.featured {
+  position: relative;
+  height: 218px;
+  overflow: hidden;
+  border-radius: 18px;
+  background: #171a31;
+}
+.featured::after {
+  content: "";
+  position: absolute;
+  inset: 30% 0 0;
+  background: linear-gradient(transparent, rgba(3, 6, 22, .94));
+}
+.featured-bg { width: 100%; height: 100%; object-fit: cover; }
+.featured-content { position: absolute; z-index: 1; inset: auto 16px 15px; }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 10px;
+  border-radius: 4px;
+  color: #080808;
+  background: #e8a13b;
+  font-size: 11px;
+  font-weight: 800;
+}
+.featured h2 { margin: 9px 0 4px; font-size: 18px; line-height: 1.2; }
+.featured p { margin: 0 0 12px; max-width: 330px; color: #d5d8e8; font-size: 12px; line-height: 1.35; }
+.featured-actions { display: flex; gap: 8px; }
+.watch-primary, .watch-card {
+  border: 0;
+  color: #fff;
+  background: #6268ef;
+  cursor: pointer;
+}
+.watch-primary {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  border-radius: 9px;
+  font-size: 13px;
+  font-weight: 700;
+}
+.watch-primary img { width: 14px; height: 14px; }
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 34px;
+  border: 1px solid rgba(255,255,255,.15);
+  border-radius: 9px;
+  background: rgba(255,255,255,.12);
+}
+.icon-button img { width: 17px; height: 17px; object-fit: contain; }
+.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 12px; }
+.section-heading h2 { margin: 0; font-size: 18px; }
+.section-heading span { color: #8991b2; font-size: 12px; }
+.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
+.tab {
+  height: 34px;
+  border: 1px solid #262b48;
+  border-radius: 9px;
+  color: #8f96b7;
+  background: #11152a;
+  cursor: pointer;
+}
+.tab.active { border-color: #6268ef; color: #fff; background: #262c66; }
+.cards { display: grid; gap: 11px; }
+.card {
+  display: grid;
+  grid-template-columns: 116px minmax(0, 1fr);
+  min-height: 142px;
+  overflow: hidden;
+  border: 1px solid #202541;
+  border-radius: 14px;
+  background: #0d1126;
+}
+.thumbnail { position: relative; min-height: 142px; background: #171b32; }
+.thumbnail > img { width: 100%; height: 100%; object-fit: cover; }
+.hot {
+  position: absolute;
+  z-index: 1;
+  top: 7px;
+  left: 7px;
+  padding: 3px 7px;
+  border-radius: 4px;
+  color: #fff;
+  background: #f04467;
+  font-size: 9px;
+  font-weight: 900;
+}
+.card-content { display: flex; flex-direction: column; min-width: 0; padding: 11px; }
+.card h3 { overflow: hidden; margin: 0 0 7px; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
+.meta { display: flex; gap: 10px; color: #8f96b7; font-size: 10px; }
+.meta span { display: inline-flex; align-items: center; gap: 4px; }
+.meta img { width: 11px; height: 11px; object-fit: contain; }
+.description {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 8px 0;
+  color: #aab0ca;
+  font-size: 11px;
+  line-height: 1.35;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
+.small-icons { display: flex; gap: 9px; }
+.small-icons img { width: 15px; height: 15px; object-fit: contain; }
+.watch-card { min-width: 70px; height: 29px; border-radius: 8px; font-size: 11px; font-weight: 700; }
+.player-overlay {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+.player-overlay video { width: 100%; height: 100%; object-fit: contain; background: #000; }
+.player-top {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: flex-start;
+  padding: 16px;
+  background: linear-gradient(rgba(0,0,0,.72), transparent);
+}
+.round-button {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(12,15,27,.7);
+  cursor: pointer;
+}
+.round-button img { width: 18px; height: 18px; object-fit: contain; }
+.back img { transform: rotate(180deg); }
+.interactions {
+  position: absolute;
+  z-index: 2;
+  right: 13px;
+  bottom: 104px;
+  display: grid;
+  gap: 13px;
+}
+.interaction {
+  display: grid;
+  justify-items: center;
+  gap: 3px;
+  border: 0;
+  color: #fff;
+  background: transparent;
+  font-size: 10px;
+  cursor: default;
+}
+button.interaction { cursor: pointer; }
+.interaction img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 2px 6px #000); }
+.interaction-toggle img {
+  filter: brightness(0) invert(1) drop-shadow(0 2px 6px #000);
+  transition: opacity .16s ease, filter .16s ease, transform .16s ease;
+}
+.interaction-toggle[aria-pressed="true"] img {
+  opacity: 1;
+  filter: drop-shadow(0 2px 6px #000);
+  transform: scale(1.12);
+}
+.player-info {
+  position: absolute;
+  z-index: 2;
+  right: 60px;
+  bottom: 72px;
+  left: 16px;
+  text-shadow: 0 1px 4px #000;
+}
+.player-info h3 { margin: 0 0 5px; font-size: 17px; }
+.player-info p { margin: 0; color: #e0e3ef; font-size: 11px; line-height: 1.35; }
+.video-controls {
+  position: absolute;
+  z-index: 3;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  min-height: 44px;
+  padding: 6px 10px;
+  border-radius: 14px;
+  background: rgba(9,12,25,.78);
+  backdrop-filter: blur(8px);
+}
+.video-play-button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: #0b0e1b;
+  background: #fff;
+  font-size: 13px;
+  font-weight: 900;
+  cursor: pointer;
+}
+.video-play-button svg { display: block; width: 16px; height: 16px; margin: auto; fill: currentColor; }
+.video-play-button [data-pause-icon],
+.video-play-button[data-state="playing"] [data-play-icon] { display: none; }
+.video-play-button[data-state="playing"] [data-pause-icon] { display: block; }
+.video-progress { width: 100%; margin: 0; accent-color: #fff; cursor: pointer; }
+.video-time { min-width: 75px; color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
+.modal-layer {
+  position: absolute;
+  z-index: 40;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  background: rgba(0,0,0,.58);
+  backdrop-filter: blur(2px);
+}
+.modal {
+  width: 100%;
+  max-width: 28rem;
+  padding: 24px 18px 20px;
+  border: 1px solid #31385b;
+  border-radius: 22px 22px 0 0;
+  color: #fff;
+  background: #11162b;
+  text-align: center;
+  box-shadow: 0 -10px 36px rgba(0,0,0,.45);
+}
+.modal h2 { margin: 0 0 7px; font-size: 21px; }
+.modal-subtitle { margin: 0 0 18px; color: #929ab9; font-size: 13px; }
+.modal-error { min-height: 18px; margin: 6px 0 0; color: #fb7185; font-size: 12px; }
+.payment-actions { display: flex; gap: 10px; margin-top: 5px; }
+.payment-button {
+  flex: 1;
+  min-height: 43px;
+  border: 0;
+  border-radius: 11px;
+  font-weight: 800;
+  cursor: pointer;
+}
+.payment-button:disabled { opacity: .65; cursor: wait; }
+.payment-cancel { color: #fff; background: #262c45; }
+.payment-confirm { color: #fff; background: #625df2; }
+@media (max-width: 420px) {
+  .video-widget { border-radius: 0; }
+}
+@media (min-width: 421px) {
+  .modal-layer { align-items: center; padding: 22px; }
+  .modal { border-radius: 22px; }
+}
+`,I=class extends HTMLElement{constructor(){super();this.currentTab="live";this.currentVideo=null;this.likedVideoIds=new Set;this.favoriteVideoIds=new Set;this.isCurrentVideoUnlocked=false;this.pendingNextVideo=null;this.adContainer=null;this.shadow=this.attachShadow({mode:"open"}),this.handleClick=this.handleClick.bind(this);}static get observedAttributes(){return ["locale","ad-api-key"]}connectedCallback(){this.shadow.addEventListener("click",this.handleClick),this.renderPage();}disconnectedCallback(){this.shadow.removeEventListener("click",this.handleClick),this.cleanupPlayer(),this.adContainer?.remove(),this.adContainer=null;}attributeChangedCallback(e,t,i){t===i||!this.isConnected||e==="locale"&&(this.closeVideo(false),this.renderPage());}get locale(){return this.getAttribute("locale")?.toLowerCase()==="zh"?"zh":"en"}get adApiKey(){return j.trim()||this.getAttribute("ad-api-key")?.trim()||""}t(e){let t=oe[this.locale],i=oe.en,a=n=>{let r=n.video;return typeof r?.[e]=="string"?r[e]:void 0};return a(t)??a(i)??e}renderPage(){this.shadow.innerHTML=`
+      <style>${Ge}</style>
+      <div class="video-widget">
+        <main class="scroll-area">
+          <header class="header">
+            <span>${this.t("title")}</span>
+          </header>
+          <section class="featured">
+            <img class="featured-bg" src="${$e}" alt="" />
+            <div class="featured-content">
+              <span class="badge">${this.t("editorsChoice")}</span>
+              <h2>${this.t(L.titleKey)}</h2>
+              <p>${this.t(L.descriptionKey)}</p>
+              <div class="featured-actions">
+                <button class="watch-primary" data-action="play" data-video-id="2"><img src="${q}" alt="" />${this.t("watchEpisode")}</button>
+                <span class="icon-button"><img src="${ie}" alt="" /></span>
+              </div>
+            </div>
+          </section>
+          <section>
+            <div class="section-heading"><h2>${this.t("popular")}</h2><span>${this.t("updatedToday")}</span></div>
+            <div class="tabs">
+              <button class="tab ${this.currentTab==="live"?"active":""}" data-action="tab" data-tab="live">${this.t("liveAction")}</button>
+              <button class="tab ${this.currentTab==="motion"?"active":""}" data-action="tab" data-tab="motion">${this.t("motionComics")}</button>
+            </div>
+            <div class="cards">${this.renderCards()}</div>
+          </section>
+        </main>
+      </div>
+    `;}renderCards(){return re.filter(e=>e.type===this.currentTab).map(e=>`
+      <article class="card">
+        <div class="thumbnail"><span class="hot">${this.t("hot")}</span><img src="${Ue[e.id]}" alt="" /></div>
+        <div class="card-content">
+          <h3>${this.t(e.titleKey)}</h3>
+          <div class="meta">
+            <span><img src="${F}" alt="" />${e.episodes} ${this.t("episodes")}</span>
+            <span><img src="${Y}" alt="" />${e.likes}</span>
+          </div>
+          <p class="description">${this.t(e.descriptionKey)}</p>
+          <div class="card-actions">
+            <span class="small-icons"><img src="${te}" alt="" /><img src="${J}" alt="" /></span>
+            <button class="watch-card" data-action="play" data-video-id="${e.id}">${this.t("watch")}</button>
+          </div>
+        </div>
+      </article>
+    `).join("")}handleClick(e){let t=e.target instanceof Element?e.target.closest("[data-action]"):null;if(!t)return;let i=t.dataset.action;if(i==="tab")this.currentTab=t.dataset.tab==="motion"?"motion":"live",this.renderPage();else if(i==="play"){let a=P.find(n=>n.id===Number(t.dataset.videoId));a&&this.openVideo(a);}else if(i==="close-video")this.closeVideo();else if(i==="toggle-play"){let a=this.shadow.querySelector("video");a?.paused?a.play().catch(()=>{}):a?.pause();}else i==="like"||i==="favorite"?this.toggleInteraction(i,t):i==="next"?(this.pendingNextVideo=this.getNextVideo(),this.showUnlockModal()):i==="close-unlock"?this.hideUnlockModal():i==="watch-ad"&&this.watchAd(t);}openVideo(e,t=false){this.cleanupPlayer(),this.currentVideo=e,this.isCurrentVideoUnlocked=t,this.pendingNextVideo=null;let i=this.shadow.querySelector(".video-widget");if(!i)return;let a=document.createElement("section");a.className="player-overlay",a.innerHTML=`
+      <video playsinline preload="metadata" disablepictureinpicture controlslist="nodownload noplaybackrate noremoteplayback"></video>
+      <div class="player-top">
+        <button class="round-button back" data-action="close-video" aria-label="${this.t("close")}"><img src="${K}" alt="" /></button>
+      </div>
+      <div class="interactions">
+        <button class="interaction interaction-toggle" data-action="like" aria-label="${this.t("like")}" aria-pressed="${this.likedVideoIds.has(e.id)}"><img src="${X}" alt="" /><span>1.2M</span></button>
+        <span class="interaction"><img src="${W}" alt="" /><span>45.8K</span></span>
+        <button class="interaction interaction-toggle" data-action="favorite" aria-label="${this.t("favorite")}" aria-pressed="${this.favoriteVideoIds.has(e.id)}"><img src="${ee}" alt="" /><span>${this.t("favorite")}</span></button>
+        <span class="interaction"><img src="${Q}" alt="" /><span>${this.t("share")}</span></span>
+        <button class="interaction" data-action="next"><img src="${Z}" alt="" /><span>${this.t("next")}</span></button>
+      </div>
+      <div class="player-info"><h3>${this.t(e.titleKey)}</h3><p>${this.t(e.descriptionKey)}</p></div>
+      <div class="video-controls">
+        <button class="video-play-button" data-action="toggle-play" data-state="paused" aria-label="${this.t("playVideo")}">
+          <svg data-play-icon viewBox="0 0 16 16" aria-hidden="true"><path d="M4.25 2.65a1 1 0 0 1 1.51-.85l7.25 4.85a1 1 0 0 1 0 1.7L5.76 13.2a1 1 0 0 1-1.51-.85z" /></svg>
+          <svg data-pause-icon viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 2.5h3v11h-3zm6 0h3v11h-3z" /></svg>
+        </button>
+        <input class="video-progress" data-video-progress type="range" min="0" max="0" step="0.1" value="0" aria-label="${this.t("videoProgress")}" />
+        <span class="video-time" data-video-time>0:00 / 0:00</span>
+      </div>
+    `,i.appendChild(a);let n=a.querySelector("video");if(!n)return;let r=a.querySelector('[data-action="toggle-play"]'),l=a.querySelector("[data-video-progress]"),d=a.querySelector("[data-video-time]"),c=()=>{let f=Number.isFinite(n.duration)?n.duration:0;l&&(l.max=String(f),l.value=String(Math.min(n.currentTime,f))),d&&(d.textContent=`${this.formatTime(n.currentTime)} / ${this.formatTime(f)}`),r&&(r.dataset.state=n.paused?"paused":"playing"),r?.setAttribute("aria-label",this.t(n.paused?"playVideo":"pauseVideo"));};n.src=this.videoUrl(e.id),n.addEventListener("loadedmetadata",c),n.addEventListener("durationchange",c),n.addEventListener("play",()=>{c(),this.emit("video-play",{id:e.id,title:this.t(e.titleKey)});}),n.addEventListener("pause",c),n.addEventListener("timeupdate",()=>{c(),!this.isCurrentVideoUnlocked&&n.currentTime>=Be&&(this.pendingNextVideo=null,this.showUnlockModal());}),n.addEventListener("error",()=>this.emit("video-error",{id:e.id,title:this.t(e.titleKey),source:n.src})),l?.addEventListener("input",()=>{n.currentTime=Number(l.value),c();}),n.play().catch(()=>{});}formatTime(e){if(!Number.isFinite(e)||e<0)return "0:00";let t=Math.floor(e);return `${Math.floor(t/60)}:${String(t%60).padStart(2,"0")}`}toggleInteraction(e,t){if(!this.currentVideo)return;let i=e==="like"?this.likedVideoIds:this.favoriteVideoIds,a=!i.has(this.currentVideo.id);a?i.add(this.currentVideo.id):i.delete(this.currentVideo.id),t.setAttribute("aria-pressed",String(a));}videoUrl(e){return `${ze}/${e}.mp4`}getNextVideo(){let e=P.findIndex(t=>t.id===this.currentVideo?.id);return P[(e+1)%P.length]}showUnlockModal(){if(!this.currentVideo||this.shadow.querySelector(".modal-layer"))return;this.shadow.querySelector("video")?.pause();let e=this.shadow.querySelector(".video-widget");if(!e)return;let t=document.createElement("div");t.className="modal-layer",t.innerHTML=`
+      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="video-unlock-title">
+        <h2 id="video-unlock-title">${this.t("unlockTitle")}</h2>
+        <p class="modal-subtitle">${this.t("adUnlockSubtitle")}</p>
+        <p class="modal-error" aria-live="polite"></p>
+        <div class="payment-actions">
+          <button class="payment-button payment-cancel" data-action="close-unlock">${this.t("cancel")}</button>
+          <button class="payment-button payment-confirm" data-action="watch-ad">${this.t("watchAd")}</button>
+        </div>
+      </div>
+    `,e.appendChild(t),this.adApiKey&&ne().catch(()=>{});}async watchAd(e){let t=this.adApiKey;if(!t){this.showAdError("adKeyMissing");return}let i=this.currentVideo?.id;if(i){e.disabled=true,e.textContent=this.t("loadingAd"),this.showAdError("");try{await ne();let a=window.initializeAndOpenPlayer;if(!a)throw new Error("AppLixir SDK unavailable");let n=!1,r=!1,l=d=>{n||(e.disabled=!1,e.textContent=this.t("watchAd"),this.showAdError(d));};a({apiKey:t,injectionElementId:this.ensureAdContainer().id,adStatusCallbackFn:d=>{d.type==="complete"?r=!0:d.type==="thankYouModalClosed"&&r?(n=!0,this.completeAdUnlock(i)):!r&&["skipped","adSkippedNoReward","manuallyEnded","allAdsCompleted","consentDeclined"].includes(d.type??"")&&l("adIncomplete");},adErrorCallbackFn:()=>l("adUnavailable")});}catch{e.disabled=false,e.textContent=this.t("watchAd"),this.showAdError("adUnavailable");}}}ensureAdContainer(){return this.adContainer?.isConnected?this.adContainer:(this.adContainer=document.createElement("div"),this.adContainer.id=`playsout-applixir-ad-${++Re}`,document.body.appendChild(this.adContainer),this.adContainer)}showAdError(e){let t=this.shadow.querySelector(".modal-error");t&&(t.textContent=e?this.t(e):"");}completeAdUnlock(e){if(this.currentVideo?.id!==e)return;let t=this.currentVideo;if(this.isCurrentVideoUnlocked=true,this.hideUnlockModal(),this.emit("ad-complete",{id:t.id,title:this.t(t.titleKey)}),this.pendingNextVideo){let i=this.pendingNextVideo;this.pendingNextVideo=null,this.openVideo(i,true);}else this.shadow.querySelector("video")?.play().catch(()=>{});}hideUnlockModal(){this.shadow.querySelector(".modal-layer")?.remove();}closeVideo(e=true){let t=this.currentVideo;this.cleanupPlayer(),e&&t&&this.emit("video-close",{id:t.id,title:this.t(t.titleKey)});}cleanupPlayer(){let e=this.shadow.querySelector("video");e&&(e.pause(),e.removeAttribute("src"),e.load()),this.shadow.querySelector(".player-overlay")?.remove(),this.shadow.querySelector(".modal-layer")?.remove(),this.currentVideo=null,this.pendingNextVideo=null,this.isCurrentVideoUnlocked=false;}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:true,composed:true}));}};typeof customElements<"u"&&(customElements.get("playsout-widget")||customElements.define("playsout-widget",h),customElements.get("playsout-video-widget")||customElements.define("playsout-video-widget",I));export{h as a,I as b};