MiniMax M3.1 Flash

by MiniMaxReasoningClean

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 5 min 39 s
Cost: $0.035
Output tokens: 58,353
Spent thinking: 36,012 tokens
Speed: 172.6 tok/s
Console errors: 0

First token after: 528 ms
First visible text after: 4 min 22 s
Prompt tokens: 670
Code size: 65.6 KB
Finish reason: stop
Served by: Together
Model id: minimax/minimax-m3.1-flash
Reasoning sent: model default
Max output: 524,288 tokens
Generated: Nov 13, 2026

What it was asked

The prompt

Build a polished Breakout (brick breaker) game in a single HTML file using vanilla JavaScript and a <canvas>. Requirements: - A paddle controlled with the mouse and with the left/right arrow keys. - The bounce angle off the paddle depends on where the ball hits it (center = straight up, edges = sharp angle). - One level with at least 6 rows of bricks, mixing normal bricks and tougher bricks that need 2 hits and visibly crack after the first one. - Some bricks visibly carry a power-up icon; when broken they drop it, and catching it with the paddle gives either a wider paddle (10 seconds) or multi-ball (3 balls). - The ball must never pass through bricks or the paddle. - Particles when a brick breaks. - 3 lives, score displayed. Game over and victory screens with a restart option.

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 2133 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#070a14">
<title>Neon Breakout</title>
<style>
  :root {
    color-scheme: dark;
    --bg: #070a14;
    --panel: rgba(13, 18, 38, 0.82);
    --line: rgba(152, 187, 255, 0.14);
    --muted: #7f8cab;
    --text: #f5f8ff;
    --cyan: #45e6ff;
    --blue: #5687ff;
    --violet: #a46bff;
    --pink: #ff64bd;
    --green: #58efba;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  html, body { margin: 0; min-height: 100%; }

  body {
    overflow-x: hidden;
    color: var(--text);
    background:
      radial-gradient(circle at 14% 4%, rgba(69, 230, 255, 0.12), transparent 31%),
      radial-gradient(circle at 86% 13%, rgba(164, 107, 255, 0.14), transparent 34%),
      radial-gradient(circle at 50% 120%, rgba(255, 100, 189, 0.08), transparent 42%),
      #050711;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "tnum" 1, "ss01" 1;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
      linear-gradient(rgba(129, 170, 255, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(129, 170, 255, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 35%, #000, transparent 82%);
    -webkit-mask-image: radial-gradient(circle at 50% 35%, #000, transparent 82%);
  }

  .app {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0 14px;
  }

  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .brand-mark {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid rgba(89, 224, 255, 0.26);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(69, 230, 255, 0.12), rgba(164, 107, 255, 0.08));
    box-shadow: inset 0 0 22px rgba(69, 230, 255, 0.06), 0 0 24px rgba(69, 230, 255, 0.08);
  }

  .brand-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 9px;
  }

  .brand-mark i {
    position: absolute;
    left: 9px;
    height: 4px;
    border-radius: 4px;
    background: var(--cyan);
    box-shadow: 0 0 10px currentColor;
  }
  .brand-mark i:nth-child(1) { top: 11px; width: 22px; color: var(--cyan); }
  .brand-mark i:nth-child(2) { top: 19px; width: 17px; background: var(--violet); color: var(--violet); }
  .brand-mark i:nth-child(3) { top: 27px; width: 11px; background: var(--pink); color: var(--pink); }

  .brand-copy { min-width: 0; }

  .eyebrow {
    color: #70809f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .brand h1 {
    margin: 2px 0 0;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 900;
    white-space: nowrap;
  }

  .brand h1 span {
    color: transparent;
    background: linear-gradient(90deg, #fff 5%, #77eaff 55%, #b987ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
  }

  .hud {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }

  .stat {
    min-width: 82px;
    padding: 8px 12px 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  }

  .stat-label {
    display: block;
    margin-bottom: 3px;
    color: #7785a3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .stat strong {
    display: block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }

  .combo-stat strong { color: #aebbd5; }
  .combo-stat strong.hot { color: #ffd06c; text-shadow: 0 0 14px rgba(255, 208, 108, 0.5); }
  .score-stat strong { color: #e9fbff; text-shadow: 0 0 18px rgba(69, 230, 255, 0.22); }

  .hearts {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 18px;
  }

  .heart {
    display: inline-flex;
    width: 17px;
    height: 17px;
    color: #ff628f;
    filter: drop-shadow(0 0 6px rgba(255, 98, 143, 0.4));
    transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
  }
  .heart svg { width: 100%; height: 100%; fill: currentColor; }
  .heart.off { opacity: 0.18; filter: grayscale(1); transform: scale(0.88); }

  .sound-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 76px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: #9aa8c4;
    background: rgba(255, 255, 255, 0.035);
    font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: 160ms ease;
  }
  .sound-btn:hover { color: #fff; border-color: rgba(69, 230, 255, 0.3); background: rgba(69, 230, 255, 0.07); }
  .sound-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .sound-slash { opacity: 0; }
  .sound-btn.off .sound-waves { opacity: 0.18; }
  .sound-btn.off .sound-slash { opacity: 1; }

  .stage-wrap {
    position: relative;
    height: clamp(390px, calc(100vh - 190px), 640px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(139, 176, 255, 0.2);
    border-radius: 22px;
    background: #080b16;
    box-shadow:
      0 32px 90px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.025) inset,
      0 0 70px rgba(64, 109, 255, 0.055);
  }

  .stage-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.16;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,0.025) 4px);
    mix-blend-mode: soft-light;
  }

  canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
  }

  .frame-corner {
    position: absolute;
    z-index: 4;
    width: 21px;
    height: 21px;
    pointer-events: none;
    opacity: 0.48;
  }
  .frame-corner.tl { top: 12px; left: 12px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); border-radius: 5px 0 0; }
  .frame-corner.tr { top: 12px; right: 12px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); border-radius: 0 5px 0 0; }
  .frame-corner.bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--cyan); border-left: 1px solid var(--cyan); border-radius: 0 0 0 5px; }
  .frame-corner.br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--cyan); border-right: 1px solid var(--cyan); border-radius: 0 0 5px; }

  .demo-badge {
    position: absolute;
    z-index: 5;
    top: 15px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(88, 239, 186, 0.22);
    border-radius: 999px;
    color: #94e9c9;
    background: rgba(7, 20, 22, 0.64);
    backdrop-filter: blur(8px);
    font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.13em;
    pointer-events: none;
  }

  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    animation: livePulse 1.4s ease-in-out infinite;
  }
  @keyframes livePulse { 50% { opacity: 0.35; transform: scale(0.7); } }

  .toast {
    position: absolute;
    z-index: 5;
    top: 15px;
    left: 50%;
    max-width: calc(100% - 180px);
    padding: 8px 14px;
    border: 1px solid rgba(69, 230, 255, 0.25);
    border-radius: 999px;
    color: #dffaff;
    background: rgba(9, 16, 34, 0.82);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.11em;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: 220ms ease;
    pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }
  .toast.power { color: #ffe6a8; border-color: rgba(255, 205, 103, 0.35); }

  .overlay {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: radial-gradient(circle at center, rgba(4, 7, 17, 0.1), rgba(4, 7, 17, 0.4));
    pointer-events: none;
  }

  .panel {
    width: min(430px, 100%);
    padding: 26px 27px 24px;
    border: 1px solid rgba(155, 189, 255, 0.19);
    border-radius: 21px;
    text-align: center;
    background:
      linear-gradient(145deg, rgba(18, 24, 48, 0.9), rgba(8, 12, 27, 0.83)),
      rgba(9, 13, 28, 0.85);
    box-shadow:
      0 26px 80px rgba(0, 0, 0, 0.5),
      0 0 50px rgba(76, 129, 255, 0.08),
      inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    pointer-events: auto;
    animation: panelIn 340ms cubic-bezier(.2,.8,.2,1);
  }

  @keyframes panelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .panel-mark {
    position: relative;
    width: 42px;
    height: 42px;
    margin: 0 auto 13px;
    border: 1px solid rgba(69, 230, 255, 0.28);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(69, 230, 255, 0.18), rgba(69, 230, 255, 0.02) 65%);
    box-shadow: 0 0 25px rgba(69, 230, 255, 0.13);
  }
  .panel-mark::before {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    left: 15px;
    top: 15px;
    border-radius: 50%;
    background: #eaffff;
    box-shadow: 0 0 13px var(--cyan), 0 0 28px var(--cyan);
  }
  .panel-mark::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 7px;
    height: 4px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--cyan), var(--violet));
    box-shadow: 0 0 12px rgba(69, 230, 255, 0.45);
  }

  .panel h2 {
    margin: 7px 0 9px;
    font-size: clamp(24px, 3vw, 31px);
    line-height: 1;
    letter-spacing: 0.035em;
    font-weight: 900;
  }

  .panel p {
    margin: 0 auto;
    max-width: 340px;
    color: #98a6c1;
    font-size: 12px;
    line-height: 1.55;
  }

  .launch-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 17px 0 12px;
    padding: 10px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #eefaff;
    font: 900 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.1em;
  }

  .keycap {
    padding: 4px 6px;
    border: 1px solid rgba(69, 230, 255, 0.28);
    border-radius: 5px;
    color: var(--cyan);
    background: rgba(69, 230, 255, 0.07);
    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.2);
  }

  .launch-arrow {
    color: var(--cyan);
    animation: arrowNudge 1.2s ease-in-out infinite;
  }
  @keyframes arrowNudge { 50% { transform: translateX(4px); } }

  .primary-btn {
    width: 100%;
    margin-top: 16px;
    padding: 12px 18px;
    border: 0;
    border-radius: 11px;
    color: #06101c;
    background: linear-gradient(100deg, #67efff, #7094ff 54%, #b879ff);
    box-shadow: 0 9px 25px rgba(84, 143, 255, 0.23), inset 0 1px rgba(255, 255, 255, 0.55);
    font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.13em;
    cursor: pointer;
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
  }
  .primary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 30px rgba(84, 143, 255, 0.32); }
  .primary-btn:active { transform: translateY(0); }

  .panel-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    color: #63718f;
    font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.13em;
  }

  .final-score {
    margin: 17px 0 4px;
    color: #ecfcff;
    font: 900 34px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.07em;
    text-shadow: 0 0 22px rgba(69, 230, 255, 0.25);
  }
  .score-caption {
    color: #6d7b99;
    font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.18em;
  }
  .victory-panel { border-color: rgba(88, 239, 186, 0.25); }
  .victory-panel .panel-mark { border-color: rgba(88, 239, 186, 0.35); background: radial-gradient(circle, rgba(88,239,186,.2), transparent 67%); }
  .victory-panel .panel-mark::before { background: #eafff7; box-shadow: 0 0 13px var(--green), 0 0 28px var(--green); }

  .statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 47px;
    padding: 12px 3px 0;
    color: #76849f;
    font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.09em;
  }

  .controls-group, .objective, .power-readout {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .control-label {
    color: #4e5a76;
    font-size: 8px;
    letter-spacing: 0.15em;
  }

  kbd {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 21px;
    padding: 0 5px;
    border: 1px solid rgba(153, 181, 240, 0.19);
    border-bottom-color: rgba(153, 181, 240, 0.32);
    border-radius: 5px;
    color: #b7c5de;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 -2px rgba(0, 0, 0, 0.16);
    font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .divider { width: 1px; height: 15px; background: rgba(255, 255, 255, 0.08); }
  .mouse-icon { width: 12px; height: 17px; border: 1px solid #71809e; border-radius: 7px; position: relative; }
  .mouse-icon::after { content: ""; position: absolute; top: 2px; left: 4px; width: 2px; height: 4px; border-radius: 2px; background: #71809e; }

  .power-readout {
    min-width: 205px;
    justify-content: center;
    color: #9aa8c3;
  }
  .power-dot { width: 6px; height: 6px; border-radius: 50%; background: #54617b; }
  .power-readout.active .power-dot { background: #ffd166; box-shadow: 0 0 9px rgba(255, 209, 102, 0.7); }
  .timer-track { width: 66px; height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.08); }
  .timer-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd166, #ff8ab8); transition: width 100ms linear; }

  .objective { color: #61708d; }
  .objective-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  .objective b { color: #9caac3; font-weight: 900; }

  @media (max-width: 800px) {
    .topbar { flex-wrap: wrap; }
    .hud { width: 100%; justify-content: flex-end; }
    .stage-wrap { height: clamp(390px, 63vh, 560px); }
    .statusbar { flex-wrap: wrap; justify-content: center; }
    .objective { order: 3; width: 100%; justify-content: center; }
  }

  @media (max-width: 560px) {
    .app { width: calc(100% - 18px); padding-top: 10px; }
    .topbar { gap: 9px; margin-bottom: 9px; }
    .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
    .brand-mark i { left: 8px; }
    .brand-mark i:nth-child(1) { top: 9px; width: 20px; }
    .brand-mark i:nth-child(2) { top: 17px; width: 15px; }
    .brand-mark i:nth-child(3) { top: 25px; width: 10px; }
    .brand .eyebrow { display: none; }
    .brand h1 { font-size: 17px; }
    .hud { gap: 5px; justify-content: space-between; }
    .stat { min-width: 0; padding: 7px 9px; border-radius: 10px; }
    .stat strong { font-size: 15px; }
    .wall-stat, .combo-stat { display: none; }
    .score-stat { flex: 1; }
    .sound-btn { min-width: 39px; width: 39px; padding: 0; }
    .sound-btn span { display: none; }
    .stage-wrap { height: clamp(360px, 62vh, 500px); border-radius: 16px; }
    .demo-badge { top: 11px; right: 12px; font-size: 7px; }
    .toast { top: 10px; max-width: calc(100% - 125px); font-size: 8px; }
    .panel { padding: 21px 18px 20px; border-radius: 18px; }
    .panel-mark { width: 36px; height: 36px; margin-bottom: 10px; }
    .panel-mark::before { left: 12px; top: 12px; }
    .launch-line { font-size: 9px; }
    .statusbar { gap: 8px; padding-top: 10px; }
    .control-label, .objective { display: none; }
    .power-readout { min-width: 0; width: 100%; justify-content: center; }
  }

  @media (max-height: 720px) and (min-width: 801px) {
    .app { padding-top: 10px; }
    .topbar { margin-bottom: 9px; }
    .stage-wrap { height: calc(100vh - 165px); min-height: 380px; }
    .statusbar { min-height: 38px; padding-top: 8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }
</style>
</head>
<body>
<div class="app">
  <header class="topbar">
    <div class="brand">
      <div class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></div>
      <div class="brand-copy">
        <div class="eyebrow">Arcade Lab // Sector 01</div>
        <h1>NEON <span>BREAKOUT</span></h1>
      </div>
    </div>

    <div class="hud" aria-label="Game statistics">
      <div class="stat score-stat">
        <span class="stat-label">SCORE</span>
        <strong id="score">000000</strong>
      </div>
      <div class="stat wall-stat">
        <span class="stat-label">WALL</span>
        <strong id="wall">000</strong>
      </div>
      <div class="stat combo-stat">
        <span class="stat-label">COMBO</span>
        <strong id="combo">×1</strong>
      </div>
      <div class="stat lives-stat">
        <span class="stat-label">LIVES</span>
        <div class="hearts" id="lives" aria-label="3 lives remaining">
          <span class="heart"><svg viewBox="0 0 24 24"><path d="M12 21s-8.4-4.9-10.2-10C.2 6.6 3.2 3 6.9 3 9 3 10.8 4.2 12 6c1.2-1.8 3-3 5.1-3 3.7 0 6.7 3.6 5.1 8-1.8 5.1-10.2 10-10.2 10z"/></svg></span>
          <span class="heart"><svg viewBox="0 0 24 24"><path d="M12 21s-8.4-4.9-10.2-10C.2 6.6 3.2 3 6.9 3 9 3 10.8 4.2 12 6c1.2-1.8 3-3 5.1-3 3.7 0 6.7 3.6 5.1 8-1.8 5.1-10.2 10-10.2 10z"/></svg></span>
          <span class="heart"><svg viewBox="0 0 24 24"><path d="M12 21s-8.4-4.9-10.2-10C.2 6.6 3.2 3 6.9 3 9 3 10.8 4.2 12 6c1.2-1.8 3-3 5.1-3 3.7 0 6.7 3.6 5.1 8-1.8 5.1-10.2 10-10.2 10z"/></svg></span>
        </div>
      </div>
      <button class="sound-btn" id="soundBtn" type="button" aria-label="Toggle sound" aria-pressed="true">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 9v6h4l5 4V5L9 9H5z"/>
          <path class="sound-waves" d="M17 8c1.2 1.1 1.8 2.4 1.8 4S18.2 14.9 17 16M19.5 5.5c2 1.7 3 3.8 3 6.5s-1 4.8-3 6.5"/>
          <path class="sound-slash" d="M4 4l16 16"/>
        </svg>
        <span>SOUND</span>
      </button>
    </div>
  </header>

  <main class="stage-wrap" id="stageWrap">
    <canvas id="game" tabindex="0" aria-label="Breakout game. Move the paddle with the mouse or the left and right arrow keys."></canvas>
    <span class="frame-corner tl"></span><span class="frame-corner tr"></span>
    <span class="frame-corner bl"></span><span class="frame-corner br"></span>

    <div class="demo-badge" id="demoBadge"><span class="live-dot"></span>AI DEMO • LIVE</div>
    <div class="toast" id="toast" role="status" aria-live="polite"></div>

    <div class="overlay" id="overlay">
      <section class="panel start-panel" id="startPanel">
        <div class="panel-mark" aria-hidden="true"></div>
        <div class="eyebrow">Attract mode</div>
        <h2>READY TO SHATTER?</h2>
        <div class="launch-line">
          <span class="keycap">CLICK</span> OR PRESS A KEY TO START
          <span class="launch-arrow">➜</span>
        </div>
        <p>The AI pilot is already playing behind this card. Take over with the mouse or arrow keys.</p>
        <button class="primary-btn" id="startBtn" type="button">START RUN →</button>
        <div class="panel-meta">
          <span>3 LIVES</span><span>8 ROWS</span><span>↔ WIDE</span><span>••• MULTI</span>
        </div>
      </section>

      <section class="panel" id="pausePanel" hidden>
        <div class="eyebrow">System hold</div>
        <h2>PAUSED</h2>
        <p>Your run is safe. Resume when you're ready.</p>
        <button class="primary-btn" id="resumeBtn" type="button">RESUME →</button>
      </section>

      <section class="panel" id="gameoverPanel" hidden>
        <div class="eyebrow">Run complete</div>
        <h2>GAME OVER</h2>
        <p>The wall held this time. Rebuild your combo and try another clean sweep.</p>
        <div class="final-score" id="gameoverScore">000000</div>
        <div class="score-caption">FINAL SCORE</div>
        <button class="primary-btn" id="restartBtn" type="button">RESTART RUN →</button>
      </section>

      <section class="panel victory-panel" id="victoryPanel" hidden>
        <div class="panel-mark" aria-hidden="true"></div>
        <div class="eyebrow">Sector cleared</div>
        <h2>WALL DESTROYED</h2>
        <p>Every brick is gone. That's a flawless neon sweep.</p>
        <div class="final-score" id="victoryScore">000000</div>
        <div class="score-caption">FINAL SCORE</div>
        <button class="primary-btn" id="victoryRestartBtn" type="button">PLAY AGAIN →</button>
      </section>
    </div>
  </main>

  <footer class="statusbar">
    <div class="controls-group">
      <span class="control-label">CONTROLS</span>
      <kbd>←</kbd><kbd>→</kbd><span>OR MOUSE</span>
    </div>
    <div class="power-readout" id="powerReadout">
      <span class="power-dot"></span>
      <span id="powerText">SYSTEM READY</span>
      <span class="timer-track"><i id="powerTimer"></i></span>
    </div>
    <div class="objective">
      <span class="objective-dot"></span>
      CLEAR THE WALL <b id="wallMini">0</b> BRICKS LEFT
    </div>
  </footer>
</div>

<script>
(() => {
  "use strict";

  const canvas = document.getElementById("game");
  const ctx = canvas.getContext("2d", { alpha: false });
  const stage = document.getElementById("stageWrap");

  const ui = {
    score: document.getElementById("score"),
    wall: document.getElementById("wall"),
    combo: document.getElementById("combo"),
    lives: document.getElementById("lives"),
    soundBtn: document.getElementById("soundBtn"),
    demoBadge: document.getElementById("demoBadge"),
    toast: document.getElementById("toast"),
    overlay: document.getElementById("overlay"),
    startPanel: document.getElementById("startPanel"),
    pausePanel: document.getElementById("pausePanel"),
    gameoverPanel: document.getElementById("gameoverPanel"),
    victoryPanel: document.getElementById("victoryPanel"),
    startBtn: document.getElementById("startBtn"),
    resumeBtn: document.getElementById("resumeBtn"),
    restartBtn: document.getElementById("restartBtn"),
    victoryRestartBtn: document.getElementById("victoryRestartBtn"),
    gameoverScore: document.getElementById("gameoverScore"),
    victoryScore: document.getElementById("victoryScore"),
    powerReadout: document.getElementById("powerReadout"),
    powerText: document.getElementById("powerText"),
    powerTimer: document.getElementById("powerTimer"),
    wallMini: document.getElementById("wallMini")
  };

  const TAU = Math.PI * 2;
  const STEP = 1 / 120;
  const ROWS = 8;
  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
  const random = (a, b) => a + Math.random() * (b - a);
  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const palette = [
    "#39d9ff", "#4f8cff", "#7b6cff", "#b25cff",
    "#e95cff", "#ff5f9e", "#ff7a63", "#ffc857"
  ];

  let W = 0, H = 0, DPR = 1;
  let audioCtx = null;
  let soundOn = true;
  let lastAudioTime = -1;

  const stars = Array.from({ length: 72 }, () => ({
    x: Math.random(), y: Math.random(), a: random(0.12, 0.52),
    size: random(0.5, 1.6), twinkle: random(0.5, 2), phase: random(0, TAU)
  }));

  const state = {
    phase: "demo",
    grid: null,
    bricks: [],
    remaining: 0,
    score: 0,
    lives: 3,
    combo: 1,
    comboTimer: 0,
    wideTimer: 0,
    elapsed: 0,
    time: 0,
    balls: [],
    powers: [],
    particles: [],
    texts: [],
    paddle: null,
    launchCountdown: 0.5,
    mouse: { x: 0, y: 0, active: false },
    keys: { left: false, right: false },
    shake: 0,
    toastTimer: 0,
    pendingEnd: null,
    demoClearTimer: 0,
    accumulator: 0,
    hudTimer: 0
  };

  function roundedRect(c, x, y, w, h, r) {
    r = Math.min(r, w / 2, h / 2);
    c.beginPath();
    c.moveTo(x + r, y);
    c.lineTo(x + w - r, y);
    c.quadraticCurveTo(x + w, y, x + w, y + r);
    c.lineTo(x + w, y + h - r);
    c.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
    c.lineTo(x + r, y + h);
    c.quadraticCurveTo(x, y + h, x, y + h - r);
    c.lineTo(x, y + r);
    c.quadraticCurveTo(x, y, x + r, y);
    c.closePath();
  }

  function generateGrid(cols) {
    const grid = [];
    const holes = new Set([
      `3:${Math.floor(cols * 0.42)}`,
      `3:${Math.floor(cols * 0.42) + 1}`,
      `6:${Math.floor(cols * 0.52)}`
    ]);
    const widePositions = new Set([
      `1:${Math.round((cols - 1) * 0.16)}`,
      `5:${Math.round((cols - 1) * 0.35)}`
    ]);
    const multiPositions = new Set([
      `2:${Math.round((cols - 1) * 0.78)}`,
      `6:${Math.round((cols - 1) * 0.68)}`
    ]);

    for (let r = 0; r < ROWS; r++) {
      const row = [];
      for (let c = 0; c < cols; c++) {
        const key = `${r}:${c}`;
        const skip = holes.has(key);
        let type = "normal";
        if (
          (r === 0 && c % 3 === 1) ||
          (r === 7 && c % 2 === 0) ||
          ((r + c) % 9 === 0)
        ) type = "tough";

        let power = null;
        if (widePositions.has(key)) {
          power = "wide";
          if (r === 5) type = "tough";
        } else if (multiPositions.has(key)) {
          power = "multi";
        }

        const maxHp = type === "tough" ? 2 : 1;
        row.push({
          row: r,
          col: c,
          skip,
          type,
          power,
          color: power === "wide" ? "#45e6ff" : power === "multi" ? "#ff67c3" : palette[r % palette.length],
          hp: maxHp,
          maxHp,
          flash: 0
        });
      }
      grid.push(row);
    }
    return grid;
  }

  function rebuildLevel(preserve) {
    const oldGrid = state.grid;
    const cols = W < 520 ? 7 : W < 800 ? 9 : 11;
    const grid = generateGrid(cols);

    if (preserve && oldGrid) {
      const oldCells = [];
      const oldCols = oldGrid[0].length;
      oldGrid.forEach((row, r) => row.forEach((cell, c) => {
        if (!cell.skip) oldCells.push({
          nr: r / (ROWS - 1),
          nc: c / (oldCols - 1),
          hp: cell.hp
        });
      }));

      grid.forEach((row, r) => row.forEach((cell, c) => {
        if (cell.skip) return;
        const nr = r / (ROWS - 1);
        const nc = c / (cols - 1);
        let best = null, bestDist = Infinity;
        for (const old of oldCells) {
          const d = Math.abs(old.nr - nr) + Math.abs(old.nc - nc);
          if (d < bestDist) { bestDist = d; best = old; }
        }
        if (best && bestDist < 0.24) cell.hp = Math.min(cell.maxHp, best.hp);
      }));
    }

    state.grid = grid;

    const margin = W < 520 ? 10 : 26;
    const top = W < 520 ? 42 : 56;
    const colGap = W < 520 ? 4 : 7;
    const rowGap = W < 520 ? 4 : 6;
    const bottomSpace = W < 520 ? 124 : 148;
    const maxBottom = H - bottomSpace;
    const rowH = Math.max(16, Math.min(36, (maxBottom - top - rowGap * (ROWS - 1)) / ROWS));
    const brickW = (W - margin * 2 - colGap * (cols - 1)) / cols;

    state.bricks = [];
    grid.forEach((row, r) => row.forEach((cell, c) => {
      if (cell.skip) return;
      state.bricks.push({
        ...cell,
        x: margin + c * (brickW + colGap),
        y: top + r * (rowH + rowGap),
        w: brickW,
        h: rowH
      });
    }));

    state.remaining = state.bricks.length;
  }

  function makePaddle() {
    const baseW = clamp(W * 0.105, 78, 124);
    return {
      x: W / 2 - baseW / 2,
      y: H - (W < 520 ? 31 : 38),
      w: baseW,
      baseW,
      h: W < 520 ? 12 : 14,
      targetX: W / 2
    };
  }

  function resizeCanvas() {
    const oldW = W, oldH = H;
    W = Math.max(280, stage.clientWidth);
    H = Math.max(340, stage.clientHeight);
    DPR = Math.min(window.devicePixelRatio || 1, 2);

    canvas.width = Math.round(W * DPR);
    canvas.height = Math.round(H * DPR);
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);

    if (!state.paddle) {
      state.paddle = makePaddle();
    } else {
      const ratio = oldW ? W / oldW : 1;
      state.paddle.baseW = clamp(W * 0.105, 78, 124);
      state.paddle.w = state.wideTimer > 0 ? state.paddle.baseW * 1.55 : state.paddle.baseW;
      state.paddle.x = clamp(state.paddle.x * ratio, 4, W - state.paddle.w - 4);
      state.paddle.targetX = clamp(state.paddle.targetX * ratio, state.paddle.w / 2, W - state.paddle.w / 2);
      state.paddle.y = H - (W < 520 ? 31 : 38);
      state.paddle.h = W < 520 ? 12 : 14;
    }

    if (oldW) {
      state.balls.forEach(b => {
        b.x *= W / oldW;
        b.y *= H / oldH;
      });
    }

    rebuildLevel(!!state.grid);
    updateHUD();
  }

  function ballRadius() {
    return clamp(W * 0.0062, 6, 8);
  }

  function gameSpeed() {
    return clamp(W * 0.37, 330, 470) * (1 + Math.min(state.elapsed / 650, 0.13));
  }

  function resetAttachedBall(delay) {
    const p = state.paddle;
    state.balls = [{
      x: p.x + p.w / 2,
      y: p.y - ballRadius() - 1,
      vx: 0,
      vy: 0,
      r: ballRadius(),
      attached: true,
      color: "#e7fdff",
      trail: []
    }];
    state.launchCountdown = delay;
  }

  function resetDemoScene() {
    state.grid = null;
    rebuildLevel(false);
    state.score = 0;
    state.combo = 1;
    state.comboTimer = 0;
    state.wideTimer = 0;
    state.powers = [];
    state.particles = [];
    state.texts = [];
    state.demoClearTimer = 0;
    state.pendingEnd = null;
    state.paddle.w = state.paddle.baseW;
    state.paddle.x = W / 2 - state.paddle.w / 2;
    state.paddle.targetX = W / 2;
    resetAttachedBall(0.48);
    ui.demoBadge.hidden = false;
    updateHUD();
  }

  function startGame() {
    ensureAudio();
    state.phase = "playing";
    state.pendingEnd = null;
    state.grid = null;
    rebuildLevel(false);
    state.score = 0;
    state.lives = 3;
    state.combo = 1;
    state.comboTimer = 0;
    state.wideTimer = 0;
    state.elapsed = 0;
    state.powers = [];
    state.particles = [];
    state.texts = [];
    state.demoClearTimer = 0;
    state.paddle.w = state.paddle.baseW;
    state.paddle.x = W / 2 - state.paddle.w / 2;
    state.paddle.targetX = W / 2;
    resetAttachedBall(0.78);
    hideScreens();
    ui.demoBadge.hidden = true;
    showToast("SECTOR 01 • CLEAR THE WALL");
    updateHUD();
  }

  function showScreen(name) {
    const panels = {
      start: ui.startPanel,
      pause: ui.pausePanel,
      gameover: ui.gameoverPanel,
      victory: ui.victoryPanel
    };
    Object.entries(panels).forEach(([key, panel]) => {
      panel.hidden = key !== name;
    });
    ui.overlay.hidden = false;
  }

  function hideScreens() {
    ui.overlay.hidden = true;
    Object.values({
      start: ui.startPanel,
      pause: ui.pausePanel,
      gameover: ui.gameoverPanel,
      victory: ui.victoryPanel
    }).forEach(panel => { panel.hidden = true; });
  }

  function showToast(message, type = "") {
    ui.toast.textContent = message;
    ui.toast.className = `toast show ${type}`;
    state.toastTimer = 2.15;
  }

  function ensureAudio() {
    if (!soundOn) return;
    try {
      if (!audioCtx) {
        const AudioClass = window.AudioContext || window.webkitAudioContext;
        if (AudioClass) audioCtx = new AudioClass();
      }
      if (audioCtx && audioCtx.state === "suspended") audioCtx.resume().catch(() => {});
    } catch (_) {
      audioCtx = null;
    }
  }

  function tone(startFreq, endFreq, duration, type, volume) {
    if (!soundOn || !audioCtx) return;
    const now = audioCtx.currentTime;
    const oscillator = audioCtx.createOscillator();
    const gain = audioCtx.createGain();
    oscillator.type = type;
    oscillator.frequency.setValueAtTime(startFreq, now);
    oscillator.frequency.exponentialRampToValueAtTime(Math.max(30, endFreq), now + duration);
    gain.gain.setValueAtTime(Math.max(0.0001, volume), now);
    gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);
    oscillator.connect(gain);
    gain.connect(audioCtx.destination);
    oscillator.start(now);
    oscillator.stop(now + duration + 0.02);
  }

  function playSound(kind) {
    if (!soundOn || !audioCtx) return;
    const now = audioCtx.currentTime;
    if (kind === "hit" && now - lastAudioTime < 0.045) return;
    lastAudioTime = now;

    if (kind === "paddle") tone(290, 430, 0.055, "triangle", 0.055);
    else if (kind === "hit") tone(230, 170, 0.065, "square", 0.035);
    else if (kind === "crack") tone(180, 95, 0.11, "sawtooth", 0.045);
    else if (kind === "break") tone(430, 780, 0.09, "square", 0.045);
    else if (kind === "power") {
      tone(610, 1050, 0.18, "sine", 0.07);
      setTimeout(() => tone(820, 1320, 0.15, "triangle", 0.04), 75);
    } else if (kind === "life") tone(190, 85, 0.32, "sawtooth", 0.055);
    else if (kind === "launch") tone(330, 570, 0.12, "sine", 0.045);
    else if (kind === "win") {
      tone(520, 780, 0.22, "triangle", 0.06);
      setTimeout(() => tone(780, 1180, 0.28, "sine", 0.05), 130);
    }
  }

  function setPaddleWidth(width) {
    const p = state.paddle;
    const center = p.x + p.w / 2;
    p.w = width;
    p.x = center - p.w / 2;
    p.x = clamp(p.x, 4, W - p.w - 4);
  }

  function launchAttached() {
    let launched = false;
    state.balls.forEach(b => {
      if (!b.attached) return;
      const angle = state.phase === "demo" ? -0.31 : random(-0.23, 0.23);
      const speed = gameSpeed();
      b.vx = Math.sin(angle) * speed;
      b.vy = -Math.cos(angle) * speed;
      b.attached = false;
      launched = true;
    });
    if (launched) {
      state.launchCountdown = 0;
      playSound("launch");
    }
  }

  function demoTarget() {
    const p = state.paddle;
    let target = W / 2;
    let falling = null;
    for (const b of state.balls) {
      if (!b.attached && b.vy > 0 && (!falling || b.y > falling.y)) falling = b;
    }
    if (falling) {
      const time = Math.max(0, (p.y - falling.y) / falling.vy);
      let predicted = falling.x + falling.vx * time;
      const margin = p.w / 2 + 5;
      for (let i = 0; i < 4; i++) {
        if (predicted < margin) predicted = margin + (margin - predicted);
        if (predicted > W - margin) predicted = (W - margin) - (predicted - (W - margin));
      }
      target = predicted;
    } else {
      target = W / 2 + Math.sin(state.time * 0.85) * W * 0.15;
    }
    return clamp(target, p.w / 2 + 4, W - p.w / 2 - 4);
  }

  function updatePaddle(dt) {
    const p = state.paddle;

    if (state.phase === "demo") {
      const target = demoTarget();
      p.targetX = target;
      const dx = target - p.x;
      const move = Math.min(Math.abs(dx), 760 * dt);
      p.x += Math.sign(dx) * move;
    } else {
      const direction = (state.keys.right ? 1 : 0) - (state.keys.left ? 1 : 0);
      if (direction !== 0) {
        p.x += direction * 650 * dt;
        p.targetX = p.x;
      } else {
        p.x += (p.targetX - p.x) * (1 - Math.exp(-18 * dt));
      }
    }

    p.x = clamp(p.x, 4, W - p.w - 4);
  }

  function spawnBurst(brick, count, color) {
    if (reducedMotion) count = Math.ceil(count * 0.45);
    for (let i = 0; i < count; i++) {
      const angle = random(0, TAU);
      const speed = random(65, 270);
      const life = random(0.32, 0.78);
      state.particles.push({
        x: brick.x + brick.w / 2 + random(-brick.w * 0.36, brick.w * 0.36),
        y: brick.y + brick.h / 2 + random(-brick.h * 0.3, brick.h * 0.3),
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed - random(25, 95),
        size: random(2, 5.5),
        life,
        maxLife: life,
        color,
        rotation: random(0, TAU),
        spin: random(-8, 8),
        gravity: random(210, 380),
        round: Math.random() > 0.45
      });
    }
  }

  function spawnCrackDust(brick) {
    for (let i = 0; i < 7; i++) {
      const life = random(0.18, 0.38);
      state.particles.push({
        x: brick.x + random(4, brick.w - 4),
        y: brick.y + random(3, brick.h - 3),
        vx: random(-85, 85),
        vy: random(-105, 30),
        size: random(1.3, 3.4),
        life,
        maxLife: life,
        color: i % 2 ? "#a4b8e3" : "#495b81",
        rotation: random(0, TAU),
        spin: random(-7, 7),
        gravity: 300,
        round: false
      });
    }
  }

  function addFloatingText(text, x, y, color) {
    state.texts.push({ text, x, y, color, life: 0.8, maxLife: 0.8 });
  }

  function spawnPower(brick) {
    state.powers.push({
      x: brick.x + brick.w / 2,
      y: brick.y + brick.h / 2,
      prevY: brick.y + brick.h / 2,
      r: 13,
      vy: 102,
      type: brick.power,
      rotation: 0,
      phase: random(0, TAU),
      color: brick.power === "wide" ? "#45e6ff" : "#ff67c3"
    });
    spawnBurst(brick, 12, brick.power === "wide" ? "#45e6ff" : "#ff67c3");
  }

  function handleBrickImpact(brick) {
    brick.hp = Math.max(0, brick.hp - 1);
    brick.flash = 1;

    if (brick.hp > 0) {
      spawnCrackDust(brick);
      state.shake = Math.max(state.shake, 1.4);
      playSound("crack");
      return;
    }

    state.remaining = Math.max(0, state.remaining - 1);
    if (state.comboTimer > 0) state.combo = Math.min(9, state.combo + 1);
    else state.combo = 1;
    state.comboTimer = 2.05;

    const basePoints = brick.type === "tough" ? 120 : 60;
    const rowBonus = (ROWS - brick.row) * 5;
    const powerBonus = brick.power ? 35 : 0;
    const points = (basePoints + rowBonus + powerBonus) * state.combo;
    state.score += points;

    const color = brick.type === "tough" ? "#8ea3d0" : brick.color;
    spawnBurst(brick, brick.power ? 22 : 15, color);
    addFloatingText(`+${points}`, brick.x + brick.w / 2, brick.y + brick.h / 2, brick.power ? "#ffe7a8" : "#ecfbff");
    state.shake = Math.max(state.shake, brick.type === "tough" ? 3.5 : 2.3);
    playSound("break");

    if (brick.power) spawnPower(brick);

    if (state.remaining === 0) {
      if (state.phase === "playing") {
        state.pendingEnd = { type: "victory", timer: 0.85 };
        playSound("win");
      } else {
        state.demoClearTimer = 1.15;
      }
    }
  }

  function reflectFromPaddle(ball) {
    const p = state.paddle;
    const relative = clamp((ball.x - (p.x + p.w / 2)) / (p.w / 2), -1, 1);
    const angle = relative * 1.06;
    const speed = gameSpeed();

    // A center hit travels straight up; edge hits use a much sharper angle.
    ball.vx = Math.sin(angle) * speed;
    ball.vy = -Math.cos(angle) * speed;
    ball.y = p.y - ball.r - 0.3;

    for (let i = 0; i < 4; i++) {
      state.particles.push({
        x: ball.x, y: p.y + 1,
        vx: random(-75, 75), vy: random(-95, -25),
        size: random(1.2, 2.7), life: random(0.16, 0.3), maxLife: 0.3,
        color: "#75eaff", rotation: 0, spin: 0, gravity: 180, round: true
      });
    }
    playSound("paddle");
  }

  function resolveCircleRect(ball, rect) {
    const closestX = clamp(ball.x, rect.x, rect.x + rect.w);
    const closestY = clamp(ball.y, rect.y, rect.y + rect.h);
    const dx = ball.x - closestX;
    const dy = ball.y - closestY;
    const distSq = dx * dx + dy * dy;

    if (distSq > ball.r * ball.r) return false;

    if (distSq > 0.00001) {
      const dist = Math.sqrt(distSq);
      const nx = dx / dist;
      const ny = dy / dist;
      const push = ball.r - dist + 0.35;
      ball.x += nx * push;
      ball.y += ny * push;
      const dot = ball.vx * nx + ball.vy * ny;
      if (dot < 0) {
        ball.vx -= 2 * dot * nx;
        ball.vy -= 2 * dot * ny;
      }
    } else {
      const left = ball.x - rect.x;
      const right = rect.x + rect.w - ball.x;
      const top = ball.y - rect.y;
      const bottom = rect.y + rect.h - ball.y;
      const minimum = Math.min(left, right, top, bottom);
      if (minimum === top) {
        ball.y = rect.y - ball.r - 0.3;
        ball.vy = -Math.abs(ball.vy);
      } else if (minimum === bottom) {
        ball.y = rect.y + rect.h + ball.r + 0.3;
        ball.vy = Math.abs(ball.vy);
      } else if (minimum === left) {
        ball.x = rect.x - ball.r - 0.3;
        ball.vx = -Math.abs(ball.vx);
      } else {
        ball.x = rect.x + rect.w + ball.r + 0.3;
        ball.vx = Math.abs(ball.vx);
      }
    }
    return true;
  }

  function handleAllBallsLost() {
    state.combo = 1;
    state.comboTimer = 0;

    if (state.phase === "demo") {
      resetAttachedBall(0.42);
      return;
    }

    state.lives = Math.max(0, state.lives - 1);
    state.shake = 9;
    playSound("life");

    if (state.lives <= 0) {
      state.pendingEnd = { type: "gameover", timer: 0.75 };
      showToast("NO LIVES LEFT");
    } else {
      resetAttachedBall(0.95);
      showToast(`LIFE LOST • ${state.lives} ${state.lives === 1 ? "LIFE" : "LIVES"} REMAINING`);
    }
    updateHUD();
  }

  function catchPower(power) {
    state.score += 150;
    spawnBurst({ x: power.x - 8, y: power.y - 8, w: 16, h: 16 }, 22, power.color);

    if (power.type === "wide") {
      state.wideTimer = 10;
      setPaddleWidth(state.paddle.baseW * 1.55);
      showToast("WIDE PADDLE • 10 SECONDS", "power");
    } else {
      const angles = [-0.58, 0.58];
      while (state.balls.length < 3) {
        const angle = angles[state.balls.length - 1] || 0;
        const speed = gameSpeed();
        state.balls.push({
          x: state.paddle.x + state.paddle.w / 2,
          y: state.paddle.y - ballRadius() - 1,
          vx: Math.sin(angle) * speed,
          vy: -Math.cos(angle) * speed,
          r: ballRadius(),
          attached: false,
          color: state.balls.length === 1 ? "#ffd166" : "#ff8ed1",
          trail: []
        });
      }
      if (state.balls.length > 3) state.balls.length = 3;
      showToast("MULTI-BALL • 3 BALLS ACTIVE", "power");
    }

    playSound("power");
    updateHUD();
  }

  function updatePowers(dt) {
    const p = state.paddle;
    for (let i = state.powers.length - 1; i >= 0; i--) {
      const power = state.powers[i];
      power.prevY = power.y;
      power.y += power.vy * dt;
      power.rotation += dt * 1.8;
      power.phase += dt * 4;

      const horizontal = power.x + power.r >= p.x && power.x - power.r <= p.x + p.w;
      const crossedTop = power.prevY + power.r <= p.y + 2 && power.y + power.r >= p.y;
      const overlaps = power.y + power.r >= p.y && power.y - power.r <= p.y + p.h;

      if (horizontal && (crossedTop || overlaps)) {
        catchPower(power);
        state.powers.splice(i, 1);
      } else if (power.y - power.r > H + 25) {
        state.powers.splice(i, 1);
      }
    }
  }

  function physicsStep(dt) {
    updatePaddle(dt);

    if (state.launchCountdown > 0) {
      state.launchCountdown -= dt;
      if (state.launchCountdown <= 0) launchAttached();
    }

    const paddle = state.paddle;

    for (const ball of state.balls) {
      if (ball.attached) {
        ball.x = paddle.x + paddle.w / 2;
        ball.y = paddle.y - ball.r - 1;
        ball.trail.length = 0;
        continue;
      }

      ball.px = ball.x;
      ball.py = ball.y;
      ball.x += ball.vx * dt;
      ball.y += ball.vy * dt;

      if (ball.x - ball.r < 0) {
        ball.x = ball.r;
        ball.vx = Math.abs(ball.vx);
      } else if (ball.x + ball.r > W) {
        ball.x = W - ball.r;
        ball.vx = -Math.abs(ball.vx);
      }
      if (ball.y - ball.r < 0) {
        ball.y = ball.r;
        ball.vy = Math.abs(ball.vy);
      }

      const paddleOverlap = ball.x + ball.r >= paddle.x && ball.x - ball.r <= paddle.x + paddle.w;
      const crossedPaddle = ball.py + ball.r <= paddle.y + 1.5 && ball.y + ball.r >= paddle.y;
      const insidePaddle = ball.y + ball.r >= paddle.y && ball.y - ball.r <= paddle.y + paddle.h;

      if (ball.vy > 0 && paddleOverlap && (crossedPaddle || insidePaddle)) {
        reflectFromPaddle(ball);
      }

      for (const brick of state.bricks) {
        if (brick.hp <= 0) continue;

        if (resolveCircleRect(ball, brick)) {
          handleBrickImpact(brick);
          if (state.pendingEnd) break;
          continue;
        }

        const horizontalBrick = ball.x + ball.r > brick.x && ball.x - ball.r < brick.x + brick.w;
        if (ball.vy > 0 && horizontalBrick &&
            ball.py + ball.r <= brick.y && ball.y + ball.r >= brick.y) {
          ball.y = brick.y - ball.r - 0.2;
          ball.vy = -Math.abs(ball.vy);
          handleBrickImpact(brick);
          if (state.pendingEnd) break;
        } else if (ball.vy < 0 && horizontalBrick &&
                   ball.py - ball.r >= brick.y + brick.h && ball.y - ball.r <= brick.y + brick.h) {
          ball.y = brick.y + brick.h + ball.r + 0.2;
          ball.vy = Math.abs(ball.vy);
          handleBrickImpact(brick);
          if (state.pendingEnd) break;
        }
      }

      ball.trail.unshift({ x: ball.x, y: ball.y });
      if (ball.trail.length > 10) ball.trail.pop();
      if (state.pendingEnd) break;
    }

    const before = state.balls.length;
    state.balls = state.balls.filter(ball => ball.y - ball.r <= H + 20);
    if (state.balls.length < before && state.balls.length === 0 && !state.pendingEnd) {
      handleAllBallsLost();
    }

    updatePowers(dt);
  }

  function updateParticles(dt) {
    for (let i = state.particles.length - 1; i >= 0; i--) {
      const p = state.particles[i];
      p.life -= dt;
      if (p.life <= 0) {
        state.particles.splice(i, 1);
        continue;
      }
      p.vx *= Math.pow(0.34, dt);
      p.vy += p.gravity * dt;
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.rotation += p.spin * dt;
    }

    for (let i = state.texts.length - 1; i >= 0; i--) {
      const text = state.texts[i];
      text.life -= dt;
      text.y -= 31 * dt;
      if (text.life <= 0) state.texts.splice(i, 1);
    }

    state.bricks.forEach(brick => {
      if (brick.flash > 0) brick.flash = Math.max(0, brick.flash - dt * 3.6);
    });
  }

  function update(dt) {
    state.time += dt;

    if (state.phase === "playing") state.elapsed += dt;

    if ((state.phase === "playing" || state.phase === "demo") && state.wideTimer > 0) {
      state.wideTimer = Math.max(0, state.wideTimer - dt);
      if (state.wideTimer === 0) {
        setPaddleWidth(state.paddle.baseW);
        showToast("WIDE PADDLE ENDED");
      }
    }

    updateParticles(dt);

    if (state.pendingEnd) {
      state.pendingEnd.timer -= dt;
      if (state.pendingEnd.timer <= 0) {
        const type = state.pendingEnd.type;
        state.pendingEnd = null;
        state.phase = type;
        const formatted = state.score.toLocaleString("en-US");
        if (type === "victory") {
          ui.victoryScore.textContent = formatted;
          showScreen("victory");
        } else {
          ui.gameoverScore.textContent = formatted;
          showScreen("gameover");
        }
      }
    } else if (state.phase === "playing" || state.phase === "demo") {
      state.accumulator += dt;
      let steps = 0;
      while (state.accumulator >= STEP && steps < 8) {
        physicsStep(STEP);
        state.accumulator -= STEP;
        steps++;
        if (state.pendingEnd) {
          state.accumulator = 0;
          break;
        }
      }
    } else {
      state.accumulator = 0;
    }

    if (state.phase === "demo" && state.demoClearTimer > 0) {
      state.demoClearTimer -= dt;
      if (state.demoClearTimer <= 0) resetDemoScene();
    }

    if (state.comboTimer > 0) {
      state.comboTimer -= dt;
      if (state.comboTimer <= 0) state.combo = 1;
    }

    state.shake = Math.max(0, state.shake - dt * 24);
    if (state.toastTimer > 0) {
      state.toastTimer -= dt;
      if (state.toastTimer <= 0) ui.toast.classList.remove("show");
    }

    state.hudTimer -= dt;
    if (state.hudTimer <= 0) {
      updateHUD();
      state.hudTimer = 0.05;
    }
  }

  function updateHUD() {
    ui.score.textContent = String(state.score).padStart(6, "0");
    ui.wall.textContent = String(state.remaining).padStart(3, "0");
    ui.wallMini.textContent = state.remaining;
    ui.combo.textContent = `×${state.combo}`;
    ui.combo.classList.toggle("hot", state.combo >= 3);

    const hearts = ui.lives.querySelectorAll(".heart");
    hearts.forEach((heart, index) => heart.classList.toggle("off", index >= state.lives));

    const activeBalls = state.balls.filter(ball => !ball.attached).length;
    let label = "SYSTEM READY";
    let ratio = 0;
    let active = false;

    if (state.wideTimer > 0 && activeBalls > 1) {
      label = `WIDE + MULTI • ${state.wideTimer.toFixed(1)}s`;
      ratio = state.wideTimer / 10;
      active = true;
    } else if (state.wideTimer > 0) {
      label = `WIDE PADDLE • ${state.wideTimer.toFixed(1)}s`;
      ratio = state.wideTimer / 10;
      active = true;
    } else if (activeBalls > 1) {
      label = `MULTI-BALL • ${activeBalls} ACTIVE`;
      ratio = (activeBalls - 1) / 2;
      active = true;
    } else if (state.phase === "demo") {
      label = "AI DEMO ACTIVE";
    }

    ui.powerText.textContent = label;
    ui.powerReadout.classList.toggle("active", active);
    ui.powerTimer.style.width = `${clamp(ratio, 0, 1) * 100}%`;
  }

  function drawWideIcon(c, x, y, size) {
    c.save();
    c.strokeStyle = "#f2feff";
    c.lineWidth = Math.max(1.6, size * 0.18);
    c.lineCap = "round";
    c.lineJoin = "round";
    c.beginPath();
    c.moveTo(x - size, y);
    c.lineTo(x + size, y);
    c.moveTo(x - size + size * 0.3, y - size * 0.32);
    c.lineTo(x - size, y);
    c.lineTo(x - size + size * 0.3, y + size * 0.32);
    c.moveTo(x + size - size * 0.3, y - size * 0.32);
    c.lineTo(x + size, y);
    c.lineTo(x + size - size * 0.3, y + size * 0.32);
    c.stroke();
    c.restore();
  }

  function drawMultiIcon(c, x, y, size) {
    c.save();
    c.fillStyle = "#fff4fc";
    c.shadowColor = "#ff8ed5";
    c.shadowBlur = 7;
    const positions = [-0.62, 0, 0.62];
    positions.forEach((offset, index) => {
      c.beginPath();
      c.arc(x + offset * size, y + (index === 1 ? -size * 0.12 : size * 0.12), size * 0.21, 0, TAU);
      c.fill();
    });
    c.restore();
  }

  function drawCracks(brick) {
    const x = brick.x, y = brick.y, w = brick.w, h = brick.h;
    ctx.save();
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    ctx.strokeStyle = "rgba(2, 5, 13, 0.82)";
    ctx.lineWidth = Math.max(1.5, h * 0.065);
    ctx.beginPath();
    ctx.moveTo(x + w * 0.22, y + 1);
    ctx.lineTo(x + w * 0.37, y + h * 0.29);
    ctx.lineTo(x + w * 0.27, y + h * 0.47);
    ctx.lineTo(x + w * 0.43, y + h * 0.65);
    ctx.lineTo(x + w * 0.34, y + h - 1);
    ctx.stroke();

    ctx.strokeStyle = "rgba(206, 226, 255, 0.35)";
    ctx.lineWidth = 0.8;
    ctx.beginPath();
    ctx.moveTo(x + w * 0.41, y + h * 0.27);
    ctx.lineTo(x + w * 0.60, y + h * 0.42);
    ctx.lineTo(x + w * 0.54, y + h * 0.72);
    ctx.moveTo(x + w * 0.28, y + h * 0.47);
    ctx.lineTo(x + w * 0.10, y + h * 0.62);
    ctx.stroke();

    ctx.fillStyle = "rgba(5, 9, 20, 0.7)";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w * 0.16, y);
    ctx.lineTo(x + w * 0.08, y + h * 0.2);
    ctx.lineTo(x, y + h * 0.13);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  function drawBackground(time) {
    const bg = ctx.createLinearGradient(0, 0, 0, H);
    bg.addColorStop(0, "#0b1022");
    bg.addColorStop(0.52, "#080c19");
    bg.addColorStop(1, "#050812");
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, W, H);

    const aura = ctx.createRadialGradient(W * 0.5, 0, 0, W * 0.5, 0, W * 0.72);
    aura.addColorStop(0, "rgba(86, 113, 255, 0.14)");
    aura.addColorStop(0.45, "rgba(105, 75, 225, 0.055)");
    aura.addColorStop(1, "rgba(0, 0, 0, 0)");
    ctx.fillStyle = aura;
    ctx.fillRect(0, 0, W, H);

    ctx.save();
    ctx.strokeStyle = "rgba(126, 169, 255, 0.035)";
    ctx.lineWidth = 1;
    const gap = 42;
    ctx.beginPath();
    for (let x = 0; x <= W; x += gap) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
    for (let y = 0; y <= H; y += gap) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
    ctx.stroke();
    ctx.restore();

    ctx.save();
    for (const star of stars) {
      const twinkle = 0.65 + 0.35 * Math.sin(time * star.twinkle + star.phase);
      ctx.globalAlpha = star.a * twinkle;
      ctx.fillStyle = "#c8dcff";
      ctx.beginPath();
      ctx.arc(star.x * W, star.y * H, star.size, 0, TAU);
      ctx.fill();
    }
    ctx.restore();

    const bottomFog = ctx.createLinearGradient(0, H * 0.72, 0, H);
    bottomFog.addColorStop(0, "rgba(5, 8, 18, 0)");
    bottomFog.addColorStop(1, "rgba(40, 16, 71, 0.16)");
    ctx.fillStyle = bottomFog;
    ctx.fillRect(0, H * 0.7, W, H * 0.3);

    const sideGlow = ctx.createLinearGradient(0, 0, 0, H);
    sideGlow.addColorStop(0, "rgba(69, 230, 255, 0.34)");
    sideGlow.addColorStop(0.45, "rgba(87, 119, 255, 0.13)");
    sideGlow.addColorStop(1, "rgba(255, 100, 189, 0.16)");
    ctx.strokeStyle = sideGlow;
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0.5, 0); ctx.lineTo(0.5, H);
    ctx.moveTo(W - 0.5, 0); ctx.lineTo(W - 0.5, H);
    ctx.stroke();

    const margin = W < 520 ? 12 : 27;
    const total = state.grid ? state.grid.flat().filter(cell => !cell.skip).length : 1;
    const integrity = total ? Math.round((1 - state.remaining / total) * 100) : 0;

    ctx.save();
    ctx.font = "800 8px ui-monospace, SFMono-Regular, Menlo, monospace";
    ctx.fillStyle = "rgba(125, 145, 181, 0.72)";
    ctx.textAlign = "left";
    ctx.fillText("SECTOR 01  //  NEON GRID", margin, 20);
    ctx.textAlign = "right";
    ctx.fillStyle = integrity > 65 ? "rgba(125, 145, 181, 0.72)" : "rgba(104, 231, 195, 0.88)";
    ctx.fillText(`WALL INTEGRITY  ${integrity}%`, W - margin, 20);

    ctx.textAlign = "left";
    ctx.fillStyle = "rgba(255,255,255,0.065)";
    ctx.fillRect(margin, 29, W - margin * 2, 2);
    const progress = ctx.createLinearGradient(margin, 0, W - margin, 0);
    progress.addColorStop(0, "#45e6ff");
    progress.addColorStop(1, "#b36eff");
    ctx.fillStyle = progress;
    ctx.fillRect(margin, 29, (W - margin * 2) * (integrity / 100), 2);
    ctx.restore();

    const vignette = ctx.createRadialGradient(W / 2, H * 0.48, Math.min(W, H) * 0.18, W / 2, H * 0.48, Math.max(W, H) * 0.72);
    vignette.addColorStop(0, "rgba(0,0,0,0)");
    vignette.addColorStop(1, "rgba(0,0,0,0.35)");
    ctx.fillStyle = vignette;
    ctx.fillRect(0, 0, W, H);
  }

  function drawBricks(time) {
    state.bricks.forEach(brick => {
      if (brick.hp <= 0) return;
      const tough = brick.type === "tough";
      const power = brick.power;

      ctx.save();
      if (power) {
        ctx.shadowColor = brick.color;
        ctx.shadowBlur = 12 + Math.sin(time * 4 + brick.col) * 3;
      }

      const gradient = ctx.createLinearGradient(brick.x, brick.y, brick.x, brick.y + brick.h);
      if (tough) {
        gradient.addColorStop(0, brick.hp === 1 ? "#354360" : "#566a94");
        gradient.addColorStop(0.38, brick.hp === 1 ? "#242f4b" : "#354564");
        gradient.addColorStop(1, "#11192e");
      } else {
        gradient.addColorStop(0, brick.color);
        gradient.addColorStop(0.34, `${brick.color}bc`);
        gradient.addColorStop(1, "#141c36");
      }
      ctx.fillStyle = gradient;
      roundedRect(ctx, brick.x, brick.y, brick.w, brick.h, Math.min(5, brick.h * 0.2));
      ctx.fill();

      ctx.shadowBlur = 0;
      ctx.strokeStyle = power ? brick.color : tough ? "rgba(151, 175, 225, 0.42)" : "rgba(255,255,255,0.20)";
      ctx.lineWidth = power ? 1.4 : 1;
      ctx.stroke();

      ctx.strokeStyle = tough ? "rgba(222, 235, 255, 0.25)" : "rgba(255,255,255,0.31)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(brick.x + 4, brick.y + 1.5);
      ctx.lineTo(brick.x + brick.w - 4, brick.y + 1.5);
      ctx.stroke();

      if (tough) {
        ctx.fillStyle = "rgba(214, 229, 255, 0.45)";
        const inset = brick.h < 23 ? 4 : 6;
        [[inset, inset], [brick.w - inset, inset], [inset, brick.h - inset], [brick.w - inset, brick.h - inset]].forEach(([x, y]) => {
          ctx.beginPath();
          ctx.arc(brick.x + x, brick.y + y, 1.15, 0, TAU);
          ctx.fill();
        });
      }

      if (power) {
        const iconSize = Math.min(brick.h * 0.32, brick.w * 0.22, 13);
        if (power === "wide") drawWideIcon(ctx, brick.x + brick.w / 2, brick.y + brick.h / 2, iconSize);
        else drawMultiIcon(ctx, brick.x + brick.w / 2, brick.y + brick.h / 2, iconSize);
      }

      if (brick.hp < brick.maxHp) drawCracks(brick);

      if (brick.flash > 0) {
        ctx.fillStyle = `rgba(255,255,255,${brick.flash * 0.34})`;
        roundedRect(ctx, brick.x, brick.y, brick.w, brick.h, Math.min(5, brick.h * 0.2));
        ctx.fill();
      }
      ctx.restore();
    });
  }

  function drawPowers(time) {
    state.powers.forEach(power => {
      ctx.save();
      ctx.translate(power.x, power.y);

      const glow = ctx.createRadialGradient(0, 0, 0, 0, 0, power.r * 2.2);
      glow.addColorStop(0, power.type === "wide" ? "rgba(69,230,255,0.55)" : "rgba(255,103,195,0.55)");
      glow.addColorStop(1, "rgba(0,0,0,0)");
      ctx.fillStyle = glow;
      ctx.beginPath();
      ctx.arc(0, 0, power.r * 2.2, 0, TAU);
      ctx.fill();

      ctx.save();
      ctx.rotate(power.rotation);
      ctx.strokeStyle = power.color;
      ctx.lineWidth = 1.5;
      ctx.setLineDash([5, 4]);
      ctx.beginPath();
      ctx.arc(0, 0, power.r + 5 + Math.sin(power.phase) * 1.5, 0, TAU);
      ctx.stroke();
      ctx.restore();

      const core = ctx.createRadialGradient(-3, -4, 0, 0, 0, power.r);
      core.addColorStop(0, "#ffffff");
      core.addColorStop(0.3, power.type === "wide" ? "#b9fbff" : "#ffd4f1");
      core.addColorStop(1, power.color);
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.arc(0, 0, power.r, 0, TAU);
      ctx.fill();
      ctx.strokeStyle = "rgba(255,255,255,0.72)";
      ctx.lineWidth = 1;
      ctx.stroke();

      if (power.type === "wide") drawWideIcon(ctx, 0, 0, 7);
      else drawMultiIcon(ctx, 0, 0, 7);
      ctx.restore();
    });
  }

  function drawBalls() {
    state.balls.forEach(ball => {
      if (ball.attached) {
        ctx.save();
        ctx.setLineDash([3, 7]);
        ctx.strokeStyle = "rgba(116, 231, 255, 0.18)";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(ball.x, ball.y - ball.r);
        ctx.lineTo(ball.x, ball.y - 62);
        ctx.stroke();
        ctx.restore();
      }

      ctx.save();
      ctx.globalCompositeOperation = "lighter";
      for (let i = ball.trail.length - 1; i >= 0; i--) {
        const point = ball.trail[i];
        const ratio = 1 - i / ball.trail.length;
        ctx.globalAlpha = ratio * 0.24;
        ctx.fillStyle = ball.color;
        ctx.beginPath();
        ctx.arc(point.x, point.y, ball.r * (0.38 + ratio * 0.62), 0, TAU);
        ctx.fill();
      }
      ctx.restore();

      ctx.save();
      const glow = ctx.createRadialGradient(ball.x, ball.y, 0, ball.x, ball.y, ball.r * 3.2);
      glow.addColorStop(0, "rgba(185, 250, 255, 0.48)");
      glow.addColorStop(0.35, "rgba(69, 230, 255, 0.14)");
      glow.addColorStop(1, "rgba(69, 230, 255, 0)");
      ctx.fillStyle = glow;
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.r * 3.2, 0, TAU);
      ctx.fill();

      const core = ctx.createRadialGradient(
        ball.x - ball.r * 0.35, ball.y - ball.r * 0.4, 0,
        ball.x, ball.y, ball.r
      );
      core.addColorStop(0, "#ffffff");
      core.addColorStop(0.38, ball.color);
      core.addColorStop(1, ball.color === "#e7fdff" ? "#49cde8" : "#ca4d99");
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.r, 0, TAU);
      ctx.fill();
      ctx.restore();
    });
  }

  function drawPaddle(time) {
    const p = state.paddle;
    ctx.save();

    if (state.wideTimer > 0) {
      ctx.shadowColor = "#45e6ff";
      ctx.shadowBlur = 20 + Math.sin(time * 9) * 5;
    }

    const gradient = ctx.createLinearGradient(p.x, 0, p.x + p.w, 0);
    gradient.addColorStop(0, "#3ed9f4");
    gradient.addColorStop(0.48, "#7395ff");
    gradient.addColorStop(1, "#c074ff");
    ctx.fillStyle = gradient;
    roundedRect(ctx, p.x, p.y, p.w, p.h, p.h / 2);
    ctx.fill();

    ctx.shadowBlur = 0;
    ctx.strokeStyle = "rgba(228, 250, 255, 0.72)";
    ctx.lineWidth = 1;
    ctx.stroke();

    ctx.strokeStyle = "rgba(255,255,255,0.62)";
    ctx.lineWidth = 1.2;
    ctx.beginPath();
    ctx.moveTo(p.x + 9, p.y + 2);
    ctx.lineTo(p.x + p.w - 9, p.y + 2);
    ctx.stroke();

    if (state.wideTimer > 0) {
      ctx.fillStyle = "rgba(255,255,255,0.72)";
      ctx.fillRect(p.x + 10, p.y + p.h * 0.58, 5, 2);
      ctx.fillRect(p.x + p.w - 15, p.y + p.h * 0.58, 5, 2);
    }
    ctx.restore();
  }

  function drawParticles() {
    ctx.save();
    state.particles.forEach(particle => {
      const alpha = clamp(particle.life / particle.maxLife, 0, 1);
      ctx.globalAlpha = alpha;
      ctx.fillStyle = particle.color;
      ctx.translate(particle.x, particle.y);
      ctx.rotate(particle.rotation);
      if (particle.round) {
        ctx.beginPath();
        ctx.arc(0, 0, particle.size * alpha, 0, TAU);
        ctx.fill();
      } else {
        ctx.fillRect(-particle.size / 2, -particle.size / 3, particle.size, particle.size * 0.66);
      }
      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
    });
    ctx.restore();
  }

  function drawTexts() {
    ctx.save();
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    state.texts.forEach(text => {
      const alpha = clamp(text.life / text.maxLife, 0, 1);
      ctx.globalAlpha = alpha;
      ctx.font = "900 13px ui-monospace, SFMono-Regular, Menlo, monospace";
      ctx.fillStyle = "rgba(0,0,0,0.6)";
      ctx.fillText(text.text, text.x + 1, text.y + 1);
      ctx.fillStyle = text.color;
      ctx.fillText(text.text, text.x, text.y);
    });
    ctx.restore();
  }

  function render(time) {
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
    ctx.clearRect(0, 0, W, H);
    drawBackground(time);

    ctx.save();
    if (state.shake > 0 && !reducedMotion) {
      ctx.translate(random(-state.shake, state.shake) * 0.5, random(-state.shake, state.shake) * 0.5);
    }
    drawBricks(time);
    drawPowers(time);
    drawBalls();
    drawParticles();
    drawPaddle(time);
    drawTexts();
    ctx.restore();
  }

  function togglePause() {
    if (state.phase === "playing") {
      state.phase = "paused";
      state.keys.left = false;
      state.keys.right = false;
      showScreen("pause");
    } else if (state.phase === "paused") {
      state.phase = "playing";
      hideScreens();
    }
  }

  canvas.addEventListener("pointermove", event => {
    const rect = canvas.getBoundingClientRect();
    state.mouse.x = event.clientX - rect.left;
    state.mouse.y = event.clientY - rect.top;
    state.mouse.active = true;
    if (state.phase === "playing") {
      state.paddle.targetX = clamp(state.mouse.x, state.paddle.w / 2 + 4, W - state.paddle.w / 2 - 4);
    }
  });

  canvas.addEventListener("pointerdown", event => {
    event.preventDefault();
    ensureAudio();
    try { canvas.focus({ preventScroll: true }); } catch (_) { canvas.focus(); }
    if (state.phase === "demo") {
      startGame();
    } else if (state.phase === "playing") {
      launchAttached();
    }
  });

  document.addEventListener("keydown", event => {
    if (["ArrowLeft", "ArrowRight", "Space"].includes(event.code)) event.preventDefault();

    const onButton = event.target && event.target.closest && event.target.closest("button");
    if (onButton && (event.code === "Space" || event.code === "Enter")) return;

    if (state.phase === "demo" &&
        !["Tab", "ShiftLeft", "ShiftRight", "ControlLeft", "ControlRight", "AltLeft", "AltRight", "MetaLeft", "MetaRight"].includes(event.code) &&
        !event.metaKey && !event.ctrlKey && !event.altKey) {
      startGame();
    }

    if (event.code === "ArrowLeft") state.keys.left = true;
    if (event.code === "ArrowRight") state.keys.right = true;
    if (event.code === "Space" && state.phase === "playing") launchAttached();

    if ((event.code === "KeyP" || event.code === "Escape") &&
        (state.phase === "playing" || state.phase === "paused")) {
      togglePause();
    }

    if ((state.phase === "gameover" || state.phase === "victory") && event.code === "Enter") {
      startGame();
    }
  });

  document.addEventListener("keyup", event => {
    if (event.code === "ArrowLeft") state.keys.left = false;
    if (event.code === "ArrowRight") state.keys.right = false;
  });

  ui.startBtn.addEventListener("click", event => {
    event.stopPropagation();
    startGame();
  });

  ui.startPanel.addEventListener("click", event => {
    if (!event.target.closest("button")) startGame();
  });

  ui.restartBtn.addEventListener("click", startGame);
  ui.victoryRestartBtn.addEventListener("click", startGame);
  ui.resumeBtn.addEventListener("click", togglePause);

  ui.soundBtn.addEventListener("click", event => {
    event.stopPropagation();
    soundOn = !soundOn;
    ui.soundBtn.classList.toggle("off", !soundOn);
    ui.soundBtn.setAttribute("aria-pressed", String(soundOn));
    if (soundOn) {
      ensureAudio();
      tone(420, 680, 0.09, "sine", 0.04);
    }
  });

  document.addEventListener("visibilitychange", () => {
    if (document.hidden && state.phase === "playing") togglePause();
  });

  const resizeObserver = new ResizeObserver(() => resizeCanvas());
  resizeObserver.observe(stage);
  window.addEventListener("resize", resizeCanvas);

  resizeCanvas();
  resetDemoScene();
  showScreen("start");

  let previousTime = performance.now();

  function frame(now) {
    const dt = Math.min((now - previousTime) / 1000, 0.04);
    previousTime = now;
    update(dt);
    render(now / 1000);
    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Reasoning trace (36,012 tokens)

We need produce exactly one fenced code block with complete HTML file, self-contained polished breakout game. Need plan thorough implementation, make visually compelling, functional, meet all requirements, 1280x800 viewport, responsive down to 375. No external assets. Canvas game. Paddle mouse and arrow keys. Bounce angle based on hit position. 6+ rows mixing normal/tough. Power-ups visible on some bricks, drop and caught gives wider paddle 10s or multi-ball (3 balls). Ball never passes through bricks/paddle. Particles on break. 3 lives score. Game over and victory screens restart. Demo self-playing mode behind "Click or press a key to start" message so judged in action without playing. Need maybe attract mode with AI paddles automatically until start? Developer says games must start in self-playing demo mode (simple AI plays) behind a "Click or press a key to start" message, so screenshot at 3 seconds shows the game in action. We should implement demo AI controlling paddle behind overlay, bricks chipping etc? Ideally the actual game is running in demo mode with AI paddle, score possibly, but overlay message visible. On click or key start real game. First paint meaningful. Need make it look polished: gradient background, glow, modern typography (system fonts), HUD with score/lives/level maybe combo, canvas with side panel? 1280x800. Could build full-window canvas scene with HTML HUD overlay? Requirements single HTML file vanilla JS and canvas. We can use HTML for HUD and canvas. Better canvas fills viewport with HUD panels as DOM? "using vanilla JavaScript and a <canvas>" fine. Use canvas for gameplay and maybe DOM HUD for crispness. But screenshot at 1280x800 must look good. Could do an app shell with canvas gameplay area in center, decorative background, header with title, HUD chips, side power-up legend, controls. But responsiveness at 375 wide: canvas adapt, panels stack/hide.

Alternative: pure canvas with everything drawn including HUD. This ensures cohesive scaling and responsive. Could render on a canvas sized to container, with logical resolution scaling. But mouse coordinates easy. DOM HUD easier for accessibility. Yet an overlay start screen, game over, victory can be DOM. Need make polished.

Let's design:

- Body dark gradient background (#060914) with subtle animated aurora via CSS pseudo-elements.
- Main .game-shell max-width 1180px, margin auto, padding 18px.
- Header: left brand "NEON // BREAKOUT" with small subtitle; right stat pills: SCORE, BEST? maybe lives hearts, level. We don't need best persistence due no localStorage. Show score, lives, level, combo.
- Main .stage-wrap: position relative; canvas aspect ratio maybe 16:10, width 100%, height computed. Use CSS aspect-ratio: 16/10 with max-height calc? At 1280x800, header ~70px, footer ~40 => canvas about 620px tall; width ~1150 => aspect 1.85. Game internal logical W=1000 H=620 maybe ratio 1.61. Better canvas logical width 1000, height 620 (1.61), display 1130x640? At 1280 height 800 fits maybe 620. Let's set shell max-width 1120, header 72, stage height clamp(380px, calc(100vh - 190px), 640px). Canvas fills stage; internal coordinates adapt based on actual pixels? We can set canvas width=1000*dpr etc and scale coordinates by actual CSS size / 1000, but vertical varies. Simpler use logical dimensions based on stage CSS pixels with dpr, world width=stage width, world height=stage height. Brick layout computed relative to world dims. Need robust resize handling. Use CSS stage height: clamp(420px, calc(100vh - 190px), 660px). At 1280x800: calc 610 => 610. Width ~1120. Aspect varies. On mobile width ~347, height clamp min 420? This makes tall. Could media query height: min(66vh, 560px) maybe min-height 380. At 375x667: stage width 347, height 420 maybe okay. No horizontal scroll.

Logical coordinates in CSS pixels directly; set ctx transform dpr. Canvas width = rect.width*dpr. Keep W = rect.width, H = rect.height. Physics adapt to width. Paddle dimensions relative W: base width Math.max(82, Math.min(130, W*0.12))? At 1120 => 130; mobile 347 => 82. Base y = H-36 maybe. Brick area: top offset maybe 78; margins. Rows 7. Number columns depends on width: desktop 11, mobile 8? Need stable responsive: choose columns = W<520 ? 7 : W<800 ? 9 : 11. Rows = 7 maybe 8. At least 6. Layout bricks fit. Use cell sizes with gap. Brick area from x=margin to W-margin, top=74, bottom maybe 78? Row height = clamp based. At mobile width 347, 7 cols => brick width ~42; readable. Height 420: top 56, bottom area ~150, row height ~20. Good.

HUD DOM:
<header class topbar>
 brand with icon perhaps CSS.
 stats: score, lives (hearts drawn via inline SVG? no external; inline SVG allowed) or CSS dots. Lives 3 as spans with SVG hearts. combo maybe. Timer for wide paddle? status bar below canvas showing power timers and controls.
 Could put HUD stats top of canvas? Better DOM.

- Canvas draws playfield:
  - subtle grid lines / gradient, boundary rails, top title "SECTOR 01" maybe.
  - brick colors: normal bricks with gradients, tough bricks with metallic dark color, crack lines after hit. Power-up bricks have an icon: maybe capsule icon inside (↔ for wide, ⋙ for multi) and glow. Requirement "Some bricks visibly carry a power-up icon; when broken they drop it". So brick types include normal, tough, powerWide, powerMulti. Tough may also be power? Could make some tough bricks carry icon? Requirement says some bricks visibly carry power-up icon; could be normal bricks with icon. Better each power-up brick is a normal brick with icon (↔ or ≋) plus distinct color. Some can be tough carrying icon maybe; but simpler: normal bricks and tough bricks, some bricks (normal or tough) with power icon. If tough with power, only drop when broken. We can choose icons: wide paddle = horizontal double arrow, multi = three dots/triangles. Draw icon vector on brick. Also legend at bottom explains.

  - Ball: glowing circle with trail.
  - paddle: rounded gradient, highlight, maybe energy bar when wide.
  - particles: colored shards with velocity and gravity, fading.
  - falling powerups: capsule or orb with symbol, bobbing; fall slowly; catch based on paddle overlap.
  - screens overlays DOM: start overlay with "CLICK OR PRESS A KEY TO START" and AI demo status. Game over, victory. Overlay glass card.
  
- Demo mode: Behind start overlay, game runs with AI-controlled paddle tracking ball (predict ball x). Need demo mode self-playing. But if overlay covers canvas with translucent card, game visible. Requirement screenshot ~3 seconds should show action. Start overlay should be visible but not completely hide canvas. We can use overlay with backdrop-filter maybe dim; card center but transparent. The action visible behind. Demo AI could actually play, but do we want score changes? We can reset to demo setup maybe simulation not affecting actual score; overlay shows "AUTO-PILOT DEMO • TAKE OVER ANYTIME". AI paddle follows lowest descending ball; if ball going up waits. It should break bricks, particles. Use same game engine in "demo" state, but lives ignored; when ball lost in demo, reset ball and maybe regenerate? Keep score demo but on start reset game. Demo starts immediately, no waiting. On key/click anywhere, start fresh game with user control. But click on overlay button. Keydown arrows also starts. Mouse movement maybe click? requirement click or key. We'll bind pointerdown on canvas/stage to start, and keydown any.
- The overlay start card shouldn't block whole canvas; use pointer-events none except button? If pointer-events none, click passes to canvas and starts. Button can have pointer-events auto. Card centered. Maybe overlay gradient not heavy. Label "CLICK OR PRESS A KEY TO START" prominent, pulsing. Demo status with green dot "AI DEMO PLAYING".
- Need ensure screenshot at 3 sec shows particles, ball etc. The demo AI should be effective enough. Initialize bricks and ball; the AI tracks. It may take time but fine.

Game mechanics:
State: 'demo', 'playing', 'paused'? 'gameover', 'victory', maybe 'transition'. Game starts demo.
Physics:
- Balls array of objects {x,y,vx,vy,r,trail:[]}. Base speed perhaps 420 px/s scaled by W? At width 1120, 430 good. Mobile maybe 330. Use speed = clamp(W*0.38, 320, 460). For multiple balls, each same speed.
- paddle {x, y, w, h, targetX}. base width = clamp(W*0.11, 82, 128). wide paddle timer 10 seconds, width = base*1.55 maybe. Multi-ball pickup: "multi-ball (3 balls)"—catching gives 3 balls total. If existing one, add 2 so total 3. Need interpret: gives either wider paddle 10s or multi-ball (3 balls). We'll ensure total balls = 3. Implementation: on catch multi, while balls.length<3 clone from caught ball with angle variations. If already 3, maybe reset to 3 and +bonus, but ideally "3 balls" exact. Could set first three. Score.
- Paddle movement via pointer move: targetX = mouse x relative canvas; update x toward target. Arrow keys set velocity. Left/right arrow control. Need mouse and keyboard simultaneous. Use keys.left/right. In update: if key, x += dir * 520*dt, target = x. else lerp x toward target with exp smoothing. clamp within bounds. pointermove sets target even in demo? In demo ignore until start maybe.
- Paddle collision: detect ball moving down and ball bottom >= paddle.y and ball top <= paddle.y+paddle.h and x within expanded paddle. Need continuous collision to never pass through. Bricks and paddle high speed can tunnel if dt large. Use fixed timestep (1/120 maybe) and swept collision? Requirement ball never passes through bricks or paddle. We can implement robust continuous collision or substeps plus AABB circle swept. Fixed timestep 1/120 ensures max movement ~4px per step; brick thickness >=16, ball radius 7, so no tunneling. But edge fast horizontal might skip 4 < width. Good. Still do robust swept vertical crossing: if previous bottom <= brick.y and new bottom >= brick.y and horizontal overlap at crossing. Use substep and maybe separate resolution.

Let's build collision detection using circle vs AABB and reflection. Standard resolveCircleAABB can cause corner artifacts but works. Better:
- For each ball, previous position stored px,py before movement.
- Brick collisions: Find candidate bricks where overlap with circle at new position. Determine collision axis by minimal penetration. Reflect vx/vy accordingly. Position correction.
- Because fixed dt 1/120 and speed <500, displacement <4.2; brick height min 14, so cannot fully skip unless grazing at corner but overlap detection catches. At corner the circle overlap might be detected. We can use circle-AABB closest point; distance < r. If collision, choose axis based on previous position or penetration. Standard:
  let closestX=clamp(ball.x,b.x,b.x+b.w); closestY=...
  dx=ball.x-closestX, dy...
  if dist2 < r^2:
     if dist>0: normal = (dx/dist,dy/dist); ball.x += normal.x*(r-dist+eps); ball.y += normal.y*...; reflect v along normal.
     else center inside rectangle: compute overlap distances, choose min side; set position, invert axis.
This catches bricks. But a fast ball can overlap two bricks at same time; process all; reflection might double flip. We can iterate candidates and reflect each could weird. Better resolve one deepest collision then re-evaluate? Since bricks separated by gaps, ball diameter ~14 and gaps 6, could touch both edges if gap small. Use gap 6 desktop / 4 mobile and r=6.5; can't overlap two across gap of 4 (diam 13). vertical row gaps 6. Fine. Process first collision and break.

Bricks:
types:
- normal: hp1, colors cyan, purple, pink maybe.
- tough: hp2, dark slate with border and rivets; after hit draw cracks.
- power bricks: could be 'normal' hp1 with power property wide/multi; drawn colored bright with icon; tough power? Let's design pattern with 7 rows and 11 cols desktop. 8 rows? Requirement at least 6. Use 7 rows, 11 cols. Pattern:
 row 0 top: some tough, some normal
 etc. To guarantee power-ups visible, place several.
Brick hp:
 type tough = hp 2, maxHp2; normal hp1. tough draw grey/indigo with metallic texture and cracks after hit.
 Powers: assign power 'wide' or 'multi' to maybe 6 bricks including a couple tough? Need ensure both pickups possible. In demo, if power drops and AI catches, the wider paddle/multi visible. Could choose pattern robust.

Create matrix of 8 rows x 11 columns:
Maybe normal colors per row. Let's define rows=7? At least 6. Use 8 maybe richer.
For each row/col, skip some bricks to form shape? Need victory requires all bricks broken. If skip cells, those are empty and not counted.
Pattern maybe full rectangular grid with missing accents. 8*11=88 bricks; game may be long. Demo over 3 seconds no concern. Actual game polished. Could do 7 rows x 10 = 70. Victory reachable. 6 rows minimum. Let's use 7 rows, 10 columns desktop, mobile 7 cols x 7 rows. Full grid minus a few empty creates style. Maybe a diamond/arch? Build mask with fixed array? Since columns vary, use condition:
- 8 rows? Let's use 7 rows.
- Desktop 10 columns. Use hole patterns for row indexes and columns to create symmetric gaps. Could just full. A full brick wall looks classic and clear. Use all.
- tough bricks pattern: if (row+col)%5===0 or row==0 && col%3==0 => tough. About 14 tough.
- power bricks: choose specific coordinates based on cols: wide at row 2, col floor(cols*0.22); multi at row 3, col floor(cols*0.72); plus row 5 edges etc. Need icons visible.
Colors by row: cyan, violet, coral, amber. Power bricks perhaps magenta with white icon.
- Tough bricks should visually distinct: dark indigo with double border / diagonal pattern; when hit hp1 show crack lines, color desaturated and chip mark.
- Cracks visibly drawn: jagged polylines across brick; also maybe fragments chipped corner.
- Score: normal 50 * maybe row multiplier, tough 75 first? Score for breaking tough 120. Power 100. Combo multiplier if quick successive brick hits? Could add combo HUD, increases every brick hit within 1.5 sec. Nice polish. Score displayed. Need not overcomplicate. Combo resets after 1.8s. HUD "x2 COMBO" etc.

Lives:
3 lives shown as heart icons. When ball falls: decrement life, reset ball to paddle, small penalty/combo reset. If 0 game over overlay. Multi-ball lives: lose one ball counts as life lost? Usually in breakout, life lost when all balls gone. Requirement 3 lives. Better: lives decrement only when all balls are lost. But if multi-ball and one drops, still continue. That feels fair. When last ball lost, life--. If >0, reset single ball on paddle. If 0, game over.
- Ball can be stuck launching from paddle. On start/respawn, ball attached to paddle until pointer movement or space? Requirement simple. We could auto-launch after 0.8 sec, or on click. But demo needs action. We can launch automatically after 1 second. In playing, launch after 0.9 sec to allow positioning. HUD shows "LAUNCHING…". Arrow/mouse movement can trigger earlier. Start overlay click starts game and ball launches after 0.8 sec. No second click necessary. On life loss, auto launch after 1.1 sec. Maybe pointer movement launches immediately; but mouse movement to position. Good.
- If multiple balls, new ones launched.
- Ball speed increments slightly over time or per brick to pace. Cap.
- Ball trail array (positions up to 8) and draw glow.
- Screen shake on break/life lost maybe subtle.
- Particles on brick break: 10-16 particles color of brick, random velocities, gravity, life; also floating score text "+50" near break. Nice.
- Brick hit tough first: crack particles maybe 5 dust, sound? WebAudio optional. Since user may expect polished; can implement simple synth sounds with Web Audio created only on interaction (click/key). No external. Start demo should maybe no audio because no user gesture; don't create until start. Sound toggle button maybe. A sound icon button. But adding complexity; still good. We can implement AudioContext lazily in start. Simple oscillator for hit/break/power/life. Sound toggle DOM button (aria). No errors if unavailable. Include "SOUND ON/OFF".
- Pause on visibilitychange? Could pause if playing. Escape/P toggles pause. Overlay for paused maybe. Not required but polish. Need not risk.

Victory: all bricks cleared (including tough). Show overlay with score, "SECTOR CLEARED", restart button. Restart option for both game over/victory. Start overlay. Could add buttons.
- The demo mode if it clears bricks? It might eventually; overlay still visible. If demo clears all, reset demo wall after short delay. Same for lives.
- Demo AI behavior: track lowest downward-moving ball target. If none, move to center. Could predict target at paddle line: x + vx*(timeToPaddle) with wall reflections approximate. But simple track x is enough with paddle width. speed. We can choose target nearest bottom x. With ball speed 400 and paddle movement 600 maybe. Better AI target = ball.x + ball.vx * 0.15? Actually as ball descends, paddle should anticipate. Compute t = (paddle.y - ball.y)/vy if vy>0; predict x = ball.x + vx*t; reflect approximate boundaries. clamp. Target. Smooth. AI paddle speed 700. Ball may still escape. Reset on loss.
- Demo may not break bricks quickly if ball vertical. Initial ball launched with angled 0.28 rad.
- Demo should show visible "AI DEMO" pill in top of canvas / overlay.

Power-up behavior:
- On brick broken with power property, spawn falling item at brick center. item {x,y,type,vy: maybe 100, r:13, phase}. It falls to bottom. Catch if intersects paddle. Draw glowing orb/capsule with icon and rotating ring. If falls below, lost (maybe message).
- Wide paddle gives 10 seconds. HUD status timer. Draw "WIDE PADDLE • 9.8s" in power bar DOM. Paddle width expanded; maybe ends glow.
- Multi-ball gives 3 balls. When catch: ensure 3 balls, spawn two at current ball position with angles +/- 0.45. Keep exactly 3, if already 3 maybe give all three fresh angles or just score. Requirement gives multi-ball (3 balls). Implement if balls.length&lt;3 clone; if already &gt;=3, don't add; perhaps reset the existing balls to 3 exactly (truncate) and angle them. But normally pickup one ball only. Use while &lt;3.
- A power pickup could be dropped from tough brick only after 2 hits, showing crack then final. Great.

Collision with walls:
- left/right/top; bounce. Prevent horizontal speed too low: if abs(vx)&lt;min (speed*0.18) adjust.
- paddle bounce depends on hit offset: offset=(ball.x - paddle.x)/ (paddle.w/2), clamp -1..1; angle = offset * maxAngle (e.g. 1.05 rad from vertical ~60 deg). vx = sin(angle)*speed; vy=-cos(angle)*speed. Center exactly straight up (vx 0). Edges sharp angle. Good. Apply paddle velocity influence maybe slight.
- paddle collision continuous: previous bottom &lt;= paddle.y and new bottom &gt;= paddle.y and x overlap, using swept crossing. This ensures never pass. If ball going up and intersects from below? Only if vy&gt;0. Use prev y.
- Ball bottom beyond H: lost.
- Ball vs brick with swept: with fixed dt 1/120, okay. Could do swept circle rect more robust for "never pass through". Let's implement discrete plus substep. Fixed update with accumulator; each frame dt clamped .033, step 1/120, max 4 substeps. Speed maybe 700 during multi? At 1/120 5.8 px, brick h ~20. okay. Still at 375 width speed maybe 320. Fine.

Resize:
- On resize, recompute W/H, canvas backing; rebuild bricks based on new dimensions and preserve game state? easiest reset game if playing? Better rebuild layout while preserving bricks by mapping grid? Simpler store grid rows/cols and regenerate layout with hp. On resize could reconstruct based on current hp values by index. Need support cols changes. We'll define buildLevel resets all. On resize while demo/playing maybe rebuild while maintaining hp if grid same; but cols changes. Could just preserve total state and map proportionally, but not critical. We'll call resize and rebuildBricksFromState maybe. For responsive, initial.
- Use ResizeObserver on stage; set canvas size; update dimensions. Rebuild layout:
  rows = 7; cols = W < 520 ? 7 : W < 800 ? 9 : 11.
  margin = W<520? 12: 24;
  top = 56; bottom = H - 100 maybe; rowGap=6; available height = H - top - 115; rowH = min(36, available/rows - gap); if mobile H 420 available 249? rowH ~29; good. But brick area should not take too much vertical leaving ball area. At desktop H610, top70, bottom area maybe 170; available 370 -> rowH 46 cap 34. 7*34+6*6=274, bottom at ~344; paddle at 574, plenty. On mobile H430, top56, brick bottom 56+7*22+6*5=241; paddle 395, 150 space. rowH formula available = H-top-150=224, per=32, cap? rowH = clamp(available/rows-gap, 18, 30) => 27. Good. Let's set rowH = Math.max(18, Math.min(34, (H-top-145)/rows - 5)). Desktop H610: (610-62-145)/7=57.5 => 34. mobile H430: (430-52-125)/7=36 => 31. Okay.
  brick gap x= max(5, W*0.007), y=6.
  cellW=(W-2*margin - gaps*(cols-1))/cols.
- paddle y=H-38 (h 14), ball spawn above.
- Powers list.
- Bricks stored array {row,col,x,y,w,h,hp,maxHp,type,color,power}. Empty cells maybe pattern. Need all broken count.
- Use type 'normal'|'tough', power optional. Colors.
- Build levels with holes? Full. Maybe one row with 2 gaps to look designed. But victory count adjusts. Use predetermined mask dependent on cols: skip if row==3 && (col==Math.floor(cols/2)-1 or col==Math.floor(cols/2))? Creates center notch. Could be fine. Need power positions not skipped.
- Build pattern function:
   tough = (row===0 && col%3===1) || (row===6 && col%2===0) || ((row+col)%7===0) maybe many.
   powers set positions by relative fractions.
  We want both icons near visible region. Set wide on row 2 col floor(cols*.2), multi on row 3 col floor(cols*.78), plus tough power at row 5 col floor(cols*.45) maybe. Icon easy.

Maybe all bricks carry subtle highlights and top border. Canvas gradient for each brick can be expensive 77 gradients each frame. We can pre-render? Fine at 77 and 60fps perhaps okay. Could cache gradient but canvas changes. Use fill solid plus linear gradient created per brick each frame ~77, acceptable. Better use createLinearGradient in drawBrick for rich. Fine.
- Glow shadows can be expensive. Limit.

Canvas rendering details:
ctx clear; draw background:
  fill gradient top #0b1022 to #050712.
  radial glows near top center (purple/cyan) maybe gradients.
  grid: horizontal/vertical lines alpha .03, moving? subtle.
  border rails: left/right vertical neon lines gradient, top line.
  canvas vignette.
  Draw "SECTOR 01" small at top-left, "BRICK BREAKER" top-right maybe.
  Ball trail.
  Bricks.
  powerups.
  paddle.
  particles behind/above.
  floating texts.
  Screen shake apply to world elements but not background maybe.
  maybe decorative launch line.
- DOM overlay:
  .screen-overlay position absolute inset 0 display grid center; background rgba(3,6,14,.38), backdrop-filter blur(2px). start card glass, border, shadow, width. But blur may obscure action slightly. Use background radial gradient transparent center? Maybe overlay card with backdrop-filter only card, and overlay pointer-events none. Use .screen with pointer-events:none; .panel pointer-events:auto. Overlay background linear gradient rgba low.
  start panel centered slightly left? centered. Since game action behind, card covers center bricks but still edges visible. Could put panel bottom-center? But message should be obvious. Maybe top-center banner not large. Requirements "behind a 'Click or press a key to start' message". A central card with message is conventional. We'll use compact panel max 430 with title "READY TO SHATTER?" and big "CLICK OR PRESS A KEY TO START", button "START RUN". Under "AI demo is live • your run begins instantly". The card can be ~360x240; canvas still visible around.
  For game over/victory, bigger panel with score and restart button.
- Header:
  brand logo with small canvas? Use CSS icon of stacked rectangles.
  title "BRICK//BLASTER" or "NEON BREAKOUT". Polished. Let's pick "NEON BREAKOUT" with gradient text.
  small eyebrow "ARCADE // SECTOR 01"
  stat chips with labels SCORE, COMBO, LIVES hearts.
  sound button.
  responsive: header flex wrap; at mobile brand and stats in two rows, hide subtitle.
- Footer status:
 left control hints with keycap style "← →" "MOUSE"
 center active power indicator: "WIDE PADDLE 09.8s" or "MULTI-BALL ×3" plus status.
 right "3 LIVES • CLEAR ALL BRICKS".
 On mobile wrap and hide some.

Maybe an HTML .stage-frame with border and corner decorations, canvas.
- canvas has aria-label, tabindex=0.

Input:
- pointermove on canvas: update mouse.x, mouse.active. If playing and ball attached, maybe not launch automatically? Could launch after delay. If user moves mouse during waiting, could launch; maybe annoying. Better only click/space launches? But requirement only paddle controlled mouse; no need click during play. We'll launch automatically after 1.1s, but pointer movement can launch early for responsiveness. Start overlay click starts and moves target perhaps.
- pointerdown canvas: if demo, startGame. If playing and ball attached, launch. In gameover/victory overlay button restart.
- keydown: if demo and key is any except maybe tab? Start on ArrowLeft/Right/Space/Enter; requirement press a key. Could start on any key (not modifier), yes.
  if playing: ArrowLeft/Right set keys; Space launches attached; P/Escape pause.
- keyup.
- mousemove if demo? Should not start until click per message "Click or press a key"; moving alone not.
- Buttons start/restart call startGame, event stopPropagation.
- focus canvas maybe.
- Prevent arrow default scroll.

Pause overlay optional; state paused. On P show panel "PAUSED" and resume button. But overlay system dynamic. Could simplify, but polished. Implement state variable screen = 'start'|'gameover'|'victory'|'paused'|null. gameMode separate 'demo'|'play'. Actually state.mode. For start screen demo mode. Screen overlays via DOM elements hidden with class. For pause, pause screen. Use .hidden.
- On visibilitychange, if mode play and screen null, set paused.

Game loop:
let last=performance.now(), acc=0.
requestAnimationFrame loop:
 dt = min((now-last)/1000, 0.05)
 if not paused:
   update(dt)
 render()
update:
  update particles and text even demo.
  if mode demo: updateDemoPaddle, update balls, collisions, powers, maybe reset.
  if mode play: update player paddle; update balls.
  combo timer.
Fixed-step physics:
Could do accumulator:
 frame dt <=.033. if active, acc += dt; while acc >= STEP: physics(STEP); acc -= STEP. But paddle update can happen in frame or step. Do in physics.
Particles update in frame dt.
Powers fall frame dt.
When state changes inside substeps (life lost) avoid continuing. Check.
Attract demo: lives irrelevant. If all balls lost, reset attached after .5; if all bricks cleared, reset demo level after 1 sec. We can track demoResetTimer. On initial demo, game built, mode demo, attached ball to paddle and launch after 0.8. The overlay says AI demo.
Demo AI paddle target. Starting paddle at center. Ball launch.
During demo, score increments but HUD maybe show "DEMO" or actual? Score displayed. Could show score 000000 in demo and update. Fine.
On startGame reset level, balls, score=0, lives=3, combo=1, wideTimer=0, hide overlay, mode='play', pointer target center. Need perhaps initial ball attached and countdown.
- score formatting padStart(6,'0').
- lives hearts DOM update.
- active power DOM update.
- On brick hit, hit flash and crack. If tough hp--. Particle count lower for chip.
- brick break: remove or hp=0; count. drop power. Score. particles.
- Break bricks in demo too.

Collision details more:
Fixed physics:
function step(dt) {
  if (state.mode==='demo') updatePaddleAI(dt) else updatePlayerPaddle(dt)
  for each ball:
    if attached: follow paddle; if launchDelay<=0 launch.
    else:
      b.px=b.x; b.py=b.y;
      b.x += b.vx*dt; b.y += b.vy*dt;
      wall collision: if x-r<0 {x=r; vx=abs; wallFx} etc.
      top.
      paddle: if b.vy>0 && b.py+r <= paddle.y+? and b.y+r >= paddle.y && b.x+r > p.x && b.x-r < p.x+p.w. But after substep, py bottom could already be >paddle.y if collision. Condition b.py + r <= paddle.y + 2? To avoid tunneling. Because step small. Set if b.py <= paddle.y && b.y+r >= paddle.y && horizontal. bounce at paddle.
      Also if ball somehow inside paddle while moving up? ignore.
      brick collision: circle AABB at new pos; reflect. But if collision from top/bottom. Use minimum penetration axis. After collision, maybe adjust.
  Remove balls off bottom after loop.
}
But paddle collision and brick collision ordering. Bricks are above, paddle below, no overlap.
For brick collision circle:
for brick of bricks if hp>0:
 closest; dist. If dist2 <= r^2:
   determine normal. If dist>0:
     nx=dx/dist, ny=dy/dist.
     // reflect: dot = vx*nx+vy*ny; if dot<0, v -=2dot n
   else (center inside): overlap left/right/top/bottom; choose smallest; set position outside; invert.
   handleBrickHit.
   break out maybe.
This can cause glancing corner.
Also sweep vertical crossing check to prevent tunneling when ball jumps entirely through thin brick in one step. Use previous position:
 if b.vy>0 and b.py <= brick.y - r? Actually swept circle against AABB if prev bottom <= brick.y and new top? Standard vertical crossing: prevY + r <= brick.y && newY + r >= brick.y and x within brick width+r => hit top. If vy<0 and prevY - r >= brick.y+brick.h && newY - r <= brick.y+brick.h => hit bottom. This catches whole crossing. But if hits at corner, overlap detection handles.
We can implement checkCollision after move:
  if overlap -> resolve.
  else if vy>0 and prevY + r <= brick.y && y + r >= brick.y && x+r > brick.x && x-r < brick.x+w -> set y=brick.y-r; vy=-abs(vy); hit.
  else if vy<0 similarly.
Given step 1/120 enough.

However with ball radius 6 and brick height min 22, displacement <5, cannot skip. Good.
Paddle thickness 14, step 4, ball diameter 13, can't skip.

Ball speed:
function launchBall(ball, angleOffset=0):
 speed = clamp(W*0.36, 340, 460); maybe with combo/wave factor. b.vx = sin(angle)*speed; b.vy=-cos(angle)*speed.
 normalize after paddle bounce to keep speed. If speed increases due bricks, cap 560.
 On paddle bounce, use current speed maybe base* (1+min(levelProgress*.12,.12)).
 Edge angle max 1.05 rad (60° from vertical); speed maybe 420, vx 364. Good.
- center straight up exact vx=0. If paddle moving, maybe don't add vx to preserve exact. Don't.
- prevent shallow angle from ball too horizontal? paddle angle fixed.
- Multi ball clones speed.

Brick layout and coordinates:
stage maybe canvas border. We draw play area all canvas including top.
const margin = W<520? 12: 26;
const top = H<520? 48: 62;
const bottomLimit = H - 118; brick area height = bottomLimit-top;
gap = W<520?4:7;
rowH = clamp((bottomLimit-top - gap*(rows-1))/rows, 18, 36).
colGap=6.
brickW = (W - margin*2 - colGap*(cols-1))/cols.
x = margin + col*(brickW+colGap); y=top+row*(rowH+rowGap).
At mobile W347 margin10, cols7, colGap4: brickW=(347-20-24)/7=43.3. good.
Desktop W1120 margin26, cols11 colGap7: brickW=(1120-52-70)/11=90.8. rowH 34.
H610 bottomlimit492, top62, gap6 => area430; rowH=(430-36)/7=56 -> cap36, bottom at 62+7*36+6*6=350. Huge ball area 220. Fine.
Maybe rowH cap42 gives 400? 7*42+36=330, bottom392. Still. Use cap38. Fine.
Need visually fill upper half. At H610, bricks occupy ~290; maybe okay. Could use 8 rows? requirement at least 6. 8 rows gives 344. Let's use 8 rows and 11 cols = 88. Tough count. Power. The wall fills upper 40%. Classic. rowH cap 34 -> 8*34+7*6=314, top62 bottom376. Good. At mobile 8*? rowH ~25 ->236, top50 bottom286, paddle396. good.
Rows=8.

Level pattern:
- cols=11 desktop; row 8.
- skip cells? maybe create shape: skip row 7 (bottom row?) leaving bottom row of bricks at y around? Actually row 0 top. All rows full makes wall. Could skip 4 cells to give shape. But power positions. We'll define skip:
  if row === 3 && (col === Math.floor(cols*0.38) || col === Math.floor(cols*0.62)) skip (two holes)
  if row === 6 && col === Math.floor(cols/2) skip.
Maybe looks intentional.
- Tough:
  row 0: col % 3 === 1
  row 7: col % 2 === 0
  (row+col)%6===0
- Powers:
  wide at row 2 col floor(cols*.18)
  multi at row 3 col floor(cols*.78)
  extra wide row 5 col floor(cols*.32)
  extra multi row 6 col floor(cols*.72) maybe if not tough.
  Ensure power brick may also be tough? Make row 2 position normal, row3 normal; extra one tough maybe row5 col 0 tough? But all power icons on colored bricks. We'll mark power even if tough. Crack then drop.
- Brick colors:
  row palettes: ['#37e6ff','#5b8cff','#9b6cff','#d76bff','#ff5da2','#ff8a5b','#ffd166','#58e6b3'] maybe. Normal fill gradient from lighten color to color with alpha.
  tough fill '#334166' to '#172036', border '#7186b5'; after hit cracks.
  Power bricks colored maybe special: wide '#22d3ee', multi '#f472b6' with glow.
- Icons:
  wide: double-headed horizontal arrow drawn white: line and arrowheads.
  multi: three small circles / fan. Draw with ctx.
  legend in DOM using small icons? Could draw with CSS or inline SVG. Use simple text "↔" and "•••". Fine.

Power drop item:
draw circle radius 14 with gradient, outer rotating ring, symbol. Wide symbol ↔, multi three dots.
Paddle catch: if p.y <= item.y+13 and p.y+p.h >= item.y-13 and x overlap, catch. Since item falls; use previous y crossing paddle top to guarantee.
Also can catch if overlap due dt small.
Power falls at ~110 px/s. Its y should spawn at brick y; if brick at top, 2-3 sec to fall. Demo may show it.
If power reaches bottom (H-5) without catch, remove. But AI likely catches.

Particles:
particle {x,y,vx,vy,life,maxLife,size,color,shape,rot,spin,gravity}
on break 14; update.
draw with globalAlpha; fillRect / triangle.
Floating text {text,x,y,life,color}; update up, fade.
- On tough first hit: 6 small dust particles grey and perhaps chip.
- On power catch: burst 24 around paddle.

Screen shake:
shake=0; on break shake=max(shake,2) maybe; on life lost 9. Render apply random offsets if shake>0. This includes gameplay but not HUD.

Audio:
let audioCtx=null, soundOn=true.
ensureAudio called on startGame or button.
tone(freq,duration,type,volume,slide): create oscillator/gain. Hit: 320 square; break 520; power 660->990; life 140 saw. Throttle hit sounds? 88 bricks quick; okay but can throttle to avoid too many. Use lastSound time.
No audio in demo until user interaction, as browser restrictions. On start call.
Sound button toggles, aria-pressed; update text maybe icon "SOUND ON". Use inline simple SVG maybe text.
Need no external network.

HUD update:
scoreEl.textContent = score.toString().padStart(6,'0');
lives hearts: create 3 spans with class on/off; perhaps SVG inline each. DOM static three .heart; update class.
comboEl: if combo>1 `×${combo}` else '—'; class hot.
powerEl: if wideTimer>0 show "WIDE PADDLE" and timer bar. else if balls.length>1 show "MULTI-BALL ×3" etc else "NO ACTIVE POWER".
On demo maybe status "AI DEMO ACTIVE". Stage overlay badge top-right .demo-badge visible in demo.
level maybe "SECTOR 01 / 08".
remaining bricks maybe in footer or HUD. Add stat "WALL" 85. Header stats score, wall, lives. Combo in footer.
Need score displayed clearly.

Layout:
HTML:
<div class="app">
 <header class="topbar">
  <div class=brand>
   <div class=logo-mark aria-hidden><span...></span></div>
   <div><div class=eyebrow>...</div><h1>NEON <span>BREAKOUT</span></h1></div>
  </div>
  <div class=hud>
   <div class=stat><span class=stat-label>SCORE</span><strong id=score>000000</strong></div>
   <div class=stat><span ...>WALL</span><strong id=wall>88</strong></div>
   <div class=stat lives-stat><span>LIVES</span><div id=lives class=hearts>...</div></div>
   <button id=sound class=icon-btn>...<span>SOUND</span></button>
  </div>
 </header>
 <main class=stage-wrap id=stageWrap>
  <canvas id=game></canvas>
  <div class=corner ...>
  <div id=demoBadge class=demo-badge>...</div>
  <div id=overlay class=overlay>
    panels:
    startPanel .panel start-panel
    pausePanel hidden
    gameoverPanel hidden
    victoryPanel hidden
  </div>
  <div class=toast id=toast>
 </main>
 <footer class=statusbar>
   <div class=controls><span class=control-label>CONTROLS</span> <span class=keys><kbd>←</kbd><kbd>→</kbd></span><span>MOVE</span> <span class=divider></span><span class=mouse-icon></span><span>MOUSE</span></div>
   <div class=power-status id=powerStatus>...</div>
   <div class=objective>BREAK EVERY BRICK <span id=wallMini>...</span></div>
 </footer>
</div>

CSS polished:
:root colors. body min-height 100vh; overflow-x hidden; background radial gradients.
body::before noise using CSS repeating-radial? no external. Use background image gradients. Add grid pattern.
.app width min(1180px, calc(100% - 32px)); margin 0 auto; padding 18px 0 12.
topbar display flex align center justify between gap.
brand h1 font 22 uppercase letter spacing .08em; gradient.
logo mark 42 square with border, three pseudo bars.
hud display flex. stat backgrounds rgba white .04, border.
hearts inline SVG.
stage-wrap position relative; height: clamp(420px, calc(100vh - 198px), 640px); border 1px solid rgba; border-radius 20; background; box-shadow; overflow hidden; isolation.
canvas width 100%; height 100%; display block; touch-action none; cursor none? Could hide cursor in play, but mouse visible maybe not. Set cursor:none only playing via class; demo default.
canvas focus outline none.
stage corners decorative via .corner spans.
overlay absolute inset; display flex center; pointer-events none; background radial gradient rgba maybe; transition.
overlay.hidden display none.
.panel pointer-events auto; width min(420px, calc(100%-32)); background rgba(10,14,29,.82); border 1px; border-radius 20; backdrop-filter blur(16px); box-shadow; text-align center; padding 28.
Start panel maybe transform.
button primary gradient cyan to violet, box-shadow, hover.
.pulse-dot etc.
demo badge top 14 right 16.
statusbar display flex; align center; justify; padding 12px 4px; font 11.
power-status with bar.
Responsive:
@media max-width 720:
 app width calc(100%-20px), padding 10.
 topbar flex-wrap; brand h1 18; hud width 100%; justify-content:space-between; stat padding; maybe score.
 stage height: clamp(390px, 64vh, 560px);
 .statusbar flex-wrap; objective display none maybe.
 panel padding 20.
 hide sound text.
@media max-width 480:
 .brand .eyebrow display none; logo 36; h1 17.
 stat label font 8; stat strong 15; wall stat maybe hide? Could keep.
 stage-wrap border-radius 14; height: min(66vh, 500px); min-height:360px.
 overlay panel width; h2 24; message.
 status controls maybe simplified.
@media max-height 700 and min-width 700: stage height calc(100vh-160px) min-height 380; topbar smaller.
Need 1280x800: app width 1180, stage height calc 602px. body total: topbar ~62 + gap? app padding 18+ stage 602 + footer 44+12 = 738. fine.

Could perhaps draw HUD within stage top? We have external.

Start overlay message exact "CLICK OR PRESS A KEY TO START". Great.
Demo badge says "AI DEMO · LIVE".
Start panel:
<p class=overline>ATTract mode</p>
<h2>READY TO SHATTER?</h2>
<p class=start-copy>The autopilot is live behind this card.<br>Take over the paddle and clear the wall.</p>
<div class=key-hint>CLICK OR PRESS A KEY TO START <span class=pulsing-arrow>→</span></div>
<button id=startBtn class=primary>START GAME</button>
small "3 lives · 8 rows · 2 power-ups"
Since overlay card blocks some action, transparency .78. Maybe panel smaller and align near bottom? But centered is standard. The screenshot will show game playing behind. Maybe panel at center 50% but bricks top visible. Fine.

Game over panel:
eyebrow "RUN COMPLETE"; h2 "GAME OVER"; copy; score big; button "RESTART".
Victory: "WALL CLEARED" etc.
Pause: "PAUSED".

Need ensure start button click doesn't double trigger due canvas pointerdown bubbling. button event stopPropagation.

Overlay management:
const panels={start:...,pause:...,gameover:...,victory:...};
function showPanel(name) { overlay.classList.remove('hidden'); all panels hidden; ...}
function hidePanels() { overlay.classList.add('hidden');}
On mode demo initial show start.
On startGame hide, set mode play.
On pause show pause.
On gameover show gameover and set mode? state.mode='play' maybe gameOver boolean. Use state.phase = 'demo'|'playing'|'gameover'|'victory'. screen overlay based phase.
Loop only physics if phase playing or demo; particles always.
For gameover, maybe balls freeze; nice.
When last brick broken:
 phase='victory'; showPanel('victory') after small delay maybe 400ms to see particles. Use winTimer=0.6 and pendingPhase. In update if pending victory timer then show. Similarly gameover could immediate after 300ms.
We'll implement phase variable and pendingEnd.
On last brick break: set pending='victory'; endDelay=0.8; maybe slow-mo? render. Then show.
On life 0: pending gameover.
During pending, no physics? Could keep particles, freeze balls. Update loops only if phase play/demo and no pending.

Demo reset:
if phase demo and pending? If all bricks broken set demoResetTimer=1.2; resetDemo after. If ball lost, set demo ball attached and respawn.
We can simply when demo loses ball: resetDemoBall(); no life decrement. When bricks all cleared: reset level after 1 sec.

But if pending victory set in demo, don't show victory overlay; instead reset demo. So when break last brick in demo, call resetDemo soon, no pending.
In play, pending victory.
Need ensure all bricks not cleared initially. fine.

Score demo: In demo HUD shows score but overlay; okay.

State init:
const state = {
 phase:'demo', score:0, lives:3, combo:1, comboTimer:0, wideTimer:0,
 balls:[], particles:[], texts:[], powers:[], bricks:[], shake:0,
 mouse:{x:0,y:0,active:false}, keys:{left:false,right:false},
 launchCountdown:0, attachedBall:null,
};
buildLevel();
resizeCanvas();
resetDemoScene maybe.
But resize triggers build. Better order:
let W=0,H=0,dpr;
const ro = new ResizeObserver(resize);
resize() obtains, compute layout, buildBricks(true?), set ball positions.
If called at init, state exists. Let's define variables and functions, then init.
- resize: rect stageWrap.getBoundingClientRect(); W=rect.width; H=rect.height; dpr=Math.min(devicePixelRatio||1,2); canvas.width=round(W*dpr); style set via CSS; ctx.setTransform(dpr,0,0,dpr,0,0).
  buildLevelLayout preserving hp? We can just create new level if phase demo, else map. But resizing during play should not reset score/lives. Build function can accept preserve:
    oldMap by row-col of hp; new cols maybe. But if changed cols, old map mismatched. Use normalized index? Store id = row*100+col. If cols changed, lost state acceptable? But to avoid reset score, build new with max hp and then set hp based on old array sorted by id? We can maintain grid of hp and map. Simpler buildLevel() resets and also resets score/lives only when called by start. For resize, preserve ratio of broken? We can rebuild all bricks and mark those broken based on old brick index fraction. But could resurrect broken bricks. Not huge. Better store levelCells with rows/cols/hp keyed by logical percentage positions; on resize assign hp to nearest. Overkill.
We can avoid rebuilding layout on resize by use fixed logical coordinate system 1000x600 scaled uniformly to canvas, but mobile then letterbox and maintain aspect; stage can keep aspect-ratio 16/10 at all sizes. Could set stage aspect-ratio: 5/3; height auto; max-height. At mobile width 347 -> height208 too short. Not ideal. We can set logical adaptive but resize rare. We can preserve hp with grid state:
state.grid = array rows x cols of cell objects {hp,maxHp,type,power,color,broken}. On resize, if cols changed, rebuild pattern and transfer hp by nearest normalized coords. This is doable:
  oldGrid copy with row fraction r/(oldRows-1), c fraction.
  new grid generated; for each new cell, find old cell with closest normalized position matching; if type same? set hp=old.hp. But skip patterns differ. Enough.
However state.bricks derived from grid. Let's implement buildLevel(resetPattern):
- generate grid based on cols.
- if preserving and previousGrid exists: for each new cell, find old cell nearest normalized r,c with same skip presence and copy hp; but easier map old hp onto new by normalized coordinates. We'll implement.
- initial reset sets all hp max.
- On resize, preserve. Fine.
Also power icon type associated with cell preserved? New cell type/power pattern may differ if cols; but copy hp only. Good.
Actually if resize desktop->mobile, new power positions regenerated; power on broken old brick might vanish, okay.
state.remaining computed.

Build level function returns bricks; set state.grid. For initial start reset.

We need separate layout dimensions. buildLevel(false) on resize.
If not preserving (initial), pattern. When startGame, call makePattern and reset.
Implementation:
function generateGrid(cols,rows) { ... cell {hp,maxHp,type,power,color,skip} }
function layoutBricks(grid) {... bricks}
function rebuildLevel(preserve) {
 const oldGrid=state.grid;
 const grid=generateGrid(cols);
 if (preserve&&oldGrid) {
   for each new cell not skipped:
      find old non-skipped cell minimizing normalized distance; copy hp (and maybe type? keep new).
      maybe only if distance &lt;0.12.
 }
 state.grid=grid; state.bricks=layout.
 update remaining.
}
But generateGrid patterns need cols-dependent. fine.
When startGame, call rebuildLevel(false) then set all cell hp=max? generate already max.
At initial state.grid null.

Powers: cell.power type. Tough cell maxHp2. normal hp1.
Color assign.

Need level pattern and skips:
function generateGrid(cols) {
 rows=8;
 for r,c:
  skip = (r===3 && (c===Math.floor(cols*0.4)||c===Math.floor(cols*0.4)+1)) || (r===6&&c===Math.floor(cols/2));
  // maybe top corners skip? no.
  type = ... tough
  power if coordinates:
   const widePos = [{r:1,c:round((cols-1)*.16)}, {r:5,c:round((cols-1)*.35)}]
   multiPos = [{r:2,c:round((cols-1)*.78)}, {r:6,c:round((cols-1)*.68)}]
   For tough maybe if r===7 and c? extra. Keep.
  color palette[r].
}
Tough condition maybe:
(r===0 && c%3===1) || (r===7 && c%2===0) || ((r+c)%7===0) && r%2===0
about 2+3+? 6 = 11 tough of 85. Good.
Power brick can be tough if overlap e.g wide r5 c .35 maybe tough condition maybe (r+c)%7 etc. We could ensure extra power is tough to showcase drop after cracking. Set if power and r===5 -> type tough? Then crack visible. Fine. But initial screenshot cracks only after hit; demo likely hits power quickly? maybe.
Maybe assign first wide at r2 c .18, second multi r4 c .72. Icon at upper region. Good.

Potential issue with demo AI and overlay: It might clear bricks and reset, fine.

Canvas draw background:
Need use ctx.save/restore for shake.
We'll implement functions:
drawBackground(time):
 const g=ctx.createLinearGradient(0,0,0,H); ...
 ctx.fillRect.
 radial gradient around (W*.5, top*0.8) radius W*.6; fill.
 grid lines spacing 42; strokeStyle rgba(130,170,255,.035); move.
 draw side rails: linear gradient stroke from top cyan to transparent.
 top arc maybe.
 small top labels.
 draw stars? deterministic array of 60 points created in init based on normalized positions. draw with twinkle time. Since resize, normalized.
- Need keep canvas visually interesting first paint.

Bricks:
drawRoundRect helper using ctx.roundRect supported modern Chrome; zero errors. Could use custom path to be safe. Latest Chrome supports. Use function rr(x,y,w,h,r) with ctx.beginPath(); ctx.roundRect... but roundRect exists. We'll use custom to avoid.
drawBrick:
 shadowColor = power ? color : transparent; shadowBlur= maybe 12 for power; tough shadow 0.
 gradient = ctx.createLinearGradient(x,y,x,y+h); add color stops with alpha. We need color conversion? Use hex with alpha; can append '55'. Color string hex. lighten maybe use global alpha. Fill base with color; gradient color with '#'+? We can create gradient from color to darker. Use color + 'DD' and '#0d1730'. For tough '#435273' to '#1b2540'. After hit '#2c3653' to '#141c33'.
 ctx.fillStyle = gradient; roundRect fill.
 border stroke rgba(255,255,255,.22) for normal; tough '#6f83ad'.
 top highlight line.
 normal decorative two small dots or shine.
 tough rivets four small circles.
 power glow: stroke color, small white icon centered. If brick too narrow icon size adjust.
 cracks if hp&lt;max: draw jagged path with rgba(0,0,0,.55) and bright thin offset; also chipped corner polygon.
 draw small power pulse aura.
Need avoid shadow for every normal to performance. Power only.
Maybe brick normal has gradient enough.

Ball:
draw trail with ctx.globalCompositeOperation='lighter'; for each trail segment alpha decreasing, fill circle radius r*factor. Then main radial gradient white->color. Shadow blur 16.
Maybe multiple balls color based index.
Ball trail update: every physics step? Add trail every frame or 30ms. b.trail.unshift {x,y}; if length>8 pop. At 120 steps it'll be too short if every step (8 points = .067 sec). Fine. Or update each render. Use frame dt and b.trailTimer. In physics each step unshift -> 8 samples short but glow okay. We'll store 10.
Draw ball radius clamp(W*.006,6,8).
Paddle:
x,w,y,h. rounded, gradient cyan->blue->violet. shadow. central core. if wideTimer >0, add animated outer glow, wing stripes and width.
Mouse target maybe visual aim line from ball attached to top? Could draw subtle dashed line when attached.
Attached ball follows paddle center and no physics.
Launch countdown show small ring? DOM overlay? Draw "LAUNCH IN 0.8" maybe not needed. Could draw a tiny line.

AI demo:
state.demoTarget.
function updateDemoPaddle(dt) {
 let target = W/2;
 let candidates = balls.filter(b=>!attached && b.vy>0);
 choose lowest y (largest y). Compute t=(paddle.y - b.y)/b.vy, if t>0; predicted=b.x+b.vx*t; reflect walls perhaps:
  const min=baseW/2+4, max=W-baseW/2-4;
  while predicted<min or >max { reflect approximate } Could implement reflect loop.
 target=clamp(predicted,min,max)
 state.paddle.targetX=target.
}
updatePaddle handles AI speed maybe 750.
In demo, AI may intentionally catch powerups.

Player paddle:
keyboard:
 if left/right, x += dir*620dt; target=x
 else x += (target-x)*(1-Math.exp(-16dt)).
 clamp.
Mouse target from pointer move. If pointer leaves, keep last.
In demo, pointer move ignored.
Arrow keys start game from demo, but keydown event will start and also set key state. Good.

Lives:
render hearts as inline SVG with paths. DOM update classes.
On lose last ball:
 if phase play:
   lives--; combo=1; updateHUD;
   if lives<=0 pending gameover
   else resetAttachedBall, launchCountdown=1.0; toast "LIFE LOST • 2 REMAINING"
 In demo: reset after .4.
Toast DOM: show message with class visible; set timeout? Can use state.toastTimer and update. Avoid setTimeout maybe okay. Use custom timer.
- toast in stage top center, pointer-events none.
- For pickup wide: toast "WIDE PADDLE • 10 SECONDS"; power status.
- Multi: "MULTI-BALL • 3 ACTIVE".
- Brick break maybe no toast.

Power wide timer: decrement in update frame only if phase play/demo. On expiry reset width. If catch wide when already wide, reset 10.
Multi-ball count status while balls.length>1. If balls lost but still >1, status.

Game over stats: score in panel. update text.
Victory also maybe "Time" not track. Could track elapsed and display. Add state.elapsed; increments play. Victory panel "FINAL SCORE". Gameover "SCORE". Restart.
- Start overlay maybe demo.

Score and combo:
onBrickHit:
 if tough first hit no score or small 10? Display score change on break only. combo++ maybe only break. Use combo multiplier = 1 + floor(combo/5) capped 4? HUD combo xN. We can define comboCount consecutive breaks within 2 sec. state.combo = min(state.combo+1,9); multiplier=1+Math.floor((combo-1)/3) maybe. Score = base * multiplier. Display "×2". Simpler state.combo increments and displayed x(combo) can quickly hit 9. Base 50. Score nice.
 on hit tough maybe combo doesn't change until break.
 comboTimer=1.8. update decrements and resets combo=1.
 Score base normal 50, tough 120, power 100 plus row bonus maybe (rows-r)*10. Score = (type tough?120:60 + power?40) * combo. Good.
 floating text `+${points}`.

HUD wall count: state.remaining. Include tough counts. Display "WALL 084". Also mini progress bar maybe in footer? Could add stage top progress line? Draw small progress bar top of canvas with remaining? Nice. But HUD wall enough.
- Header stat combo maybe instead of wall? Requirements score displayed. We can have SCORE, COMBO, LIVES, and wall in footer objective. But wall count helpful. Let's include four: score, wall, combo, lives. At mobile may be crowded. Could hide combo stat under 560 and sound compact.
Use .stat score etc.

Styling hearts:
<div class="hearts" id=lives>
 <span class=heart><svg viewBox=...><path d=.../></svg></span> x3
</div>
CSS .heart.off opacity .22 filter grayscale; .heart path fill #ff5d8f.

Overlay panel start:
Title maybe "BREAK THE WALL." h2.
"CLICK OR PRESS A KEY TO START" exact in .launch-line.

Canvas click to start: pointerdown handler checks target. Buttons stop.
Because overlay pointer-events none except panel, clicking panel blank could bubble to canvas? Panel pointer-events auto and event target panel, but canvas not ancestor (sibling), so canvas pointerdown doesn't fire. Need panel itself click start? Add panel click listener except buttons maybe. Better overlay start panel add click startGame. But if user clicks text, works. Add event listener startPanel click => start. Buttons.
- Any key starts. Keydown if phase demo and not repeat? call startGame; set keys for arrows.
- Canvas pointerdown: if phase demo startGame; if playing and attached launch.

Sound button click toggles, stopPropagation.
No window.open etc.

Accessibility:
canvas aria-label, role img maybe; buttons.
prefers-reduced-motion? Could reduce particle count/animations. Implement const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches; if true fewer particles, no shake.
No errors: matchMedia exists.

Time animations:
requestAnimationFrame. Ensure ctx exists.

Potential bug: overlay hidden class display:none, show. Use `panel.hidden` attribute? CSS `[hidden]{display:none!important}`. Use property hidden true/false.
const screens = ...
function showScreen(name){overlay.hidden=false; Object.values... hidden = key!==name}
function hideScreens(){overlay.hidden=true}
Initial overlay visible.

CSS overlay hidden property. Ensure `hidden` attribute works.

State phase transitions:
startGame():
 ensureAudio()
 rebuildLevel(false? we need reset grid) -> call makeGrid with hp reset. `state.grid=null; rebuildLevel(false);`
 score=0 lives=3 combo=1 etc
 phase='playing'
 state.balls=[]; attachBall()
 state.launchCountdown=0.9
 show toast "SECTOR 01 • CLEAR THE WALL"
 hideScreens
 demoBadge.hidden=true
 updateHUD.
 reset attached ball: create ball {x: paddle.x+..., y:paddle.y-r-2, vx:0,vy:0,r,attached:true,trail:[]}
 state.balls=[ball]
 state.launchCountdown=.9
At update, attached ball follows paddle; if launchCountdown<=0 launch.
If user moves pointer during attached, countdown doesn't necessarily launch? Could set state.launchCountdown=Math.min(...,0.25) upon pointermove? Better players expect mouse click; but auto launch after .9. Fine.
After life lost: same.
In demo reset: state.grid reset and level rebuild? Initial. When ball lost only reset ball, keep bricks and score. When cleared reset all after timer.
At init:
rebuildLevel(false)
set paddle
resetDemoBall maybe attached with countdown .4
phase demo.
loop update; AI moves. Demo ball auto launches.

When demo starts, attached ball follows AI until launch; then action. Great.

Physics attach follow:
if b.attached: b.x = paddle.x+paddle.w/2; b.y=paddle.y-b.r-1; b.trail reset.
If launchCountdown <=0 launchBall(b, random angle maybe AI -0.22). For play, angle random -0.24..0.24. For demo, -0.32.
When attached false and launch, set attached=false, vx etc.
Mouse target x initial maybe W/2.

Paddle bounce:
const rel=(b.x-(p.x+p.w/2))/(p.w/2); angle=rel*1.08;
speed=desiredSpeed()* (1+min(elapsed/300,.12))
b.vx=Math.sin(angle)*speed; b.vy=-Math.cos(angle)*speed.
Set b.y=p.y-b.r-0.5.
if Math.abs(b.vx)<speed*0.12 and rel sign? Center exactly straight up requirement center = straight up; if exactly 0 keep 0. Don't enforce min horizontal because center must straight. Only wall reflections can cause horizontal low. Fine.
- Edge sharp 62deg.

Brick collision:
hitBrick(brick, ball, nx,ny):
 brick.hp--
 if brick.hp>0: crack, dust, sound hit maybe; else remove break.
Need ensure multiple balls hitting same brick same substep: hp may reach0, then next loop skip hp<=0. Good.
- On break set brick.hp=0, state.remaining--.
- `state.bricks` includes hp0 but draw skip. remaining count.
- score.
- dropPower if brick.power and not broken? On break spawn.
- On tough first hit, floating "CRACKED" maybe small text instead of score. Could show tiny "-"? Use particles and flash. maybe text "CRACK" subtle.

Brick collision detection after wall bounce:
If ball hits wall and simultaneously brick, process.
When reflect via circle, normal may be horizontal/vertical. Need ensure ball doesn't remain stuck; push out.

AABB collision function:
function resolveBrickCollision(b, br) {
 const closestX=clamp(b.x,br.x,br.x+br.w), closestY=...
 let dx=b.x-closestX, dy=b.y-closestY, d2...
 if(d2 > r*r) return false;
 if(d2>0.0001){
  d=sqrt; nx=dx/d; ny=dy/d;
  b.x += nx*(r-d+0.5); b.y += ny*(r-d+0.5);
  const dot=b.vx*nx+b.vy*ny;
  if(dot<0){ b.vx-=2*dot*nx; b.vy-=2*dot*ny; }
 } else {
  // ball center inside rect
  const left=b.x-br.x, right=br.x+br.w-b.x, top=b.y-br.y, bottom=br.y+br.h-b.y;
  const m=Math.min...
  if(m===top){b.y=br.y-r; b.vy=-abs(b.vy)}
  ...
 }
 return true
}
At corner d>0 and normal diagonal. good.
Maybe after reflecting, dot positive due already moving away, then no reflection but still push. Fine.

Swept:
Before overlap? after. if overlap missed but crossing vertical:
for brick:
 if b.vy>0 && b.py + b.r <= br.y && b.y + b.r >= br.y && b.x+b.r>br.x && b.x-b.r<br.x+br.w:
   b.y=br.y-b.r; b.vy=-Math.abs(b.vy); hit.
Similar up.
Because fixed step and row gap, no tunnel.

Ball trail after physics each step could make CPU okay. Add each step only if not attached.
State.balls modifications during loop: on power catch clones. on life lost handle after.

Update order:
function update(dt):
 state.time += dt
 updateParticles
 updateTexts
 updatePowers
 if state.wideTimer>0 decrement...
 if state.phase playing/demo and !pending:
   accumulator += dt; while(acc>=STEP){ physicsStep(STEP); acc-=STEP; if pending break; }
 else acc=0
 update combo timer
 update demo reset timer
 update toast timer
 updateHUD maybe every frame but text updates okay. Optimize only if changed? Fine 60fps DOM updates small. Could update only every 100ms. Use hudTimer.
At demo clear: state.demoClearTimer -=dt; when <=0 resetDemoLevel.
At pending end: endDelay -=dt; if <=0 phase=..., show screen.
During pending, particles update.
Physics in demo uses state.balls etc.

Need ensure state.phase set gameover/victory only after delay. pendingPhase. For demo when remaining=0:
 in breakBrick if state.phase==='demo': state.demoClearTimer=1.0; don't pending. The last ball continues; maybe freeze? We can let.
 resetDemoLevel(): state.grid=null; rebuild; score=0; balls reset; particles=[]? keep some. phase stays demo; paddle center.
If player clears last brick, pending victory.
When phase victory/gameover, updateHUD.

Power pickup during demo. wideTimer also in demo maybe.

Ball loss detection after physics:
balls filter y-r>H. If some lost and balls remaining >0, no life change. If none:
 if phase play -> life--; if 0 pending gameover else attach new ball.
 if demo -> attach ball with .5 delay.
Important if state.balls includes attached? At last ball lost, all removed. We then create attached ball.
- In play multi-ball, if one falls, remove; balls length 2. HUD still multi-ball ×2, but requirement says pickup gives 3 balls, then lost naturally.
- If wide power catches while multi, both.

Power collision:
For each power p:
 p.prevY=p.y; p.y += p.vy*dt (maybe p.vy=90 + phase).
 p.rotation.
 if p.y+p.r >= paddle.y && p.prevY+p.r <= paddle.y+ maybe and x overlap -> catch
 else if p.y-p.r>p.y bottom remove.
Because power falls to bottom, paddle near bottom. Catch check if p.y+p.r >= paddle.y and p.y-p.r <= paddle.y+p.h and x.
On catch remove, effect, particles.
- If p.y > H remove.
- Spawn y = brick.y+brick.h/2, x.
- p.vy = 95+maybe row. r=14.
- Could bounce off walls? no.

Drawing power items before particles.
Drawing overlays within canvas? DOM overlay handles.

Canvas coordinate and mouse:
canvas.getBoundingClientRect. pointermove => mouse.x = e.clientX-rect.left. Since canvas CSS full stage no border? stage-wrap border means canvas inside content? canvas width 100% height 100%, absolute inset 0; rect equals inner stage? border may offset. Use rect.
pointerdown similarly.
Cursor: stage class .playing set cursor none on canvas. But if hidden overlay, cursor default.
Could display custom mouse ring? Not necessary.

Responsive:
At width 375, header stats maybe:
body app width 355. topbar brand row and hud row. stats: SCORE width maybe 95, WALL 70, COMBO 70, LIVES 80 + sound 36 => total 351 plus gaps 8*4=32 -> 383 > 355. Need hide wall and combo on mobile or make compact. CSS @max600:
 .stat.wall-stat, .stat.combo-stat {display:none}
 score stat ~90, lives ~80, sound 36 + gaps = 218 fits.
Header brand separate row, hud full. Good.
At 375 stage height: min(64vh,500px) = 427px at 667h. min-height 360. Good.
App total header brand 40 + gap12 + hud 50 + stage427 + footer80 => 609 fits 667. body overflow vertical okay. Requirement no horizontal scroll only. Fine.
At 800 height desktop header maybe 58 + 14 gap + stage calc(100vh - 190)=610 + footer40 + margins=740. Great.
CSS stage height: clamp(390px, calc(100vh - 190px), 640px). At mobile override height: clamp(360px, 62vh, 500px).
At desktop width 1280, app max 1180 (maybe stage 1180 wide), internal W=1178 due border. Height 610. Bricks.

No external fonts: use system stack "Inter", "Segoe UI", etc. Could use font-feature settings.
No images.

Potential issue screenshot at 3 sec: Start overlay panel and game demo. Demo should have launched and broken bricks. Ensure update runs immediately. In first 3 sec, AI likely. Maybe panel blocks top bricks. The overlay panel center around y305; bricks top 62-? row8 340, so panel covers bricks from y~200-410, hides action. We should position start panel near bottom? Let's design overlay panel aligned center but canvas action behind might be obscured. To show action, perhaps use compact horizontal "start banner" at bottom 32px of stage, with backdrop. The requirement just message. Place overlay start panel at bottom center using class? Could set overlay align-items:flex-end; padding-bottom:28px. But gameover/victory centered. Use .overlay.start-mode {align-items:flex-end}. The start panel can be wide max 620 and compact row, showing bricks above. This would be more visually dynamic. Start message panel:
- position bottom 22; width min(600, calc100%-32); padding 16 22; display flex align center justify.
- h2 small "NEON BREAKOUT", launch line. Button.
Maybe screenshot clearly shows game in action at top and panel at bottom.
Yet conventional polished start card center looks good. Developer explicit "self-playing demo mode ... behind a 'Click or press a key to start' message" implies overlay message can be center, action behind. But evaluator may compare screenshots, action visible more if compact bottom banner. Let's make start panel a bottom dock: `.overlay[data-mode="start"] {align-items:flex-end; padding-bottom:24px; background:linear-gradient(...)}`. It shows the AI ball in upper/mid area. But the demo paddle at bottom might be covered by panel. Panel height ~100 covers bottom including paddle. Could place panel top-center, covers bricks but ball maybe. Or a narrow top banner over header? Hmm.

Could make message a small floating pill at bottom center with height 56, width 540. Paddle behind may partially covered but ball/bricks visible. Panel:
`<div class=start-card>` with line: [icon] <div><strong>CLICK OR PRESS A KEY TO START</strong><small>AI demo live · take over anytime</small></div> <button>PLAY</button></div>`.
Height 70. Position bottom 18. Paddle at H-38, so covered. But during gameplay ball bounces around and bricks visible. Good enough.
Maybe position start card at center-top y90, covers top bricks but action mid/lower visible. The bricks are key visuals though.
We can make overlay just a centered "message" with no opaque full panel: thin pill at top 50%? The screenshot may still look good. Let's choose center card but semi-transparent and not huge. The game behind visible around and through. Yet evaluator may want action. Could set overlay background very light and panel 380x180.

Maybe make start card positioned right side on desktop (align-items:center; justify-content:flex-end; padding-right:5vw), leaving left bricks visible. But responsive center. Hmm.

I think conventional center card is acceptable because canvas around card shows action; demo particles can appear.

We can add a "DEMO" mini badge and the AI moving in visible margins. Good.

Let's think of all requirements and potential hidden evaluation: They may inspect code for arrow keys, mouse, angle mapping, 6 rows, tough bricks hp2 with cracks, power-up icons and drops, wider timer/multiball 3, collision robust, particles, lives, score, game over/victory, restart. Ensure explicit.

Need maybe use game state and not just visuals. We'll implement thoroughly.

Let's draft code in detail.

HTML skeleton:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"&gt;
&lt;title&gt;Neon Breakout&lt;/title&gt;
&lt;style&gt;...&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="app"&gt;
&lt;header class="topbar"&gt;
 &lt;div class=brand&gt;
  &lt;div class=brand-mark&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div class=brand-copy&gt;&lt;div class=eyebrow&gt;ARCADE LAB // SECTOR 01&lt;/div&gt;&lt;h1&gt;NEON &lt;span&gt;BREAKOUT&lt;/span&gt;&lt;/h1&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=hud&gt;
  &lt;div class="stat score-stat"&gt;&lt;span class=stat-label&gt;SCORE&lt;/span&gt;&lt;strong id=score&gt;000000&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="stat wall-stat"&gt;&lt;span class=stat-label&gt;WALL&lt;/span&gt;&lt;strong id=wall&gt;000&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="stat combo-stat"&gt;&lt;span class=stat-label&gt;COMBO&lt;/span&gt;&lt;strong id=combo&gt;×1&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="stat lives-stat"&gt;&lt;span class=stat-label&gt;LIVES&lt;/span&gt;&lt;div class=hearts id=lives&gt;...&lt;/div&gt;&lt;/div&gt;
  &lt;button id=soundBtn class=sound-btn type=button aria-label="Toggle sound" aria-pressed=true&gt; &lt;svg ...&gt; &lt;/svg&gt;&lt;span&gt;SOUND&lt;/span&gt;&lt;/button&gt;
 &lt;/div&gt;
&lt;/header&gt;
&lt;main class=stage-wrap id=stageWrap&gt;
 &lt;canvas id=game tabindex=0 aria-label="Breakout game. Move the paddle with the mouse or arrow keys."&gt;&lt;/canvas&gt;
 &lt;span class="frame-corner tl"&gt;&lt;/span&gt; etc
 &lt;div class=demo-badge id=demoBadge&gt;&lt;span class=live-dot&gt;&lt;/span&gt;AI DEMO • LIVE&lt;/div&gt;
 &lt;div class=toast id=toast role=status&gt;&lt;/div&gt;
 &lt;div class=overlay id=overlay&gt;
  &lt;section class="panel start-panel" id=startPanel&gt;
   &lt;div class=panel-icon&gt; maybe svg&lt;/div&gt;
   &lt;div class=eyebrow&gt;ATTRACT MODE&lt;/div&gt;
   &lt;h2&gt;READY TO SHATTER?&lt;/h2&gt;
   &lt;div class=launch-line&gt;&lt;span class=keycap&gt;CLICK&lt;/span&gt; OR PRESS A KEY TO START &lt;span class=arrow&gt;➜&lt;/span&gt;&lt;/div&gt;
   &lt;p&gt;AI pilot is live. Move the paddle with mouse or &lt;kbd&gt;←&lt;/kbd&gt; &lt;kbd&gt;→&lt;/kbd&gt;.&lt;/p&gt;
   &lt;button class=primary id=startBtn&gt;START RUN &lt;span&gt;→&lt;/span&gt;&lt;/button&gt;
   &lt;div class=panel-meta&gt;&lt;span&gt;3 LIVES&lt;/span&gt;&lt;span&gt;8 ROWS&lt;/span&gt;&lt;span&gt;2 POWER-UPS&lt;/span&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;section panel pause... hidden&gt;
  ...
 &lt;/div&gt;
&lt;/main&gt;
&lt;footer class=statusbar&gt;
 &lt;div class=controls-group&gt;...
 &lt;div class=power-readout id=powerReadout&gt;&lt;span class=power-dot&gt;&lt;/span&gt;&lt;span id=powerText&gt;SYSTEM READY&lt;/span&gt;&lt;div class=timer-track&gt;&lt;i id=powerTimer&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;div class=objective&gt;&lt;span class=objective-dot&gt;&lt;/span&gt;CLEAR THE WALL &lt;b id=wallMini&gt;0&lt;/b&gt; BRICKS LEFT&lt;/div&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;script&gt;...&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

CSS overlay initial start. Other panels hidden attr.
Maybe overlay data-mode set via JS to style. Start panel maybe width 440.
Start card semi-transparent. Could make start mode align center.

CSS .panel start:
background linear gradient; backdrop-filter blur(14px).
h2 font 30.
.launch-line uppercase 12 letter spacing, border top/bottom.
p color.
button.
Meta.

Game over panel etc.

Need CSS for hidden: `[hidden]{display:none!important}`.

Responsive stage height at 1280x800 exactly calc 100vh - 190 =610. app topbar height maybe58, gap? topbar margin-bottom 14, footer44, app padding 18+14 => total 58+14+610+44+30=756. fine.
At height smaller min390 may overflow but vertical scroll allowed.

JS:
Constants:
const canvas=...
const ctx=canvas.getContext('2d',{alpha:false});
But if alpha false, background fill. Good.
const ui = ...
const TAU=Math.PI*2;
const STEP=1/120;
const clamp...
const reduceMotion...

Colors array.

State object includes grid.

function generateGrid(cols) {
 const rows=8;
 const grid=[];
 const wideCoords = new Set([`${1}:${Math.round((cols-1)*.16)}`, `${5}:${Math.round((cols-1)*.35)}`]);
 const multiCoords = ...
 const holes = new Set([...])
 for r...
   const skip = holes.has...
   let type='normal';
   if (...) type='tough';
   let power=null;
   if wideCoords has -> power='wide'; if (r===5) type='tough'? To showcase crack. But icon on tough brick. The requirement "mixing normal bricks and tougher bricks" yes.
   else if multi -> 'multi';
   const color = PALETTE[r%...];
   hp = type tough?2:1.
 }
 return grid
}
Potential duplicate hole & power at r6 center vs multi at .68 not.
Tough on row0 col1,4,7,10; row7 even; plus (r+c)%8==0 maybe many.
Set hard pattern:
const tough = (r===0 && c%3===1) || (r===7 && c%2===0) || ((r+c)%9===0);
This yields row1 c8, row2 c7, row3 c6 (but hole maybe row3 c4/5 no), row4 c5, row5 c4 (power wide at c4 if cols11 -> power overlaps tough! good maybe tough power), row6 c3, row7 c2 (also row7 tough). Lots. If power row5 c4 indeed tough due %9=9 -> tough. Great.
Wide at r1 c2; row5 c4 tough.
Multi at r2 c8 (r2+c8=10 not tough), r6 c7 (r6+c7=13).
Good.

Cell color for tough '#60729e' maybe normal palette irrelevant. Power color '#45e0ff' or '#ff6bc7'. If tough power, tough fill but icon accent.

Layout:
function rebuildLevel(preserve) {
 const oldGrid=state.grid;
 const cols = W&lt;520?7:W&lt;800?9:11;
 const rows=8;
 const grid=generateGrid(cols);
 if (preserve &amp;&amp; oldGrid) {
   const oldLive=oldGrid.flat().filter(!skip)
   for each new cell:
     if skip continue;
     const nr=r/(rows-1), nc=c/(cols-1);
     find old with min abs normalized; if dist&lt;.16 and same? copy hp. We also want cell type maybe tough? Keep new type; hp copied could 2 while max new1 -&gt; clamp to max.
   }
 }
 state.grid=grid; layout...
}
But initial resize may happen after state.grid generated based on old W? We call resize first with preserve false. startGame rebuild reset. Good.
`state.remaining` count live.
On resize during play, oldGrid structure 8x oldcols; find nearest. fine.

`layoutGrid` calculates:
margin = W&lt;520?10:26;
top = W&lt;520?44:58;
usableWidth=W-margin*2;
colGap=W&lt;520?4:7;
rowGap=W&lt;520?4:6;
maxBrickBottom=H-(W&lt;520?126:146);
rowH=Math.max(16,Math.min(36,(maxBrickBottom-top-rowGap*(rows-1))/rows));
If H430 mobile: maxBottom304; top44; rowH=(304-44-28)/8=29. Great.
Desktop H610 maxBottom464; top58; rowH=(464-58-42)/8=45.5 cap36. bottom=58+8*36+7*6=388. ball area 180.
brickW = ...
state.bricks from grid.
paddle base width = clamp(W*.105, 78, 124). At W1178 =>124. Mobile347=>78. wide width base*1.55.
paddle.h = W<520?12:14; y=H-(W<520?30:38).
Power pickup r=13.

Resize: if paddle exists, clamp. If state.balls reposition proportionally? set x *= ratio, y*= ratio; velocity maybe scale. Fine.
We should not rebuild on every ResizeObserver callback causing loops? Canvas size set not affecting stage size (absolute canvas), okay. Use requestAnimationFrame maybe.
`canvas.width = Math.round(W*dpr)` and style width 100% already. Set transform each render? Resize sets transform; but render functions use save/restore and never reset. Fine.
At render beginning `ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect`.
When canvas width changed transform resets.

`resize` calls rebuildLevel(preserve) and updateHUD. If initial, state.grid null. set paddle:
if !state.paddle create. else scale positions.
Need order state initialized.

Demo init:
state.paddle = {x: W/2-base/2, y..., w:base, baseW:base,h,targetX:W/2}
after resize.
resetDemoBall: state.balls = [newAttached]; state.launchCountdown=.55.
At initial, call.

StartGame:
rebuildLevel(false) uses current W.
state.score=0...
state.paddle.w=baseW etc.
state.wideTimer=0.
resetBallsToPaddle(.85)
phase playing; hide overlay; demoBadge.hidden=true; toast.
updateHUD.

Physics:
function physicsStep(dt) {
 updatePaddle(dt);
 // countdown
 if state.launchCountdown>0 {state.launchCountdown-=dt; if <=0 launch attached balls}
 for each ball:
   if attached follow; continue
   b.px=b.x...
   b.x +=...
   walls...
   paddle...
   bricks...
   trail
 // after all, lost check
}
Issue launch countdown and attached follow order: If attach ball, countdown. When countdown hits 0 within step, launch then move same step. okay.
Update paddle before ball follow.

`updatePaddle`:
if phase demo:
 target=computeDemoTarget();
 p.targetX=target;
 const maxSpeed=760; dx=target-p.x; step=Math.min(abs(dx), maxSpeed*dt); p.x += sign*step; 
Maybe smoother AI.
else:
 dir=(keys.right?1:0)-(keys.left?1:0)
 if dir: p.x += dir*640*dt; p.targetX=p.x;
 else p.x += (p.targetX-p.x)*(1-exp(-18dt));
 clamp.
p.w = wideTimer>0?baseW*1.55:baseW.
If width changes, keep center? When wide activation, expand around center: p.x = center - newW/2. Catch sets; and when expiring shrink center. Implement setPaddleWidth(newW, preserveCenter=true).
`paddle.y` set at resize.

computeDemoTarget:
let target=W/2;
const falling=balls.filter(!attached && vy>0).sort((a,b)=>b.y-a.y)[0];
if falling:
 time=(p.y-falling.y)/falling.vy;
 let px=falling.x+falling.vx*time;
 // approximate bounce if outside
 const margin=p.w/2+8;
 for i 0..3 reflect px between margin,W-margin.
 target=px;
else target = W/2 + Math.sin(time*.7)*W*.18 maybe.
return clamp(target,margin,W-margin).

Paddle collision:
function hitPaddle(b) {
 const p=state.paddle;
 if (b.vy<=0) return;
 if (b.py + b.r <= p.y + 1 && b.y + b.r >= p.y && b.x+b.r>=p.x && b.x-b.r<=p.x+p.w) { ...}
 else if overlap current even if py not <=: catch.
}
We use b.py previous before movement. If ball spawned overlapping? no.
Set b.y=p.y-b.r-0.2.
rel clamp.
sound('paddle').
particles maybe 4 cyan.

Walls:
if b.x-b.r<0 {b.x=b.r; b.vx=Math.abs(b.vx); wallFx}
right etc. top if b.y-b.r<0. Add small particles maybe.

Brick collision:
loop state.bricks; skip hp<=0. `if (resolveBrickCollision)` handle and break. But if reflected, after break loop stops, next step sees.
Need also horizontal sweep if ball moved through side of brick with vertical overlap; discrete overlap catches due small step.
Call `onBrickImpact(br, b)`.

On brick impact:
br.hp--;
if hp===0:
 remaining--; points...
 state.combo=Math.min(9,state.combo+1) but first break combo becomes2 if initial1. Better combo starts1 and after first stays1? Could use state.chain count. HUD combo can be x1. On break, if comboTimer>0 combo++ else combo=1; comboTimer=2. So first x1, second x2. state.combo initialized1.
points=(tough?120:60)+(power?35:0)+(rows-r)*5; points*=state.combo;
score +=.
remaining.
spawn particles.
text.
drop power.
screen shake.
if remaining===0:
 if phase play pending victory; else demoClearTimer.
else if hp>0:
 particles dust; text maybe 'CRACK' at small alpha? Could display a small crack mark enough.
sound crack.
Need maybe score on tough hit 15; not required.

Power drop:
if br.power and br.hp===0, state.powers.push({x:br.x+br.w/2, y:br.y+br.h/2, type:br.power,r:14,vy:105,phase:Math.random()*TAU,rot:0,prevY:...});
visual spawn particles.

Catch:
if wide:
 state.wideTimer=10; set width; toast.
if multi:
 ensure 3 balls. The caught ball plus clones. Need if current balls count maybe 1. We spawn clones at paddle center:
 const base = state.balls[0] maybe caught; base.attached false.
 while balls.length&lt;3:
   angleOptions[-0.52,0.52] relative upward? We want one straight maybe. Create ball at p.x+p.w/2, p.y-r-1; vx=sin(angle)*speed; vy=-cos(angle)*speed.
 But if caught ball is currently at paddle and after collision bounced up, clones spawn.
 if balls.length&gt;3 truncate.
 show toast.
particles.
score bonus 250? Requirement score. Add 150 for pickup.
- Could multi pickup occur while balls already 3? set balls length 3, refresh velocities? no need. Just bonus and toast "MULTI-BALL • 3 BALLS". To guarantee exactly 3, `state.balls=state.balls.slice(0,3)`.
- If balls count 2 and one attached? unlikely.

Wide timer decremented:
if state.wideTimer&gt;0 {state.wideTimer-=dt; if crosses0 set width base; toast maybe "WIDE PADDLE ENDED"}
Status UI.

Update power pickup crossing:
for (let i=state.powers.length-1;i>=0;i--){
 p.prevY=p.y; p.y+=p.vy*dt; p.rot+=...
 if overlap paddle: catch; splice
 else if p.y-p.r>H: splice
}
If wide paddle, easier catch.

Particles update:
life -=dt; vx*=0.99?; vy += gravity*dt; x+=; y+=; rot.
floating texts.

Toast:
function showToast(msg, kind='') {ui.toast.textContent=msg; class; state.toastTimer=2.2}
update class visible if timer>0.
No setTimeout.

HUD:
function updateHUD() {
 score...
 wall...
 combo...
 hearts classes.
 wallMini.
 if phase demo: powerText = "AI DEMO ACTIVE"; else if wide>0 ...
 timer bar width wide/10.
}
Potential text update every frame; okay. We can call when state changes plus power timer. Use `hudAccumulator`.

Draw:
function render(timestamp) {
 ctx.setTransform...
 drawBackground(t)
 drawParticles? order: background, bricks, powers, trails/balls, particles, paddle, texts, maybe overlay hints.
 apply shake:
 ctx.save(); if shake translate random.
 drawBricks etc.
 ctx.restore();
 drawBackground labels should unshaken.
}
Canvas background:
const bg = ctx.createLinearGradient(0,0,0,H); colors.
fill.
radial top:
ctx.save; globalCompositeOperation='screen'; radial gradient at W*.5,H*.05 0 to W*.7; fill.
grid.
stars.
top decorative line:
ctx.strokeStyle rgba; line from margin,top-18 to W-margin. draw small segments. label.
Side rails:
linear gradient stroke width2, x=1 and W-1.
Maybe bottom fade.

Stars array 70 generated once {x:rand,y:rand,a,tw,size}. draw with alpha.
Need use normalized so resize fine.

drawBricks:
for each hp>0.
Round rect helper:
function roundedRectPath(ctx,x,y,w,h,r){...}
We can call ctx.beginPath etc.
Gradient each brick. Use `ctx.save`.
Normal:
 const g=ctx.createLinearGradient(b.x,b.y,b.x,b.y+b.h); g.addColorStop(0, lighten?); g.addColorStop(1, '#15203d'); but using palette top color fade:
 g.addColorStop(0, b.color); g.addColorStop(.35,b.color+'b0'); g.addColorStop(1,'#121a34');
But hex 8-digit supported. If color string '#37e6ff', b.color+'b0' => '#37e6ffb0'. good.
Tough:
 if hp2: g '#53658d' -> '#1a2440'; if hp1 '#33405f' -> '#131b30'.
Border.
For normal, top shine line.
Tough rivets at x+6,y+6 and x+w-6,y+6; maybe if h small.
Power:
 shadowBlur=12+sin*4; shadowColor=b.color; stroke b.color; draw icon.
Icon size = min(12,b.h*.35,b.w*.22). Wide arrow:
 ctx.beginPath move x- s,y line x+s; arrow heads. Multi: 3 circles arranged.
Power brick has corner markers.

Cracks:
function drawCracks(b):
 ctx.strokeStyle='rgba(3,6,14,.78)'; lineWidth=1.6; begin path:
 move b.x+b.w*.22,b.y+2; line .36,.35h; line .28,.48h; line .42,.62h; line .34,b.h-2
 another branch.
 Also highlight line offset white alpha .18.
 Chipped top-left polygon fill background.
Use only if hp&lt;maxHp.

Balls:
for each ball:
 trail positions; ctx.globalCompositeOperation='lighter'; for i from end: alpha=(1-i/len)*.22; fill circle radius r*(1-i/len*.65). Color ball color.
 main radial gradient; fill; shadow.
 color maybe '#ffffff' core and cyan aura.
Attached ball maybe pulsing.

Paddle:
shadow. gradient. rounded.
outer energy line if wide.
white top highlight.
small center dot.
Maybe paddle has two wing caps when wide.

Power draw:
save translate; rotate; ring arcs; fill radial; symbol not rotated? We can keep symbol upright while ring rotates.
Icon same functions.

Particles:
globalComposite maybe source-over. shapes: shard rectangles rotated.
Text draw with ctx.font 700 13px system; shadow.

Demo badge is DOM.

Background HUD on canvas:
At top around y24 draw `SECTOR 01` left and `ARCADE // ACTIVE` right. But top bricks start 58, so top label. Draw small separators.
Draw a thin progress bar under top label? We can draw at x=margin,y=32 width etc showing wall cleared:
 `ctx.fillStyle rgba...; fillRect; fill ratio`.
Maybe label "WALL INTEGRITY 82%". Nice.
At top-right display combo maybe, but DOM.

Frame corners DOM.

Update combo timer:
if comboTimer>0 decrement; if <=0 and combo>1 reset combo1.

Game over:
When pending phase:
- pending={type:'gameover',timer:.75}
- state.phase remains playing? We can set state.phase='ending' so physics stops? Use pendingEnd. In update, if pendingEnd then decrement, then set phase. Keep physics maybe freeze by not stepping if pendingEnd.
- Show panel final score.
Victory similarly.
At end, update phase.
`showEndPanel(type)` sets phase type; update panel score; show screen.
Maybe play slow particles.

Pause:
togglePause:
if phase playing and no pending: state.phase='paused'; showScreen('pause'); release keys.
else if paused: phase='playing'; hide.
Key P.
When paused, loop updateParticles still, but physics no.
Overlay panel with resume.

Visibilitychange if hidden and phase playing -> pause.

Restart buttons: `restartBtn` calls startGame. `victoryRestart`.
Maybe one restart button per panel.

Start panel click (excluding button) startGame. Add startPanel.addEventListener('click', e => {if(e.target.closest('button')) return; startGame();});
Overlay pointer events none, panel auto.

Input key:
document.addEventListener('keydown', e=>{
 if (['ArrowLeft','ArrowRight','Space'].includes(e.code)) e.preventDefault();
 if (e.repeat && (phase demo/gameover etc)) ...
 if (state.phase==='demo') { if(!e.metaKey&&!e.ctrlKey&&!e.altKey){ startGame(); } }
 if (e.code==='ArrowLeft') state.keys.left=true;
 ...
 if (e.code==='Space' && state.phase==='playing') launchAttached();
 if (e.code==='KeyP'||e.code==='Escape') togglePause();
});
But keydown any key starts demo, including Tab maybe undesirable but requirement any key. We can exclude Tab to preserve accessibility. Start on Space/Enter/arrows/any printable. Simpler any except Tab,Shift,Control,Alt,Meta. Fine.
After startGame called by keydown Space, launchAttached maybe immediately; that's okay. If arrow, paddle begins.
If phase gameover/victory and Enter => startGame.
Need avoid keydown on sound button causing start when phase demo? If user tabs and presses Enter on sound, starts game unexpectedly. Could if target is button and code Enter/Space, let button. But message "press a key". Fine. Add if e.target.tagName==='BUTTON' && (Space/Enter) return except start? The click will handle. Not critical.
Keyup always set false.

Pointer:
canvas.addEventListener('pointermove', e => { const rect... state.mouse.x=...; state.mouse.active=true; if phase playing {state.paddle.targetX=state.mouse.x;} });
Need clamp target to canvas boundaries. Pointer x in canvas.
pointerdown: ensureAudio; if phase demo startGame; else if playing launchAttached; canvas.focus({preventScroll:true}) maybe focus triggers no scroll. focus options fine.
Could start on click overlay button calls.
Stage maybe pointerdown outside canvas? Canvas covers.
Mouse target: p.targetX should be desired center x; if pointer x is where cursor is, paddle center at pointer x. Typically paddle follows mouse with center at pointer. On first move. If not moved, target center.

Pointer capture not needed.

Audio:
function ensureAudio(){ if(!soundOn)return; if(!audioCtx){ const C=window.AudioContext||window.webkitAudioContext; if(C) audioCtx=new C();} if(audioCtx&&audioCtx.state==='suspended') audioCtx.resume().catch(()=>{});}
Promise catch to avoid unhandled.
tone:
if !soundOn||!audioCtx return;
const now=audioCtx.currentTime;
osc; gain; type; freq set; exponential ramp.
osc.frequency.exponentialRampToValueAtTime(Math.max(30,end), now+dur);
gain.gain.setValueAtTime(vol,now); exponential ramp to .0001.
osc.start; stop.
Use sound throttle for hit (lastBrickSound > 45ms).
Sound button click toggles; if enabling ensureAudio. update icon and text.
Maybe `aria-pressed`.
No error if AudioContext unavailable.

Particles count based reduce motion.

Screen reader live toast role status.

Potential rendering error if ctx.roundRect not used.

We need include all CSS inline.

Let's think visually. Background body has neon gradient:
body {
 background:
 radial-gradient(circle at 15% 0%, rgba(45,212,255,.12), transparent 32%),
 radial-gradient(circle at 85% 15%, rgba(168,85,247,.13), transparent 34%),
 #050713;
 color...
}
body::before fixed inset background-image linear-gradients 1px lines; mask-image radial-gradient; opacity .25; pointer-events none.
Topbar h1 gradient white/cyan.
Stage border with box-shadow 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px etc.
Canvas background.

Header stats translucent.

Maybe canvas has rounded corners due overflow hidden.

Corner decorations using border top/left etc.

Demo badge.

Footer.

Overlay panel.

At first paint overlay maybe blocks but okay.

Should we auto-start demo behind message with initial AI. yes.

Let's ensure game speed and dimensions. At W1178 H610:
base paddle 124, speed desired = clamp(W*.37=436,340,470) 436. Ball from paddle at y~572 travels up to top ~514 at 1.18s, then bounces. AI tracks.
Bricks top 58 row 8 bottom 388. Ball hit after ~1.2 sec. Screenshot at 3 sec after page load: ball likely bounced and broken. Good.
Panel covers center; particles perhaps hidden but visible elsewhere.

Could draw attract mode panel less opaque.

Maybe include a small "watch the AI" line.

Game logic demo:
AI ball might lose and respawn quickly. Fine.

Need test mentally for collisions and level.

Let's sketch JS functions precisely.

State:
const state = {
 phase:'demo', grid:null,bricks:[],remaining:0,
 score:0,lives:3,combo:1,comboTimer:0,wideTimer:0,
 elapsed:0,time:0,
 balls:[],powers:[],particles:[],texts:[],
 paddle:null, launchCountdown:.5, mouse:{x:0,active:false},
 keys:{left:false,right:false},
 shake:0,toastTimer:0,
 pendingEnd:null,demoClearTimer:0
};

Resize:
function resizeCanvas() {
 const rect=stage.getBoundingClientRect();
 const oldW=W||rect.width, oldH=H||rect.height;
 W=Math.max(280,rect.width); H=Math.max(340,rect.height); But if actual rect less 280? app width 355, fine. Setting W max could cause mismatch at 320? app 300 -> W300. use rect.width.
 dpr=...
 canvas.width=Math.round(W*dpr); canvas.height...
 ctx.setTransform...
 if (state.paddle) {scale x/y; baseW=...; y...}
 else create.
 rebuildLevel(state.grid!==null);
 // scale balls positions
 if oldW...
 updateHUD();
}
But stage border: canvas position absolute inset0; width 100% relative padding box? absolute inset 0 covers padding box inside border; rect canvas maybe W=stage client width? We set W from stage.getBoundingClientRect().width includes border 2 px, canvas rect width maybe clientWidth? Minor. Better use canvas.getBoundingClientRect after CSS; but canvas size set based on stage clientWidth. `const rect=stage.getBoundingClientRect(); W=rect.width-2` border. Since canvas absolute inset0 inside border padding box? CSS absolute containing block padding box, width auto inset 0 gives padding box dimensions excluding border? likely. Use `stage.clientWidth` and `stage.clientHeight` gives inner excluding border. canvas CSS width 100% of containing block maybe. Use `canvas.getBoundingClientRect()` after set? circular. Let's set W = stage.clientWidth; H=stage.clientHeight; canvas absolute width 100% height 100% of padding box; likely matches.
CSS stage border 1, client = rect-2. canvas inset 0 width auto = padding box? absolute containing block is padding box, inset from padding edge, width = padding box width. clientWidth includes padding but no padding, = content+padding; border excluded. Good.
W=stage.clientWidth,H=stage.clientHeight.

When resize, if oldW:
 state.paddle.x *= W/oldW; target etc; y = H - offset (not scale).
 balls x/y *=; velocities maybe *ratio? Keep.
 rebuild preserve.
 set paddle width etc.
`rebuildLevel` uses current W H.

At init order:
state defined. resizeCanvas() -> rebuild level, paddle created. resetDemoScene maybe.
But state.paddle creation in resize needs base width based W.
Then resetDemoBall.

function makePaddle() { baseW=clamp(W*.105,78,124); return {x:W/2-baseW/2,y:H-(W<520?30:38),w:baseW,baseW,h:W<520?12:14,targetX:W/2};}

`rebuildLevel` compute layout and set state.remaining. On resize preserve hp.
Implementation preserving:
if preserve && oldGrid:
 const oldCells = [];
 oldGrid.forEach((row,r)=>row.forEach((c,cc)=> {if(!c.skip) oldCells.push({r:r/(oldRows-1),c:...,hp:c.hp,type:c.type,power:c.power})}));
 for new cell, find min distance; if dist<0.2 copy hp; but if new type tough and old hp=1 copy1 (cracked persists), if old normal hp1 and new tough hp2 ->1 shows crack. Nice.
Could copy power from nearest? If power positions shift, perhaps keep new. no.
When starting reset, state.grid=null then rebuild false.

`resetDemoScene`:
state.grid=null; rebuildLevel(false); score=0; combo=1; wideTimer=0; powers=[]; balls=[]; resetAttached(.5); paddle center.
Maybe when demo clears all, call after 1s. This resets demo wall.

`resetAttachedBall(delay)`:
const p=state.paddle;
const ball={x:p.x+p.w/2,y:p.y-8,r:ballRadius(),vx:0,vy:0,attached:true,trail:[],color:...}
state.balls=[ball]; state.launchCountdown=delay;
If powers multi maybe no.

Ball radius based W clamp(W*.006,6,8). Mobile 6, desktop7.

`launchAttached`:
for balls attached:
 angle = phase demo ? -0.32 : (Math.random()-.5)*.42;
 set velocities speed.
 b.attached=false.
 state.launchCountdown=0.
 sound launch.
Could be triggered by countdown.

`updatePaddle` before attached following.
if state.phase demo compute.
Paddle target clamp to [p.w/2+4, W-p.w/2-4].
When keyboard, if both left/right dir0.
Mouse target set to pointer x. On resize target center.

`computeDemoTarget`:
const p=...
let target=W/2;
let falling = state.balls.filter(b=>!b.attached && b.vy>0).sort((a,b)=>b.y-a.y)[0];
if(falling) { const t=Math.max(0,(p.y-falling.y)/falling.vy); let x=falling.x+falling.vx*t; const margin=p.w/2+5; let dir=1; for 4 iterations if x<margin {x=margin+(margin-x); dir=-} etc; target=x; } else {target=W/2+Math.sin(state.time*.9)*W*.15;}
return clamp.

Physics:
function physicsStep(dt){
 updatePaddle(dt);
 if (state.launchCountdown>0) {
  state.launchCountdown-=dt;
  if <=0 { launchAttached(); }
 }
 const p=state.paddle;
 for (const b of state.balls) {
  if (b.attached) { b.x=p.x+p.w/2; b.y=p.y-b.r-1; b.trail.length=0; continue;}
  b.px=b.x;b.py=b.y;
  b.x += b.vx*dt; b.y += b.vy*dt;
  // walls
  if b.x < b.r...
  if b.y < b.r...
  // paddle
  if (b.vy>0) {
   const crossing = b.py + b.r <= p.y+1.5 && b.y+b.r >= p.y;
   const overlapX = b.x+b.r>=p.x && b.x-b.r<=p.x+p.w;
   if(crossing&&overlapX) bounce
   else if (b.y+b.r>=p.y && b.y-b.r<=p.y+p.h && overlapX) bounce; // safety
  }
  // bricks
  for br of state.bricks if hp>0:
    if (resolveCircleRect(b,br)) { onBrickImpact(br,b); break; }
    // sweep vertical
    if (b.vy>0 && b.py+b.r<=br.y && b.y+b.r>=br.y && overlapXbrick) ...
...
  b.trail.unshift({x:b.x,y:b.y}); if >9 pop
 }
 // filter off
 const before=balls.length;
 state.balls=state.balls.filter(b=> b.y-b.r<=H+20);
 if length<before && length===0 handleBallLost()
}
Potential attached ball in array has y ~H-? not filtered because y-r <H.
handleBallLost only when no balls. If last ball goes off, state.balls empty. phase demo reset attached .45; play lives--.
But in demo if last ball drops, it may have caused pending victory? no.
When phase play lives--:
updateHUD; if 0 pendingEnd; else resetAttachedBall(1.0); show toast.
When resetAttached, state.balls=[new].
If pending, don't.
Need avoid handle loss repeated in same physics loop; after state.balls empty, okay.

Brick collision:
function circleRectOverlap. After moving, if overlap. But resolve function also calculates.
function resolveCircleRect(b,r) {
 const cx=clamp(b.x,r.x,r.x+r.w), cy=...
 let dx=b.x-cx,dy...
 if(dx*dx+dy*dy > b.r*b.r) return false;
 if(dx*dx+dy*dy>0.00001) {d... normal...}
 else { distances...}
 return true;
}
When ball overlaps brick but moving away after previous collision? Since break loop and brick hp maybe remains1; next step could still overlap due correction. Fine.
After bounce, dot maybe negative.
Call onBrickImpact only if hp>0 before. yes.

Swept crossing helper after overlap:
if no overlap and b.vy>0 etc. But if horizontal overlap and previous center below top. Set y=top-r, vy negative. Then onBrickImpact.
Could use b.py + b.r <= br.y + 1; current b.y - b.r < br.y+b.h? etc.
For up: b.py - b.r >= br.y+br.h-1 and b.y - b.r <= br.y+br.h.

Ball could hit corner while crossing; overlap handles.

onBrickImpact:
const wasTough=br.type==='tough';
br.hp = Math.max(0,br.hp-1);
if(br.hp>0) { // crack
 spawnDust(br, 7, '#8fa4cf');
 state.shake=Math.max(state.shake,1.2);
 addText('CRACK', ... maybe small)
 sound('crack');
} else {
 state.remaining=Math.max(0,state.remaining-1)
 if comboTimer>0 combo=Math.min(9,combo+1) else combo=1;
 comboTimer=2.1;
 const base=wasTough?120:60; const points=(base+(br.power?35:0)+(8-br.row)*5)*combo;
 score += points;
 spawnBurst(br, br.power?22:14, color);
 addText(`+${points}`,...);
 state.shake = ...
 if br.power spawnPower;
 sound('break');
 if remaining===0 { if phase==='playing' set pending victory; else if demo state.demoClearTimer=1.1;}
}
Tough hp1 crack draw.

Particle color for tough '#7f93bf'.

Power spawn.

`spawnBurst` uses random. Need deterministic enough no issue.
for i:
 angle=Math.random()*TAU; speed=80+Math.random()*240; life .35+...
 shape random.
size 2+random*4.
Some particles as squares rotated.

Power icons drawn:
function drawWideIcon(ctx,x,y,s) { stroke white; line; arrowheads}
function drawMultiIcon(ctx,x,y,s) { three circles at x-s*.55, x, x+s*.55? maybe horizontal three dots, and small stems? Use three balls with glow.}
Use lineWidth 2.

Status power:
if wideTimer >0:
 powerText `WIDE PADDLE · ${wideTimer.toFixed(1)}s`; timer bar width wide/10.
else if balls.length>1:
 `MULTI-BALL · ${balls.length} ACTIVE`; timer width (balls.length-1)/2 maybe.
else if phase demo `AI DEMO ACTIVE`; else `SYSTEM READY`.
Power dot color.

Lives hearts update:
hearts.forEach((h,i)=>h.classList.toggle('off',i>=lives)).
Maybe animate lost heart via class but okay.

Combo state:
update combo timer each update. If reaches0 set combo1.
HUD `×${state.combo}`; if combo>=3 add hot class.
Wall = remaining pad3.
WallMini.

Score formatting 6 digits.

End panel final score:
ui.endScore.textContent=score.toLocaleString('en-US');
Maybe victory panel shows "PERFECT WALL" and "Final score".
Gameover message based lives.

Screen overlay:
function showScreen(name) {
 ui.overlay.hidden=false;
 for entries panel.hidden = id!==...
 if name start add class start etc.
}
We need `overlay` CSS maybe display flex. hidden attribute.
Initial HTML start visible others hidden.

Start panel click. End restart buttons.
Pause resume.

When gameover/victory, demoBadge hidden true.
Restart startGame resets.

`startGame` ensureAudio, state.pendingEnd=null, phase playing, reset level, score etc, elapsed=0, combo...
clear particles/texts/powers; resetAttached .8; hide overlay; badge hidden; toast.
Maybe screen mouse target center.

`showScreen` class.

Game over pending:
state.pendingEnd={type:'gameover',time:.8};
During pending, physics stops (update checks). In update:
if pendingEnd { pendingEnd.time -=dt; if<=0 { const type=...; state.phase=type; showScreen(type); ui.finalScore...; } }
No duplicate.
Victory same.

When demo clear:
state.demoClearTimer=1.1; at timer <=0 resetDemoScene. During that time physics still; maybe all bricks gone. Fine.
But break last brick sets demoClearTimer. If state.phase demo and later ball lost before timer, no issue.

Pause:
state.phase paused; show screen. On resume phase playing. But elapsed shouldn't increment paused.
If pending end, ignore pause.

Loop:
let last=performance.now();
function frame(now){
 const dt=Math.min((now-last)/1000,.04); last=now;
 update(dt);
 render(now/1000);
 requestAnimationFrame(frame);
}
Initial request.

`update(dt)`:
state.time+=dt;
update particles/texts
if wideTimer>0 decrement and adjust paddle.
if phase playing {elapsed+=dt}
if phase playing or demo:
 if pendingEnd: end timer ...
 else { accumulator +=dt; while(acc>=STEP){physicsStep;acc-=STEP; if pending break;} }
 else acc=0
if phase demo && demoClearTimer>0 { decrement; if <=0 resetDemoScene(); }
combo timer...
toast timer...
hud timer...
Need pending handled before physics maybe:
if (state.pendingEnd) {timer; if end show; } else if active {physics}
At end set phase not active.
If pending is set during physics loop, break.
`state.accumulator` property.

Wide timer decrement only if phase not paused? yes update always but paused should freeze; do only active phases.
Power pickups are updated in physics or frame? Should update within physics for catch accuracy. Do inside physics step. But then physics loop handles.
Particles update frame always except paused? paused maybe still animate but fine.

Particles:
updateParticles(dt).

Power update in physics each step, and catch clones balls while iterating. Modifying state.balls during `for of` could be tricky. Do after ball loop or collect. In physics after balls, update powers. Catch multi adds balls; fine after loop.
Paddle width status.

Combo timer update frame.

Wide timer update frame and setPaddleWidth.

Demo clear timer.

Toast.

HUD update every 0.05 sec.

Potential issue update demo clear resets state.phase? no.

Background draw:
Use `ctx.fillStyle` etc. Canvas alpha false. `ctx.globalCompositeOperation`.
Stars with `state.time`.
Top labels.
Maybe progress bar:
const total=state.grid.flat().filter(!skip).length; pct=1-state.remaining/total.
draw at x=margin,y=30:
fillRect width; fill cyan portion. label at x margin y 19 "SECTOR 01"; label right "WALL INTEGRITY 85%". Use font 9.
But DOM wall stat too. Fine.

Canvas font uses `700 10px ui-monospace,...`.

Stage corner CSS.

Let's evaluate visual at 1280:
app 1180, stage 610.
Header top. Good.

Could include subtle scanlines overlay via stage::after pointer-events none. CSS background repeating-linear-gradient. Nice.

Need no horizontal scrollbar: body overflow-x hidden; .app width calc; stage overflow hidden; footer wrap. At mobile .hud width; hide stats. Ensure topbar brand doesn't overflow.

Sound icon inline SVG path. Button.

Let's write code carefully with no syntax errors.

HTML CSS details.

CSS:
* {box-sizing:border-box}
html,body{margin:0;min-height:100%;}
body {font-family:...; color; background...; overflow-x:hidden;}
body::before {content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(...),linear-gradient(...);background-size:46px 46px;mask-image:radial-gradient(circle at 50% 35%,black,transparent 85%);opacity:.22;}
.app{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:18px 0 14px;position:relative;z-index:1;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;}
.brand...
.brand-mark width42 height42; position; border; transform rotate? pseudo bars. Use spans .brand-mark i.
.brand-mark i {position:absolute;height:4px;border-radius:2px;background:...; box-shadow...}
i:nth-child(1){width:22;left:8;top:10;background cyan}
i2 width16 left8 top18 violet
i3 width10 left8 top26 pink.
h1 margin; font-size clamp...
.hud display flex gap8.
.stat min-width maybe 90; height52; padding 8 12; border radius12; background; border.
.stat-label display block font 9 letter .16em color.
.stat strong font 18 font-variant-numeric tabular-nums.
.wall-stat maybe.
.combo strong hot.
.hearts display flex gap4; height20 align.
.heart svg width17.
.sound-btn height44 etc.
.stage-wrap height clamp; border; border-radius22; overflow:hidden; position:relative; background #070a14; box-shadow; isolation:isolate.
canvas absolute inset0 width100 height100 display block; touch-action:none; outline none.
.stage-wrap::after scanlines.
.frame-corner absolute 16x16 border etc z-index 4 pointer none.
.tl top14 left14 border top left.
...
.demo-badge top16 right18 z5; hidden attr default? We need visible initial. use hidden removed? In HTML no hidden. CSS [hidden].
.live-dot.
.toast top16 left50 transform translate(-50%,-12px) opacity0; etc .show.
.overlay position absolute inset0 z-index 6; display:grid; place-items:center; padding:24px; background:radial-gradient(...); pointer-events:none; transition. [hidden] display none.
.overlay.start-mode maybe.
.panel pointer-events:auto; width min(430px,100%); text-align center; padding 28px; border radius22; background linear gradient rgba; border; backdrop-filter blur(16px); box-shadow; animation panelIn .35s.
Need `hidden` panels display none.
.panel-icon maybe 46 square with CSS ball; optional.
.eyebrow.
h2.
.launch-line margin; padding 11 0; border; font 11 letter spacing; color white; display flex justify center gap.
.keycap styled.
.arrow animation.
p.
.primary button.
.panel-meta flex.
Other panel .big-score.

.statusbar display flex justify-between gap; padding 12px 3px; min-height46.
.controls-group flex etc.
kbd.
.power-readout flex; .timer-track width80 height3.
.objective.

Responsive:
@media(max-width:800px){.topbar flex-wrap; .brand flex; .hud flex:1 0 100%; justify-content:flex-end? If brand row then hud row. Better at max800 topbar align center; .hud margin-left:auto maybe still same row until too narrow. At 700, width 668; brand ~220 + hud ~430 =650 fits maybe. Use breakpoint 760 to wrap. .topbar{flex-wrap:wrap}. .hud{width:100%;justify-content:space-between}. That makes stage lower. At 375 okay.
.stage height override.
.statusbar maybe.
}
@media(max-width:560px){ .app width calc100%-18; .topbar margin-bottom10; .brand-mark 38; h1 17; .stat minwidth0;padding; .wall-stat,.combo-stat display:none; .sound-btn span display none; .sound-btn width40; .hud gap6; .score-stat flex1; .stage height clamp(360px,62vh,500px); border radius16; .statusbar padding 10px 2; .controls-group .control-label,.objective{display:none}; .power-readout width100%; justify-content:center; .panel padding22 18; h2 font24; .panel-meta font8; }
At 375 header brand row height42, hud row 48, stage 413, footer40 =543 plus margins => okay.

@media(max-height:720px) and (min-width:761px) { .stage-wrap{height:calc(100vh - 166px);min-height:380px;} .app padding10; .topbar margin-bottom10; .statusbar padding8; }
At 1280x800 not.

Start panel maybe animation. pulse.
@media prefers reduced motion disable.

JS code length maybe 900 lines. We have token budget huge. Need ensure final only code block.

Let's deeply inspect collision robustness and game logic to avoid bugs.

State initialization and resize:
```
let W=0,H=0,DPR=1;
const state={...};
function resizeCanvas(){
 const rect=stage.getBoundingClientRect();
 const oldW=W, oldH=H;
 W=Math.max(280, stage.clientWidth || rect.width);
 H=Math.max(340, stage.clientHeight || rect.height);
 DPR=Math.min(window.devicePixelRatio||1,2);
 canvas.width=Math.round(W*DPR); canvas.height=Math.round(H*DPR);
 ctx.setTransform(DPR,0,0,DPR,0,0);
 const oldPaddle=state.paddle;
 if(!oldPaddle){ state.paddle=makePaddle();}
 else {
  const ratio=oldW?W/oldW:1;
  state.paddle.baseW=...
  state.paddle.w=state.wideTimer>0?base*1.55:base;
  state.paddle.x=clamp(state.paddle.x*ratio,...)
  state.paddle.y=H-(W<520?30:38)
  state.paddle.h=...
  target...
 }
 for balls scale positions
 rebuildLevel(state.grid!==null);
 updateHUD();
}
```
But `state.paddle` referenced in rebuild? no.
If W min 280 but actual stage 260 at extreme, canvas scale mismatch; app min maybe 280 at width 300 app282, stage client280. fine.

`rebuildLevel(preserve)`:
```
const cols=...; const rows=8;
const newGrid=generateGrid(cols);
if(preserve && state.grid) { ... }
state.grid=newGrid;
... layout.
```
But on resize old grid has rows 8. copy.
We need mark `oldGrid` before overwrite.
Distance map:
```
const oldCells=[];
state.grid.forEach((row,r)=>row.forEach((cell,c)=>{if(!cell.skip) oldCells.push({nr:r/(rows-1), nc:c/(state.grid[0].length-1), hp:cell.hp})}));
newGrid.forEach... find.
```
If old cols1 division by zero no, cols>=7.
Copy only if dist < .22; every new cell likely nearest.
Also copy `power`? no.
`cell.hp=Math.min(cell.maxHp, old.hp)`.

Layout:
```
const margin = W<520?10:26;
const top = W<520?42:56;
const colGap=W<520?4:7;
const rowGap=W<520?4:6;
const bottomSpace=W<520?124:148;
const maxBottom=H-bottomSpace;
let rowH=Math.max(16,Math.min(36,(maxBottom-top-rowGap*(rows-1))/rows));
const cellW=(W-margin*2-colGap*(cols-1))/cols;
newGrid.forEach...
```
If maxBottom-top less etc rowH min 16 might exceed max bottom at H340 (maxBottom216, top42, 8*16+28=156, bottom198 okay).
Brick width min? W280, margin10, cols7, gap4 -> (280-20-24)/7=33.7.
State.remaining.

generateGrid:
Rows 8. colors:
```
const PALETTE=['#39d9ff','#4f8cff','#7b6cff','#b25cff','#e95cff','#ff5f9e','#ff7a63','#ffc857'];
```
Row0 cyan, row7 amber. Tough brick distinct steel.
Skip positions:
```
const holeA=Math.floor(cols*.42), holeB=holeA+1;
const holes=new Set();
holes.add(`3:${holeA}`); holes.add(`3:${holeB}`);
holes.add(`6:${Math.floor(cols*.52)}`);
```
At mobile 7, holeA2,3; hole row6 c3.
Power coords:
wide r1 c1 (round1.92=2), r5 c2 (round2.1=2) tough due (5+2=7 not %9; row5 c2 maybe not tough). We wanted tough; force type tough if r5 and power wide.
multi r2 c5 (round4.68=5), r6 c4 (round4.08=4).
Tough condition as above; force row5 power tough.
Make extra tough row7 even, giving bottom row.
Normal/tough mix.
Power coordinates might coincide holes? r? no.
For wide r1c2 normal. multi r2c5 normal. extra wide r5c2 tough. extra multi r6c4 normal (unless hole at c3).
Colors: tough cell color '#7186b8'; power cell color = wide '#35e6ff', multi '#ff62c4'. For tough power use color but draw tough with accent; icon accent.
Cell {skip,type,power,color,hp,maxHp,row,col}.

Canvas bricks uses cell color.

Ball speed:
```
function gameSpeed(){ return clamp(W*.37,330,470)*(1+Math.min(state.elapsed/600,.14));}
```
In demo elapsed not increment; use state.time maybe. Use base.

At start, reset state.elapsed=0. During play elapsed increases. Demo could speed use time but no.

`launchAttached` uses speed `gameSpeed()`. In demo speed maybe base.
Ball vx angle. random.
`b.trail=[]`.

Bounce:
speed = gameSpeed();
angle rel*1.05. b.vx=sin*speed; vy=-cos*speed.
If rel nearly0, vx 0.
This guarantees center straight up.
Edge 60 degrees.

Brick collisions reflection might change speed magnitude slightly? reflection preserves.

Wall bounce preserves.

Power clones use gameSpeed.

Game timing fixed step.

`update(dt)`:
```
function update(dt){
 state.time+=dt;
 if(state.phase==='playing') state.elapsed+=dt;
 if(state.wideTimer>0 && active){...}
 updateParticles; updateTexts;
 if(state.pendingEnd){...}
 else if(state.phase==='demo'||state.phase==='playing'){
   state.accumulator += dt;
   let steps=0;
   while(acc>=STEP && steps<8){ physicsStep(STEP); acc-=STEP; steps++; if(pendingEnd) {acc=0;break;} }
 } else acc=0;
 if(state.phase==='demo'&&state.demoClearTimer>0){...}
 combo timer...
 toast timer...
 hudTimer...
}
```
If phase changes to gameover in pending handling, no physics.
Wide timer decrements only if active; set width on expiry:
```
if(wideTimer>0){wideTimer-=dt; if<=0{wideTimer=0; setPaddleWidth(base); showToast('WIDE PADDLE ENDED');}}
```
But if phase victory pending, still active? pending state phase playing, timer decreases during pending maybe okay.

Combo timer decrement active or always. Fine.

Physics:
```
function physicsStep(dt) {
 updatePaddle(dt);
 if(state.launchCountdown>0){...}
 const p=...
 for(const b of state.balls.slice()) {...}
 // after update remove off
 ...
 updatePowers(dt)
}
```
If launchAttached creates velocities and ball in state.balls same for-of? launch occurs before loop, good.
If onBrickImpact sets pending victory, could continue loop. Add if state.pendingEnd break.
When ball lost and resetAttached inside after loop, okay.
`state.balls = state.balls.filter(...)`; if attached ball only no lost.

When ball goes through bottom, we filter. If state.balls had 2 and one off, still one. No life lost. Good.
But if a ball goes off and no balls remain, handle. In demo reset. In play.
`handleAllBallsLost`:
```
if phase play:
 lives--
 combo=1...
 if lives<=0 { pendingEnd...; showToast('NO LIVES LEFT'); }
 else { resetAttached(1.0); showToast(...);}
else if demo {resetAttached(.45);}
```
`resetAttached` sets balls new, but state.phase pending? only if lives>0.
If lives 0 pending, state.balls remains empty.

updatePaddle dt:
Keyboard direction. If mouse moved, target. In player, if key pressed target updated. 
AI p.targetX computed. AI move with speed 780 and maybe acceleration. direct.
Clamp p.x after width. When width changes, p.x might be outside; clamp.
setPaddleWidth:
```
const center=p.x+p.w/2; p.w=newW; p.x=center-newW/2; clamp.
```
When wide caught, center stays.
When expires shrink around center.

Paddle x target mouse uses pointer location relative canvas; if pointer enters canvas, target. On initial pointer not, center.

Mouse pointer move in demo could update state.mouse but not p target; on start game mouse coordinates maybe pointer over start button; user then moves canvas.

StartGame rebuild level:
```
state.grid=null; rebuildLevel(false);
state.score=0...
state.balls=[]...
state.paddle.baseW=...
state.paddle.w=base
center paddle
resetAttached(.75)
```
`rebuildLevel` sets remaining. `state.powers=[]`.
Set phase playing before reset.
Hide screens.
`ui.demoBadge.hidden=true`.

Start game triggered by keydown ArrowLeft: event handler calls startGame then sets keys.left=true after; good. But if code startGame before keys assignment, okay.

Keyboard:
```
document.addEventListener('keydown', e=>{
 const isButton=...
 if(e.code==='ArrowLeft'||...) e.preventDefault();
 if((state.phase==='demo') && !['Tab','ShiftLeft'...].includes(e.code) && !e.metaKey...){
   startGame();
 }
 if(e.code==='ArrowLeft') state.keys.left=true;
 ...
 if((state.phase==='gameover'||victory)&&e.code==='Enter') startGame();
 if(e.code==='KeyP'||e.code==='Escape'){...}
 if(e.code==='Space'&&state.phase==='playing') launchAttached();
});
```
Problem if phase demo and key is Tab, no start. Fine.
If key is Space on focused start button, document keydown also starts game then button click might start again. Could check if e.target.closest('button') and code Space/Enter, return (let button activate). But then message still start on key other than Space. Implement:
```
if (e.target instanceof HTMLElement && e.target.closest('button') && (e.code==='Space'||e.code==='Enter')) return;
```
Need avoid `HTMLElement` maybe. fine.

When phase victory and any key? Requirement restart option; button. Could allow Enter only.
Keyup.

Pointerdown:
```
canvas.addEventListener('pointerdown', e=>{
 ensureAudio();
 if(state.phase==='demo'){ startGame(); return;}
 if(state.phase==='playing'){launchAttached();}
});
```
Clicking canvas to start. `canvas.focus({preventScroll:true})`; focus option supported. Could catch.
Pointermove update.

Start panel click:
```
startPanel.addEventListener('click', e=>{if(!e.target.closest('button')) startGame();});
```
Overlay pointer-events none but panel pointer auto. Button click start.
Restart buttons.
Pause.

Sound button:
```
soundBtn.addEventListener('click', e=>{e.stopPropagation(); soundOn=!soundOn; if(soundOn)ensureAudio(); updateSoundUI();});
```
`ensureAudio` if sound off? toggling sets then ensure.
aria pressed indicates sound enabled.

Audio tone throttle:
global lastTone.
```
function playTone(kind) {
 if(!soundOn||!audioCtx)return;
 const now=audioCtx.currentTime;
 if(now-lastSound&lt;.035 &amp;&amp; kind==='hit')return;
 ...
}
```
For 'break' etc.
Use `audioCtx.createOscillator()`.
No `alert`.

Toast function.

UI update:
```
const liveBalls=state.balls.filter(!attached).length ||...
if wide...
```
During attached one, display system ready.
Power timer bar style.width.
If demo, powerText "AI DEMO ACTIVE" perhaps takes priority? But if wide active demo maybe show wide. We can show demo when no power.
`powerDot` class toggles active.
Status bar objective wall.

Score display update.

Final panel:
```
ui.finalScore.textContent=state.score.toString().padStart(6,'0');
ui.resultTitle maybe.
ui.resultMessage.
```
HTML two separate spans maybe query all .final-score.

Victory panel message "Every brick, every power-up. Sector 01 is yours."
Game over "The wall held this time. Your score..."
Buttons.

Initial demo score updates; start panel could show no score.

Render:
```
function render(t){
 ctx.setTransform(DPR,0,0,DPR,0,0);
 ctx.clearRect(0,0,W,H);
 drawBackground(t);
 ctx.save();
 if(shake>0) ctx.translate((Math.random()-.5)*shake,...)
 drawBricks(t);
 drawPowers(t);
 drawBalls();
 drawParticles();
 drawPaddle(t);
 drawTexts();
 ctx.restore();
 drawEdgeGlow();
}
```
Particles should be over balls/paddle. Fine.
`state.shake*=Math.pow(.02,dt)`? Update in frame: state.shake=Math.max(0,state.shake-dt*22). If set 5, decays .23 sec.
Background drawing not shake.

Background:
```
const g=ctx.createLinearGradient(0,0,0,H); g.addColorStop...
ctx.fillStyle=g; ctx.fillRect.
const glow=ctx.createRadialGradient(W*.5,0,0,W*.5,0,W*.7)...
ctx.globalCompositeOperation='screen'; fill.
grid lines.
stars.
draw top guide.
```
Grid loops maybe 30*20 lines 60, fine.
Stars generated with Math.random. On resize normalized.

Add bottom horizon gradient.

Draw rails:
```
ctx.strokeStyle rgba(80,210,255,.12); lineWidth1; ctx.beginPath move(1,0) line(1,H)
```
maybe.

draw top progress:
`total=state.grid.flat().filter...`; `pct=...`; x margin, y 34, width W-2margin, height2; fill background and fill gradient. labels at y19.
But bricks top=56, okay.
Text "SECTOR 01 // NEON GRID" and "WALL INTEGRITY 84%".
Use `ctx.textAlign`.

Draw bricks:
Performance: each gradient. 80*60 =4800 gradients/sec maybe okay but might be heavy. Could cache gradients? Canvas gradient depends coordinates; brick positions fixed, but resize. We can pre-render bricks to offscreen canvas? Complicated due power pulse. 80 gradients per frame is okay in modern Chrome. Shadows only powers.
Use ctx.save per brick and restore.

`roundRect` custom:
```
function roundRect(ctx,x,y,w,h,r){ctx.beginPath();ctx.moveTo(x+r,y);...quadraticCurveTo}
```
Rounded.

Normal brick gradient:
```
const g=ctx.createLinearGradient(b.x,b.y,b.x,b.y+b.h);
if tough ...
else {g.addColorStop(0,b.color);g.addColorStop(.28,b.color+'b8');g.addColorStop(1,'#141c35');}
```
Hex alpha string b8 valid.
For power normal color. tough power still tough fill but stroke power accent.
`ctx.globalAlpha`.
After fill:
- border line width1.
- top highlight line.
- corner notch maybe.
- tough rivets.
- power icon.
- crack.

Need draw crack after icons maybe crack overlay.

Draw power icon:
```
if b.power==='wide' drawWideIcon(ctx,b.x+b.w/2,b.y+b.h/2,Math.min(b.h*.32,12))
else drawMultiIcon...
```
`b.color` used.

Power item:
draw radial gradient centered, shadow. Outer ring with ctx.arc and rotation. For multi, three white circles. Wide arrow.
Also draw tiny trail dots.

Paddle:
```
const p=state.paddle;
ctx.save();
if wide: shadow blur 26...
gradient ...
roundRect(p.x,p.y,p.w,p.h, p.h/2)
fill
stroke rgba white
top highlight
if wide draw side segments
center line
```
At H small.

Balls:
Trail with color. Use ball.color based index; initial '#d9fbff'. Multi balls different colors maybe assign when created.
`drawBall` radial gradient from white to '#7be9ff'.

Particles:
ctx.save; for each set alpha; translate rotate; fillStyle; if shape 'spark' fillRect else circle.
Texts.

Drawing attached launch indicator:
If ball attached, draw dotted vertical-ish line from ball to top? Could draw faint circle around. Use `ctx.setLineDash([3,7]); stroke from ball.x,b.y-r to ball.x, top+...`. But attached at bottom, line to top. Fine subtle.

Canvas progress line labels.

Game over overlay still canvas visible.

Start panel overlay CSS maybe backdrop. Since game running, card should not be too opaque. `.panel{background:linear-gradient(145deg,rgba(13,18,38,.9),rgba(8,12,27,.82))}`. Fine.

Maybe start panel card at center. Could reduce height. Keep.

Let's ensure developer says "Everything that makes demo interesting visible within first seconds: nothing hidden behind high score, later level or long play session." Demo with visible score and action, yes.

Potential automated screenshot at 3 sec: Overlay is visible, and game action maybe panel hides. We could add AI action visible by making start panel semi-transparent and maybe positioned right. Let's choose start overlay panel not huge and aligned center-left? Let's think aesthetic side by side comparison. A conventional center panel looks polished. The AI demo action may show ball/break particles around panel. Good.

Could make start panel max-width 390, padding 24. Canvas width 1178; panel covers x394-784, bricks from x26-1152. The center bricks hidden, but left/right visible. Ball might be anywhere. Fine.

At mobile panel covers most canvas. But screenshot likely 1280.

One concern: game score and lives in demo; lives always 3. okay.

Victory overlay restart. Add "PLAY AGAIN" buttons.

Game over when lives 0. We decrement only when all balls lost. clear.

Pause maybe not needed but included.

Could add countdown "GO" after start? Not necessary.

Let's scrutinize potential collision bug due resolveCircleRect and circle radius. Brick border. If ball hits corner, diagonal reflection can send ball downward unexpectedly. Fine.
Ball cannot pass through paddle: collision after brick. The paddle is below bricks. If ball moving down, crossing condition. If b.py+r <=p.y+1.5. With step <4, yes. If paddle moves up? paddle y fixed. Good.
Wall collisions.
Brick tunneling: rowH min16, ball displacement max speed maybe 536/120=4.5; sum radius 7 means vertical extent 14; brick 16. Crossing can't skip if current overlap region? Suppose previous bottom just above top by 0.1, current top passes bottom? Displacement 4.5, brick 16, no. Good. Horizontal thin gap no.

Paddle wide width. Collision uses current p.

Mouse target: if mouse x outside stage, pointerleave perhaps keep.

Arrow key speed responsive.

Power icon: visible. Tough cracks after first hit.

Particles break.

Score.

Game over/victory.

Let's maybe include a mini legend in footer for power-up icons. Requirement only in game, but legend helps. Footer currently power readout. Could include two legend chips near controls:
`<span class="legend"><b>↔</b> WIDE</span><span><b>•••</b> MULTI</span>`. At desktop show. At mobile hide. This makes power-ups clear. Add in controls group.
Maybe footer:
controls group, power legend, status, objective. Too crowded. We can place legend inside start panel meta? "↔ WIDE PADDLE · ••• MULTI-BALL". Panel meta currently lives rows power-ups. Could add `.power-legend` below button with items. Nice but panel bigger. Maybe at footer right objective. The canvas icons self-explanatory with legend under status.

Let's use footer:
left controls
center `.power-legend`: icon ↔ WIDE 10s; icon ⋙ MULTI ×3
right objective.
Then power status maybe a small overlay chip at top-left of stage? We already have DOM top canvas label? We can add `powerStatus` fixed in statusbar but footer could wrap. Alternative stage badge bottom-left shows active power. Hmm.
Header could have small chip. Let's have statusbar:
left controls
middle active-power readout (changes)
right objective + legend via title? We can show only active. Icons in bricks visible. Enough.
Maybe start panel meta says `↔ WIDE PADDLE • ••• MULTI-BALL`. Actually meta list 3 lives, 8 rows, power-ups.

Okay.

Let's write final code. But before final, let's think if output requirement exactly one fenced code block no text. Yes.

Need ensure no localStorage etc. No external.

Let's produce code maybe 1000 lines. Need be careful with syntax and IDs.

Let's map UI IDs:
score, wall, combo, lives, soundBtn, soundLabel maybe.
stageWrap, game, demoBadge, toast, overlay,
startPanel, startBtn,
pausePanel, resumeBtn,
gameoverPanel, gameoverScore, restartBtn,
victoryPanel, victoryScore, victoryRestartBtn,
powerDot, powerText, powerTimer, wallMini.
Maybe result score classes.

HTML:
hearts spans with inline svg. Use path.
sound icon svg.

CSS hidden.

JS ui object.

showScreen:
```
const panelMap={start:ui.startPanel,pause:...,gameover...,victory...};
Object.entries(panelMap).forEach(([k,p])=>p.hidden=k!==name);
ui.overlay.hidden=false;
```
Overlay starts visible. initial.
For end, set ui.gameoverScore etc before show.

`startGame` call ui.demoBadge.hidden=true.
When demo reset, demo badge remains hidden? initial visible. reset demo scene within demo after clear should badge visible (it was already if phase demo; start sets hidden). set in resetDemoScene ui.demoBadge.hidden=false. But resetDemoScene called initial. Good.
When end, hidden.

On restart, hide.

`startGame` calls ensureAudio, which might produce no sound until launch. playTone launch.

Initial demo no audio.

Power status active:
```
const activeBalls=state.balls.filter(b=>!b.attached).length;
if wideTimer>0 ...
else if activeBalls>1...
else if phase demo...
```
If wide and multi both active, show wide. Could show both joined: `WIDE + MULTI • 7.2s`. Implement:
```
if wideTimer>0 && balls>1 text=`WIDE + MULTI • ...`
```
Power bar width based wide or balls.

Score and combo.

`updateHUD` hearts: `ui.lives.querySelectorAll('.heart')`.

`ui.combo.classList.toggle('hot', state.combo>=3)`.

Particles and text.

Let's create random utility.

Audio:
```
let audioCtx=null, soundOn=true, lastAudio=0;
function ensureAudio(){
 if(!soundOn) return;
 try{...}catch(e){}
}
```
Empty catch allowed. No console errors.
`playSound(kind)` with configs. Since no external. Use oscillator/gain. For power, maybe two oscillators.
```
function blip(freq,end,dur,type,vol){
 if(!audioCtx||!soundOn)return;
 const now=audioCtx.currentTime;
 ...
}
```
gain exponential ramp needs initial >0. Set .0001 then ramp.
No `ctx.resume` unhandled: `audioCtx.resume().catch(()=>{})`.

Sound button icon could switch opacity via class sound-off. CSS .sound-btn.off .sound-waves {opacity:.15}; .slash display.
SVG:
<path class=sound-waves d...>
<path class=sound-slash d...>
CSS off slash display.
No need label update.

Stage frame corners.

No emoji reliance maybe icons unicode. Use SVG for logo? CSS bars.

Let's reason about demo AI and overlay card: AI ball may hit panel? canvas under. no.

One concern: `ctx.globalCompositeOperation='lighter'` trails then restore. Fine.
Background alpha false but gradient.

Need avoid huge memory from gradients each frame. okay.

Let's refine CSS panel responsive and text.

Start panel:
```
<div class="panel-mark"><span></span></div>
```
Panel mark maybe CSS circle with ring.
Could skip.

Start panel h2.
launch line exact text.

Meta.

Game over etc.

At first paint, start overlay panel visible and demo badge. Good.

Let's maybe animate demo badge pulse.

Frame corner.

Now let's reason actual row count and display: 8 rows, 11 cols, 88 cells minus 3 holes =85. HUD wall 085. Tough bricks around:
row0 c1,4,7,10 (4)
row1 c8 (1)
row2 c7 (1) + multi c5 normal
row3 c6 (1)
row4 c5 (1)
row5 c4 tough power (1)
row6 c3 (1)
row7 c0,2,4,6,8,10 (6)
=16 tough. Mixed. Nice.
Powers 4. Icons.
Colors.

Tough cracks after first hit.

Rows 8.

Pattern holes row3 around c4,5 and row6 c5? Actually hole c=floor(cols*.52)=5 for 11; row6 multi at c7? multi positions r6 c round(10*.68)=7, so okay.
Mobile cols7: wide r1 c1; multi r2 c5; wide r5 c2; multi r6 c4; holes r3 c2,3 and r6 c3. Fine.
Icons visible.

Game speed on mobile 330, paddle 78, okay.

Power catch with wide.

Let's ensure wide timer exactly 10 seconds. state.wideTimer=10. Display.

Multi gives 3 balls. `catchPower`:
```
case multi:
 const base = state.balls.find(b=>!b.attached) || ...
 state.balls = state.balls.filter(!attached?) if attached no.
 while(state.balls.length<3) ...
 if(state.balls.length>3)state.balls.length=3;
```
If there are 1 ball and caught, we keep ball +2. If ball currently bounced upward. Clones.
Use spawn angles [-0.55,0.55,0]? If one existing direction maybe. We can create with angle options.
```
const angles=[-0.58,0.58];
for each...
```
This gives total 3.
If state.balls length 2, add1.
If 3, no clone, still 3. Toast.
Score +150 each pickup maybe.
`state.balls.length` includes attached? pickup requires ball collision with paddle, attached can't. no.

Wide activation setPaddleWidth(base*1.55). If already wide, reset timer and width maybe.
`showToast('WIDE PADDLE • 10 SECONDS','power')`.

Particle burst around paddle.

Maybe drawing paddle wide timer ends with toast.

Score display live.

Game over:
`state.pendingEnd` set and physics stops next update; final ball might still visible. overlay after .7s.
`showScreen('gameover')`; state.phase gameover.
Victory similarly. Set final score.

Restart option both.

No `alert`.

Let's maybe add `aria-live` for score? not needed.

Potential issue `stage.clientHeight` when stage height set via CSS clamp and app on first layout; clientHeight valid. Good.
ResizeObserver callback after init may call rebuild preserving. Fine.

Initialize:
```
resizeCanvas();
resetDemoScene();
showScreen('start');
requestAnimationFrame(frame);
```
But resizeCanvas calls rebuildLevel and sets state.remaining. resetDemoScene rebuild again. fine.
`state.paddle` created in resize.
`resetDemoScene` calls rebuild level and sets center.
No ball before.

ResizeObserver:
```
const ro=new ResizeObserver(()=>{resizeCanvas();});
ro.observe(stage);
```
When canvas width set, could ResizeObserver trigger because stage size unchanged? no.
Need avoid repeated rebuild on every tiny observe due canvas? stage fixed.
Use window resize too maybe.
`resizeCanvas` after DPR change maybe.

`resizeCanvas` old grid preserve. Initial oldGrid null. It creates paddle. When state.grid exists and resize, preserves hp. state.balls scale.

Set state.paddle.y = H - (W&lt;520?32:38); h.
`state.paddle.x` clamp.
`state.paddle.targetX` clamp.

`setPaddleWidth` uses W maybe.

`rebuildLevel` layout uses state.grid[0].length. good.

Make sure `generateGrid` uses `cell.maxHp`; tough hp2. On preserve copy hp maybe new cell max. Fine.

When start reset grid null then rebuild, all hp max.

`resetDemoScene` also resets elapsed? Demo elapsed unused.
`state.demoClearTimer=0`.

HUD update after reset.

`resetAttachedBall` sets ball color based balls count maybe '#dffbff'.
Ball color can be changed for clones.

`state.balls` new ball and `launchCountdown`.
If multiple balls lost? only reset when none.

Wall count in demo decreases as AI breaks; then reset.

Could screenshot show wall count already reduced and score. Nice.

Maybe demo should not show toast? initial resetDemoScene could show toast 'AI DEMO ONLINE'? Toast may overlay badge. Could show briefly. At init, showToast('AI PILOT ONLINE') then fades by 3 sec. Fine. But developer says message. Demo badge.

`resetDemoScene` called after demo clear, showToast maybe.

Start panel includes click.

Let's think of subtle issue with DOM overlay pointer events: `.overlay {pointer-events:none}`, `.panel {pointer-events:auto}`. Start panel has large area, clicking text triggers panel event start. Good.
Demo badge pointer-events none.
Stage canvas gets pointermove even under overlay? overlay only panel blocks; elsewhere overlay pointer-events none so canvas receives. In demo, pointer move doesn't start. Click canvas starts.

Panel start `cursor:pointer` maybe.

Button styles.

Now code.

Before final, maybe evaluate if user asked "Build" and expects code only. Yes.

Let's write complete HTML with no omissions.

Potential syntax issue in template strings inside JS okay.

Let's draft functions in order.

Utilities:
```
const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
const rand=(a,b)=>a+Math.random()*(b-a);
```

roundRect:
```
function roundedRect(c,x,y,w,h,r){
 r=Math.min(r,w/2,h/2);
 c.beginPath();
 c.moveTo(x+r,y); c.lineTo(x+w-r,y); c.quadraticCurveTo(x+w,y,x+w,y+r);...
 c.closePath();
}
```

Draw icons.

Generate grid.

Potential colors with alpha concatenation: color always 7 char hex. yes.

Background stars array initialized 70.

Draw background top progress: total cells:
```
const total=state.grid.flat().reduce...
```
flat supported.
`pct=Math.round((1-state.remaining/total)*100)`.
Use fillStyle gradient maybe.
At y 27:
ctx.font '700 9px ...'; fillText.
line y36.
Bricks top56.

Draw side guide.

`ctx.globalCompositeOperation='screen'` radial gradient with transparent; fillRect. Need color alpha.

Draw stars:
```
ctx.globalAlpha=s.a*(.55+.45*Math.sin(t*s.tw+s.phase));
ctx.fillStyle='#bcd8ff';
```
then reset.

Bottom fog gradient.

Draw canvas vignette:
radial gradient center, edges transparent? `createRadialGradient(W/2,H/2,Math.min(W,H)*.2,W/2,H/2,Math.max(W,H)*.75)` color transparent center to rgba(0,0,0,.35) edge. Fill.

Brick draw:
```
const isTough=...
const accent=b.power? b.color : b.color;
if b.power shadow...
...
```
Tough fill uses b.color if tough power? base steel.
Power brick normal gradient.
Border color tough rgba.
Top line.
Power icon.

Crack function draws path in local coordinates:
```
ctx.save(); ctx.beginPath(); move...; ctx.strokeStyle; ctx.lineWidth; ctx.stroke(); ... ctx.restore()
```
Jagged lines.

Power item draw:
```
ctx.translate(p.x,p.y);
const g=radial...
ctx.fill circle
ctx.save(); ctx.rotate(p.rot); ctx.strokeStyle...; arc...
draw symbol with coordinates 0,0.
```
drawWideIcon expects center and size; but after translate, call (0,0).
Multi.

Particle draw.

Text draw.

render order: background, bricks, powers, balls, particles, paddle, texts. Paddle should be above balls? Ball bounces off; draw paddle after ball maybe ball on top. Typically paddle below. Fine.

Attached indicator:
in drawBalls, if attached draw dashed line up 60 px maybe.
```
ctx.save; setLineDash; stroke rgba; move ball.x,b.y-r to ball.x,Math.max(top,b.y-120)
```
But line passes through bricks. Maybe small vertical 50.

Ball trail uses positions and `ctx.globalCompositeOperation='lighter'`.
Need draw main with radial gradient.

Paddle gradient:
```
const g=ctx.createLinearGradient(p.x,0,p.x+p.w,0); ...
```
fill.
Wide energy pulse `ctx.shadowBlur=18+sin*6`.

Draw particles after ball; good.

Background labels no shake.

updateParticles:
```
p.vx *= Math.pow(.35,dt); p.vy += p.gravity*dt; p.x+=...; p.life-=dt;
```
If gravity maybe 320.
Text y -=30dt.

Toast:
```
ui.toast.classList.toggle('show',state.toastTimer>0)
```
CSS transition.

Power status update every 50ms.

Particles when break:
```
function spawnBurst(brick,count,color){
 for...
}
```
Tough crack particles.

Maybe `brick.flash=1` to animate. Add property flash=0; on hit set1; update bricks flash decays. In draw, alpha overlay. Need update in frame. Could set b.flash and decrement in updateParticles loop. Add state.bricks each b.flash. On break brick removed.
In update:
for brick of state.bricks if flash>0 flash-=dt*3.
Draw white overlay with alpha flash*.5.
Good.

Power spawn with color.

Score floating text.

Now DOM overlay hidden. `showScreen('start')` sets overlay hidden false.

Result final scores with comma formatting via `toLocaleString`.

Game over score label.

Maybe include accuracy not tracked. no.

Let's consider if victory trigger all bricks broken. `state.remaining` excludes skips. yes.

Tough hp 2. Good.

No high score requirement.

No level selection.

Let's ensure no external resources. yes.

Let's now formulate final code. Need be mindful of code fence and no extra text. We'll include all.

Before writing final, let's maybe optimize UI at first screenshot. Start panel title "READY TO SHATTER?" and message. The overlay background maybe radial dark .25. Game visible. Use `.panel` backdrop-filter blur(10px)` but blurred behind. Fine.

Maybe add a mini animated "AI" trail.

One more issue: The iframe only receives keyboard after user clicks. Developer says if game uses keyboard, display clear "Click or press a key to start" message. We do. Clicking canvas starts. Great.

Potential issue start overlay panel pointer event auto means clicking the start card starts due panel listener. Good.

Game starts in demo without interaction, satisfying.

Let's think about click or press a key to start if user clicks the sound button first: sound button toggles, not starts. That's fine; they can then click canvas. But message says click. Sound button is click, technically should maybe also start? Could make sound button not intercept? It toggles only. Maybe clicking anywhere should start, including sound? Could have sound button stop and not start. Requirement game start after click; likely canvas. Fine.

Maybe initial overlay covers center and sound button outside stage header, click toggles only. acceptable.

Let's ensure `startPanel.addEventListener('click')` doesn't start when clicking the `startBtn` because button handler also start, but event target closest button returns, so no double. good.

Now let's write.

One concern in `resolveCircleRect`: if ball center exactly at brick edge, dist=0 and choose min penetration; if left=0 it chooses left; pushes. okay.
After hitting brick from top, we set b.y=br.y-r and vy negative. `onBrickImpact` can break.
Swept collision check uses b.py stored before movement. If b.vy&gt;0. yes.
If ball hits underside while moving up, set b.y=br.y+br.h+r.
After resolve circle, we don't preserve wall direction. fine.

`handleBrickImpact` decrement hp. If tough hp2-&gt;1 crack. If normal1-&gt;0.
For tough power, crack after first, drop after second. nice.

`spawnPower` may spawn at brick position. Good.

`updatePowers` catches after balls. If paddle overlap and item, catch. The paddle collision happened earlier and ball bounced, but power can be at same spot. good.
When catch multi, clones balls but they're not in current physics loop (already loop done). They'll move next step.

`state.launchCountdown` only for attached ball.

`state.balls` filtering may remove balls but attached not.

`state.pendingEnd` set in on impact, but state.balls loop continues current frame; break check after each brick? We can break outer if pending. implement.

Paddle bounce sound might be frequent. throttle.

Particles on paddle maybe not necessary; add 4.

`playSound` kinds:
- launch: freq 420->620 sine
- paddle: 300->440 square .05
- hit: 240 .06 triangle
- crack: 170 .08 sawtooth
- break: 520->780 .09 square
- power: 660->1200 .18 sine
- life: 180->90 .3 sawtooth
- win: etc.
No errors.

Audio context only after interaction; ensureAudio on start.

`toggleSound` when sound off and on calls ensure.

Potential issue `osc.frequency.exponentialRampToValueAtTime` end freq positive. yes.

Let's now produce final.