We are going to create a single HTML file (index.html) that contains:
 - A canvas element for drawing
 - CSS for the canvas to be fullscreen
 - JavaScript for the physics simulation

 Steps:
 1. Set up the HTML structure with a canvas.
 2. Style the canvas to take the full viewport.
 3. Write JavaScript to:
    a. Get the canvas and context.
    b. Define the heptagon (7 sides) and its rotation.
    c. Create 20 balls with properties (position, velocity, rotation, etc.).
    d. Implement gravity and friction.
    e. Handle collisions between balls and between balls and walls (heptagon).
    f. Draw the spinning heptagon and the balls with their numbers rotated.

 Important: 
   - The heptagon rotates 360 degrees every 5 seconds => angular velocity = 2*Math.PI / (5 seconds) per second.
   - We'll use requestAnimationFrame for animation loop.
   - We'll need to update the positions of the balls and the rotation of the heptagon each frame.

 Physics:
   - Gravity: constant downward acceleration (e.g., 0.2 pixels per frame squared).
   - Friction: a small factor to reduce velocity each frame (e.g., 0.99).
   - Collisions: elastic collisions with some energy loss (coefficient of restitution).

 Collision Detection:
   - Ball vs Ball: check distance between centers and compare to sum of radii.
   - Ball vs Wall (heptagon): we need to represent the heptagon as a set of line segments. Since the heptagon is rotating, we'll transform the ball's position into the heptagon's local space (without rotation) to check against the static heptagon.

 Implementation of Ball vs Heptagon:
   - The heptagon is centered and rotates. We can represent the heptagon as a set of vertices in local coordinates (without rotation).
   - For each frame, we'll compute the current rotation angle of the heptagon: angle = (currentTime * 2 * Math.PI) / 5000 (since 5000ms = 5 seconds).
   - To check a ball against the heptagon, we can:
        * Transform the ball's position to the heptagon's local space by rotating the ball's position relative to the center by -angle.
        * Then check the distance from the transformed point to each edge of the static heptagon (which is now not rotating).

   - However, note: the heptagon is rotating and the walls are moving. Therefore, we must account for the moving walls. Alternatively, we can treat the heptagon as stationary and apply the rotation to the ball's velocity as well? Actually, we can transform the entire system to the heptagon's frame.

   - Alternatively, we can compute the collision with a rotating segment. This is complex.

   - Another idea: since the heptagon is regular and rotating, we can represent the walls as circles? No, because it's a polygon.

   - We can compute the collision with each edge by:
        edge = from vertex i to vertex i+1, but in world coordinates (rotated by the current angle).
        Then we can compute the closest point on the edge to the ball and check the distance.

   - But note: the edge is moving. So we must consider the velocity of the wall at the point of collision. The velocity of a point on the wall is tangential: v = ω × r, where r is the vector from center to the point.

   - This becomes very complex. We might simplify by assuming the heptagon is fixed and the balls are moving? But the problem says the heptagon spins.

   - Given time constraints, we might approximate by having the heptagon as a circle for collision? But that wouldn't be a heptagon.

   - Alternatively, we can use a simpler approach: since the heptagon is rotating, we can check the distance from the ball to the center and if it is greater than the circumradius (minus the ball radius) then we bounce it back with a reflection. But that would be a circle, not a heptagon.

   - We want a heptagon. So we must do line-segment collisions.

   - Steps for a segment collision:
        Let A and B be the two vertices of an edge (rotated by the current angle).
        Find the closest point P on AB to the ball center C.
        If the distance |PC| < ball radius, then there is a collision.

        But note: the segment is moving. The velocity of point P is: v_p = ω × (P - center) [tangential velocity].

        So the relative velocity of the ball with respect to the wall at P is: v_ball - v_p.

        Then we reflect the relative velocity in the normal direction at P.

   - This is a full physics simulation and might be heavy for 20 balls, but we'll try.

   - We'll break the problem into steps.

 Considering complexity, we might limit the collision detection to the outer circle approximation for the heptagon? But the problem says "bounce realistically off the rotating walls", so we need the polygon.

 Plan:

   We'll create:
     - A Ball class with: position, velocity, radius, rotation (for the number), and angular velocity.
     - A Heptagon class that holds the center, radius (circumradius), number of sides (7), and current rotation angle.

   For each frame:
     1. Update the heptagon's rotation angle based on time.
     2. Update each ball's position and velocity (apply gravity and friction).
     3. Check for ball-ball collisions and resolve.
     4. Check for ball-heptagon collisions and resolve.

   For ball-ball collision:
        for each pair (i, j) with i < j:
            let dx = ball_j.x - ball_i.x, dy = ball_j.y - ball_i.y;
            let distance = Math.sqrt(dx*dx + dy*dy);
            if (distance < ball_i.radius + ball_j.radius) {
                // collision response: adjust velocities
                // normal vector: (dx/distance, dy/distance)
                // relative velocity: v_i - v_j
                // ... standard elastic collision with restitution
            }

   For ball-heptagon collision:
        We'll represent the heptagon as an array of vertices (in world coordinates) for the current frame.
        For each edge (between vertex k and vertex k+1):
            compute the closest point P on the edge to the ball center C.
            let normal = from P to C (normalized) -> but note: the normal should be pointing outward? Actually, we want the normal pointing from the wall to the ball.

            However, the wall is a line segment. The normal for collision is perpendicular to the edge and pointing outward? Actually, we can compute the normal as the vector from P to C, but if the ball is inside the heptagon, then we want the normal pointing inward? 

        Actually, the heptagon is a container. The balls are inside. So we want to prevent the balls from going outside? Or the heptagon is the boundary and the balls bounce on the inner walls.

        We'll assume the heptagon is fixed and the balls are inside. Then the collision happens when the ball is too close to an edge from the inside.

        How to compute the closest point on the edge and the normal?

            Let A and B be the two vertices.
            Let AP = C - A, AB = B - A.
            Let t = dot(AP, AB) / dot(AB, AB)
            t = clamp(t, 0, 1)
            P = A + t * AB
            normal = C - P -> but this vector points from the edge to the ball. We want the normal pointing outward? Actually, for the collision response we need the normal pointing from the wall into the heptagon (so that when the ball hits, we push it inward). 

            Actually, the wall normal (outward) would be perpendicular to AB and pointing away from the center? But we don't have that. Instead, we can compute the normal as the vector from P to C, but if the ball is inside, then the vector from P to C is pointing outward? 

            Actually, we want the normal pointing from the collision point toward the ball? That is the direction we need to reflect.

            Alternatively, we can define the wall normal as the vector perpendicular to AB and pointing inward? How? We can compute the inward normal for the edge in the heptagon? Since the heptagon is regular, we can precompute the inward normals for each edge.

        Precomputation for heptagon:
            The inward normal for an edge is the vector perpendicular to the edge and pointing toward the center? Actually, it's the vector from the midpoint of the edge toward the center? 

            We can precompute the normals for each edge in the heptagon's local space (without rotation). Then when the heptagon rotates, we rotate the normal by the same angle.

        Steps:
            Precompute the vertices and normals for the heptagon in local space (at angle 0).
            Then for the current frame, rotate each vertex and each normal by the current angle.

        Then for each edge, we have:
            A, B: the endpoints (rotated)
            N: the inward normal (rotated) -> unit vector.

        Then for a ball at C, we can compute the distance from the ball to the edge as:
            d = (C - A) · N   [because N is inward normal and unit vector]
            But note: this gives the distance from the ball to the infinite line. We also need to check if the projection is between A and B.

        Alternatively, we can use the projection method above to get P and then compute the distance |PC|. Then the collision condition is |PC| < ball_radius.

        And the normal for collision is then (C - P).normalize(). But note: if the ball is inside, then (C - P) points outward? Actually, no: if the ball is inside, then P is on the edge and C is inside, so (C - P) points outward? That's the opposite of what we want. We want the normal pointing inward? 

        Actually, for the collision response, we want the normal pointing from the collision point toward the inside of the heptagon (so that we push the ball inward). Therefore, we should use the inward normal N we precomputed? 

        How about: 
            We compute the distance to the infinite line: d = (C - A) · N. This d is positive if the ball is inside? Actually, if N points inward, then d is positive when the ball is inside? 

        But note: the inward normal points from the wall to the center. So the half-plane defined by the wall is: (X - A) · N >= 0 for inside.

        So if the ball is inside, then (C - A) · N >= 0? Actually, no: if the ball is inside, then the vector from A to C projected on N should be positive? 

        Actually, the inward normal points inward. So the inside of the heptagon is in the direction of N. Therefore, the distance d = (C - A) · N is the distance from the ball to the wall in the inward direction? 

        Then if d < ball_radius, then the ball is penetrating the wall? Actually, no: if the ball is exactly at the wall, d=0. If the ball is inside, d>0? Then we want to check when d < ball_radius? That doesn't seem right.

        Actually, we want to check when the ball is too close to the wall from the inside? Then we want to know when the distance from the ball to the wall is less than the ball radius? The distance from the ball to the wall is d (which is positive when inside). But if the ball is outside, then d would be negative? Then we don't care. So we only check when d < ball_radius and d > 0? Actually, no: if the ball is inside, d is positive and we want to bounce when d < ball_radius.

        However, note: d is the distance from the ball to the infinite line. We also need to check that the projection of C onto the edge is between A and B.

        So steps for one edge:
            Let v = C - A
            Let t = dot(v, AB) / |AB|^2
            If t < 0, then closest point is A -> then we check distance to A.
            If t > 1, then closest point is B -> then we check distance to B.
            Else, closest point is A + t * AB, and the distance to the edge is |v - t * AB| -> but note, the distance to the infinite line is |v - (v·N)*N|? Actually, we have the normal method.

        Actually, we can do:

            Let d = (C - A) · N   [this is the distance from C to the infinite line? Actually, no: the distance is |d|? And the sign tells the side?]

        We'll do:

            Let dist = (C - A) · N   [this is the signed distance: positive if inside, negative if outside]
            We want to consider collision only when the ball is inside and the distance is less than the ball radius? Actually, no: if the ball is inside and dist < ball_radius, that means the ball is penetrating? Actually, if the ball is inside, dist is positive and the ball is away from the wall by dist. So when dist < ball_radius, then the ball is touching the wall? 

        Actually, we want to bounce when the ball is too close to the wall: when the distance from the ball to the wall (which is dist) is less than the ball radius? Then the penetration depth is ball_radius - dist.

        But note: we also need to check that the projection is within the segment. We can do:

            Let v = C - A
            Let t = dot(v, AB) / |AB|^2
            If t >=0 and t<=1, then we use the distance dist = (C - A) · N -> and if dist < ball_radius, then collision.

            If t < 0, then we are closer to A -> then we check the distance from C to A.
            If t > 1, then we check distance from C to B.

        So we break the edge collision into two parts: the edge itself and the vertices.

        Actually, we can treat the entire heptagon as a convex polygon and check the distance to each edge and also to the vertices? But that is expensive.

        Alternatively, we can approximate by only checking the edge and ignore the vertices? Or we can check the vertices separately? 

        Since the heptagon is convex, we can check the distance to each edge and also the distance to each vertex? But note: the ball might collide with a vertex even if it's not close to an edge? 

        We'll do:

            For each edge:
                Let A = vertices[i], B = vertices[i+1]
                Let AB = B - A
                Let v = C - A
                Let t = dot(v, AB) / dot(AB, AB)
                t = Math.max(0, Math.min(1, t))
                Let P = A + t * AB
                Let dist = distance(C, P)

                if (dist < ball_radius) {
                    // collision at point P
                    // normal = (C - P).normalize() -> but note: this points from P to C, which is outward? But we want inward? 
                    // Actually, we want the normal pointing from the collision point into the heptagon? 
                    // However, the ball is inside and hitting the wall, so we want to push it inward. Therefore, the normal should be the inward normal? But the inward normal we precomputed is for the entire edge? 

                    // Instead, we can use the normal we precomputed for the edge? That might be faster and consistent.

                    // Let's use the precomputed inward normal for the edge? Then we can avoid recalculating the normal for each point.

                    // But note: the normal we precomputed is perpendicular to the edge and pointing inward. It is the same for the entire edge.

                    // Then we can compute the penetration depth as: (ball_radius - dist) and then adjust the position and velocity.

                    // However, the collision point P might not be exactly aligned with the normal? But it's an approximation.

                    // Alternatively, we can use the exact normal (C - P).normalize()? But that normal might not be perpendicular to the edge? It is perpendicular only if the ball is hitting the edge orthogonally? 

                    // Actually, the normal (C - P) is perpendicular to the tangent at P? Only if the edge is straight? 

                    // Since the edge is straight, the normal at P is indeed perpendicular to AB. So we can compute the normal as: 
                    //   normal = (C - P).normalize()
                    // But note: if the ball is inside, then (C - P) points outward? So we want the opposite? 

                    // Actually, the normal for the wall should be pointing inward? So we should use:
                    //   normal = (P - C).normalize()? -> that points from the ball to the wall? Then we reflect the velocity relative to the wall.

                    // How about: 
                    //   Let normal = (P - C).normalize()   [points from the ball to the collision point?] -> no, it points from C to P? 

                    // Actually: 
                    //   Let n = (P - C).normalize()   -> points from C to P? Then that is outward? 
                    //   But we want the normal pointing from the wall into the heptagon? That would be the opposite: (C - P).normalize()? 

                    // Clarify: 
                    //   The wall normal (inward) is a vector that points from the wall into the heptagon. So at point P, the inward normal is (C - P).normalize()? Not exactly: because C is the ball center, which is inside, so (C - P) points from the wall to the ball? That is inward? 

                    // Therefore, we can use: 
                    //   normal = (C - P).normalize()   -> inward normal? 

                    // But note: if the ball is exactly on the wall, then (C - P) is perpendicular to the wall and pointing inward? 

                    // So we'll use: normal = (C - P).normalize()   [inward]

                }

        However, note: the wall is moving. The point P has a velocity: v_p = angular_velocity * (P - center).cross(k) [but in 2D: v_p = { x: -angular_velocity * (P.y - center.y), y: angular_velocity * (P.x - center.x) } ]

        Then the relative velocity of the ball with respect to the wall at P is: v_ball - v_p.

        Then we compute the collision response on the relative velocity: 
            Let v_rel = v_ball - v_p
            Let v_normal = dot(v_rel, normal) * normal
            Let v_tangent = v_rel - v_normal
            After collision: v_normal_new = -restitution * v_normal
            Then the new relative velocity is: v_rel_new = v_normal_new + friction * v_tangent   [friction might reduce the tangential part?]

            Then the new absolute velocity of the ball is: v_ball_new = v_rel_new + v_p

        And we update the ball's velocity.

        Also, we adjust the position to avoid overlap: 
            ball.position = P + normal * ball_radius

        But note: we are in a discrete time step, so we might need to backtrack the ball to the point of collision? That is complex.

        We'll do a simple method: adjust position and then update velocity.

   Due to complexity, we might simplify the collision response and not account for the moving wall? But then the balls won't get the tangential push from the wall.

   Given time, we'll do the moving wall.

 Implementation:

   We'll create:
     - A Ball class: position (x,y), velocity (vx,vy), radius, number (1-20), rotation (angle of the number), angularVelocity.
     - A Heptagon class: center (cx,cy), radius (circumradius), rotation (current angle in radians), angularVelocity (2*Math.PI/5000 per millisecond? we'll use per frame? Actually, we'll use time-based).

   We'll use a time step per frame? We can use the time elapsed between frames.

   Steps in the animation loop:

        let currentTime = Date.now();
        let dt = (currentTime - lastTime) / 1000;   // in seconds
        lastTime = currentTime;

        // Update heptagon rotation: angle += angularVelocity * dt
        // angularVelocity = 2*Math.PI / 5   (per second)

        // Update balls: 
          for each ball:
            ball.vy += gravity * dt;   // gravity is downward, so positive y direction? but in canvas, y increases downward.
            ball.vx *= friction;   // friction per second? but we do per frame: friction = Math.pow(frictionFactor, dt)
            ball.vy *= friction;
            ball.x += ball.vx * dt;
            ball.y += ball.vy * dt;

            // Also update rotation: ball.rotation += ball.angularVelocity * dt;

        // Then collision detection and response.

   We'll precompute the heptagon vertices and normals at angle 0:

        let vertices = [];
        let normals = [];   // inward normals for each edge (unit vectors)
        let n = 7;
        for (let i = 0; i < n; i++) {
            let angle = i * 2 * Math.PI / n;
            let x = centerX + radius * Math.cos(angle);
            let y = centerY + radius * Math.sin(angle);
            vertices.push({x, y});
        }

        // For normals: for each edge, the inward normal is perpendicular to the edge and pointing inward? 
        // How to compute: 
        //   Let A = vertices[i], B = vertices[(i+1)%n]
        //   Let edge = {x: B.x - A.x, y: B.y - A.y}
        //   The inward normal is: rotate the edge vector by 90 degrees clockwise? and normalize? 
        //   But note: clockwise rotation: (x,y) -> (y, -x) -> but that would be outward? 
        //   Actually, we want inward: so we rotate counterclockwise: (x,y) -> (-y, x) -> then normalize? 
        //   Then check: the vector from A to center is roughly in the direction of the inward normal? 

        // Alternatively, we can compute the normal by: 
        //   normal = { x: -(B.y - A.y), y: B.x - A.x } -> then normalize? 
        //   But that is perpendicular and pointing to the left of the edge? 
        //   Then we check the dot product with the vector from A to center: 
        //        center - A = (centerX - A.x, centerY - A.y)
        //        dot(normal, center - A) should be positive? 

        // Actually, we can compute the inward normal by: 
        //   normal = { x: A.y - B.y, y: B.x - A.x } -> then normalize? 
        //   But that is the same as: perpendicular to (B-A) and pointing ... let me see: 
        //        edge = B - A = (dx, dy)
        //        normal = (-dy, dx) -> that is 90 degrees counterclockwise -> which points to the left of the edge. 
        //   For the heptagon, the inward side is to the left? 

        // Since the heptagon is drawn counterclockwise? Actually, we built it counterclockwise: from 0 to 2*pi/n, etc. 
        // So the inward normal would be: 
        //        normal = { x: -dy, y: dx } -> normalized? 
        //   But wait: if we have an edge from A to B, then the vector from A to B is (dx,dy). The vector (-dy,dx) is perpendicular and points to the left. For a counterclockwise polygon, the left is inward? 

        // Therefore, we compute:
        //   dx = B.x - A.x
        //   dy = B.y - A.y
        //   normal = { x: -dy, y: dx } -> then normalize -> that is inward.

        // But note: we want a unit vector.

   Then, in each frame, we rotate the vertices and normals by the current heptagon angle.

        for (let i=0; i<n; i++) {
            let vertex = verticesLocal[i];
            let x = vertex.x - centerX;
            let y = vertex.y - centerY;
            let rotatedX = x * Math.cos(heptagonAngle) - y * Math.sin(heptagonAngle);
            let rotatedY = x * Math.sin(heptagonAngle) + y * Math.cos(heptagonAngle);
            verticesWorld[i] = { x: rotatedX + centerX, y: rotatedY + centerY };
        }

        Similarly for normals? Actually, normals are vectors, so we rotate them without translation:

        for (let i=0; i<n; i++) {
            let normal = normalsLocal[i];
            let rotatedX = normal.x * Math.cos(heptagonAngle) - normal.y * Math.sin(heptagonAngle);
            let rotatedY = normal.x * Math.sin(heptagonAngle) + normal.y * Math.cos(heptagonAngle);
            normalsWorld[i] = { x: rotatedX, y: rotatedY };
        }

   Then we do ball-ball collisions and ball-wall collisions.

   We'll set up:

        const gravity = 0.5;   // in pixels per second squared? but we use dt so adjust accordingly.
        const frictionFactor = 0.99;   // per second? we'll apply per frame: v *= Math.pow(frictionFactor, dt)
        const restitution = 0.8;   // for collisions

   Due to the complexity, we'll start with a basic structure and then build.

   We'll write the entire code in one HTML file.

   Note: We must draw the heptagon and the balls. For each ball, we draw a circle and then the number rotated by ball.rotation.

   We'll use:

        ctx.save();
        ctx.translate(ball.x, ball.y);
        ctx.rotate(ball.rotation);
        ctx.fillText(ball.number, 0, 0);
        ctx.restore();

   We'll set the canvas to full window, so we need to handle resize.

   Let's code step by step.

   IMPORTANT: We are writing everything in one file: index.html.

   Structure:

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body { margin:0; overflow: hidden; }
                canvas { display: block; }
            </style>
        </head>
        <body>
            <canvas id="canvas"></canvas>
            <script>
                // ... entire JavaScript code ...
            </script>
        </body>
        </html>

   We'll write the JavaScript code in the script tag.

   Due to the complexity, we'll break the code into sections.

   Note: This is a big simulation. We might need to optimize collision detection (use spatial partitioning? but 20 balls is small).

   Let's code.