playsout-web-sdk 1.0.62 → 1.0.63

package/dist/index.global.js

@@ -0,0 +1,1929 @@
+"use strict";var __PlaysoutBundle=(()=>{var H=Object.defineProperty;var Ge=Object.getOwnPropertyDescriptor;var $e=Object.getOwnPropertyNames;var He=Object.prototype.hasOwnProperty;var Ke=(o,t)=>{for(var e in t)H(o,e,{get:t[e],enumerable:!0})},je=(o,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of $e(t))!He.call(o,a)&&a!==e&&H(o,a,{get:()=>t[a],enumerable:!(i=Ge(t,a))||i.enumerable});return o};var Ve=o=>je(H({},"__esModule",{value:!0}),o);var ei={};Ke(ei,{Login:()=>Bt,PlaysoutSDKClass:()=>Jt,destroy:()=>zt,getCategories:()=>Ft,getGames:()=>qt,getLocale:()=>Vt,getToken:()=>$t,getUser:()=>Kt,getUserInfo:()=>Ht,init:()=>Nt,instance:()=>Xt,isInitialized:()=>Yt,isLoggedIn:()=>Qt,logout:()=>Gt,mount:()=>Ut,off:()=>Zt,on:()=>Wt,setLocale:()=>jt,unmount:()=>Ot});var y=class extends Error{constructor(e,i,a){super(i);this.code=e;this.details=a;this.name="SDKError"}toJSON(){return{name:this.name,code:this.code,message:this.message,details:this.details}}},qe={NOT_INITIALIZED:"SDK not initialized. Please call PlaysoutSDK.init() first.",ALREADY_INITIALIZED:"SDK already initialized. Please do not call init() more than once.",NOT_LOGGED_IN:"User not logged in. Please log in first.",TOKEN_EXPIRED:"Login token has expired. Please log in again.",NETWORK_ERROR:"Network connection failed. Please check your network.",TIMEOUT:"Request timed out. Please try again later.",SERVER_ERROR:"Server is busy. Please try again later.",API_ERROR:"API request failed.",INVALID_PARAMS:"Invalid parameter(s).",MISSING_PARAMS:"Missing required parameter(s).",FEATURE_NOT_SUPPORTED:"This feature is not supported in the current environment.",UNKNOWN:"An unknown error occurred."};function u(o,t){return new y(o,qe[o],t)}var A="playsout_",L=class{constructor(t){this.storage=t}get(t){try{return this.storage.getItem(A+t)}catch{return null}}set(t,e){try{this.storage.setItem(A+t,e)}catch(i){console.warn("[PlaysoutSDK] Storage set failed:",i)}}remove(t){try{this.storage.removeItem(A+t)}catch{}}clear(){try{let t=[];for(let e=0;e<this.storage.length;e++){let i=this.storage.key(e);i&&i.startsWith(A)&&t.push(i)}t.forEach(e=>this.storage.removeItem(e))}catch{}}},K=class{constructor(){this.store=new Map}get(t){return this.store.get(t)??null}set(t,e){this.store.set(t,e)}remove(t){this.store.delete(t)}clear(){this.store.clear()}};function ie(o="localStorage"){return typeof window>"u"||o==="memory"?new K:o==="sessionStorage"?new L(sessionStorage):new L(localStorage)}var v=ie(),p={get:o=>v.get(o),set:(o,t)=>{v.set(o,t)},remove:o=>{v.remove(o)},clear:()=>{v.clear()},getJSON:o=>{let t=v.get(o);if(!t)return null;try{return JSON.parse(t)}catch{return null}},setJSON:(o,t)=>{v.set(o,JSON.stringify(t))},configure(o){v=ie(o)}},m={TOKEN_DATA:"token_data",USER:"user",LOGIN_PARAMS:"login_params",LOCALE:"locale"};var j=class{constructor(){this.events=new Map}on(t,e){return this.events.has(t)||this.events.set(t,new Set),this.events.get(t).add(e),()=>{this.off(t,e)}}once(t,e){let i=a=>{e(a),this.off(t,i)};return this.on(t,i)}off(t,e){this.events.get(t)?.delete(e),this.events.get(t)?.size===0&&this.events.delete(t)}emit(t,e){this.events.get(t)?.forEach(i=>{try{i(e)}catch(a){console.error(`[PlaysoutSDK] Event handler error for "${t}":`,a)}})}clear(){this.events.clear()}},f=new j;var Fe="https://games.playsout.com/resources/icon/image";function l(o){if(!o||/^(data:|https?:|blob:)/i.test(o))return o;let t=o.replace(/^\.\//,"");return`${Fe}/${t}`}var We=o=>{if(!o)return o;try{let t=new URL(o);if(t.hostname==="games.playsout.com"){let e=t.pathname,i=e.endsWith("/"),a=/\.[a-z0-9]+$/i.test(e);!i&&!a&&(t.pathname=`${e}/`)}return t.toString()}catch{return o}},Ze=o=>o.map(t=>{if(!t.externalUrl)return t;let e=We(t.externalUrl);return e===t.externalUrl?t:{...t,externalUrl:e}}),Ye=[{id:"BlockCrushFun",title:"Block Crush Fun",category:"Puzzle",image:l("./games/BlockCrushFun.png"),isNew:!0,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/BlockCrushFun/"},{id:"KittyEscape",title:"Kitty Escape",category:"Puzzle",image:l("./games/KittyEscape.jpg"),isNew:!0,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/KittyEscape/"},{id:"ProjectGarden",title:"Project: Garden",category:"Adventure",image:l("./games/SimulatedAdventures.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/simulated/"},{id:"ProjectIDLE",title:"Project: IDLE",category:"Simulation",image:l("./games/ProjectIDLE.jpg"),isNew:!0,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/idle/"},{id:"SoccerDASH",title:"Soccer Dash",category:"Arcade",image:l("./games/Soccer Dash.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SoccerDASH/"},{id:"SoccerSurvivor",title:"Soccer Survivor",category:"Arcade",image:l("./games/SoccerSurvivor.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SoccerSurvivors/"},{id:"CulinaryStarWeb",title:"Culinary Star",category:"Casual",image:l("./games/CulinaryStar.webp"),description:"Cooking game",isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/CulinaryStar/"},{id:"PickaxeQuest",title:"Pickaxe Quest",category:"Adventure",image:l("./games/PickaxeQuest.jpg"),description:"Mining and adventure game",isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/PickaxeQuest/",apiGameId:73},{id:"MonsterSurvivors",title:"Monster Survivors",category:"Adventure",image:l("./games/MonsterSurvivors.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/MonsterSurvivors/"},{id:"IdleTowerDefense",title:"Idle Tower Defense",category:"RPG",image:l("./games/IdleTowerDefense.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/IdleTowerDefense/"},{id:"MushroomWarriors",title:"Mushroom Warriors",category:"RPG",image:l("./games/MushroomWarriors.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/MushroomWarriors/"},{id:"FollowThePath",title:"Follow The Path",category:"Arcade",image:l("./games/FollowThePath.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/FollowThePath/"},{id:"SoccerCascade",title:"Soccer Cascade",category:"Arcade",image:l("./games/Soccer Cascade.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SoccerCascade/"},{id:"CatDelta",title:"Cat Delta",category:"Adventure",image:l("./games/CatDelta.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/CatDelta/"},{id:"ColorRun",title:"Color Run",category:"Arcade",image:l("./games/ColorRun.jpg"),isNew:!1,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/ColorRun/"},{id:"SoccerZombies",title:"Soccer vs. Zombies",category:"Tower Defense",image:l("./games/Soccer vs. Zombies.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SoccerZombies/"},{id:"MiniSoccer",title:"Mini Soccer",category:"Arcade",image:l("./games/minisoccer.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/minisoccer/"},{id:"SoccerMaze",title:"Soccer Maze",category:"Arcade",image:l("./games/Soccer Maze.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SoccerMaze/"},{id:"StupidArrow",title:"Stupid Arrow",category:"Arcade",image:l("./games/StupidArrow.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/StupidArrow/"},{id:"ZigZag",title:"Zig Zag",category:"Arcade",image:l("./games/ZigZag.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/ZigZag/"},{id:"SpikesEverywhere",title:"Spikes Everywhere",category:"Arcade",image:l("./games/SpikesEverywhere.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SpikesEverywhere/"},{id:"ArrowRacer",title:"Arrow Racer",category:"Arcade",image:l("./games/ArrowRacer.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/ArrowRacer/"},{id:"CircleLeap",title:"Circle Leap",category:"Arcade",image:l("./games/CircleLeap.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/CircleLeap/"},{id:"ColorMatcher",title:"Color Matcher",category:"Arcade",image:l("./games/ColorMatcher.jpg"),isNew:!1,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/ColorMatcher/"},{id:"EndlessMaze",title:"Endless Maze",category:"Arcade",image:l("./games/EndlessMaze.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/EndlessMaze/"},{id:"SpinningAround",title:"Spinning Around",category:"Arcade",image:l("./games/SpinningAround.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/SpinningAround/"},{id:"BoomBallz",title:"Boom Ballz",category:"Arcade",image:l("./games/BoomBallz.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/BoomBallz/"},{id:"CubeHead",title:"Cube Head",category:"Arcade",image:l("./games/CubeHead.jpg"),isNew:!1,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/CubeHead/"},{id:"CapybaraLink",title:"Capybara Link",category:"Puzzle",image:l("./games/CapybaraLink.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/CapybaraLink/"},{id:"Snake2048",title:"Snake 2048",category:"Puzzle",image:l("./games/Snake2048.jpg"),isNew:!0,isHot:!0,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/Snake2048/"},{id:"FishTankFury",title:"Fish Tank Fury",category:"Puzzle",image:l("./games/FishTankFury.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/FishTankFury/"},{id:"ConnectBalls",title:"Connect Balls",category:"Arcade",image:l("./games/ConnectBalls.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/ConnectBalls/"},{id:"CircularBreaker",title:"Circular Breaker",category:"Arcade",image:l("./games/CircularBreaker.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/CircularBreaker/"},{id:"OneDoor",title:"One Door",category:"Arcade",image:l("./games/OneDoor.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/OneDoor/"},{id:"CatchtheFruits",title:"Catch the Fruits",category:"Casual",image:l("./games/CatchtheFruits.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/CatchtheFruits/"},{id:"Falling2048",title:"Falling 2048",category:"Casual",image:l("./games/Falling2048.jpg"),isNew:!0,isHot:!1,enable:!0,orientation:"portrait",externalUrl:"https://games.playsout.com/grab/Falling2048/"}],Qe=Ze(Ye),Xe=o=>o.enable!==!1&&o.isEnabled!==!1,R=()=>Qe.filter(Xe);var Y="https://api.playsout.com",Q=3e4;function et(o){let t=String(o?.platform||"").toLowerCase();if(t==="tiktok"){let e=o.authorizationCode;if(typeof e!="string"||!e.trim())throw u("MISSING_PARAMS","authorizationCode is required for TikTok login");return{platform:t,authorizationCode:e}}if(t==="grab"||t==="eros"){let e=o;if(typeof e.platformUserId!="string"||!e.platformUserId.trim())throw u("MISSING_PARAMS","platformUserId is required for Grab/Eros login");if(typeof e.platformToken!="string"||!e.platformToken.trim())throw u("MISSING_PARAMS","platformToken is required for Grab/Eros login");if(typeof e.username!="string"||!e.username.trim())throw u("MISSING_PARAMS","username is required for Grab/Eros login");return{platform:t,platformUserId:e.platformUserId,platformToken:e.platformToken,username:e.username,inviteCode:typeof e.inviteCode=="string"?e.inviteCode:void 0}}throw u("INVALID_PARAMS","Unsupported platform. Expected grab, eros, or tiktok")}var T=null,q=null,F=null,W=null;function ne(o){q=o}function se(o){F=o}function le(o){W=o}function ae(){if(W)try{W()}catch{}}async function tt(o){if(!F)throw ae(),o instanceof y?o:u("TOKEN_EXPIRED",o);try{return await F()}catch(t){throw ae(),t instanceof y?t:u("TOKEN_EXPIRED",t)}}async function re(o,t={},e,i=!1,a=i){let r=e?.apiBaseUrl||Y,n=o.startsWith("http")?o:`${r}${o}`,s=new AbortController,g=setTimeout(()=>s.abort(),Q);try{let c=p.getJSON(m.TOKEN_DATA),h={"Content-Type":"application/json",...t.headers};i&&c?.accessToken&&!h.token&&(h.token=c.accessToken);let b=await fetch(n,{...t,signal:s.signal,headers:h});if(clearTimeout(g),!b.ok){if(b.status===401&&i&&a)return await oe(o,t,e);throw u(b.status>=500?"SERVER_ERROR":"API_ERROR",`HTTP ${b.status}: ${b.statusText}`)}let E=await b.json();if(E.code!==1e4){if(i&&a)return await oe(o,t,e);throw u("API_ERROR",E.msg||"API request failed")}return E.data}catch(c){throw clearTimeout(g),c instanceof y?c:c instanceof Error?c.name==="AbortError"?u("TIMEOUT"):u("NETWORK_ERROR",c.message):u("UNKNOWN")}}async function oe(o,t,e){await de(e);let i=e?.apiBaseUrl||Y,a=o.startsWith("http")?o:`${i}${o}`,r=new AbortController,n=setTimeout(()=>r.abort(),Q);try{let s=p.getJSON(m.TOKEN_DATA),g={"Content-Type":"application/json",...t.headers};s?.accessToken&&(g.token=s.accessToken);let c=await fetch(a,{...t,signal:r.signal,headers:g});if(clearTimeout(n),!c.ok)throw u(c.status>=500?"SERVER_ERROR":"API_ERROR",`HTTP ${c.status}: ${c.statusText}`);let h=await c.json();if(h.code!==1e4)throw u("API_ERROR",h.msg||"API request failed");return h.data}catch(s){throw clearTimeout(n),s instanceof y?s:s instanceof Error&&s.name==="AbortError"?u("TIMEOUT"):u("NETWORK_ERROR",s?.message||"Request failed")}}async function de(o){if(T)return T;let t=(async()=>{try{let e=p.getJSON(m.TOKEN_DATA),i=Math.floor(Date.now()/1e3);if(!e?.refreshToken||e.refreshExpiresAt<=i)throw u("TOKEN_EXPIRED","Refresh token has expired");let a=o?.apiBaseUrl||Y,r=new AbortController,n=setTimeout(()=>r.abort(),Q);try{let s=await fetch(`${a}/platform/refreshToken`,{method:"POST",signal:r.signal,headers:{"Content-Type":"application/json"},body:JSON.stringify({refreshToken:e.refreshToken})});if(clearTimeout(n),!s.ok)throw s.status>=500?u("SERVER_ERROR",`HTTP ${s.status}: ${s.statusText}`):u("TOKEN_EXPIRED",`HTTP ${s.status}: ${s.statusText}`);let g=await s.json();if(g.code!==1e4||!g.data)throw u("TOKEN_EXPIRED",g.msg||"Failed to refresh token");let c=g.data;if(p.setJSON(m.TOKEN_DATA,c),q)try{q(c)}catch{}return c}catch(s){throw clearTimeout(n),s instanceof y?s:s instanceof Error&&s.name==="AbortError"?u("TIMEOUT"):u("NETWORK_ERROR",s?.message||"Refresh token failed")}}catch(e){return await tt(e)}})();T=t;try{return await t}finally{T===t&&(T=null)}}var Z=class{constructor(){this.config=null}configure(t){this.config=t}async refreshToken(){return await de(this.config||void 0)}async loginOnly(t){let e=et(t);return await re("/platform/login",{method:"POST",body:JSON.stringify(e)},this.config??void 0)}async Login(t){let e=await this.loginOnly(t);p.setJSON(m.TOKEN_DATA,e);try{let i=await this.getUserInfo(!1);return{tokenData:e,user:i}}catch(i){throw p.remove(m.TOKEN_DATA),p.remove(m.USER),i}}async getUserInfo(t=!0){return await re("/platform/user",{method:"GET"},this.config??void 0,!0,t)}async getUser(){return p.getJSON(m.USER)}async validateToken(t){return!!t}},V=null;function D(){return V||(V=new Z),V}var at="https://api.playsout.com",ce="zh",S=class o{constructor(){this.config=null;this._isInitialized=!1;this._user=null;this._token=null;this._locale=ce;this._widget=null}clearAuthState(){let t=!!(this._token||p.get(m.TOKEN_DATA)||p.get(m.USER));return this._user=null,this._token=null,p.remove(m.TOKEN_DATA),p.remove(m.USER),p.remove(m.LOGIN_PARAMS),t}updateUser(t){this._user={userId:String(t.id),username:t.username},p.setJSON(m.USER,this._user)}saveLoginParams(t){if(t.platform==="grab"||t.platform==="eros"){p.setJSON(m.LOGIN_PARAMS,{...t});return}p.remove(m.LOGIN_PARAMS)}async performLogin(t,e){let i=D();i.configure(this.config);let a=await i.loginOnly(t);p.setJSON(m.TOKEN_DATA,a);let r=await i.getUserInfo(!1);return this._token=a.accessToken,this.updateUser(r),e&&this.saveLoginParams(t),f.emit("login",{user:this._user,token:this._token}),{tokenData:a,user:r}}async recoverAuthentication(){let t=p.getJSON(m.LOGIN_PARAMS);if(!t||t.platform!=="grab"&&t.platform!=="eros")throw u("TOKEN_EXPIRED","No reusable login parameters available");return(await this.performLogin(t,!1)).tokenData}handleAuthExpired(){this.clearAuthState()&&f.emit("authExpired"),this.config?.debug&&console.warn("[PlaysoutSDK] Auth expired, logged out")}static getInstance(){return o.instance||(o.instance=new o),o.instance}async init(t={}){if(this._isInitialized)throw u("ALREADY_INITIALIZED");this.config={apiBaseUrl:t.apiBaseUrl||at,debug:t.debug||!1,storage:t.storage||"localStorage",locale:t.locale||ce},p.configure(this.config.storage),ne(a=>{this._token=a.accessToken}),se(()=>this.recoverAuthentication()),le(()=>{this.handleAuthExpired()});let e=p.getJSON(m.TOKEN_DATA);this._user=p.getJSON(m.USER),this._locale=p.get(m.LOCALE)||this.config.locale;let i=Math.floor(Date.now()/1e3);if(e){let a=D();if(a.configure(this.config),e.accessToken&&e.expiresAt>i?this._token=e.accessToken:await a.refreshToken(),this._token&&!this._user){let r=await a.getUserInfo();this.updateUser(r)}}else this._user&&(this._user=null,p.remove(m.USER));this._isInitialized=!0,this.config.debug&&(console.log("[PlaysoutSDK] Initialized with config:",this.config),console.log("[PlaysoutSDK] Restored token:",this._token?this._token.substring(0,20)+"...":"(none)")),f.emit("initialized")}destroy(){this.config=null,this._isInitialized=!1,this._user=null,this._token=null,p.clear(),f.clear()}get isInitialized(){return this._isInitialized}get isLoggedIn(){return!!(this._token&&this._user)}get user(){return this._user}get token(){return this._token}get locale(){return this._locale}get sdkConfig(){return this.config}async Login(t){this.ensureInitialized(),this.config?.debug&&console.log("[PlaysoutSDK] Login with params:",t);try{let e=await this.performLogin(t,!0);return this.config?.debug&&console.log("[PlaysoutSDK] Login success, user:",e.user),e}catch(e){throw this.clearAuthState(),e}}async getUserInfo(){if(this.ensureInitialized(),!this.isLoggedIn)throw u("NOT_LOGGED_IN","Please login first");let t=D();t.configure(this.config);let e=await t.getUserInfo();return this.config?.debug&&console.log("[PlaysoutSDK] getUserInfo result:",e),e&&this.updateUser(e),e}logout(){this.clearAuthState(),f.emit("logout")}getToken(){return this.ensureInitialized(),this._token}getUser(){return this.ensureInitialized(),this._user}setLocale(t){if(this.ensureInitialized(),!["zh","en","ja","ko","vi","th","id","ms"].includes(t))throw u("INVALID_PARAMS",`Unsupported locale: ${t}`);this._locale=t,p.set(m.LOCALE,t),this.config?.debug&&console.log("[PlaysoutSDK] Locale changed to:",t);let e=this._widget||document.querySelector("playsout-widget");e&&e.getAttribute("locale")!==t&&e.setAttribute("locale",t),f.emit("localeChange",t)}getLocale(){return this.ensureInitialized(),this._locale}async getGames(t){this.ensureInitialized();let e=R();if(t?.category&&(e=e.filter(i=>i.category===t.category)),t?.search){let i=t.search.toLowerCase();e=e.filter(a=>a.title.toLowerCase().includes(i)||a.category.toLowerCase().includes(i)||a.description&&a.description.toLowerCase().includes(i))}if(t?.sortBy)switch(t.sortBy){case"newest":e=e.filter(i=>i.isNew).concat(e.filter(i=>!i.isNew));break;case"rating":e=e.filter(i=>i.isHot).concat(e.filter(i=>!i.isHot));break}if(t?.page&&t?.pageSize){let i=(t.page-1)*t.pageSize;e=e.slice(i,i+t.pageSize)}return e}async getCategories(){this.ensureInitialized();let t=R(),e=new Map;return t.forEach(i=>{if(!i.category)return;let a=e.get(i.category)||0;e.set(i.category,a+1)}),Array.from(e.entries()).map(([i,a])=>({id:i,name:i,count:a}))}async getGameById(t){return this.ensureInitialized(),R().find(e=>e.id===t)}mount(t,e){if(this.ensureInitialized(),typeof document>"u")throw u("FEATURE_NOT_SUPPORTED","mount requires DOM environment");let i=document.querySelector(t);if(!i)throw u("INVALID_PARAMS",`Container not found: ${t}`);let a=document.createElement("playsout-widget");a.setAttribute("locale",e?.locale||this._locale),e?.detailMode&&a.setAttribute("detail-mode",e.detailMode),this._widget=a,e?.onGameClick&&a.addEventListener("game-click",r=>{let n=r;e.onGameClick(n.detail)}),e?.onLoginRequired&&a.addEventListener("login-required",e.onLoginRequired),e?.onLocaleChange&&a.addEventListener("locale-change",r=>{let n=r;e.onLocaleChange(n.detail)}),i.appendChild(a),this.config?.debug&&console.log("[PlaysoutSDK] Widget mounted to:",t)}unmount(){let t=document.querySelector("playsout-widget");t&&t.remove(),this._widget=null}on(t,e){return this.ensureInitialized(),f.on(t,e)}off(t,e){this.ensureInitialized(),f.off(t,e)}ensureInitialized(){if(!this._isInitialized)throw u("NOT_INITIALIZED")}},d=S.getInstance();typeof window<"u"&&(window.__playsout_sdk_instance=d);var C=Object.freeze({init:d.init.bind(d),mount:d.mount.bind(d),unmount:d.unmount.bind(d),destroy:d.destroy.bind(d),Login:d.Login.bind(d),logout:d.logout.bind(d),getToken:d.getToken.bind(d),getUserInfo:d.getUserInfo.bind(d),getUser:d.getUser.bind(d),setLocale:d.setLocale.bind(d),getLocale:d.getLocale.bind(d),getGames:d.getGames.bind(d),getCategories:d.getCategories.bind(d),on:d.on.bind(d),off:d.off.bind(d),get isInitialized(){return d.isInitialized},get isLoggedIn(){return d.isLoggedIn},instance:d,PlaysoutSDKClass:S});var X="privy-bridge";var M="DIAMOND",rt="2025.01";var ot=()=>`host-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,x=o=>typeof o!="string"||o.length>128?"":o,nt=o=>{let t=Number(o);return!Number.isSafeInteger(t)||t<=0?0:t},_=class{constructor(t){this.orders=new Map;this.pendingPayment=null;this.attached=!1;this.options=t,this.handleMessage=this.handleMessage.bind(this)}attach(){this.attached||typeof window>"u"||(window.addEventListener("message",this.handleMessage),this.attached=!0)}detach(){!this.attached||typeof window>"u"||(window.removeEventListener("message",this.handleMessage),this.attached=!1,this.cancelPendingPayment({code:"USER_CANCELLED",message:"Host view closed"}))}cancelPendingPayment(t={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,t)}handleMessage(t){let e=this.options.getIframe();if(!e?.contentWindow||t.source!==e.contentWindow)return;let i=this.getGameOrigin();if(!i||t.origin!==i)return;let a=t.data;if(this.isValidRequest(a))switch(a.method){case"bridge.handshake":this.handleHandshake(a);return;case"auth.getUser":this.handleGetUser(a);return;case"pay.createOrder":this.handleCreateOrder(a);return;case"pay.request":this.handlePaymentRequest(a);return;case"pay.query":this.handlePaymentQuery(a);return;default:this.sendError(a,{code:"INVALID_METHOD",message:"Unsupported method"})}}isValidRequest(t){return!!(t&&t.channel===X&&t.type==="request"&&typeof t.id=="string"&&t.id.length>0&&t.id.length<=128&&typeof t.method=="string"&&t.method.length>0&&t.method.length<=128)}getGameOrigin(){let t=this.options.getGameUrl();if(!t||typeof window>"u")return"";try{return new URL(t,window.location.href).origin}catch{return""}}postToGame(t){let e=this.options.getIframe(),i=this.getGameOrigin();!e?.contentWindow||!i||e.contentWindow.postMessage(t,i)}sendResponse(t,e){this.postToGame({channel:X,version:"1.0",type:"response",id:t.id,method:t.method,payload:e})}sendError(t,e){this.postToGame({channel:X,version:"1.0",type:"response",id:t.id,method:t.method,error:e})}handleHandshake(t){this.sendResponse(t,{hostVersion:rt,capabilities:["auth.getUser","pay.createOrder","pay.request","pay.query"],capabilitiesDetail:{auth:{methods:["account"],scopes:["basic"]},pay:{methods:["balance"],currency:M,flow:["createOrder","request"]}},config:{currency:M}})}handleGetUser(t){let e=this.options.getUser();if(!e){this.sendError(t,{code:"AUTH_REQUIRED",message:"User not logged in"});return}this.sendResponse(t,{uid:e.uid,nickname:e.nickname,avatarUrl:e.avatarUrl||"",locale:this.options.getLocale(),roles:["player"]})}handleCreateOrder(t){let e=t.payload||{},i=x(e.orderId),a=x(e.productId),r=nt(e.amount);if(!i||!r){this.sendError(t,{code:"INVALID_REQUEST",message:"Invalid order payload"});return}let n=ot(),s=Math.floor((Date.now()+6e5)/1e3),g={orderId:i,hostOrderId:n,amount:r,currency:M,productId:a,status:"created",expiresAt:s};this.orders.set(n,g),this.sendResponse(t,{orderId:i,hostOrderId:n,amount:r,currency:M,productId:a,expiresAt:s})}async handlePaymentRequest(t){let e=t.payload||{},i=x(e.orderId),a=x(e.hostOrderId);if(!i||!a){this.sendError(t,{code:"INVALID_REQUEST",message:"Missing orderId or hostOrderId"});return}if(this.pendingPayment){this.sendError(t,{code:"PAYMENT_PENDING",message:"Payment already in progress"});return}let r=this.orders.get(a);if(!r||r.orderId!==i){this.sendError(t,{code:"INVALID_REQUEST",message:"Order not found"});return}if(r.status==="success"){this.sendError(t,{code:"ORDER_ALREADY_PAID",message:"Order already paid"});return}if(r.expiresAt<=Math.floor(Date.now()/1e3)){this.updateOrderStatus(a,"expired"),this.sendError(t,{code:"ORDER_EXPIRED",message:"Order expired"});return}this.updateOrderStatus(a,"pending"),this.pendingPayment={request:t,order:r};let n=await this.options.requestPayment({orderId:r.orderId,hostOrderId:r.hostOrderId,amount:r.amount,currency:r.currency,productId:r.productId});if(this.pendingPayment?.request.id===t.id){if(this.pendingPayment=null,n.status==="success"){this.updateOrderStatus(a,"success"),this.sendResponse(t,{success:!0,orderId:i,hostOrderId:a,balance:n.balance});return}this.updateOrderStatus(a,n.status==="insufficient"?"created":"cancelled"),this.sendError(t,{code:n.status==="insufficient"?"INSUFFICIENT_BALANCE":"USER_CANCELLED",message:n.status==="insufficient"?"Insufficient balance":"User cancelled payment"})}}handlePaymentQuery(t){let e=t.payload||{},i=x(e.hostOrderId),a=x(e.orderId),r;if(i?r=this.orders.get(i):a&&(r=Array.from(this.orders.values()).find(n=>n.orderId===a)),!r){this.sendError(t,{code:"INVALID_REQUEST",message:"Order not found"});return}this.sendResponse(t,{orderId:r.orderId,hostOrderId:r.hostOrderId,amount:r.amount,currency:r.currency,status:r.status,expiresAt:r.expiresAt})}updateOrderStatus(t,e){let i=this.orders.get(t);i&&this.orders.set(t,{...i,status:e})}};var N={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 U={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 ue={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 ge={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 pe={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 me={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 he={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 fe={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 O=o=>typeof window>"u"?o:l(o),ht="https://games.playsout.com/resources/icon/fonts",z=o=>{if(typeof window>"u")return o;let t=o.replace(/^\.\//,"");return`${ht}/${t}`},I={en:N,zh:U,ja:ue,ko:ge,th:pe,vi:me,id:he,ms:fe};function J(o,t){let e=t.split("."),i=o;for(let a of e)if(i&&typeof i=="object"&&a in i)i=i[a];else return t;return typeof i=="string"?i:t}function be(o,t={}){return o.replace(/\{(\w+)\}/g,(e,i)=>String(t[i]??`{${i}}`))}var ye=`
+: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('${z("./AdelleSans-Regular.woff2")}') format('woff2'),
+       url('${z("./AdelleSans-Regular.woff")}') format('woff');
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+}
+@font-face {
+  font-family: "Adelle Sans";
+  src: url('${z("./AdelleSans-Semibold.woff2")}') format('woff2'),
+       url('${z("./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;
+}
+`,ve=`
+<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>
+`,w="All",we="#22d3ee",xe="arcade",ke=["Doge OS","Adventure","Simulation","Casual","Arcade","Moba","Puzzle","RPG","Tower Defense"],ft={[w]:{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"}},P=class extends HTMLElement{constructor(){super();this._locale="zh";this.games=[];this.filteredGames=[];this.selectedCategory=w;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:!1},{amount:60,price:4.99,hot:!0},{amount:180,price:14.99,hot:!1},{amount:360,price:29.99,hot:!1}];this.toastTimeout=null;this.shadow=this.attachShadow({mode:"open"}),this.bridge=new _({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,i){let a=I[this._locale]??I.en,r=J(a,e);if(r!==e)return be(r,i??{});let n=J(I.en,e);return be(n,i??{})}hasTranslation(e){let i=I[this._locale]??I.en;return J(i,e)!==e}getBridgeUser(){let e=window.__playsout_sdk_instance,i=typeof e?.isInitialized=="function"?e.isInitialized():e?.isInitialized,a=typeof e?.isLoggedIn=="function"?e.isLoggedIn():e?.isLoggedIn,r=i&&a&&typeof e?.getUser=="function"?e.getUser():null;return r?{uid:String(r.userId||r.id||r.username||"user"),nickname:String(r.username||r.name||"User"),avatarUrl:r.avatar||r.avatarUrl||""}:null}isGameEnabled(e){return e.enable!==!1&&e.isEnabled!==!1}getEnabledGames(){return this.games.filter(e=>this.isGameEnabled(e))}getVisibleCategories(){return Array.from(new Set(this.getEnabledGames().map(i=>i.category).filter(Boolean))).sort((i,a)=>{let r=ke.indexOf(i),n=ke.indexOf(a);return r===-1&&n===-1?0:r===-1?1:n===-1?-1:r-n})}getCategoryUi(e){return ft[e]??{name:e,iconType:"icon",iconKey:xe,color:we}}renderCategoryButton(e){let i=this.selectedCategory===e,a=this.getCategoryUi(e),r=a.color||we,n=a.iconType==="image"&&a.iconSrc?`<img src="${O(a.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="${r}" style="color:${r}"><use href="#icon-${a.iconKey||xe}"/></svg>`,s=a.name||e,g=this.hasTranslation(`categories.${e}`)?this.t(`categories.${e}`):s;return`
+      <button class="category-btn${i?" active":""}" data-category="${e}">
+        <span class="category-icon">${n}</span>
+        <span class="category-label">${g}</span>
+      </button>`}setUserPoints(e,i,a){let r=this.userPoints;this.userPoints=Math.max(0,Math.floor(e)),this.updateUI(),this.dispatchEvent(new CustomEvent("gem-balance-change",{bubbles:!0,composed:!0,detail:{balance:this.userPoints,previousBalance:r,delta:this.userPoints-r,reason:i,orderId:a}}))}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,i,a){if(i!==a){switch(e){case"locale":this._locale=a||"zh";break;case"banner-url":this.bannerUrl=a||"";break;case"user-points":{let r=parseInt(a||"1000",10);this.userPoints=Number.isFinite(r)?r:1e3}break;case"detail-mode":this._detailMode=a||"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 i=()=>{e&&e.isInitialized&&(f.off("initialized",i),this.loadGames())};e?f.on("initialized",i):this.pollForSDK();return}this.doLoadGames(e)}pollForSDK(){let e=setInterval(()=>{let i=window.__playsout_sdk_instance;i&&i.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(i){console.error("[PlaysoutWidget] Failed to load games:",i),this.showError()}}filterGames(){this.updateFilteredGames(),this.renderGames()}updateFilteredGames(){let e=this.getVisibleCategories();this.selectedCategory!==w&&!e.includes(this.selectedCategory)&&(this.selectedCategory=w);let i=this.getEnabledGames();if(this.selectedCategory!==w&&(i=i.filter(a=>a.category===this.selectedCategory)),this.searchQuery){let a=this.searchQuery.toLowerCase();i=i.filter(r=>r.title.toLowerCase().includes(a)||r.category.toLowerCase().includes(a))}this.filteredGames=i}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||l("./home-banner.webp"),i=this.getVisibleCategories(),a=i.length>0?[w,...i]:[];if(this.currentView==="detail"&&this.currentGame){this.renderGameDetail();return}this.shadow.innerHTML=`
+      <style>${ye}</style>
+      ${ve}
+      <div class="playsout-scroll-container">
+        <div class="mobile-container">
+          <div class="playsout-widget">
+        <!-- Header -->
+        <header class="widget-header">
+          <div class="widget-logo">
+            <img src="${O("./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?O(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">
+            ${a.map(r=>this.renderCategoryButton(r)).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 i=this.shadow.querySelector("#gems-amount");i&&(i.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(i=>`
+            <div class="store-pack">
+              ${i.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">${i.amount} <span>${this.t("store.unit")}</span></span>
+                  <span class="store-pack-price">US$${i.price}</span>
+                </div>
+              </div>
+              <button class="store-buy-btn" data-amount="${i.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(i=>{i.addEventListener("click",()=>{let a=parseInt(i.dataset.amount||"0",10);this.handleGemPurchase(a)})}),e.querySelector("#store-cancel")?.addEventListener("click",()=>{this.hideStoreModal()}),e.addEventListener("click",i=>{i.target===e&&this.hideStoreModal()})}hideStoreModal(){this.shadow.querySelector("#store-modal-overlay")?.remove()}showPaymentModal(e){return this.hidePaymentModal(),new Promise(i=>{this.pendingPaymentResolver=i;let a=document.createElement("div");a.className="payment-modal-overlay",a.id="payment-modal-overlay";let r=this.userPoints<e.amount;a.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>
+            ${r?`<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(a),a.querySelector("#payment-cancel-btn")?.addEventListener("click",()=>{this.resolvePendingPayment({status:"cancelled",balance:this.userPoints})}),a.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})}),a.addEventListener("click",n=>{n.target===a&&this.resolvePendingPayment({status:"cancelled",balance:this.userPoints})})})}hidePaymentModal(){this.shadow.querySelector("#payment-modal-overlay")?.remove()}resolvePendingPayment(e){let i=this.pendingPaymentResolver;this.pendingPaymentResolver=null,this.hidePaymentModal(),i&&i(e)}showProfileModal(){this.hideProfileModal();let e=document.createElement("div");e.className="profile-modal-overlay",e.id="profile-modal-overlay";let i=window.__playsout_sdk_instance,n=((typeof i?.isInitialized=="function"?i.isInitialized():i?.isInitialized)?i.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",h=>{h.target===e&&this.hideProfileModal()});let s=()=>{let h=window.__playsout_sdk_instance,E=(h?.getUser?h.getUser():null)?.username||this.t("profile.guest"),te=this.shadow.querySelector(".profile-username-text");te&&(te.textContent=E)},g=()=>{let h=this.shadow.querySelector(".profile-username-text");h&&(h.textContent=this.t("profile.guest")),this.hideProfileModal()},c=window.__playsout_sdk_instance;c?.on&&(c.on("login",s),c.on("logout",s),c.on("authExpired",g)),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 i=[{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">
+          ${i.map(a=>`
+            <button class="language-option${a.code===this._locale?" active":""}" data-lang="${a.code}">
+              <span class="language-option-label">${a.label}</span>
+              ${a.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",a=>{a.target===e&&this.shadow.querySelector("#language-modal-overlay")?.remove()}),e.querySelectorAll(".language-option").forEach(a=>{a.addEventListener("click",()=>{let r=a.dataset.lang;if(r&&r!==this._locale){this._locale=r,this.setAttribute("locale",this._locale),this.dispatchEvent(new CustomEvent("locale-change",{bubbles:!0,composed:!0,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,i="",a="success"){this.toastTimeout&&clearTimeout(this.toastTimeout),this.shadow.querySelector("#toast-container")?.remove();let r=document.createElement("div");r.className="toast-container",r.id="toast-container",r.innerHTML=`
+      <div class="toast${a==="warning"?" toast-warning":""}">
+        <div class="toast-icon">
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            ${a==="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>
+          ${i?`<div class="toast-message">${i}</div>`:""}
+        </div>
+      </div>
+    `,this.shadow.appendChild(r),this.toastTimeout=window.setTimeout(()=>{r.style.opacity="0",r.style.transition="opacity 0.2s",setTimeout(()=>r.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((i,a)=>this.renderGameCard(i,a)).join("")}
+        </div>
+      </div>
+    `,e.querySelectorAll(".game-card").forEach(i=>{i.addEventListener("click",()=>{let a=i.getAttribute("data-game-id"),r=this.games.find(n=>n.id===a);if(r){let n=window.__playsout_sdk_instance,s=typeof n?.isInitialized=="function"?n.isInitialized():n?.isInitialized,g=typeof n?.isLoggedIn=="function"?n.isLoggedIn():n?.isLoggedIn;if(!s||!g){this.showLoginPrompt();return}if(this.dispatchEvent(new CustomEvent("game-click",{detail:r,bubbles:!0,composed:!0})),this._detailMode==="iframe"&&r.externalUrl)this.currentGame=r,this.currentView="detail",this.render();else{let c=r.externalUrl||`/games/${r.id}`;window.location.href=c}}})})}}showLoginPrompt(){this.toastTimeout&&clearTimeout(this.toastTimeout),this.shadow.querySelector("#toast-container")?.remove();let e=document.createElement("div");e.className="toast-container";let i=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">${i("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,i){let a=[];e.isNew&&a.push('<span class="game-tag new">NEW</span>'),e.isHot&&a.push('<span class="game-tag hot">HOT</span>');let r=i<8?"eager":"lazy";return`
+      <div class="game-card" data-game-id="${e.id}">
+        <div class="game-image-wrapper">
+          <img
+            class="game-image"
+            src="${O(e.image)}"
+            alt="${e.title}"
+            loading="${r}"
+            draggable="false"
+          />
+        </div>
+        <div class="game-info">
+          <div class="title-row">
+            <h3 class="game-title">${e.title}</h3>
+            ${a.length>0?a.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,i=e.externalUrl||`/games/${e.id}`;this.currentIframeSrc=i,this.shadow.innerHTML=`
+      <style>${ye}</style>
+      ${ve}
+      <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="${i}"
+                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",a=>{let r=a.target;this.searchQuery=r.value,this.filterGames()}),this.shadow.getElementById("search-btn")?.addEventListener("click",()=>{e?.focus()});let i=this.shadow.getElementById("categories");i?.addEventListener("click",a=>{let n=a.target.closest(".category-btn");if(n){let s=n.getAttribute("data-category")||"";this.selectedCategory=s||w,i.querySelectorAll(".category-btn").forEach(g=>{g.classList.remove("active")}),n.classList.add("active"),this.filterGames()}})}};customElements.get("playsout-widget")||customElements.define("playsout-widget",P);var Ee="ae1f9827-86d2-4794-b5f7-b3414dd4a470";var Te="./arrow-DVB3ZH4I.png";var Se="./bofang-7CYHXAOR.png";var Ie="./clock-UCOJBATJ.png";var Pe="./comment-CYSCAN7M.png";var Ae="./fenxiang-SHOVHZII.png";var Le="./like-UTHO5POC.png";var Re="./live-like-4WE6H52V.png";var De="./next-T6TSGXOI.png";var Ce="./share-2WNZMMZ6.png";var Me="./shoucang-CSI3UBYK.png";var _e="./shuqian-KOBOMTMJ.png";var Ne="./shuqian1-VMWYGXP3.png";var Lt=30,Ue="https://cdn.applixir.com/applixir.app.v6.1.0.js",k="https://games.playsout.com/resources/icon/short-drama",Rt=`${k}/videos`,B=null,Dt=0,ee={id:2,type:"live",titleKey:"neonDreams",descriptionKey:"neonDreamsDescription",episodes:24,likes:"1.5M"},Be=[{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"}],G=[ee,...Be],Ct=`${k}/images/short-banner.png`,Mt={3:`${k}/images/covers/short-3.webp`,4:`${k}/images/covers/short-4.webp`,5:`${k}/images/covers/short-5.webp`,6:`${k}/images/covers/short-6.webp`},Oe={en:N,zh:U},ze=()=>{if(window.initializeAndOpenPlayer)return Promise.resolve();if(B)return B;let o=new Promise((t,e)=>{let i=document.querySelector(`script[src="${Ue}"]`),a=i??document.createElement("script");a.addEventListener("load",()=>window.initializeAndOpenPlayer?t():e(new Error("AppLixir SDK unavailable")),{once:!0}),a.addEventListener("error",()=>e(new Error("Failed to load AppLixir SDK")),{once:!0}),i||(a.src=Ue,a.async=!0,document.head.appendChild(a))}).catch(t=>{throw B=null,t});return B=o,o},_t=`
+: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; }
+}
+`,$=class extends HTMLElement{constructor(){super();this.currentTab="live";this.currentVideo=null;this.likedVideoIds=new Set;this.favoriteVideoIds=new Set;this.isCurrentVideoUnlocked=!1;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,i,a){i===a||!this.isConnected||e==="locale"&&(this.closeVideo(!1),this.renderPage())}get locale(){return this.getAttribute("locale")?.toLowerCase()==="zh"?"zh":"en"}get adApiKey(){return Ee.trim()||this.getAttribute("ad-api-key")?.trim()||""}t(e){let i=Oe[this.locale],a=Oe.en,r=n=>{let s=n.video;return typeof s?.[e]=="string"?s[e]:void 0};return r(i)??r(a)??e}renderPage(){this.shadow.innerHTML=`
+      <style>${_t}</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="${Ct}" alt="" />
+            <div class="featured-content">
+              <span class="badge">${this.t("editorsChoice")}</span>
+              <h2>${this.t(ee.titleKey)}</h2>
+              <p>${this.t(ee.descriptionKey)}</p>
+              <div class="featured-actions">
+                <button class="watch-primary" data-action="play" data-video-id="2"><img src="${Se}" alt="" />${this.t("watchEpisode")}</button>
+                <span class="icon-button"><img src="${Ne}" 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 Be.filter(e=>e.type===this.currentTab).map(e=>`
+      <article class="card">
+        <div class="thumbnail"><span class="hot">${this.t("hot")}</span><img src="${Mt[e.id]}" alt="" /></div>
+        <div class="card-content">
+          <h3>${this.t(e.titleKey)}</h3>
+          <div class="meta">
+            <span><img src="${Ie}" alt="" />${e.episodes} ${this.t("episodes")}</span>
+            <span><img src="${Le}" alt="" />${e.likes}</span>
+          </div>
+          <p class="description">${this.t(e.descriptionKey)}</p>
+          <div class="card-actions">
+            <span class="small-icons"><img src="${_e}" alt="" /><img src="${Ce}" 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 i=e.target instanceof Element?e.target.closest("[data-action]"):null;if(!i)return;let a=i.dataset.action;if(a==="tab")this.currentTab=i.dataset.tab==="motion"?"motion":"live",this.renderPage();else if(a==="play"){let r=G.find(n=>n.id===Number(i.dataset.videoId));r&&this.openVideo(r)}else if(a==="close-video")this.closeVideo();else if(a==="toggle-play"){let r=this.shadow.querySelector("video");r?.paused?r.play().catch(()=>{}):r?.pause()}else a==="like"||a==="favorite"?this.toggleInteraction(a,i):a==="next"?(this.pendingNextVideo=this.getNextVideo(),this.showUnlockModal()):a==="close-unlock"?this.hideUnlockModal():a==="watch-ad"&&this.watchAd(i)}openVideo(e,i=!1){this.cleanupPlayer(),this.currentVideo=e,this.isCurrentVideoUnlocked=i,this.pendingNextVideo=null;let a=this.shadow.querySelector(".video-widget");if(!a)return;let r=document.createElement("section");r.className="player-overlay",r.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="${Te}" 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="${Re}" alt="" /><span>1.2M</span></button>
+        <span class="interaction"><img src="${Pe}" 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="${Me}" alt="" /><span>${this.t("favorite")}</span></button>
+        <span class="interaction"><img src="${Ae}" alt="" /><span>${this.t("share")}</span></span>
+        <button class="interaction" data-action="next"><img src="${De}" 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>
+    `,a.appendChild(r);let n=r.querySelector("video");if(!n)return;let s=r.querySelector('[data-action="toggle-play"]'),g=r.querySelector("[data-video-progress]"),c=r.querySelector("[data-video-time]"),h=()=>{let b=Number.isFinite(n.duration)?n.duration:0;g&&(g.max=String(b),g.value=String(Math.min(n.currentTime,b))),c&&(c.textContent=`${this.formatTime(n.currentTime)} / ${this.formatTime(b)}`),s&&(s.dataset.state=n.paused?"paused":"playing"),s?.setAttribute("aria-label",this.t(n.paused?"playVideo":"pauseVideo"))};n.src=this.videoUrl(e.id),n.addEventListener("loadedmetadata",h),n.addEventListener("durationchange",h),n.addEventListener("play",()=>{h(),this.emit("video-play",{id:e.id,title:this.t(e.titleKey)})}),n.addEventListener("pause",h),n.addEventListener("timeupdate",()=>{h(),!this.isCurrentVideoUnlocked&&n.currentTime>=Lt&&(this.pendingNextVideo=null,this.showUnlockModal())}),n.addEventListener("error",()=>this.emit("video-error",{id:e.id,title:this.t(e.titleKey),source:n.src})),g?.addEventListener("input",()=>{n.currentTime=Number(g.value),h()}),n.play().catch(()=>{})}formatTime(e){if(!Number.isFinite(e)||e<0)return"0:00";let i=Math.floor(e);return`${Math.floor(i/60)}:${String(i%60).padStart(2,"0")}`}toggleInteraction(e,i){if(!this.currentVideo)return;let a=e==="like"?this.likedVideoIds:this.favoriteVideoIds,r=!a.has(this.currentVideo.id);r?a.add(this.currentVideo.id):a.delete(this.currentVideo.id),i.setAttribute("aria-pressed",String(r))}videoUrl(e){return`${Rt}/${e}.mp4`}getNextVideo(){let e=G.findIndex(i=>i.id===this.currentVideo?.id);return G[(e+1)%G.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 i=document.createElement("div");i.className="modal-layer",i.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(i),this.adApiKey&&ze().catch(()=>{})}async watchAd(e){let i=this.adApiKey;if(!i){this.showAdError("adKeyMissing");return}let a=this.currentVideo?.id;if(a){e.disabled=!0,e.textContent=this.t("loadingAd"),this.showAdError("");try{await ze();let r=window.initializeAndOpenPlayer;if(!r)throw new Error("AppLixir SDK unavailable");let n=!1,s=!1,g=c=>{n||(e.disabled=!1,e.textContent=this.t("watchAd"),this.showAdError(c))};r({apiKey:i,injectionElementId:this.ensureAdContainer().id,adStatusCallbackFn:c=>{c.type==="complete"?s=!0:c.type==="thankYouModalClosed"&&s?(n=!0,this.completeAdUnlock(a)):!s&&["skipped","adSkippedNoReward","manuallyEnded","allAdsCompleted","consentDeclined"].includes(c.type??"")&&g("adIncomplete")},adErrorCallbackFn:()=>g("adUnavailable")})}catch{e.disabled=!1,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-${++Dt}`,document.body.appendChild(this.adContainer),this.adContainer)}showAdError(e){let i=this.shadow.querySelector(".modal-error");i&&(i.textContent=e?this.t(e):"")}completeAdUnlock(e){if(this.currentVideo?.id!==e)return;let i=this.currentVideo;if(this.isCurrentVideoUnlocked=!0,this.hideUnlockModal(),this.emit("ad-complete",{id:i.id,title:this.t(i.titleKey)}),this.pendingNextVideo){let a=this.pendingNextVideo;this.pendingNextVideo=null,this.openVideo(a,!0)}else this.shadow.querySelector("video")?.play().catch(()=>{})}hideUnlockModal(){this.shadow.querySelector(".modal-layer")?.remove()}closeVideo(e=!0){let i=this.currentVideo;this.cleanupPlayer(),e&&i&&this.emit("video-close",{id:i.id,title:this.t(i.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=!1}emit(e,i){this.dispatchEvent(new CustomEvent(e,{detail:i,bubbles:!0,composed:!0}))}};typeof customElements<"u"&&(customElements.get("playsout-widget")||customElements.define("playsout-widget",P),customElements.get("playsout-video-widget")||customElements.define("playsout-video-widget",$));var{init:Nt,mount:Ut,unmount:Ot,destroy:zt,Login:Bt,logout:Gt,getToken:$t,getUserInfo:Ht,getUser:Kt,setLocale:jt,getLocale:Vt,getGames:qt,getCategories:Ft,on:Wt,off:Zt,isInitialized:Yt,isLoggedIn:Qt,instance:Xt,PlaysoutSDKClass:Jt}=C;typeof window<"u"&&(window.Playsout=C,window.__playsout_sdk_instance=C.instance);return Ve(ei);})();