[html]
<div id="warriors-hub">
<style>
#warriors-hub{--ink:#eee9d9;--muted:#c6cec3;--line:rgba(190,204,169,.32);box-sizing:border-box;width:100%;max-width:900px;margin:0 auto;color:var(--ink);font:14px/1.5 Georgia,"Times New Roman",serif}
#warriors-hub *{box-sizing:border-box}
#warriors-hub a{color:inherit;text-decoration:none}
#warriors-hub a:hover{text-decoration:underline}
#warriors-hub button,#warriors-hub select{font:inherit}
#warriors-hub [hidden]{display:none!important}
#warriors-hub .wh-panel{position:relative;margin:0 0 12px;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:radial-gradient(circle at 12px 12px,rgba(220,225,205,.13) 1px,transparent 1.8px),radial-gradient(circle at 32px 28px,rgba(220,225,205,.1) 1px,transparent 1.8px),linear-gradient(135deg,#172b39,#233d48);background-size:42px 42px,48px 48px,auto;box-shadow:0 2px 7px #0002}
#warriors-hub .wh-toggle{display:flex;width:100%;min-height:42px;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#e6dfc5;text-align:left;text-transform:uppercase;letter-spacing:1.2px;cursor:pointer}
#warriors-hub .wh-toggle:hover{background:#ffffff0d}
#warriors-hub .wh-arrow{transition:transform .2s}
#warriors-hub .wh-toggle[aria-expanded=true] .wh-arrow{transform:rotate(180deg)}
#warriors-hub .wh-content{padding:12px}
#warriors-hub .wh-game{padding:14px;overflow:visible}
#warriors-hub .wh-game-title{margin:0 0 10px 105px;color:#e6dfc5;font-size:19px;font-weight:normal;letter-spacing:2px;text-transform:uppercase}
#warriors-hub .wh-game-layout{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(0,1.8fr);gap:8px;align-items:center}
#warriors-hub .wh-cat-side{position:relative;z-index:2;align-self:stretch;display:flex;min-width:0;flex-direction:column;justify-content:center;margin-right:-24px;pointer-events:none}
#warriors-hub .wh-cat-image{display:block;width:100%;max-width:205px;max-height:235px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 4px 5px #0005)}
#warriors-hub .wh-cat-placeholder{display:flex;min-height:140px;flex-direction:column;align-items:center;justify-content:center;color:#c5c9b5;font-size:42px;text-align:center}
#warriors-hub .wh-cat-placeholder small{font-size:11px;letter-spacing:1px}
#warriors-hub .wh-cat-speech{position:absolute;top:100px;left:50%;z-index:5;width:max-content;max-width:min(230px,75vw);padding:7px 10px;transform:translateX(-50%);border:1px solid #a9b78d;border-radius:8px;background:#091612f2;color:#f0e6c9;font-size:12px;line-height:1.35;text-align:center;box-shadow:0 3px 8px #0005}
#warriors-hub .wh-cat-speech:after{position:absolute;bottom:-6px;left:50%;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);border-right:1px solid #a9b78d;border-bottom:1px solid #a9b78d;background:#091612;content:""}
#warriors-hub .wh-board-wrap{position:relative;z-index:1;min-width:0}
#warriors-hub .wh-board-stage{position:relative;width:100%;overflow:hidden;border:2px solid #71816a;border-radius:4px;background:#172b25}
#warriors-hub .wh-board{display:block;width:100%;height:auto;aspect-ratio:22/16;touch-action:none}
#warriors-hub .wh-start-overlay{position:absolute;inset:2px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;background:#0d1e18e8;text-align:center}
#warriors-hub .wh-start-title{margin:0;color:#e8dfbd;font-size:19px;font-weight:normal;letter-spacing:1px}
#warriors-hub .wh-start-text{margin:0;color:#c9d1bd;font-size:12px}
#warriors-hub .wh-start-button{padding:9px 17px;border:1px solid #a9b78d;border-radius:4px;background:#485f43;color:#fff4d5;cursor:pointer}
#warriors-hub .wh-start-button:hover{background:#637b55}
#warriors-hub .wh-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px}
#warriors-hub .wh-controls label{color:#dce2d0;font-size:12px}
#warriors-hub .wh-controls select,#warriors-hub .wh-btn{min-height:31px;padding:5px 9px;border:1px solid #819078;border-radius:4px;background:#283e39;color:#eee9d9}
#warriors-hub .wh-btn{cursor:pointer}
#warriors-hub .wh-btn:hover{background:#526849}
#warriors-hub .wh-score{margin-left:auto;color:#e0d5a8;white-space:nowrap}
#warriors-hub .wh-help{margin:8px 0 0;color:#bfc8b8;font-size:11px}
#warriors-hub .wh-pad{display:grid;grid-template-columns:repeat(3,36px);gap:4px;justify-content:center;margin:9px auto 0}
#warriors-hub .wh-pad button{width:36px;height:30px;border:1px solid #819078;border-radius:4px;background:#2b433b;color:#f0ead9;cursor:pointer;touch-action:manipulation}
#warriors-hub .wh-pad .wh-up{grid-column:2}
#warriors-hub .wh-pad .wh-left{grid-column:1;grid-row:2}
#warriors-hub .wh-pad .wh-down{grid-column:2;grid-row:2}
#warriors-hub .wh-pad .wh-right{grid-column:3;grid-row:2}
#warriors-hub .wh-star-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.95fr) minmax(0,1fr);gap:9px;align-items:stretch}
#warriors-hub .wh-cat-card{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;overflow:hidden;border:1px solid #dadcc433;border-radius:4px;background:#0a161f80}
#warriors-hub .wh-cat-card.wh-right{flex-direction:row-reverse}
#warriors-hub .wh-avatar{display:block;flex:0 0 68px;width:68px;height:86px;border:1px solid #6e7b6b;border-radius:3px;background:#34463e;object-fit:cover}
#warriors-hub .wh-cat-info{min-width:0;overflow-wrap:anywhere}
#warriors-hub .wh-cat-name{display:inline-block;margin-bottom:4px;color:#e8d9a8;font-size:14px;line-height:1.35}
#warriors-hub .wh-cat-desc{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
#warriors-hub .wh-bulletins{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:4px;background:#0510196b}
#warriors-hub .wh-bulletins a{overflow-wrap:anywhere;color:#e7e1c9}
#warriors-hub .wh-clan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#warriors-hub .wh-clan-card{display:flex;min-width:0;gap:10px;padding:9px;overflow:hidden;border:1px solid var(--clan);border-radius:4px;background:var(--clan-bg)}
#warriors-hub .wh-clan-card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 5px);justify-self:center}
#warriors-hub .wh-storm{--clan:#bd6961;--clan-bg:#682b2ba6}
#warriors-hub .wh-river{--clan:#65b0c8;--clan-bg:#254e66a6}
#warriors-hub .wh-wind{--clan:#ad91cc;--clan-bg:#4d3867b3}
#warriors-hub .wh-shadow{--clan:#8baa75;--clan-bg:#304c2db8}
#warriors-hub .wh-rogue{--clan:#dfc468;--clan-bg:#655224b8}
#warriors-hub .wh-clan-link{display:flex;flex:0 0 76px;align-self:stretch;width:76px;min-height:94px;overflow:hidden;border:1px solid #ffffff4d;border-radius:3px;background:#0003}
#warriors-hub .wh-clan-avatar{display:block;width:100%;height:100%;min-height:94px;object-fit:cover}
#warriors-hub .wh-clan-copy{min-width:0;align-self:center;overflow-wrap:anywhere}
#warriors-hub .wh-clan-name{display:block;margin-bottom:4px;color:#fff0cf;font-size:14px;line-height:1.35;letter-spacing:.4px;text-transform:uppercase}
#warriors-hub .wh-clan-desc{margin:0 0 6px;color:#e0e4d8;font-size:12px;line-height:1.5}
#warriors-hub .wh-read{color:#fff0c5;font-size:11px;text-decoration:underline}
#warriors-hub .wh-footer{margin:8px 0 0;color:#aeb9ac;font-size:10px;text-align:center}
@media(max-width:600px){
#warriors-hub .wh-game{padding:10px}
#warriors-hub .wh-game-title{margin-left:0;font-size:16px;text-align:center}
#warriors-hub .wh-game-layout{grid-template-columns:78px minmax(0,1fr);gap:5px}
#warriors-hub .wh-cat-side{margin-right:-17px}
#warriors-hub .wh-cat-image{max-height:150px}
#warriors-hub .wh-cat-placeholder{min-height:90px;font-size:30px}
#warriors-hub .wh-star-grid{grid-template-columns:1fr}
#warriors-hub .wh-bulletins{order:-1}
#warriors-hub .wh-cat-card.wh-right{flex-direction:row}
#warriors-hub .wh-avatar{flex-basis:58px;width:58px;height:65px}
#warriors-hub .wh-clan-grid{grid-template-columns:1fr}
#warriors-hub .wh-clan-card:last-child:nth-child(odd){grid-column:auto;width:100%}
#warriors-hub .wh-clan-link{flex-basis:66px;width:66px;min-height:82px}
#warriors-hub .wh-clan-avatar{min-height:82px}
#warriors-hub .wh-score{margin-left:0}
}
@media(max-width:380px){
#warriors-hub .wh-game-layout{grid-template-columns:64px minmax(0,1fr)}
#warriors-hub .wh-cat-side{margin-right:-12px}
#warriors-hub .wh-controls select{max-width:100%}
#warriors-hub .wh-start-title{font-size:16px}
}
</style>

