*,:before,:after{box-sizing:border-box;margin:0;padding:0}.hidden{display:none!important}:root{--bg:#1c1c2e;--surface:#262640;--surface2:#30304a;--border:#52527a;--border-light:#6a6a90;--primary:#7c3aed;--primary-hover:#6d28d9;--text:#f0f0f4;--text-dim:#b0b0c8;--text-muted:#8888a4;--accent:#38bdf8}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:14px}#root{min-height:100vh}.play-loading{flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100vh;display:flex}.play-loading-spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.play-loading-text{color:var(--text-muted);font-size:14px}.play-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:100vh;padding:24px;display:flex}.play-error-code{color:var(--border);font-size:64px;font-weight:700;line-height:1}.play-error-title{color:var(--text);font-size:20px;font-weight:700}.play-error-desc{color:var(--text-muted);max-width:360px;font-size:14px}.play-btn{background:var(--primary);color:var(--text);cursor:pointer;border:none;border-radius:6px;margin-top:8px;padding:8px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s;display:inline-block}.play-btn:hover{background:var(--primary-hover)}.play-starfield{z-index:0;background:radial-gradient(at 50% 0,#1a1040 0%,#0d0d1a 60%,#060612 100%);position:fixed;inset:0;overflow:hidden}.play-starfield-layer{background-repeat:repeat;background-size:600px 600px;position:absolute;inset:-100% -50%}.play-stars-sm{background-image:radial-gradient(1px 1px at 50px 120px,#ffffff80,#0000),radial-gradient(1px 1px at 180px 300px,#fff6,#0000),radial-gradient(1px 1px at 320px 80px,#ffffff80,#0000),radial-gradient(1px 1px at 420px 400px,#ffffff4d,#0000),radial-gradient(1px 1px at 100px 500px,#fff6,#0000),radial-gradient(1px 1px at 530px 220px,#ffffff80,#0000),radial-gradient(1px 1px at 260px 440px,#ffffff4d,#0000),radial-gradient(1px 1px at 470px 560px,#fff6,#0000),radial-gradient(1px 1px at 10px 350px,#ffffff80,#0000),radial-gradient(1px 1px at 380px 170px,#ffffff4d,#0000),radial-gradient(1px 1px at 150px 50px,#fff6,#0000),radial-gradient(1px 1px at 570px 480px,#ffffff80,#0000);animation:120s linear infinite starfield-drift}.play-stars-md{background-image:radial-gradient(1.5px 1.5px at 90px 200px,#ffffffb3,#0000),radial-gradient(1.5px 1.5px at 350px 50px,#fff9,#0000),radial-gradient(1.5px 1.5px at 500px 340px,#ffffffb3,#0000),radial-gradient(1.5px 1.5px at 200px 500px,#fff9,#0000),radial-gradient(1.5px 1.5px at 440px 150px,#ffffff80,#0000),radial-gradient(1.5px 1.5px at 30px 450px,#fff9,#0000),radial-gradient(1.5px 1.5px at 280px 280px,#ffffffb3,#0000),radial-gradient(1.5px 1.5px at 560px 90px,#ffffff80,#0000);animation:80s linear infinite starfield-drift}.play-stars-lg{background-image:radial-gradient(2px 2px at 150px 150px,#c8b4ffe6,#0000),radial-gradient(2px 2px at 450px 250px,#b4dcffcc,#0000),radial-gradient(2.5px 2.5px at 300px 420px,#ffc8dcb3,#0000),radial-gradient(2px 2px at 50px 380px,#c8c8ffcc,#0000),radial-gradient(2px 2px at 520px 500px,#b4fff0b3,#0000);animation:200s linear infinite starfield-drift}@keyframes starfield-drift{0%{transform:translateY(0)}to{transform:translateY(50%)}}.play-browse{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.play-browse-header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#262640d9;flex-shrink:0;align-items:center;height:52px;padding:0 24px;display:flex}.play-browse-logo{color:#b794f6;letter-spacing:.5px;font-size:18px;font-weight:700}.play-browse-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:32px 24px}.play-browse-title{margin-bottom:24px;font-size:20px;font-weight:700}.play-browse-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}.play-game-tile{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border);cursor:pointer;color:var(--text);background:#262640b3;border-radius:12px;flex-direction:column;align-items:center;gap:10px;padding:20px 12px 16px;text-decoration:none;transition:background .15s,border-color .15s,transform .15s;display:flex}.play-game-tile:hover{border-color:var(--border-light);background:#30304ad9;transform:translateY(-3px)}.play-tile-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex;overflow:hidden}.play-tile-icon canvas{image-rendering:pixelated;width:64px;height:64px}.play-tile-letter{color:#fff;font-size:28px;font-weight:700}.play-tile-name{color:var(--text);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;font-weight:600;overflow:hidden}.play-tile-play-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:5px;padding:5px 14px;font-size:12px;font-weight:600}.play-browse-empty{color:var(--text-muted);text-align:center;padding:32px 0}#play-game{flex-direction:column;height:100vh;display:flex}.play-game-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:16px;height:44px;padding:0 16px;display:flex}.play-back-link{color:var(--text-muted);align-items:center;gap:4px;font-size:13px;text-decoration:none;transition:color .15s;display:flex}.play-back-link:hover{color:var(--text)}.play-game-name{color:#b794f6;flex:1;font-size:14px;font-weight:600}.play-canvas-wrap{background:#0a0a18;flex-direction:column;flex:1;display:flex;overflow:hidden}#play-canvas{width:100%;image-rendering:pixelated;flex:1;display:block}#play-status{background:var(--surface);border-top:1px solid var(--border);height:36px;color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;align-items:center;padding:0 12px;font-size:12px;display:flex;overflow:hidden}