// ui.jsx — React UI surfaces: HUD, SidePanel, screens, overlays
const { useState, useEffect, useRef, useMemo } = React;

const DIFF_META = {
  1: { name: "入门",  age: "3–5 岁",  icon: "🐣", color: "#059669", bg: "rgba(16,185,129,0.22)", border: "rgba(16,185,129,0.9)", glow: "rgba(16,185,129,0.35)" },
  2: { name: "进阶",  age: "6–8 岁",  icon: "🌟", color: "#d97706", bg: "rgba(245,158,11,0.22)", border: "rgba(245,158,11,0.9)", glow: "rgba(245,158,11,0.35)" },
  3: { name: "挑战",  age: "9–12 岁", icon: "🔥", color: "#e11d48", bg: "rgba(244,63,94,0.22)",  border: "rgba(244,63,94,0.9)",  glow: "rgba(244,63,94,0.35)"  },
};

// ------------------------- HUD -------------------------
function HUD({ difficulty, operation, score, round, timeLeft, soundEnabled, onSoundToggle, onPause, paused }) {
  const m = Math.floor(timeLeft / 60).toString().padStart(2, "0");
  const s = (timeLeft % 60).toString().padStart(2, "0");
  const opSymbol = operation === "+" ? "+" : "−";
  const dm = DIFF_META[difficulty] || DIFF_META[2];

  return (
    <div className="bento" data-screen-label="HUD">
      <div className="glass hud-card" style={{ background: "rgba(255,255,255,0.62)" }}>
        <div className="hud-label">
          <Sparkle /> 难度 · LEVEL
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
          <span style={{ fontSize: 34, lineHeight: 1 }}>{dm.icon}</span>
          <div>
            <div className="hud-value-l" style={{ color: dm.color, lineHeight: 1.1 }}>{dm.name}</div>
            <div className="font-mono" style={{ fontSize: 11, color: "rgba(26,21,48,0.5)", marginTop: 3, letterSpacing: "0.06em" }}>{dm.age}</div>
          </div>
        </div>
      </div>

      <div className="glass-tight hud-card" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
        <div className="hud-label" style={{ alignSelf: "flex-start" }}>运算</div>
        <div className="op-big" style={{ marginTop: 4 }}>{opSymbol}</div>
      </div>

      <div className="glass-tight hud-card">
        <div className="hud-label"><Star /> 得分 · SCORE</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 6 }}>
          <span key={score} className="hud-value-l tabular score-bump" style={{ color: "#7c3aed" }}>{score}</span>
          <span className="font-mono" style={{ fontSize: 11, color: "rgba(26,21,48,0.5)" }}>pts</span>
        </div>
      </div>

      <div className="glass-tight hud-card">
        <div className="hud-label">回合</div>
        <div style={{ marginTop: 6 }}>
          <span className="pill"><Dot /> 第 {round} 轮</span>
        </div>
      </div>

      <div className="glass-tight hud-card">
        <div className="hud-label"><Clock /> 剩余时间</div>
        <div className="hud-value-mono tabular" style={{ marginTop: 6, color: timeLeft <= 10 ? "#ef4444" : "#1a1530" }}>
          {m}:{s}
        </div>
      </div>

      <div className="glass-tight hud-card" style={{ display: "flex", flexDirection: "column", gap: 6, padding: 10, alignItems: "center", justifyContent: "center" }}>
        <button className="icon-btn" onClick={onSoundToggle} title="音效">
          {soundEnabled ? <IconSpeaker on /> : <IconSpeaker />}
        </button>
        <button className="icon-btn" onClick={onPause} title={paused ? "继续" : "暂停"}>
          {paused ? <IconPlay /> : <IconPause />}
        </button>
      </div>
    </div>
  );
}