<!-- МИНИ-ИГРА -->
<section class="wh-panel wh-game">
<h2 class="wh-game-title">Тайный патруль</h2>
<div class="wh-game-layout">
<div class="wh-cat-side">
<img class="wh-cat-image" src="https://free-png.ru/wp-content/uploads/2021/05/free-png.ru-383.png" alt="Кот из патруля" onerror="this.style.display='none';this.nextElementSibling.hidden=false">
<div class="wh-cat-placeholder" hidden>🐈‍⬛<small>КОТ ПАТРУЛЯ</small></div>
<div class="wh-cat-speech" role="status" aria-live="polite" hidden></div>
</div>
<div class="wh-board-wrap">
<div class="wh-board-stage">
<canvas class="wh-board" width="440" height="320" tabindex="0" aria-label="Змейка: собери добычу"></canvas>
<div class="wh-start-overlay">
<h3 class="wh-start-title">Тропа начинается здесь</h3>
<p class="wh-start-text">Собери добычу и приведи патруль домой.</p>
<button class="wh-start-button wh-begin" type="button">Начать патруль</button>
</div>
</div>
<div class="wh-controls">
<label>Сложность:
<select class="wh-difficulty">
<option value="200">Ученик</option><option value="150" selected>Воитель</option><option value="100">Глашатай</option></option><option value="80">Предводитель</option>
</select></label>
<button class="wh-btn wh-restart" type="button">Заново</button>
<button class="wh-btn wh-pause" type="button">Пауза</button>
<span class="wh-score">Добыча: <b>0</b></span>
</div>
<div class="wh-pad">
<button class="wh-up" data-dir="up" type="button">▲</button>
<button class="wh-left" data-dir="left" type="button">◀</button>
<button class="wh-down" data-dir="down" type="button">▼</button>
<button class="wh-right" data-dir="right" type="button">▶</button>
</div>
<p class="wh-help">Стрелки / WASD · На телефоне — кнопки или свайпы.</p>
</div>
</div>
</section>

