:root{--bg: #0a0a0f;--surface: #12121a;--neon: #00f5d4;--neon2: #ff2e63;--neon3: #f9f871;--text: #e8e8f0;--muted: #6b6b80;--radius: 16px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.4;font-weight:400;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;width:100%;overflow:hidden;background:var(--bg)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.app{height:100%;width:100%;position:relative;background:var(--bg);overflow:hidden}.top-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(to bottom,rgba(10,10,15,.95),transparent);pointer-events:none}.top-bar>*{pointer-events:auto}.logo{font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--text)}.logo span{color:var(--neon)}.create-btn{background:linear-gradient(135deg,var(--neon),#00c4a7);color:#0a0a0f;font-weight:700;font-size:.85rem;padding:8px 14px;border-radius:999px;box-shadow:0 0 20px #00f5d44d;transition:transform .15s,box-shadow .15s}.create-btn:active{transform:scale(.96)}.feed{height:100%;width:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.feed::-webkit-scrollbar{display:none}.progress{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px}.dot{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;transition:all .2s;cursor:pointer}.dot.active{background:var(--neon);opacity:1;box-shadow:0 0 8px var(--neon);transform:scale(1.3)}.game-card{height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;background:var(--surface);overflow:hidden}.game-header{position:absolute;top:60px;left:16px;right:16px;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.game-title{font-weight:700;font-size:1.1rem;text-shadow:0 2px 8px rgba(0,0,0,.8)}.game-meta{font-size:.75rem;color:var(--muted);margin-top:2px}.score-pill{background:#0000008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;font-weight:700;font-size:.9rem;border:1px solid rgba(255,255,255,.08)}.score-pill .hi{color:var(--neon3);font-size:.7rem;display:block;text-align:right}.game-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative}.game-canvas-wrap canvas{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 0 40px #00f5d414}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a0fbf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:20;gap:12px;padding:24px;text-align:center}.overlay h2{font-size:1.8rem;font-weight:800}.overlay .big-score{font-size:3rem;font-weight:900;color:var(--neon);text-shadow:0 0 30px rgba(0,245,212,.5)}.overlay button{margin-top:8px;background:var(--neon);color:#0a0a0f;font-weight:700;padding:12px 28px;border-radius:999px;font-size:1rem}.overlay .secondary{background:transparent;color:var(--text);border:1px solid var(--muted);margin-top:4px}.swipe-hint{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:.8rem;color:var(--muted);animation:bounce 1.6s ease-in-out infinite;pointer-events:none}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.modal{background:var(--surface);border-radius:20px 20px 12px 12px;width:100%;max-width:420px;padding:24px;border:1px solid rgba(255,255,255,.06);animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h3{font-size:1.25rem;margin-bottom:8px}.modal p{color:var(--muted);font-size:.9rem;margin-bottom:16px}.modal textarea{width:100%;min-height:90px;background:var(--bg);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;color:var(--text);font-size:1rem;resize:vertical;margin-bottom:16px}.modal textarea:focus{outline:none;border-color:var(--neon)}.modal-actions{display:flex;gap:10px}.modal-actions button{flex:1;padding:12px;border-radius:12px;font-weight:700}.modal-actions .primary{background:var(--neon);color:#0a0a0f}.modal-actions .ghost{background:#ffffff0f}