The user wants me to build a single-page HTML file with a physics simulation featuring:

1. 20 numbered balls (1-20)
2. Balls drop from the center of a heptagon
3. The heptagon spins 360 degrees every 5 seconds
4. Balls are affected by gravity and friction
5. Balls collide with each other (ball-ball collision)
6. Balls bounce off the rotating walls (ball-wall collision)
7. Show each ball's spin via rotation of its number
8. All collision detection implemented from scratch
9. Everything in one index.html file - CSS inline, JS inline
10. No external resources

This is a complex physics simulation. Let me plan the implementation:

- Canvas-based rendering
- Heptagon: 7-sided polygon, rotating
- Physics: gravity, friction, restitution
- Ball-ball collisions: elastic collisions with proper momentum transfer
- Ball-wall collisions: detect which edge of the heptagon is closest, reflect velocity
- Ball rotation: track angular velocity of each ball, render number rotated accordingly

Key physics details:
- Each ball has: position (x, y), velocity (vx, vy), angular velocity (omega), radius
- Gravity: constant downward acceleration
- Friction: air resistance (proportional to velocity)
- Ball-ball: elastic collision using conservation of momentum and energy
- Ball-wall: reflect off the rotating wall, accounting for wall velocity

For ball-wall collision:
- The heptagon rotates, so the walls are moving
- Need to find the closest point on each edge to the ball
- If distance < ball radius, collision occurred
- Reflect velocity relative to the wall's normal, accounting for wall velocity at contact point

Let me write this step by step.

For the heptagon:
- Center at canvas center
- Radius large enough to contain all balls
- 7 vertices, rotating at 2π/5 radians per second

For ball-ball collision:
- Check distance between centers < 2*radius
- If colliding, separate them and compute new velocities using elastic collision formulas
- Transfer some angular momentum based on tangential component

For ball rotation:
- Track angular velocity (omega) for each ball
- When ball-ball collision occurs, transfer angular momentum based on tangential velocity difference
- When ball-wall collision occurs, the friction imparts angular velocity

Let me implement this carefully.

```javascript
// Constants
const NUM_BALLS = 20;
const BALL_RADIUS = 15;
const HEPTAGON_RADIUS = 250;
const ROTATION_PERIOD = 5; // seconds
const GRAVITY = 800; // pixels/s^2
const FRICTION = 0.98; // air friction
const RESTITUTION = 0.7; // bounce restitution
const WALL_FRICTION = 0.3; // friction with walls for spin

// Ball class
// Heptagon class
// Physics engine
// Render loop
```

Let me think about the collision detection more carefully:

**Ball-Ball Collision:**
- Two balls at positions p1, p2 with velocities v1, v2
- Distance d = |p2 - p1|
- If d < 2r, they overlap
- Normal n = (p2 - p1) / d
- Relative velocity v_rel = v1 - v2
- If v_rel · n > 0, they're moving apart, no collision response needed
- Impulse j = -(1 + e) * (v_rel · n) / (1/m1 + 1/m2)
- For equal masses: j = -(1 + e) * (v_rel · n) / 2
- v1' = v1 + j * n / m1
- v2' = v2 - j * n / m2
- Separate them: overlap = 2r - d, push apart by overlap/2 each

For spin transfer in ball-ball collision:
- Tangential direction t = perpendicular to n
- Relative tangential velocity at contact surface includes spin contribution
- v_tangent = (v1 - v2) · t + (omega1 + omega2) * r
- This affects the angular velocity change

**Ball-Wall Collision:**
- For each edge of the heptagon (line segment)
- Find closest point on line segment to ball center
- If distance < ball radius, collision
- Normal is perpendicular to the edge, pointing inward
- Wall velocity at contact point: the heptagon is rotating, so the wall has tangential velocity
- v_wall = omega_heptagon × (contact_point - center)
- Relative velocity: v_rel = v_ball - v_wall
- Reflect the normal component, keep tangential component (with friction)
- v_rel_new = -e * (v_rel · n) * n + (1 - wall_friction) * (v_rel · t) * t
- v_ball_new = v_wall + v_rel_new
- Spin: omega_ball += wall_friction * (v_rel · t) / r

Let me code this up now. I'll use a canvas for rendering.