<!-- ЗВЁЗДНОЕ ПЛЕМЯ -->
<section class="wh-panel">
<button class="wh-toggle" type="button" aria-expanded="false" aria-controls="wh-star-content"><span>✦ Новости Звёздного племени ✦</span><span class="wh-arrow">▼</span></button>
<div class="wh-content" id="wh-star-content" hidden>
<div class="wh-star-grid">
<article class="wh-cat-card" id="wh-looking-card"></article>
<div class="wh-bulletins">
<a href="ССЫЛКА_НА_НОВОСТЬ_ЗВЕЗДНОГО_ПЛЕМЕНИ_1">— Новость Звёздного племени 1</a>
<a href="ССЫЛКА_НА_НОВОСТЬ_ЗВЕЗДНОГО_ПЛЕМЕНИ_2">— Новость Звёздного племени 2</a>
</div>
<article class="wh-cat-card wh-right" id="wh-welcome-card"></article>
</div>
</div>
</section>

<!-- НОВОСТИ ПЛЕМЁН -->
<section class="wh-panel">
<button class="wh-toggle" type="button" aria-expanded="false" aria-controls="wh-clan-content"><span>✦ Новости племён ✦</span><span class="wh-arrow">▼</span></button>
<div class="wh-content" id="wh-clan-content" hidden>
<div class="wh-clan-grid"></div>
<p class="wh-footer">При каждой загрузке выбирается случайная новость каждого племени.</p>
</div>
</section>