// ------------------------- SidePanel -------------------------
function SidePanel({ collected, target, operation, resultMsg, round, score }) {
  const slot1 = collected[0];
  const slot2 = collected[1];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div className="glass" style={{ padding: 20 }}>
        <div className="hud-label" style={{ marginBottom: 14 }}>
          <Crosshair /> 当前收集 · COLLECTED
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: "center", padding: "4px 0 6px" }}>
          <CollectedSlot value={slot1} />
          <span style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 32, color: "rgba(124,58,237,0.55)" }}>
            {operation === "+" ? "+" : "−"}
          </span>
          <CollectedSlot value={slot2} />
          <span style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 32, color: "rgba(124,58,237,0.55)" }}>=</span>
          <div className="slot filled" style={{
            "--slot-c": "#fbbf24",
            "--slot-c-shadow": "rgba(251,191,36,0.55)",
            width: 76, height: 76, fontSize: 30
          }}>
            {target}
          </div>
        </div>

        <div className="divider" />

        <div style={{ minHeight: 56, display: "flex", alignItems: "center", justifyContent: "center" }}>
          {resultMsg ? (
            <div className="spring-in" style={{
              padding: "10px 16px",
              borderRadius: 14,
              background: resultMsg.isCorrect ? "rgba(16,185,129,0.16)" : "rgba(244,63,94,0.16)",
              color: resultMsg.isCorrect ? "#047857" : "#be123c",
              border: `1px solid ${resultMsg.isCorrect ? "rgba(16,185,129,0.3)" : "rgba(244,63,94,0.3)"}`,
              fontFamily: "Space Mono", fontWeight: 700, fontSize: 16,
              display: "flex", alignItems: "center", gap: 10,
            }}>
              {resultMsg.isCorrect ? <Check /> : <Cross />}
              <span>{resultMsg.equation}</span>
            </div>
          ) : (
            <div style={{ fontFamily: "Space Mono", fontSize: 12, color: "rgba(26,21,48,0.45)", textAlign: "center" }}>
              收集两个气泡，使它们 {operation === "+" ? "相加" : "相减的绝对值"} 等于 <strong style={{ color: "#7c3aed" }}>{target}</strong>
            </div>
          )}
        </div>
      </div>

      <div className="sticky">
        <h4>⌨️ 操作说明</h4>
        <ul>
          <li><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> <span>控制蛇方向</span></li>
          <li><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> <span>同上</span></li>
          <li><kbd>Space</kbd> <span>暂停 / 继续</span></li>
          <li><kbd>R</kbd> <span>重新开始</span></li>
          <li><kbd>C</kbd> <span>撤销上一步</span></li>
        </ul>
      </div>

      <div className="glass-tight" style={{ padding: 14, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div className="hud-label" style={{ marginBottom: 4 }}>本局战绩</div>
          <div style={{ fontFamily: "Space Grotesk", fontWeight: 700, fontSize: 14, color: "#1a1530" }}>
            <span style={{ color: "#7c3aed" }}>{score}</span> 分 / {round} 轮
          </div>
        </div>
        <div style={{ display: "flex", gap: -4 }}>
          {[0,1,2,3,4].map(i => (
            <div key={i} style={{
              width: 10, height: 10, borderRadius: 99,
              background: i < Math.min(5, score) ? "#a855f7" : "rgba(124,58,237,0.18)",
              marginLeft: i === 0 ? 0 : 4,
              boxShadow: i < Math.min(5, score) ? "0 0 8px rgba(168,85,247,0.6)" : "none",
            }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function CollectedSlot({ value }) {
  if (value == null) {
    return <div className="slot empty">?</div>;
  }
  const [fill, glow] = window.colorForValue(value);
  return (
    <div className="slot filled" style={{ "--slot-c": fill, "--slot-c-shadow": glow + "88" }}>
      {value}
    </div>
  );
}

// ------------------------- StartScreen -------------------------
function StartScreen({ onStart }) {
  const [custom, setCustom] = useState("");
  const [difficulty, setDifficulty] = useState(2);
  const presets = [
    { secs: 60,  label: "1", note: "迷你局", cls: "p1", icon: "⚡" },
    { secs: 180, label: "3", note: "经典局", cls: "p3", icon: "🌀" },
    { secs: 300, label: "5", note: "进阶局", cls: "p5", icon: "💪" },
    { secs: 600, label: "10", note: "马拉松", cls: "p10", icon: "🚀" },
  ];

  const customNum = parseInt(custom, 10);
  const customValid = !isNaN(customNum) && customNum >= 1 && customNum <= 60;

  return (
    <div className="modal-overlay" data-screen-label="01 Start">
      <div className="glass-deep spring-in" style={{ width: 720, padding: "44px 48px", zoom: 0.6 }}>
        {/* Brand badge */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
          <SnakeBadge />
          <div style={{ fontFamily: "Space Mono", fontSize: 12, color: "rgba(26,21,48,0.55)", letterSpacing: "0.2em" }}>
            NUMBER · SNAKE · v1.0
          </div>
          <div style={{ marginLeft: "auto" }} className="pill pill-emerald">
            <Dot /> 适合 3–12 岁
          </div>
        </div>

        <div style={{ textAlign: "center", marginBottom: 28 }}>
          <h1 className="font-display grad-text" style={{ fontSize: 88, margin: 0, lineHeight: 0.92 }}>
            数字贪吃蛇
          </h1>
          <p className="font-mono" style={{ marginTop: 12, color: "rgba(26,21,48,0.55)", fontSize: 14, letterSpacing: "0.05em" }}>
            COLLECT · ADD · SUBTRACT · LEARN
          </p>
        </div>

        {/* Rule chips */}
        <div style={{ display: "flex", justifyContent: "center", gap: 10, flexWrap: "wrap", marginBottom: 28 }}>
          <RuleChip icon="①" text="收集两个气泡" />
          <RuleChip icon="②" text="加减结果 = 目标数字" />
          <RuleChip icon="③" text="撞墙不会死哦" />
        </div>

        {/* Difficulty selector */}
        <div className="hud-label" style={{ marginBottom: 12 }}>
          <Star /> 选择难度
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 28 }}>
          {[1, 2, 3].map(d => {
            const dm = DIFF_META[d];
            const active = difficulty === d;
            return (
              <button key={d} onClick={() => setDifficulty(d)} style={{
                borderRadius: 20,
                padding: "18px 16px 16px",
                border: `2px solid ${active ? dm.border : "rgba(255,255,255,0.6)"}`,
                background: active ? dm.bg : "rgba(255,255,255,0.45)",
                cursor: "pointer",
                textAlign: "left",
                transition: "all 200ms cubic-bezier(0.34,1.56,0.64,1)",
                boxShadow: active ? `0 8px 24px ${dm.glow}, inset 0 0 0 1px rgba(255,255,255,0.6)` : "none",
                transform: active ? "translateY(-3px)" : "none",
              }}>
                <div style={{ fontSize: 28, marginBottom: 8, lineHeight: 1 }}>{dm.icon}</div>
                <div style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 22,
                              color: active ? dm.color : "#1a1530", letterSpacing: "-0.02em", lineHeight: 1 }}>
                  {dm.name}
                </div>
                <div style={{ fontFamily: "Space Mono", fontSize: 11, color: "rgba(26,21,48,0.55)", marginTop: 4 }}>
                  {dm.age}
                </div>
                <div style={{ fontFamily: "Space Grotesk", fontSize: 12, color: "rgba(26,21,48,0.5)", marginTop: 6, fontWeight: 500 }}>
                  {d === 1 ? "只有加法 · 1–5" : d === 2 ? "加减法 · 1–10" : "加减法 · 1–20"}
                </div>
              </button>
            );
          })}
        </div>

        {/* Duration presets */}
        <div className="hud-label" style={{ marginBottom: 12 }}>
          <Clock /> 选择游戏时长
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 20 }}>
          {presets.map(p => (
            <button key={p.secs} className={`preset ${p.cls}`} onClick={() => onStart(p.secs, difficulty)}>
              <div className="preset-icon">{p.icon}</div>
              <div className="preset-num">{p.label}<span style={{ fontSize: 15, fontWeight: 700, letterSpacing: 0, marginLeft: 3, opacity: 0.8 }}>分钟</span></div>
              <div className="preset-unit">{p.note}</div>
            </button>
          ))}
        </div>

        {/* Custom input */}
        <div style={{ display: "flex", gap: 10, alignItems: "stretch" }}>
          <div style={{ flex: 1, position: "relative" }}>
            <input
              className="glass-input"
              type="number" min="1" max="60"
              placeholder="自定义时长（1-60 分钟）"
              value={custom}
              onChange={(e) => setCustom(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter" && customValid) onStart(customNum * 60, difficulty); }}
            />
            <span style={{ position: "absolute", right: 18, top: "50%", transform: "translateY(-50%)", fontFamily: "Space Mono", fontSize: 12, color: "rgba(26,21,48,0.45)" }}>
              分钟
            </span>
          </div>
          <button
            className="btn btn-primary"
            disabled={!customValid}
            style={{ opacity: customValid ? 1 : 0.4, paddingLeft: 30, paddingRight: 30 }}
            onClick={() => customValid && onStart(customNum * 60, difficulty)}
          >
            开始游戏 →
          </button>
        </div>
      </div>
    </div>
  );
}

function RuleChip({ icon, text }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "8px 14px",
      borderRadius: 999,
      background: "rgba(255,255,255,0.5)",
      border: "1px solid rgba(255,255,255,0.7)",
      fontSize: 13, fontWeight: 600,
      color: "rgba(26,21,48,0.75)",
    }}>
      <span style={{
        width: 20, height: 20, borderRadius: 99,
        background: "linear-gradient(135deg, #a855f7, #ec4899)",
        color: "#fff", fontSize: 11, fontWeight: 900,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}>{icon}</span>
      {text}
    </div>
  );
}

// ------------------------- Pause Overlay -------------------------
function PauseOverlay({ onResume, onRestart, onQuit }) {
  return (
    <div className="overlay" data-screen-label="03 Paused">
      <div className="glass-deep spring-in" style={{ padding: 36, textAlign: "center", width: 420 }}>
        <div className="font-display grad-text" style={{ fontSize: 72, lineHeight: 1 }}>PAUSED</div>
        <div className="font-mono" style={{ color: "rgba(26,21,48,0.55)", fontSize: 13, letterSpacing: "0.15em", marginTop: 6 }}>
          PRESS SPACE TO RESUME
        </div>
        <div style={{ display: "flex", gap: 10, justifyContent: "center", marginTop: 24 }}>
          <button className="btn btn-primary" onClick={onResume}>▶ 继续</button>
          <button className="btn" onClick={onRestart}>↻ 重玩</button>
          <button className="btn btn-ghost" onClick={onQuit}>✕ 退出</button>
        </div>
      </div>
    </div>
  );
}

// ------------------------- Result toast (2s) -------------------------
function ResultOverlay({ equation, isCorrect }) {
  return (
    <div className="overlay" data-screen-label="04 Result">
      <div className={`result-toast ${isCorrect ? "correct" : "wrong"} spring-in`}>
        <span>{isCorrect ? "✓" : "✗"}</span>
        <span>{equation}</span>
        <span className="eq-tag">{isCorrect ? "+1 SCORE" : "TRY AGAIN"}</span>
      </div>
    </div>
  );
}

// ------------------------- Game Over Modal -------------------------
function GameOverModal({ score, round, onRestart, onHome, totalSeconds }) {
  // accuracy = score / round (correct rounds / total rounds attempted)
  const acc = round > 0 ? Math.min(100, Math.round((score / round) * 100)) : 0;
  const grade = score >= 15 ? "S" : score >= 10 ? "A" : score >= 5 ? "B" : "C";
  const gradeColor = grade === "S" ? "#10b981" : grade === "A" ? "#22c55e" : grade === "B" ? "#facc15" : "#f87171";
  const scoreColor = score >= 10 ? "#10b981" : score >= 5 ? "#facc15" : "#f87171";

  return (
    <div className="modal-overlay" data-screen-label="05 Game Over">
      <div className="glass-deep spring-in" style={{ width: 540, padding: 40, textAlign: "center", position: "relative", overflow: "hidden" }}>
        {/* Confetti dots */}
        <div style={{ position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.5 }}>
          {[...Array(14)].map((_, i) => (
            <span key={i} style={{
              position: "absolute",
              left: `${(i*73)%100}%`,
              top: `${(i*37)%80}%`,
              width: 8, height: 8, borderRadius: 4,
              background: ["#a855f7","#38bdf8","#fbbf24","#f472b6","#10b981"][i%5],
              transform: `rotate(${i*30}deg)`,
              opacity: 0.6,
            }} />
          ))}
        </div>

        <div className="pill pill-amber" style={{ position: "relative" }}>🏆 游戏结束</div>

        <div style={{ marginTop: 18, marginBottom: 6, fontFamily: "Space Mono", fontSize: 12, color: "rgba(26,21,48,0.5)", letterSpacing: "0.2em" }}>
          FINAL SCORE
        </div>
        <div style={{ position: "relative", display: "flex", justifyContent: "center", alignItems: "baseline", gap: 16 }}>
          <span className="font-display tabular" style={{ fontSize: 140, color: scoreColor, lineHeight: 1, letterSpacing: "-0.05em" }}>
            {score}
          </span>
          <div style={{ textAlign: "left" }}>
            <div style={{ fontFamily: "Space Mono", fontSize: 11, color: "rgba(26,21,48,0.5)", letterSpacing: "0.15em" }}>GRADE</div>
            <div className="font-display" style={{ fontSize: 56, color: gradeColor, lineHeight: 1 }}>{grade}</div>
          </div>
        </div>

        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 22 }}>
          <div className="glass-tight" style={{ padding: "12px 18px", textAlign: "center" }}>
            <div style={{ fontFamily: "Space Mono", fontSize: 10, color: "rgba(26,21,48,0.5)", letterSpacing: "0.15em" }}>ROUNDS</div>
            <div style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 28 }}>{round}</div>
          </div>
          <div className="glass-tight" style={{ padding: "12px 18px", textAlign: "center" }}>
            <div style={{ fontFamily: "Space Mono", fontSize: 10, color: "rgba(26,21,48,0.5)", letterSpacing: "0.15em" }}>ACCURACY</div>
            <div style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 28 }}>{acc}%</div>
          </div>
          <div className="glass-tight" style={{ padding: "12px 18px", textAlign: "center" }}>
            <div style={{ fontFamily: "Space Mono", fontSize: 10, color: "rgba(26,21,48,0.5)", letterSpacing: "0.15em" }}>TIME</div>
            <div style={{ fontFamily: "Space Grotesk", fontWeight: 900, fontSize: 28 }}>{Math.floor(totalSeconds/60)}<span style={{ fontSize: 14 }}>min</span></div>
          </div>
        </div>

        <div style={{ marginTop: 24, marginBottom: 6, fontFamily: "Space Mono", fontSize: 11, color: "rgba(26,21,48,0.55)", letterSpacing: "0.1em" }}>
          ACCURACY · {acc}%
        </div>
        <div className="progress" style={{ marginBottom: 26 }}>
          <span style={{ width: `${Math.max(4, acc)}%` }} />
        </div>

        <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
          <button className="btn btn-primary" onClick={onRestart} style={{ paddingLeft: 28, paddingRight: 28 }}>
            ↻ 再来一局
          </button>
          <button className="btn" onClick={onHome}>← 回主菜单</button>
        </div>
      </div>
    </div>
  );
}

