*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1b1033;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;pointer-events:none;background:linear-gradient(#1b1033cc,#1b103300)}
.logo{font-weight:900;font-size:20px;letter-spacing:-.5px;background:linear-gradient(90deg,#ff5ea8,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{display:flex;gap:5px;align-items:center}
.pill{background:#ffffff1f;border:0;color:#fff;border-radius:99px;padding:5px 9px;font-size:13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:inherit}
.pill b{font-variant-numeric:tabular-nums}
.btn{pointer-events:auto;cursor:pointer;font-size:14px}
#feed{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}
#feed::-webkit-scrollbar{display:none}
.card{height:100vh;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 52px) 12px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(160deg,var(--c1),var(--c2))}
.stage{flex:1;min-height:0;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px #0006,inset 0 0 0 2px #ffffff22;background:#0003}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px 2px;min-height:64px}
.info h2{margin:0;font-size:18px}
.info p{margin:2px 0 0;font-size:13px;opacity:.85}
.info small{opacity:.7;font-size:12px}
.like{flex:none;border:0;background:#ffffff26;color:#fff;border-radius:18px;padding:8px 14px;font-size:20px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;transition:transform .15s}
.like span{font-size:14px;font-weight:700}
.like.on{background:#ff3d71}
.like.pulse{transform:scale(1.25)}
#hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);z-index:9;background:#000a;padding:8px 14px;border-radius:99px;font-size:13px;pointer-events:none;animation:bob 1.4s ease-in-out infinite;transition:opacity .4s}
#hint.gone{opacity:0}
@keyframes bob{50%{transform:translate(-50%,-8px)}}
@media (min-width:600px){.card{padding-left:calc(50% - 230px);padding-right:calc(50% - 230px)}}
@media (prefers-reduced-motion:reduce){#hint{animation:none}}