<script>
(() => {
const root=document.getElementById('warriors-hub');
if(!root||root.dataset.ready==='1')return;
root.dataset.ready='1';

root.querySelectorAll('.wh-toggle').forEach(button=>{
button.addEventListener('click',()=>{
const panel=root.querySelector('#'+button.getAttribute('aria-controls'));
const open=button.getAttribute('aria-expanded')==='true';
button.setAttribute('aria-expanded',String(!open));
panel.hidden=open;
});
});

/* КОТЫ ДЛЯ БЛОКОВ «ИЩЕМ» И «ДОБРО ПОЖАЛОВАТЬ» */
  const lookingCats = [
    {
      name:'Рокота',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/739398.png',
      description:'Ищем продолжателя Великого Рода!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p46191'
    },
    {
      name:'Дымчатого',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/485326.jpg',
      description:'Ищем продолжателя Великого Рода!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p46191'
    },
    {
      name:'Гремучницу',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/87735.png',
      description:'Ищем продолжательницу Великого Рода!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p46191'
    },
    {
      name:'Папоротника',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/541825.png',
      description:'Ласка нуждается в любимом-нелюбимом Бывшем.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p75056'
    },
    {
      name:'Золу',
      avatar:'https://upforme.ru/uploads/001c/55/b9/35/256120.jpg',
      description:'Разыскивается хитрая, остроязыкая сестрица Сажи.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p103430'
    },
    {
      name:'Вранокрыла',
      avatar:'https://upforme.ru/uploads/001c/55/b9/35/953522.jpg',
      description:'Сажа нуждается в Брате-Патриоте!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p103430'
    },
    {
      name:'Чертополоха',
      avatar:'https://upforme.ru/uploads/001c/55/b9/35/953522.jpg',
      description:'Темная лошадка Теней, а также братец Сажи.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p103430'
    },
    {
      name:'Кукушку',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/95059.png',
      description:'Река нуждается в сплетнице!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p109168'
    },
    {
      name:'Кедра',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/466889.png',
      description:'Кто-то должен расшевелить Небосклона.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p120961'
    },
    {
      name:'Пестрокрыльника',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/373157.png',
      description:'Первая любовь колкой Розочки!',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p125547'
    },
    {
      name:'Синеокую',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/439795.png',
      description:'Мама Птички и Невелички, которую очень ждут дочери.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p129752'
    },
    {
      name:'сиблингов Тмина',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/267643.png',
      description:'Расшевелите Ветер своим подростковым бунтом.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p131161'
    },
    {
      name:'Зяблик',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/731235.png',
      description:'Бывшая подруга Мирта, по которой он скучает.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p132713'
    },
    {
      name:'котят Буревестницы',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/676103.png',
      description:'Речные котят, которым не повезло родиться в шторм.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p133710'
    },
    {
      name:'Мрачницу',
      avatar:'https://upforme.ru/uploads/001c/55/b9/324/432199.png',
      description:'Что случилось с Вьюном? В этом разобраться сможет только его Сестра.',
      url:'https://cwvoice.ru/viewtopic.php?id=122#p134038'
    }
  ];

  const welcomeCats = [
    {
      name:'Птичка',
      avatar:'https://forumavatars.ru/img/avatars/001c/55/b9/384-1792526000.png',
      description:'Сестричка Невелички вступила в игру!',
      url:'https://cwvoice.ru/viewtopic.php?id=1443#p134157'
    },
    {
      name:'Медобока',
      avatar:'https://forumavatars.ru/img/avatars/001c/55/b9/382-1792091358.png',
      description:'Так бы и куснули за ее сладкие бочка!',
      url:'https://cwvoice.ru/viewtopic.php?id=1430#p132794'
    },
    {
      name:'Легколап',
      avatar:'https://forumavatars.ru/img/avatars/001c/55/b9/381-1791988405.png',
      description:'Не унываем, ведь очаровательный сын Тенепляса в игре.',
      url:'https://cwvoice.ru/viewtopic.php?id=1429#p132548'
    },
    {
      name:'Кряква',
      avatar:'https://forumavatars.ru/img/avatars/001c/55/b9/379-1792003035.png',
      description:'Ах какая дама! Всем расступиться, Кряква идет!',
      url:'https://cwvoice.ru/viewtopic.php?id=1421#p131927'
    }
];

function renderRandomCat(id,cats,mode){
const container=root.querySelector('#'+id);
const cat=cats[Math.floor(Math.random()*cats.length)];
const link=document.createElement('a');
link.href=cat.url;
const img=document.createElement('img');
img.className='wh-avatar';img.src=cat.avatar;img.alt=cat.name;
img.onerror=()=>img.style.visibility='hidden';
link.appendChild(img);
const info=document.createElement('div');info.className='wh-cat-info';
const name=document.createElement('a');name.className='wh-cat-name';name.href=cat.url;
name.textContent=mode==='looking'?'Ищем: '+cat.name:'Добро пожаловать, '+cat.name+'!';
const desc=document.createElement('p');desc.className='wh-cat-desc';desc.textContent=cat.description;
info.append(name,desc);container.replaceChildren(link,info);
}
renderRandomCat('wh-looking-card',lookingCats,'looking');
renderRandomCat('wh-welcome-card',welcomeCats,'welcome');

/* ЗМЕЙКА */
const canvas=root.querySelector('.wh-board'),ctx=canvas.getContext('2d');
const overlay=root.querySelector('.wh-start-overlay');
const difficulty=root.querySelector('.wh-difficulty');
const scoreNode=root.querySelector('.wh-score b');
const pauseButton=root.querySelector('.wh-pause');
const catSpeech=root.querySelector('.wh-cat-speech');
const catPhrases=[
'Ну ты и гений навигации. Прям как Речной патруль.',
'Тебя бы даже мышь обогнала. Пешком.',
'Патруль окончен. Твои навыки так и не найдены.',
'Я видел пень с реакцией получше.',
'В следующий раз поручим добычу табуретке.',
'Поздравляю: ты проиграл собственному хвосту.',
'Даже рыба бы так не врезалась.',
'Лапы есть, а координация где-то потерялась.',
'План был гениален. Жаль, продержался полсекунды.',
'Это был не патруль, а экскурсия в ограду.',
'Звёздное племя просило передать: ну камон.',
'Удача отвернулась. Навыки тоже.',
'Ты управлял змейкой или чихал на клавиатуру?',
'Я бы помог, но мне слишком смешно.',
'Кажется, мышь только что поставила тебе двойку.',
'Тактика впечатляет. Особенно её отсутствие.',
'С таким патрулём даже кусты чувствуют себя в безопасности.',
'Не переживай: хуже уже не будет. Наверное.'
];
const cols=22,rows=16,cell=20;
const colors=['#b7a27d','#7b9b8b','#b47d69','#9b91b5','#d0b85f','#7d9fb2','#bd9baf','#8d9a67'];
let snake=[],dir={x:1,y:0},next={x:1,y:0},prey=null,score=0,timer=null;
let running=false,paused=false,over=false,touch=null;

function stop(){if(timer!==null)clearInterval(timer);timer=null}
function runTimer(){stop();if(running&&!paused&&!over)timer=setInterval(step,+difficulty.value)}
function randomPrey(){
const occupied=new Set(snake.map(p=>p.x+','+p.y)),free=[];
for(let y=0;y<rows;y++)for(let x=0;x<cols;x++)if(!occupied.has(x+','+y))free.push({x,y});
if(!free.length)return null;
return {...free[Math.floor(Math.random()*free.length)],type:['mouse','fish','bird'][Math.floor(Math.random()*3)]};
}
function hideCatSpeech(){
catSpeech.hidden=true;catSpeech.textContent='';
if('speechSynthesis' in window)window.speechSynthesis.cancel();
}
function speakCatPhrase(){
const phrase=catPhrases[Math.floor(Math.random()*catPhrases.length)];
catSpeech.textContent='«'+phrase+'»';catSpeech.hidden=false;
if('speechSynthesis' in window&&'SpeechSynthesisUtterance' in window){
try{
window.speechSynthesis.cancel();
const utterance=new SpeechSynthesisUtterance(phrase);
utterance.lang='ru-RU';utterance.rate=1.04;utterance.pitch=1.1;
window.speechSynthesis.speak(utterance);
}catch(error){/* Облачко с репликой останется видимым, даже если озвучка недоступна. */}
}
}
function reset(){
stop();hideCatSpeech();snake=[{x:10,y:8},{x:9,y:8},{x:8,y:8},{x:7,y:8},{x:6,y:8}];
dir={x:1,y:0};next={x:1,y:0};score=0;running=true;paused=false;over=false;
prey=randomPrey();scoreNode.textContent='0';pauseButton.textContent='Пауза';overlay.hidden=true;
draw();runTimer();canvas.focus();
}
function setDir(name){
if(!running||paused||over)return;
const dirs={up:{x:0,y:-1},down:{x:0,y:1},left:{x:-1,y:0},right:{x:1,y:0}};
const d=dirs[name];if(!d||(d.x===-next.x&&d.y===-next.y))return;next=d;
}
function step(){
if(!running||paused||over)return;
dir=next;
const head={x:snake[0].x+dir.x,y:snake[0].y+dir.y};
if(head.x<0||head.x>=cols||head.y<0||head.y>=rows){end('Патруль заблудился!',true);return}
const eating=prey&&head.x===prey.x&&head.y===prey.y;
const body=eating?snake:snake.slice(0,-1);
if(body.some(p=>p.x===head.x&&p.y===head.y)){end('Патруль столкнулся!',true);return}
snake.unshift(head);
if(eating){score++;scoreNode.textContent=score;prey=randomPrey();if(!prey){end('Вся добыча собрана!',false);return}}
else snake.pop();
draw();
}
function message(text){
ctx.save();ctx.fillStyle='#091612e8';ctx.fillRect(20,126,400,68);
ctx.strokeStyle='#9aab82';ctx.strokeRect(20,126,400,68);
ctx.fillStyle='#f0e6c9';ctx.textAlign='center';ctx.font='bold 16px Georgia';ctx.fillText(text,220,155,380);
ctx.font='12px Georgia';ctx.fillText('Нажми «Заново», чтобы продолжить',220,177);ctx.restore();
}
function end(text,lost){over=true;running=false;stop();draw();message(text);if(lost)speakCatPhrase();else hideCatSpeech()}
function drawCat(x,y,color,face){
const px=x*cell,py=y*cell;ctx.save();ctx.fillStyle=color;ctx.strokeStyle='#17251e';ctx.lineWidth=1.5;
if(face){
ctx.beginPath();ctx.moveTo(px+3,py+8);ctx.lineTo(px+3,py+1);ctx.lineTo(px+9,py+5);ctx.lineTo(px+15,py+1);ctx.lineTo(px+17,py+8);ctx.quadraticCurveTo(px+20,py+15,px+10,py+18);ctx.quadraticCurveTo(px,py+16,px+3,py+8);ctx.closePath();ctx.fill();ctx.stroke();
ctx.fillStyle='#e7d99b';ctx.beginPath();ctx.arc(px+7,py+10,1.7,0,Math.PI*2);ctx.arc(px+13,py+10,1.7,0,Math.PI*2);ctx.fill();
ctx.fillStyle='#17251e';ctx.beginPath();ctx.arc(px+7,py+10,.7,0,Math.PI*2);ctx.arc(px+13,py+10,.7,0,Math.PI*2);ctx.fill();
ctx.beginPath();ctx.moveTo(px+10,py+12);ctx.lineTo(px+9,py+14);ctx.lineTo(px+11,py+14);ctx.stroke();
}else{ctx.beginPath();ctx.roundRect(px+2,py+2,16,16,4);ctx.fill();ctx.stroke()}
ctx.restore();
}
function drawPrey(){
if(!prey)return;
const x=prey.x*cell+10,y=prey.y*cell+10;ctx.save();ctx.translate(x,y);ctx.lineWidth=1;ctx.strokeStyle='#ead9ad';
if(prey.type==='mouse'){
ctx.fillStyle='#c7a879';ctx.beginPath();ctx.ellipse(0,1,6.5,4.5,0,0,Math.PI*2);ctx.fill();ctx.stroke();
ctx.beginPath();ctx.arc(-4,-3,2.7,0,Math.PI*2);ctx.arc(1,-4,2.5,0,Math.PI*2);ctx.fill();ctx.stroke();
ctx.beginPath();ctx.moveTo(6,2);ctx.quadraticCurveTo(11,5,9,8);ctx.stroke();
}else if(prey.type==='fish'){
ctx.fillStyle='#83b5b6';ctx.beginPath();ctx.ellipse(-1,0,6.5,4,0,0,Math.PI*2);ctx.fill();ctx.stroke();
ctx.beginPath();ctx.moveTo(4,0);ctx.lineTo(9,-4);ctx.lineTo(9,4);ctx.closePath();ctx.fill();ctx.stroke();
}else{
ctx.fillStyle='#c9b27b';ctx.beginPath();ctx.ellipse(-1,1,5.5,4.5,-.3,0,Math.PI*2);ctx.fill();ctx.stroke();
ctx.beginPath();ctx.moveTo(3,-1);ctx.lineTo(8,1);ctx.lineTo(3,2);ctx.closePath();ctx.fill();
}
ctx.restore();
}
function draw(){
ctx.clearRect(0,0,440,320);ctx.fillStyle='#172b25';ctx.fillRect(0,0,440,320);
ctx.strokeStyle='#b4c39f17';ctx.lineWidth=.5;
for(let x=0;x<=440;x+=cell){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,320);ctx.stroke()}
for(let y=0;y<=320;y+=cell){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(440,y);ctx.stroke()}
drawPrey();
snake.forEach((p,i)=>drawCat(p.x,p.y,colors[Math.floor(i/3)%colors.length],i%3===0));
if(paused)message('Патруль отдыхает');
}
root.querySelector('.wh-begin').addEventListener('click',reset);
root.querySelector('.wh-restart').addEventListener('click',reset);
pauseButton.addEventListener('click',()=>{
if(!running||over)return;paused=!paused;pauseButton.textContent=paused?'Продолжить':'Пауза';
if(paused)stop();else runTimer();draw();
});
difficulty.addEventListener('change',runTimer);
root.querySelectorAll('[data-dir]').forEach(b=>b.addEventListener('click',()=>setDir(b.dataset.dir)));
canvas.addEventListener('touchstart',e=>{const t=e.changedTouches[0];touch={x:t.clientX,y:t.clientY}},{passive:true});
canvas.addEventListener('touchend',e=>{
if(!touch)return;const t=e.changedTouches[0],dx=t.clientX-touch.x,dy=t.clientY-touch.y;touch=null;
if(Math.max(Math.abs(dx),Math.abs(dy))<18)return;
setDir(Math.abs(dx)>Math.abs(dy)?(dx>0?'right':'left'):(dy>0?'down':'up'));
},{passive:true});
root.addEventListener('keydown',e=>{
const map={ArrowUp:'up',w:'up',ArrowDown:'down',s:'down',ArrowLeft:'left',a:'left',ArrowRight:'right',d:'right'};
if(map[e.key]&&root.contains(e.target)){e.preventDefault();setDir(map[e.key])}
});
snake=[{x:10,y:8},{x:9,y:8},{x:8,y:8},{x:7,y:8},{x:6,y:8}];prey=randomPrey();draw();

/* НОВОСТИ: У КАЖДОЙ НОВОСТИ СОБСТВЕННЫЙ КОТ, АВАТАРКА И ССЫЛКА.
   При выборе новости все три значения меняются вместе. */
const clanNews=[
{
clan:'storm',name:'Гроза',
items:[
{title:'Знакомьтесь, дядя',desc:'Беркут представляет своим детям дядю Огнелапа. Дети представляют Огнелапу законы детской.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/130-1788777781.png',url:'https://cwvoice.ru/viewtopic.php?id=223#p132700'},
{title:'Пу-пу... Паутина',desc:'Коты-пауки собирают важный ресурс - паутину!',cat:'https://upforme.ru/uploads/001c/55/b9/324/320955.jpg',url:'https://cwvoice.ru/viewtopic.php?id=220&p=2#p131602'},
{title:'Если Невеличка молчит...',desc:'Каждый дурак знает, что если Невеличка молчит - ее лучше не перебивать. Поэтому Ежонок тоже молчит.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/370-1790367075.png',url:'https://cwvoice.ru/viewtopic.php?id=231&p=15#p132674'}
]},
{
clan:'river',name:'Река',
items:[
{title:'Мы где?',desc:'Мирт и Лебедь заблудились, но зато решили поболтать. А Жаба молодец!.',cat:'https://upforme.ru/uploads/001c/55/b9/324/400200.png',url:'https://cwvoice.ru/viewtopic.php?id=265&p=2#p132699'},
{title:'Как достать глашатая',desc:'ВНИМАНИЕ! Рыбник проводик краш-тест Лазоревки, взорвется ли глашатай? Кто знает...',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/365-1788727545.png',url:'https://cwvoice.ru/viewtopic.php?id=262#p133332'},
{title:'Ой, мамочки...',desc:'Кряква выгуливает молодежь по границе с Ветром.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/379-1792003035.png',url:'https://cwvoice.ru/viewtopic.php?id=187&p=2#p134084'},
{title:'Все, на что падает свет...',desc:'Вьюн показывает земли Речного племени своей ученице.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/373-1790518978.png',url:'https://cwvoice.ru/viewtopic.php?id=268&p=2#p133201'}
]},
{
clan:'wind',name:'Ветер',
items:[
{title:'Да не умер он!',desc:'Да не умер Терзающий Звезды в конце туннеля!',cat:'https://i.ibb.co/5xWsksxB/19-1788726283.png',url:'https://cwvoice.ru/viewtopic.php?id=159&p=2#p133492'},
{title:'Сестры бранятся',desc:'Розочка поругалась на Цветолапа, но что-то пошло не так... Зато папа рядом.',cat:'https://upforme.ru/uploads/001c/55/b9/326/583104.png',url:'https://cwvoice.ru/viewtopic.php?id=208&p=15#p134188'},
{title:'Чей муж?',desc:'Кто мужика обронил? Ну ладно, забираем.',cat:'https://i.ibb.co/wZxLy6yv/1.png',url:'https://cwvoice.ru/viewtopic.php?id=1375#p134099'}
]},
{
clan:'shadow',name:'Тени',
items:[
{title:'Охоту видишь?',desc:'А она есть. Иначе Визг врушка-врушка.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/274-1775129989.jpg',url:'https://cwvoice.ru/viewtopic.php?id=240#p133658'},
{title:'Да прогоните его уже',desc:'Барсук пришел, барсук... пока еще не ушел. Но с такими бравыми воителями - скоро!',cat:'https://upforme.ru/uploads/001c/55/b9/9/40719.png',url:'https://cwvoice.ru/viewtopic.php?id=254&p=14#p132030'},
{title:'я еще не придумал',desc:'простите. спать хчоу.',cat:'ССЫЛКА_НА_КОТА_ТЕНЕЙ_3',url:'ССЫЛКА_НА_НОВОСТЬ_ТЕНЕЙ_3'}
]},
{
clan:'rogue',name:'Бродяги',
items:[
{title:'Ну Рохля, берегись!',desc:'Легендарная встреча Сорняка и Рохли.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/329-1780748166.png',url:'https://cwvoice.ru/viewtopic.php?id=172#p132444'},
{title:'Подглядушки...',desc:'Встречаются как-то Волдырь и Бурелом в баре и смотрят...',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/333-1782116775.jpg',url:'https://cwvoice.ru/viewtopic.php?id=166#p130680'},
{title:'Старость не радость',desc:'Или не теряй башмачки, или прикрывай тылы.',cat:'https://forumavatars.ru/img/avatars/001c/55/b9/248-1788767336.png',url:'https://cwvoice.ru/viewtopic.php?id=181#p123009'}
]}
];

const grid=root.querySelector('.wh-clan-grid');
clanNews.forEach(clan=>{
const item=clan.items[Math.floor(Math.random()*clan.items.length)];
const card=document.createElement('article');card.className='wh-clan-card wh-'+clan.clan;

/* Изображение обёрнуто ссылкой ИМЕННО выбранной новости */
const imageLink=document.createElement('a');
imageLink.className='wh-clan-link';imageLink.href=item.url;
imageLink.setAttribute('aria-label','Открыть новость: '+item.title);
const img=document.createElement('img');img.className='wh-clan-avatar';
img.src=item.cat;img.alt='Кот: '+item.title;
img.onerror=()=>{img.style.visibility='hidden'};
imageLink.appendChild(img);

const copy=document.createElement('div');copy.className='wh-clan-copy';
const title=document.createElement('a');title.className='wh-clan-name';
title.href=item.url;title.textContent=clan.name+' · '+item.title;
const desc=document.createElement('p');desc.className='wh-clan-desc';desc.textContent=item.desc;
const link=document.createElement('a');link.className='wh-read';link.href=item.url;link.textContent='Читать новость →';
copy.append(title,desc,link);card.append(imageLink,copy);grid.appendChild(card);
});
})();
</script>
</div>
[/html]

[html]
<div id="wc-rare">
  <style>
    #wc-rare {
      --ink: #eee9d9;
      --muted: #c6cec3;
      --line: rgba(190,204,169,.32);
      box-sizing: border-box;
      width: 100%;
      max-width: 900px;
      margin: 0 auto 12px;
      color: var(--ink);
      font: 14px/1.5 Georgia, "Times New Roman", serif;
    }

    #wc-rare * { box-sizing: border-box; }

    #wc-rare .wc-panel {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 4px;
      background:
        radial-gradient(circle at 12px 12px, rgba(220,225,205,.13) 1px, transparent 1.8px),
        radial-gradient(circle at 32px 28px, rgba(220,225,205,.1) 1px, transparent 1.8px),
        linear-gradient(135deg, #172b39, #233d48);
      background-size: 42px 42px, 48px 48px, auto;
      box-shadow: 0 2px 7px #0002;
    }

    #wc-rare .wc-toggle {
      display: flex;
      width: 100%;
      min-height: 42px;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      border: 0;
      border-bottom: 1px solid transparent;
      background: transparent;
      color: #e6dfc5;
      text-align: left;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font: inherit;
      cursor: pointer;
    }

    #wc-rare .wc-toggle:hover {
      background: #ffffff0d;
    }

    #wc-rare .wc-toggle[aria-expanded="true"] {
      border-bottom-color: var(--line);
    }

    #wc-rare .wc-arrow {
      flex-shrink: 0;
      transition: transform .2s;
    }

    #wc-rare .wc-toggle[aria-expanded="true"] .wc-arrow {
      transform: rotate(180deg);
    }

    #wc-rare .wc-content {
      padding: 16px;
    }

    #wc-rare [hidden] {
      display: none !important;
    }

    #wc-rare .wc-title {
      margin: 0 0 8px;
      color: #e6dfc5;
      font-size: 19px;
      font-weight: normal;
      text-align: center;
      letter-spacing: 1px;
    }

    #wc-rare .wc-subtitle {
      margin: 0 0 18px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }

    #wc-rare .wc-divider {
      height: 1px;
      margin: 14px 0;
      border: 0;
      background: var(--line);
    }

    #wc-rare .wc-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
      margin: 14px 0;
    }

    #wc-rare .wc-btn {
      min-height: 36px;
      padding: 8px 13px;
      border: 1px solid #819078;
      border-radius: 4px;
      background: #283e39;
      color: #eee9d9;
      font: inherit;
      cursor: pointer;
      transition: background .2s;
    }

    #wc-rare .wc-btn:hover {
      background: #526849;
    }

    #wc-rare .wc-btn:focus-visible,
    #wc-rare .wc-toggle:focus-visible {
      outline: 2px solid #e0d5a8;
      outline-offset: -2px;
    }

    #wc-rare .wc-result-box {
      min-height: 105px;
      margin-top: 14px;
      padding: 18px 12px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: #0510196b;
      text-align: center;
    }

    #wc-rare .wc-result {
      color: #e8dfbd;
      font-size: 25px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    #wc-rare .wc-desc {
      margin-top: 9px;
      color: var(--muted);
      font-size: 13px;
      font-style: italic;
    }

    #wc-rare .wc-hint {
      margin: 12px 0 0;
      color: #aeb9ac;
      font-size: 11px;
      text-align: center;
    }

    @media (max-width: 480px) {
      #wc-rare .wc-content { padding: 12px; }
      #wc-rare .wc-title { font-size: 17px; }
      #wc-rare .wc-btn { flex: 1 1 40%; }
      #wc-rare .wc-result { font-size: 22px; }
    }
  </style>

  <section class="wc-panel">
    <button
      class="wc-toggle"
      type="button"
      aria-expanded="false"
      aria-controls="wc-rare-content">
      <span>✦ Генератор имён ✦</span>
      <span class="wc-arrow">▼</span>
    </button>

    <div class="wc-content" id="wc-rare-content" hidden>
      <p class="wc-subtitle">
        Получи имя, о котором шепчут в легендах!
      </p>

      <hr class="wc-divider">

      <div class="wc-buttons">
        <button class="wc-btn" data-type="warrior" type="button">Воитель</button>
        <button class="wc-btn" data-type="healer" type="button">Целитель</button>
        <button class="wc-btn" data-type="leader" type="button">Предводитель</button>
        <button class="wc-btn" data-type="apprentice" type="button">Оруженосец</button>
        <button class="wc-btn" data-type="elder" type="button">Старейшина</button>
      </div>

      <div class="wc-result-box" aria-live="polite">
        <div class="wc-result">Имя ещё не выбрано...</div>
        <div class="wc-desc">Выбери звание, чтобы узнать своё имя.</div>
      </div>

      <p class="wc-hint">
        70% обычных приставок · 30% редких
      </p>
    </div>
  </section>

  <script>
  (() => {
    const root = document.getElementById('wc-rare');
    if (!root || root.dataset.ready === '1') return;
    root.dataset.ready = '1';

    const toggle = root.querySelector('.wc-toggle');
    const content = root.querySelector('.wc-content');

    toggle.addEventListener('click', () => {
      const isOpen = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!isOpen));
      content.hidden = isOpen;
    });

    const prefixesCommon = [
      "Барсуко", "Лисье", "Мыше", "Белко", "Выдро", "Змее",
      "Мухо", "Крепко", "Львино", "Светло", "Серо", "Перье",
      "Сово", "Еже", "Лягушко", "Кролико", "Олене", "Овце",
      "Быко", "Цвето", "Сухо", "Темно", "Буро", "Красно"
    ];

    const prefixesRare = [
      "Тумано", "Рассветно", "Эхо", "Призрачно", "Беззвёздно",
      "Нежно", "Храбро", "Мятно", "Сонно", "Тихо", "Древне",
      "Вечно", "Забыто", "Отголоско", "Громко", "Мило",
      "Буре", "Хмельно", "Мутно"
    ];

    const suffixes = {
      warrior: [
        "коготь", "клык", "шёрста", "хвост", "бег", "прыг",
        "рык", "полос", "света", "спинка", "удар", "вихрь",
        "гром", "пламя", "лёд", "камень", "шипа", "грива",
        "тьма", "завр"
      ],
      healer: [
        "лист", "корень", "роса", "шёпот", "тень", "перо",
        "хвоя", "лоза", "мох", "цвета", "бутон", "пыльца",
        "сок", "гриб", "метель", "туман", "лужица"
      ],
      leader: [
        "звёзд", "звёздка", "комета", "метеор", "звезда"
      ],
      apprentice: [
        "лапка", "коготок", "ушко", "носик", "хвостик", "прыг",
        "шёрстка", "глазик", "зубка", "спинка"
      ],
      elder: [
        "шерст", "ус", "хвост", "взгляд", "память", "тишь",
        "покой", "мудрость", "след", "отзвук", "быль", "завр"
      ]
    };

    const descriptions = {
      warrior:
        "Имя этого воина звучит как раскат грома — его боятся враги и уважают соплеменники.",
      healer:
        "Целитель, чьё имя шепчут травы: он слышит лес даже в полной тишине.",
      leader:
        "Предводитель, чьё имя становится клятвой для всего племени.",
      apprentice:
        "Юный оруженосец, полный энергии и вопросов — будущее племени начинается с него.",
      elder:
        "Старейшина, чьё имя хранит память обо всех прошедших сезонах."
    };

    function randomItem(array) {
      return array[Math.floor(Math.random() * array.length)];
    }

    function generateName(type) {
      const pool = Math.random() < 0.3
        ? prefixesRare
        : prefixesCommon;

      return randomItem(pool) + randomItem(suffixes[type]);
    }

    const result = root.querySelector('.wc-result');
    const desc = root.querySelector('.wc-desc');

    root.querySelectorAll('[data-type]').forEach(button => {
      button.addEventListener('click', () => {
        const type = button.dataset.type;
        result.textContent = generateName(type);
        desc.textContent = descriptions[type];
      });
    });
  })();
  </script>
</div>
[/html]

Отредактировано Ежонок (Сегодня 11:11:21)