请生成一个单文件 HTML/CSS/JavaScript 的椭圆闯关解谜游戏，名称为「椭圆密室 · 光之迷宫」。游戏以密室逃脱为背景，学生通过调整椭圆镜面的几何参数，利用椭圆的光学反射性质，让激光从激光炮射出后经椭圆反射精准命中密码锁，从而解锁下一关。一、核心玩法与物理机制
-
椭圆有两个焦点，从其中一个焦点射出的任意方向光线，经椭圆内壁反射后必经过另一个焦点。 -
激光炮固定于场景中，发射红色激光。玩家可调整椭圆的位置、旋转角度、半长轴 a、半短轴 b，以及激光炮的瞄准方向。 -
激光与椭圆求交后按反射定律反弹，可多次反射（最多 8 次）。若激光击中密码锁圆形区域，则过关。 -
椭圆焦距满足 c = √(a² − b²)，面板需实时显示焦距 2c。 -
场景中可放置矩形障碍物，激光碰到障碍物即被吸收，无法继续前进。
二、关卡设计（共 5 关）
-
-
第 1 关 · 初识焦点：激光炮与密码锁水平放置，椭圆初始角度倾斜，引导玩家将两个焦点分别对准激光炮和密码锁。 -
-
第 2 关 · 旋转镜面：激光炮与密码锁不在同一水平线，需旋转椭圆长轴方向使焦点连线对准二者。 -
-
第 3 关 · 改变焦距：调整 a、b 使焦距 2c 等于激光炮到密码锁的距离。 -
-
第 4 关 · 障碍迷宫：加入一个矩形能量块阻挡直线路径，玩家需改变瞄准方向绕开障碍物。 -
-
第 5 关 · 终极密室：加入两个矩形能量块，封锁直线路径，需综合运用椭圆光学性质通关。
每关需显示关卡名称和简短描述，描述中可包含数学公式提示。
三、视觉风格
-
整体底色纯白色（#ffffff），主题色以浅蓝色（#2f8bff / #5aa7ff）和红色（#e63946）为主。 -
画布内部逻辑分辨率 960×540，严格 16:9 比例。 -
椭圆填充浅蓝径向渐变，边框浅蓝发光；焦点为红色脉冲圆点，外圈浅蓝描边；长轴用浅蓝虚线表示。 -
激光为红色实线，叠加白色流动虚线光点；激光炮红色炮管配浅蓝底座；密码锁红色圆形加锁体，解锁后变浅蓝。 -
障碍物为浅蓝填充矩形，带斜纹纹理和浅蓝边框。 -
背景为白色，叠加淡浅蓝网格和边缘浅蓝晕染。
四、布局与左右比例 -
采用左右布局：左侧为画布舞台，右侧为控制面板。 -
整体使用 Grid 布局： grid-template-columns: minmax(0,1fr) 380px，最大宽度 1760px 居中。 -
左侧画布自适应剩余空间，保持 16:9 比例，最大宽高不溢出，圆角 14px，浅蓝阴影。 -
右侧面板固定宽度 380px，背景 #f7fbff，左边框 1px #dceaf8，内部可滚动。 -
响应式：≤1280px 时面板宽度改为 340px；≤960px 时改为上下布局，画布占 54vh，面板占 46vh。
五、交互控件 -
右侧面板包含： -
旋转角度 θ 滑块（0°–180°，步长 0.5°） -
半长轴 a 滑块（160–460，步长 1） -
半短轴 b 滑块（60–460，步长 1，且自动限制 b ≤ a） -
瞄准方向滑块（0°–360°，步长 1°） -
实时读数：焦距 2c、状态（待机/未命中/命中/已解锁） -
「重置本关」按钮 -
画布内可直接拖动椭圆移动位置（限制在画布边界内）。 -
过关后弹出遮罩卡片，显示「密码锁已解锁」和「进入下一关」按钮。最后一关按钮显示「重新挑战」。
六、技术实现要点 -
使用 Canvas 2D 绘制所有图形，requestAnimationFrame 主循环。 -
射线与椭圆求交：将射线变换到椭圆局部坐标系，解二次方程，取最近正根。 -
反射计算：利用椭圆隐式方程求交点处法线，按反射公式 d' = d − 2(d·n)n 计算新方向。 -
射线与圆求交用于密码锁碰撞检测；射线与轴对齐矩形求交用于障碍物。 -
每次更新时追踪激光路径，存储线段用于绘制；若命中密码锁则触发过关。 -
所有滑块事件实时更新状态和读数。 -
代码为单文件，无外部依赖，直接运行。
请严格按以上要求生成完整的 HTML 文件。