*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#0a0a0a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}#feed::-webkit-scrollbar{display:none}.card{position:relative;height:100dvh;width:100vw;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;background:#0a0a0a}.card-top{flex-shrink:0;padding:max(8px,env(safe-area-inset-top,8px)) 10px 8px 14px;display:flex;align-items:center;gap:8px;background:#0a0a0a;z-index:5;touch-action:pan-y}.card-top .brand{font-weight:900;font-size:16px;letter-spacing:-.02em;flex-shrink:0}.card-top .brand .dot{color:#f36}.card-top .nav-tabs{display:flex;align-items:center;gap:12px;flex:1;justify-content:center;min-width:0;overflow:hidden}.card-top .tab{background:transparent;border:none;padding:4px 2px 6px;color:#ffffff8c;font-size:13px;font-weight:700;letter-spacing:-.01em;cursor:pointer;position:relative;white-space:nowrap;transition:color .15s ease;touch-action:manipulation}.card-top .tab:active{transform:scale(.96)}.card-top .tab.active{color:#fff;font-weight:800}.card-top .tab.active:after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);width:18px;height:2px;border-radius:2px;background:#fff}.card-top .nav-icons{display:flex;align-items:center;gap:6px;flex-shrink:0}.card-top .nav-icons button{border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s ease,background .12s ease,box-shadow .12s ease;touch-action:manipulation}.card-top .nav-icons button:active{transform:scale(.92)}.card-top .nav-icons button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card-top .search{width:32px;height:32px;border-radius:50%;background:#ffffff14;color:#fff}.card-top .search svg{width:16px;height:16px}.card-top .profile{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4a7fff,#f36);color:#fff;box-shadow:0 0 0 2px #ffffff14}.card-top .profile:active{box-shadow:0 0 0 2px #fff3}.card-top .profile svg{width:18px;height:18px}.card-top .new-game{width:36px;height:32px;border-radius:10px;background:linear-gradient(135deg,#f36,#ff6b3d);color:#fff;box-shadow:0 4px 14px #ff336673,inset 0 1px #fff3;position:relative}.card-top .new-game:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:12px;background:linear-gradient(135deg,#ff336680,#ff6b3d80);filter:blur(8px);z-index:-1;opacity:.7}.card-top .new-game svg{width:18px;height:18px;stroke-width:2.4}.card-top .new-game:active{box-shadow:0 2px 8px #ff336680,inset 0 1px #fff3}@media (max-width: 380px){.card-top{gap:6px;padding-left:12px;padding-right:8px}.card-top .nav-tabs{gap:8px}.card-top .tab{font-size:12px}.card-top .brand{font-size:15px}}.card-frame{flex:1;min-height:0;position:relative;background:#111;overflow:hidden}.card-frame iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:transparent}.card-bottom{flex-shrink:0;padding:10px 14px max(12px,env(safe-area-inset-bottom,12px)) 14px;background:#0a0a0a;display:flex;flex-direction:column;gap:8px;z-index:5;touch-action:pan-y}.card-bottom .action-row{display:flex;align-items:center;gap:6px}.action-row .actions-left{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.action-row .actions-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.action-row .stat{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:10px;background:transparent;border:none;color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .12s ease,color .12s ease;touch-action:manipulation}.action-row .stat .icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}.action-row .stat .icon svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.action-row .stat:active{transform:scale(.92)}.action-row .stat.liked{color:#f36}.action-row .stat.liked .icon svg{fill:#f36;stroke:#f36}.action-row .stat.saved{color:#ffd667}.action-row .stat.saved .icon svg{fill:#ffd667;stroke:#ffd667}.action-row .stat.pop .icon{animation:pop .32s ease-out}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.32)}to{transform:scale(1)}}.action-row .record{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s ease,border-color .12s ease,background .12s ease;touch-action:manipulation;padding:0}.action-row .record .dot{width:12px;height:12px;border-radius:50%;background:#ff3b3b;transition:all .18s ease}.action-row .record:active{transform:scale(.92)}.action-row .record.recording{border-color:#ff3b3b;background:#ff3b3b1f}.action-row .record.recording .dot{border-radius:3px;width:12px;height:12px;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.action-row .remix{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:999px;border:none;background:#ffffff1a;color:#fff;font-size:13px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .12s ease,background .12s ease;touch-action:manipulation}.action-row .remix:active{transform:scale(.96);background:#ffffff2e}.action-row .remix .ring{width:16px;height:16px;border-radius:50%;border:2px solid #ff3366;border-right-color:transparent;transform:rotate(-45deg)}.card-bottom .creator-row{display:flex;align-items:center;gap:8px;min-width:0}.creator-row .avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#4a7fff,#f36);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;color:#fff}.creator-row .meta{flex:1;min-width:0;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator-row .handle{font-weight:800;letter-spacing:-.005em}.creator-row .colon{margin-right:4px}.creator-row .title{font-weight:700}.creator-row .sub{opacity:.5;font-weight:600;font-size:12px;margin-left:4px}.scroll-hint{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:11px;opacity:.55;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;animation:pulse-up 1.6s ease-in-out infinite;white-space:nowrap}.scroll-hint.hidden{display:none}@keyframes pulse-up{0%,to{transform:translate(-50%);opacity:.35}50%{transform:translate(-50%,-6px);opacity:.7}}.toast{position:fixed;left:50%;top:40%;transform:translate(-50%);background:#000000c7;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;z-index:200;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;font-weight:600}.rec-indicator{position:fixed;top:max(12px,env(safe-area-inset-top,12px));left:50%;transform:translate(-50%);background:#ff3b3bf2;color:#fff;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;z-index:300;display:none;align-items:center;gap:6px;font-variant-numeric:tabular-nums}.rec-indicator.visible{display:inline-flex}.rec-indicator .pulse{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s ease-in-out infinite}