игра для новичков

[html]<div class="theme_design">
<div class="theme_top">

<p>когда последние искры фейерверка исчезнут в небе, они превратятся в дождь и снег, чтобы вновь упасть на землю, питать её и взращивать человечество — чтобы однажды снова подняться в небо и расцвести там своей великолепной вспышкой.<br>
проходи, путник - мы ждем тебя за дверью, осталась всего пара шагов.</p>
</div>
</div>
[/html]

[html]
<style>
.board-wrap{
width:100%;
max-width:900px;
margin:24px auto 10px;
font-family: "Montserrat Alternates", system-ui, sans-serif;
color:#2b2b2b;
}

/* Заголовок */
.board-title{
text-align:center;
font-weight:800;
letter-spacing:.4px;
font-size:18px;
text-transform:uppercase;
margin:0 0 10px;
}

/* Палитра выбора цвета */
.palette{
display:flex; gap:8px; justify-content:center; align-items:center;
margin:10px auto 12px;
}
.swatch{
width:22px; height:22px; border-radius:50%;
border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.2);
cursor:pointer; transition:transform .15s ease;
}
.swatch:hover{ transform:scale(1.08); }

/* Игровое поле */
.board {
position: relative;
background: url('https://i.imgur.com/xIZTEH5.png') no-repeat center center;
background-size: 100% 100%;
width: 100%;
aspect-ratio: 1110 / 768; /* держим пропорции карты */
border-radius: 12px;
overflow:hidden;
}

/* Фишка игрока */
.token {
position: absolute;
width: 26px; height: 26px; border-radius: 50%;
background: #e74c3c;
border: 2px solid rgba(255,255,255,.95);
box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.4);
cursor: grab;
transition: box-shadow .15s ease, transform .1s ease;
}
.token:active{ cursor:grabbing; transform:scale(1.02); }

/* Контрольные точки/квесты */
.point {
position: absolute;
width: 17px; height: 17px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fff 0%, #ffe274 35%, #f5c546 70%, #b9861b 100%);
border: 2px solid rgba(0,0,0,.45);
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.point::after{
content:"?";
position:absolute; inset:0;
display:grid; place-items:center;
font-weight:800; color:#3a2b00; font-size:11px;
}
</style>

<div class="board-wrap">
<div class="board-title">НАСТОЛЬНАЯ ИГРА ДЛЯ НОВИЧКОВ «NEXTDOOR»</div>

<div class="palette" id="palette">
<div class="swatch" style="background:#e74c3c" data-color="#e74c3c" title="Красный"></div>
<div class="swatch" style="background:#2ecc71" data-color="#2ecc71" title="Зелёный"></div>
<div class="swatch" style="background:#3498db" data-color="#3498db" title="Синий"></div>
<div class="swatch" style="background:#9b59b6" data-color="#9b59b6" title="Фиолетовый"></div>
<div class="swatch" style="background:#f1c40f" data-color="#f1c40f" title="Жёлтый"></div>
<div class="swatch" style="background:#ff7f50" data-color="#ff7f50" title="Коралловый"></div>
</div>

<div class="point" style="left: 370px; top: 249px;" title="выполнить пункт из списка"></div>
<div class="point" style="left: 300px; top: 230px;" title=" выполнить пункт из списка"></div>
<div class="point" style="left: 200px; top: 340px;" title=" выполнить пункт из списка"></div>
<div class="point" style="left: 530px; top: 410px;" title="получить награды"></div>
</div>
</div>

// Перетаскивание (мышь)
let isDragging = false, shiftX = 0, shiftY = 0;

token.addEventListener('mousedown', (e) => {
isDragging = true;
token.style.cursor = 'grabbing';
const rect = token.getBoundingClientRect();
shiftX = e.clientX - rect.left;
shiftY = e.clientY - rect.top;
e.preventDefault();
});

document.addEventListener('mouseup', () => {
isDragging = false;
token.style.cursor = 'grab';
});

document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const r = board.getBoundingClientRect();
let x = e.clientX - r.left - shiftX;
let y = e.clientY - r.top - shiftY;
x = Math.max(0, Math.min(x, r.width - token.offsetWidth));
y = Math.max(0, Math.min(y, r.height - token.offsetHeight));
token.style.left = x + 'px';
token.style.top = y + 'px';
});

// Тач-поддержка (мобильные)
token.addEventListener('touchstart', (e) => {
const t = e.touches[0];
const rect = token.getBoundingClientRect();
const r = board.getBoundingClientRect();
shiftX = t.clientX - rect.left;
shiftY = t.clientY - rect.top;
isDragging = true;
e.preventDefault();
}, {passive:false});

document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const t = e.touches[0];
const r = board.getBoundingClientRect();
let x = t.clientX - r.left - shiftX;
let y = t.clientY - r.top - shiftY;
x = Math.max(0, Math.min(x, r.width - token.offsetWidth));
y = Math.max(0, Math.min(y, r.height - token.offsetHeight));
token.style.left = x + 'px';
token.style.top = y + 'px';
e.preventDefault();
}, {passive:false});

document.addEventListener('touchend', () => { isDragging = false; });

// Палитра — смена цвета фишки
palette.addEventListener('click', (e) => {
const sw = e.target.closest('.swatch');
if (!sw) return;
const color = sw.getAttribute('data-color');
token.style.background = color;
});
</script>
[/html]