---

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Moon</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #1a1a2e;
    overflow: hidden;
    font-family: "Courier New", monospace;
  }
  .window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-width: 95vw;
    background: #f0ead6;
    border: 2px solid #1a1a2e;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
  }
  .titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0ead6;
    border-bottom: 2px solid #1a1a2e;
    height: 28px;
    padding: 0 6px;
  }
  .titlebar .icon {
    width: 14px;
    height: 14px;
    background: #1a1a2e;
  }
  .titlebar .buttons {
    display: flex;
    gap: 6px;
  }
  .titlebar .btn {
    width: 14px;
    height: 14px;
    border: 2px solid #1a1a2e;
    background: transparent;
    position: relative;
  }
  .btn.min::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 2px;
    height: 2px;
    background: #1a1a2e;
  }
  .btn.max::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 2px;
    bottom: 2px;
    border: 2px solid #1a1a2e;
  }
  .btn.close::before,
  .btn.close::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 2px;
    height: 10px;
    background: #1a1a2e;
  }
  .btn.close::before { transform: rotate(45deg); }
  .btn.close::after  { transform: rotate(-45deg); }

  .scene {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a2e;
    overflow: hidden;
    image-rendering: pixelated;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
</style>
</head>
<body>
  <div class="window">
    <div class="titlebar">
      <div class="icon"></div>
      <div class="buttons">
        <div class="btn min"></div>
        <div class="btn max"></div>
        <div class="btn close"></div>
      </div>
    </div>
    <div class="scene">
      <canvas id="c"></canvas>
    </div>
  </div>

<script>
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');

  // Внутреннее «пиксельное» разрешение
  const W = 160;
  const H = 90;
  canvas.width = W;
  canvas.height = H;

  const CREAM = '#f0ead6';
  const BG    = '#1a1a2e';

  function clear() {
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, W, H);
    ctx.fillStyle = CREAM;
  }

  // Звёзды
  function drawStars() {
    const stars = [];
    let seed = 1337;
    function rnd() {
      seed = (seed * 9301 + 49297) % 233280;
      return seed / 233280;
    }
    for (let i = 0; i < 90; i++) {
      const x = Math.floor(rnd() * W);
      const y = Math.floor(rnd() * (H - 15));
      const type = rnd();
      stars.push({ x, y, type });
    }
    stars.forEach(s => {
      if (s.type < 0.15) {
        // плюсик
        ctx.fillRect(s.x, s.y - 1, 1, 3);
        ctx.fillRect(s.x - 1, s.y, 3, 1);
      } else if (s.type < 0.3) {
        // квадратик 2x2
        ctx.fillRect(s.x, s.y, 2, 2);
      } else {
        // точка
        ctx.fillRect(s.x, s.y, 1, 1);
      }
    });
  }

  // Луна (полумесяц с каплями)
  function drawMoon(cx, cy, r) {
    // Заливаем круг
    for (let y = -r; y <= r; y++) {
      for (let x = -r; x <= r; x++) {
        if (x*x + y*y <= r*r) {
          ctx.fillRect(cx + x, cy + y, 1, 1);
        }
      }
    }
    // Вырезаем круг со смещением — получаем полумесяц
    ctx.fillStyle = BG;
    const ox = cx + Math.floor(r * 0.55);
    const oy = cy - Math.floor(r * 0.15);
    for (let y = -r; y <= r; y++) {
      for (let x = -r; x <= r; x++) {
        if (x*x + y*y <= r*r) {
          ctx.fillRect(ox + x, oy + y, 1, 1);
        }
      }
    }
    // Капли, стекающие снизу
    ctx.fillStyle = CREAM;
    const drops = [
      { x: cx - 4, y: cy + r, len: 2 },
      { x: cx - 1, y: cy + r + 1, len: 3 },
      { x: cx + 2, y: cy + r, len: 1 },
      { x: cx + 4, y: cy + r - 1, len: 2 },
    ];
    drops.forEach(d => {
      for (let i = 0; i < d.len; i++) {
        ctx.fillRect(d.x, d.y + i, 1, 1);
      }
    });
  }

  // Земля и котик
  function drawGround() {
    const groundY = H - 8;
    // Линия земли с небольшим рельефом
    const heights = [0,0,0,1,0,0,0,0,-1,0,0,0,1,0,0,0,0,0,0,0,0];
    for (let x = 0; x < W; x++) {
      const h = heights[x % heights.length];
      ctx.fillRect(x, groundY + h, 1, H - groundY);
    }
    // Котик силуэт
    const cx = Math.floor(W / 2);
    const baseY = groundY - 1;
    // Тело
    ctx.fillRect(cx - 2, baseY - 3, 5, 4);
    // Голова
    ctx.fillRect(cx - 1, baseY - 5, 3, 2);
    // Ушки
    ctx.fillRect(cx - 1, baseY - 6, 1, 1);
    ctx.fillRect(cx + 1, baseY - 6, 1, 1);
  }

  function draw() {
    clear();
    drawStars();
    drawMoon(Math.floor(W/2) - 5, Math.floor(H/2) - 12, 6);
    drawGround();
  }

  draw();
</script>
</body>
</html>