<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Пепельные луга — v2</title>
<style>
html, body { margin: 0; height: 100%; background: #17171d; }
body { display: grid; place-items: center; }
/* низкое разрешение бэкинг-стора, CSS-масштаб целый ×2, пиксели резкие */
canvas {
width: 960px;
height: 540px;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
/* Подсказка перехода/взаимодействия у точки */
#hint {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
padding: 6px 14px;
background: rgba(23, 23, 29, 0.85);
color: #d99a32;
font: 16px/1.4 monospace;
border: 1px solid #44454e;
border-radius: 4px;
white-space: nowrap;
}
/* Фейд перехода областей: чёрный слой поверх всего */
#fade {
position: fixed;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<canvas id="scene"></canvas>
<div id="fade"></div>
<div id="hint" hidden></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