// ------------------------- Footer hints -------------------------
function FooterHints({ phase }) {
  return (
    <div className="kbd-row" style={{ padding: "0 6px" }}>
      <span><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> 控制方向</span>
      <span style={{ opacity: 0.5 }}>•</span>
      <span><kbd>Space</kbd> 暂停</span>
      <span style={{ opacity: 0.5 }}>•</span>
      <span><kbd>R</kbd> 重玩</span>
      <span style={{ opacity: 0.5 }}>•</span>
      <span><kbd>M</kbd> 静音</span>
      <span style={{ opacity: 0.5 }}>•</span>
      <span><kbd>C</kbd> 撤销</span>
      <span style={{ marginLeft: "auto", fontFamily: "Space Mono", fontSize: 11, opacity: 0.55 }}>
        触屏：在画布上滑动 →
      </span>
    </div>
  );
}

// ------------------------- Icons -------------------------
function Sparkle() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10 Z" fill="currentColor" opacity="0.7"/></svg>; }
function Star() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 l3 7 7 1 -5 5 1 7 -6-3 -6 3 1-7 -5-5 7-1z"/></svg>; }
function Clock() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>; }
function Crosshair() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/></svg>; }
function Dot() { return <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 99, background: "currentColor" }} />; }
function Check() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg>; }
function Cross() { return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M6 6l12 12M18 6L6 18"/></svg>; }
function IconPause() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>; }
function IconPlay() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5 L19 12 L7 19 Z"/></svg>; }
function IconSpeaker({ on }) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
      <path d="M4 9v6h4l5 4V5L8 9H4z" fill="currentColor"/>
      {on ? <><path d="M16 8c1.5 1.5 1.5 6.5 0 8"/><path d="M19 5c3 3 3 11 0 14"/></> : <path d="M16 9l5 6M21 9l-5 6"/>}
    </svg>
  );
}
function SnakeBadge() {
  return (
    <div style={{
      width: 44, height: 44, borderRadius: 14,
      background: "linear-gradient(135deg, #a855f7, #ec4899)",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 8px 20px rgba(168,85,247,0.4)",
    }}>
      <svg width="26" height="26" viewBox="0 0 32 32" fill="none">
        <circle cx="22" cy="10" r="6" fill="#fff"/>
        <circle cx="24" cy="9" r="1.5" fill="#1a1530"/>
        <path d="M16 10 Q8 10 8 18 Q8 26 16 26 Q24 26 24 18" stroke="#fff" strokeWidth="4" strokeLinecap="round" fill="none"/>
      </svg>
    </div>
  );
}

window.NS_UI = {
  HUD, SidePanel, StartScreen, PauseOverlay, ResultOverlay, GameOverModal, FooterHints
};