Let me think about rendering the spinning number on each ball:
- Save context
- Translate to ball center
- Rotate by the ball's accumulated angle
- Draw the number
- Restore context

For the heptagon, I'll draw it as a filled polygon with a border, and the walls will be the edges.

Let me also think about the initial conditions:
- All balls start at the center of the heptagon
- Give them slightly different initial velocities so they spread out
- Stagger the release slightly or give them random offsets

Let me write the full implementation now.

I need to be careful with:
1. Numerical stability (small timesteps, multiple collision iterations)
2. Proper handling of ball-ball collisions (don't double-process pairs)
3. Proper wall collision with rotating reference frame

Let me write this out fully.

The file has been created. Let me verify it exists and review it to make sure everything looks good.

Wait, I should double-check the collision logic. Let me re-read through the code carefully to make sure the physics are right.

Key concerns:
1. Ball-wall collision: The normal needs to point inward (from the wall toward the center of the heptagon) so balls are pushed back inside.
2. Wall velocity at contact point - this looks correct (rotational velocity).
3. Ball-ball collision with spin transfer.

Let me verify the wall collision more carefully. The closest point on the edge to the ball center - if the ball is inside the heptagon, the vector from closest point to ball should point inward. Let me check the toCenter check...

Actually, there's a subtle issue. 

The closest point on the edge segment to the ball center gives us a vector pointing from the wall to the ball. The toCenter check flips the normal if needed so it points inward, but this logic seems backwards—if the ball is inside the heptagon and near a wall, the vector from the closest point to the ball should already point inward, not outward. Let me think through this more carefully.

When the ball penetrates the wall, the distance between the ball and the closest point on the edge is less than the ball's radius. The vector from the closest point to the ball center is the direction we need to push it. I should verify this normal direction is correct by checking the dot product with the vector toward the center.

For a convex polygon, the dot product of (ball - closestPoint) with (center - closestPoint) should be positive when the ball is inside, confirming the direction is inward. The current approach seems sound, but let me trace through the logic more carefully to ensure the normal and separation are computed correctly.

I'm also noticing the tangential friction implementation might not be fully correct—the current code uses a fixed friction factor regardless of the sign of tangential velocity, which could cause issues if the friction direction isn't properly aligned with the actual tangential motion.

Let me reconsider the spin transfer logic. The surface tangential velocity accounts for both the relative linear velocity and the rotational contribution at the contact point. When two spinning balls collide, the angular velocities affect how they interact at the contact surface. I should verify the impulse calculation properly handles both normal and tangential components before applying friction. I'm working through the collision physics more carefully. For equal spheres, I can compute the impulse from both normal and tangential components separately—the normal part depends on restitution, while the tangential part depends on friction and whether the surfaces are sliding or sticking. Rather than overcomplicating it with rolling constraints, I'll simplify: apply restitution to the normal impulse, then use Coulomb friction to limit the tangential impulse based on how much friction the surfaces can provide. I'm working through the physics of ball-ball collisions with spin. The contact point velocity combines the ball's center velocity with the tangential component from rotation, and I need to account for both normal impulse (governed by restitution) and tangential impulse (limited by friction). The key constraint is that tangential impulse can't exceed the friction coefficient times the normal impulse. I'm working through the physics of the collision model. When ball A strikes ball B, the impulse acts in opposite directions on each ball—A receives -J while B receives +J. The contact point velocity depends on both the center-of-mass velocity and the spin contribution, which I'm expressing as v_A + omega_A x r_A at the collision point.

For the tangential friction calculation, I need to be careful about the direction convention. When I define the tangent vector as perpendicular to the collision normal, the sign of the tangential velocity determines which way the friction force should act. The spin contribution flips sign because the position vector from center to contact is opposite in direction.

I'm going to implement a cleaner model using the effective mass at the contact point, which for equal-radius spheres simplifies to 2/7 m. This lets me compute the tangential impulse directly from the relative velocity at contact and then derive the resulting change in angular velocity for each ball.

The user wants me to verify the file exists and looks correct. Let me do a quick sanity check.

The user wants me to verify that the index.html file is present and correct. Let me just confirm the file exists and has the expected content.

The file is written and ready. Let me verify it's valid HTML and the physics logic is sound by doing a quick sanity check.