[hideprofile]

[html]
<div id="warriors-hub">
<style>
/* Не позволяем слоям игр перекрывать элементы форума */
#warriors-hub {
  position: relative;
  z-index: 0;
  isolation: isolate;
  max-width: 100%;
}

#warriors-hub .wh-play-area,
#warriors-hub .wh-game,
#warriors-hub .wh-game-screen {
  position: relative;
  z-index: auto;
}

#warriors-hub .wh-start-overlay {
  z-index: 2;
}
#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}

#warriors-hub .wh-game-switcher{margin:0 0 14px}
#warriors-hub .wh-game-choice[aria-pressed=true]{background:#71835a;color:#fff4d5;border-color:#d1d9ad}
#warriors-hub .wh-game-screen{padding:12px 0;animation:wh-screen-enter .28s ease-out both}
#warriors-hub .wh-game{background:radial-gradient(ellipse at 50% 0%,#49604755,transparent 48%),radial-gradient(circle at 15% 95%,#7c633333,transparent 30%),linear-gradient(145deg,#172b39,#1c392f 62%,#233d48)}
#warriors-hub .wh-game-title:before{content:"✦  ";color:#d5bd72}
#warriors-hub .wh-game-title:after{content:"  ✦";color:#d5bd72}
#warriors-hub .wh-game-choice{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
#warriors-hub .wh-game-choice:hover{transform:translateY(-2px)}
#warriors-hub .wh-game-choice[aria-pressed=true]{box-shadow:0 0 0 1px #d5bd72,0 0 14px #b8ca7650}
#warriors-hub .wh-game-screen>.wh-start-title{color:#ead7a1;text-shadow:0 2px 8px #0008}
#warriors-hub .wh-game-screen>.wh-start-text{max-width:520px;margin-left:auto;margin-right:auto}
@keyframes wh-screen-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
#warriors-hub .wh-game-screen[hidden]{display:none!important}
#warriors-hub .wh-game-screen>.wh-start-title{text-align:center;margin:0 0 5px}
#warriors-hub .wh-game-screen>.wh-start-text{text-align:center;margin:0 0 12px}
#warriors-hub .wh-ttt-board{display:grid;grid-template-columns:repeat(3,minmax(0,100px));gap:7px;justify-content:center;margin:14px auto;max-width:320px}
#warriors-hub .wh-ttt-cell{aspect-ratio:1;border:1px solid #9aa77c;border-radius:5px;background:radial-gradient(circle at 30% 25%,#4a6548,#203b32 72%);color:#f0e6c9;font-size:34px;cursor:pointer;box-shadow:inset 0 0 0 2px #0c1b1680;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
#warriors-hub .wh-ttt-cell:not(:disabled):hover{transform:scale(1.04);background:#536849}
#warriors-hub .wh-ttt-cell:disabled:not(:empty){text-shadow:0 0 12px #e6d59c66}
#warriors-hub .wh-ttt-cell:disabled{cursor:default;opacity:.9}
#warriors-hub .wh-ttt-status{color:#e0d5a8}
#warriors-hub .wh-2048-top{display:flex;justify-content:center;align-items:center;gap:14px;margin:12px 0}
#warriors-hub .wh-2048-top>span{padding:7px 12px;border:1px solid #d5bd72;border-radius:4px;background:linear-gradient(145deg,#14261f,#263d2d);color:#fff2bd;font-weight:bold;font-size:15px;text-shadow:0 1px 3px #000b;box-shadow:0 2px 8px #0004}
#warriors-hub .wh-2048-score{color:#fff7cc;font-size:19px;text-shadow:0 0 8px #f5d86c66}
#warriors-hub .wh-2048-top .wh-btn{border-color:#e0cf8b;background:linear-gradient(145deg,#596e43,#354b36);color:#fff7d7;font-weight:bold;text-shadow:0 1px 2px #0008}
#warriors-hub .wh-2048-top .wh-btn:hover{background:linear-gradient(145deg,#778c55,#4b6844)}
#warriors-hub .wh-2048-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:min(100%,360px);aspect-ratio:1;margin:0 auto;padding:8px;border:1px solid #71816a;border-radius:7px;background:#172b25;touch-action:none;outline-offset:3px}
#warriors-hub .wh-2048-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;border:1px solid #b4c39f30;border-radius:5px;background:linear-gradient(145deg,#43584a,#293e34);color:#f4edda;font:bold clamp(17px,4vw,27px) Georgia,serif;box-shadow:inset 0 0 0 1px #07150e70;transition:filter .15s ease}
#warriors-hub .wh-2048-cell{font-size:clamp(20px,4.8vw,29px);font-weight:700;letter-spacing:.2px;text-shadow:0 1px 2px #0005}
#warriors-hub .wh-2048-cell small{display:block;margin-top:3px;font:bold 10px/1.15 Georgia,serif;letter-spacing:.45px;text-transform:uppercase;opacity:1;text-shadow:0 1px 1px #0002}
#warriors-hub .wh-2048-cell[data-value="2"] small,#warriors-hub .wh-2048-cell[data-value="4"] small,#warriors-hub .wh-2048-cell[data-value="8"] small,#warriors-hub .wh-2048-cell[data-value="16"] small,#warriors-hub .wh-2048-cell[data-value="128"] small,#warriors-hub .wh-2048-cell[data-value="256"] small,#warriors-hub .wh-2048-cell[data-value="1024"] small,#warriors-hub .wh-2048-cell[data-value="2048"] small{color:#20291f;text-shadow:none}
#warriors-hub .wh-2048-cell[data-value="32"] small,#warriors-hub .wh-2048-cell[data-value="64"] small,#warriors-hub .wh-2048-cell[data-value="512"] small{color:#fff;text-shadow:0 1px 2px #0008}
#warriors-hub .wh-game-screen[data-screen="2048"]>.wh-start-text{color:#f0f3e8;font-size:14px;text-shadow:0 1px 3px #0008}
#warriors-hub .wh-game-screen[data-screen="2048"] .wh-help{color:#e2eadb;font-size:12px;text-shadow:0 1px 2px #0008}
#warriors-hub .wh-2048-cell[data-value="2"]{background:linear-gradient(145deg,#e6e4c9,#b7c5a0);color:#24352a;border-color:#e5edc5}
#warriors-hub .wh-2048-cell[data-value="4"]{background:linear-gradient(145deg,#a9d3a2,#5e9a70);color:#142d20;border-color:#b7e7b3}
#warriors-hub .wh-2048-cell[data-value="8"]{background:linear-gradient(145deg,#f0cb73,#bd873c);color:#382814;border-color:#f7dc9b}
#warriors-hub .wh-2048-cell[data-value="16"]{background:linear-gradient(145deg,#e7a16d,#b75d3d);color:#321b14;border-color:#f4b58a}
#warriors-hub .wh-2048-cell[data-value="32"]{background:linear-gradient(145deg,#d9858d,#a94460);color:#fff4e8;border-color:#f3a9b3}
#warriors-hub .wh-2048-cell[data-value="64"]{background:linear-gradient(145deg,#c18be0,#8050ae);color:#fff3ff;border-color:#dcb5f2}
#warriors-hub .wh-2048-cell[data-value="128"]{background:linear-gradient(145deg,#81d4d5,#328b9b);color:#102b35;border-color:#a6f0ed}
#warriors-hub .wh-2048-cell[data-value="256"]{background:linear-gradient(145deg,#8db6f0,#4d70bd);color:#101e3b;border-color:#b2d2ff}
#warriors-hub .wh-2048-cell[data-value="512"]{background:linear-gradient(145deg,#e6a9d6,#b85b9e);color:#35142e;border-color:#f6c6e9}
#warriors-hub .wh-2048-cell[data-value="1024"]{background:linear-gradient(145deg,#f0d97c,#d1a72e);color:#382b0b;border-color:#fff0a5}
#warriors-hub .wh-2048-cell[data-value="2048"]{background:linear-gradient(145deg,#fff5b5,#e8a72d);color:#38220a;border-color:#fff9d8;box-shadow:0 0 14px #f5d86c99,inset 0 0 0 2px #fff4c5}
#warriors-hub .wh-2048-cell[data-value="0"]{border-color:#a9b78d12;box-shadow:none}
#warriors-hub .wh-2048-cell:not([data-value="0"]){background-image:radial-gradient(circle at 15% 15%,#ffffff22,transparent 42%)}

#warriors-hub .wh-kittens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#warriors-hub .wh-kitten{display:flex;gap:12px;align-items:center;min-width:0;padding:12px;border:1px solid var(--line);border-radius:5px;background:#07151c99}
#warriors-hub .wh-kitten-face{flex:0 0 60px;width:60px;height:60px;display:grid;place-items:center;border-radius:50%;background:#34463e;font-size:38px}
#warriors-hub .wh-kitten strong{color:#e8d9a8}
#warriors-hub .wh-kitten p{margin:4px 0 0;color:#e0e4d8;font-size:12px}
#warriors-hub .wh-kitten-kind .wh-kitten-face{background:#53694a}

#warriors-hub .wh-play-area{display:grid;grid-template-columns:minmax(95px,145px) minmax(0,1fr) minmax(95px,145px);gap:10px;align-items:stretch;margin-bottom:12px}
#warriors-hub .wh-play-area>.wh-game{min-width:0;margin:0}
#warriors-hub .wh-kitten-side{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(160deg,#0a161fba,#34463e99);text-align:center;overflow-wrap:anywhere}
#warriors-hub .wh-kitten-side strong{color:#e8d9a8;font-size:14px}
#warriors-hub .wh-kitten-side p{margin:0;color:#e0e4d8;font-size:12px;line-height:1.45}
#warriors-hub .wh-kitten-side .wh-kitten-face{display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:0;flex:0 0 auto;border:0;border-radius:0;overflow:visible;background:transparent;font-size:0;animation:none}
#warriors-hub .wh-kitten-image{display:block;width:auto;height:auto;max-width:100%;max-height:230px;object-fit:contain;object-position:center;filter:drop-shadow(0 4px 5px #0005);animation:wh-kitten-bob 2.4s ease-in-out infinite}
#warriors-hub .wh-kitten-image-fallback{display:none;font-size:34px}
#warriors-hub .wh-kitten-image.is-missing{display:none}
#warriors-hub .wh-kitten-image.is-missing+.wh-kitten-image-fallback{display:block}
#warriors-hub .wh-kitten-right .wh-kitten-image{animation-delay:-1.2s}
@keyframes wh-kitten-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wh-board-bump{0%{transform:scale(.995)}50%{transform:scale(1.006)}100%{transform:scale(1)}}
@keyframes wh-tile-pop{0%{transform:scale(.72) rotate(-2deg);opacity:.45}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes wh-speaking{0%,100%{box-shadow:0 0 0 1px #d5bd72,0 0 8px #d5bd7250}50%{box-shadow:0 0 0 3px #d5bd72,0 0 22px #d5bd7290}}
#warriors-hub .wh-kitten-side.is-speaking{border-color:#d5bd72;animation:wh-speaking .8s ease-in-out 3;background:linear-gradient(160deg,#263b29,#5a5734)}
#warriors-hub .wh-kitten-side.is-speaking p{color:#fff1c4;font-weight:bold}
#warriors-hub .wh-voice-toggle[aria-pressed="false"]{opacity:.65}
#warriors-hub .wh-voice-toggle{margin-left:auto}
@keyframes wh-cell-mark{0%{transform:scale(.65) rotate(-8deg);opacity:.3}100%{transform:scale(1) rotate(0);opacity:1}}
#warriors-hub .wh-ttt-cell{animation:wh-cell-mark .2s ease-out}
#warriors-hub .wh-2048-cell{animation:wh-tile-pop .18s ease-out}
#warriors-hub .wh-2048-cell[data-value="0"]{animation:none}
@media(prefers-reduced-motion:reduce){#warriors-hub .wh-game-screen,#warriors-hub .wh-ttt-cell,#warriors-hub .wh-2048-cell,#warriors-hub .wh-kitten-side,#warriors-hub .wh-kitten-side .wh-kitten-face{animation:none!important;transition:none!important}}
@media(max-width:760px){#warriors-hub .wh-play-area{grid-template-columns:1fr 1fr;gap:8px}#warriors-hub .wh-play-area>.wh-game{grid-column:1/-1;grid-row:1}#warriors-hub .wh-kitten-side{min-height:120px}#warriors-hub .wh-kitten-side .wh-kitten-image{max-height:140px;max-width:100%}}

@media(max-width:600px){#warriors-hub .wh-kittens{grid-template-columns:1fr}#warriors-hub .wh-ttt-board{grid-template-columns:repeat(3,minmax(0,86px))}#warriors-hub .wh-2048-cell{font-size:clamp(18px,5.2vw,25px)}#warriors-hub .wh-2048-cell small{font-size:9px}}

@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}
}

/* ЕДИНАЯ ЛЕСНАЯ ТЕМА И ЧИТАЕМЫЕ ЧИСЛА 2048 */
#warriors-hub{
  --ink:#f4f0df;--muted:#d0d9c8;--line:rgba(190,204,169,.38);
  color:var(--ink);
}
#warriors-hub .wh-panel,
#warriors-hub .wh-game,
#wc-rare .wc-panel{
  border-color:#718b70;
  border-radius:8px;
  background:
    radial-gradient(circle at 12px 12px,rgba(220,225,205,.10) 1px,transparent 1.8px),
    linear-gradient(145deg,#172b39 0%,#1c392f 62%,#233d48 100%);
  background-size:42px 42px,auto;
  box-shadow:0 5px 16px #06120e55,inset 0 1px #ffffff08;
}
#warriors-hub .wh-toggle,
#warriors-hub .wh-game-title,
#wc-rare .wc-toggle,
#wc-rare .wc-title{color:#f0dfaa}
#warriors-hub .wh-toggle{border-bottom-color:var(--line)}
#warriors-hub .wh-btn,
#warriors-hub .wh-start-button,
#warriors-hub .wh-controls select,
#warriors-hub .wh-pad button,
#wc-rare .wc-btn{
  border:1px solid #91a783;
  border-radius:6px;
  background:linear-gradient(145deg,#354f3e,#263d35);
  color:#fff5d8;
  font-weight:700;
  text-shadow:none;
  box-shadow:inset 0 1px #ffffff12;
}
#warriors-hub .wh-btn:hover,
#warriors-hub .wh-start-button:hover,
#warriors-hub .wh-pad button:hover,
#wc-rare .wc-btn:hover{
  background:linear-gradient(145deg,#62784d,#405c40);
  border-color:#d5bd72;
}
#warriors-hub .wh-game-choice[aria-pressed=true]{
  background:linear-gradient(145deg,#71875a,#4a6344);
  border-color:#e0d39a;color:#fffbe9;
}
#warriors-hub .wh-board-stage,
#warriors-hub .wh-2048-board{border-color:#91a783;border-radius:8px}
#warriors-hub .wh-2048-board{
  width:min(100%,390px);
  gap:7px;
  padding:8px;
  background:#10231c;
  box-shadow:inset 0 0 0 1px #ffffff0a,0 5px 15px #0004;
}
#warriors-hub .wh-2048-cell{
  min-width:0;min-height:0;
  border:1px solid #6f8c70;
  border-radius:6px;
  background:linear-gradient(145deg,#2d493b,#20382e);
  color:#f8f5e9;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,5.3vw,34px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.8px;
  line-height:1;
  text-align:center;
  text-shadow:0 2px 0 #07150e66;
  box-shadow:inset 0 1px #ffffff12,0 2px 4px #0003;
  overflow:hidden;
}
#warriors-hub .wh-2048-cell span{
  display:block;max-width:100%;
  font:800 clamp(22px,5.3vw,34px)/1 Arial,Helvetica,sans-serif;
  letter-spacing:-1px;
  white-space:nowrap;
  color:inherit;
  text-shadow:0 1px 0 #0002;
}
#warriors-hub .wh-2048-cell small{
  margin-top:5px;
  font:700 clamp(8px,1.8vw,10px)/1.1 Arial,Helvetica,sans-serif;
  letter-spacing:.55px;
  color:inherit;
  opacity:.92;
  text-shadow:none;
}
#warriors-hub .wh-2048-cell[data-value="0"]{
  background:#1a3027;border-color:#91a78318;box-shadow:none;
}
#warriors-hub .wh-2048-cell[data-value="2"]{background:linear-gradient(145deg,#e7e8cc,#c8d5ac);color:#17291e;border-color:#f2f3dc}
#warriors-hub .wh-2048-cell[data-value="4"]{background:linear-gradient(145deg,#c4d9a4,#9dbb7c);color:#17291e;border-color:#d9e9bd}
#warriors-hub .wh-2048-cell[data-value="8"]{background:linear-gradient(145deg,#a7c98b,#78a568);color:#12251a;border-color:#c4dfa7}
#warriors-hub .wh-2048-cell[data-value="16"]{background:linear-gradient(145deg,#80ad79,#55875d);color:#fffdf0;border-color:#a7c99a}
#warriors-hub .wh-2048-cell[data-value="32"]{background:linear-gradient(145deg,#4d8062,#315f4b);color:#fffdf0;border-color:#8eb99a}
#warriors-hub .wh-2048-cell[data-value="64"]{background:linear-gradient(145deg,#326a5b,#204b43);color:#fffdf0;border-color:#78b4a2}
#warriors-hub .wh-2048-cell[data-value="128"]{background:linear-gradient(145deg,#315d70,#244657);color:#fffdf0;border-color:#85b9c8}
#warriors-hub .wh-2048-cell[data-value="256"]{background:linear-gradient(145deg,#3f5d78,#293f5a);color:#fffdf0;border-color:#9cb6d5}
#warriors-hub .wh-2048-cell[data-value="512"]{background:linear-gradient(145deg,#68724f,#454f35);color:#fffdf0;border-color:#c2cd8c}
#warriors-hub .wh-2048-cell[data-value="1024"]{background:linear-gradient(145deg,#c3a951,#8f742c);color:#172313;border-color:#f0d987}
#warriors-hub .wh-2048-cell[data-value="2048"]{background:linear-gradient(145deg,#fff0a8,#d7b54c);color:#172313;border-color:#fff6cf;box-shadow:0 0 15px #e9cf6a66,inset 0 0 0 2px #fff8d8}
#warriors-hub .wh-2048-cell[data-value="32"] span,
#warriors-hub .wh-2048-cell[data-value="64"] span,
#warriors-hub .wh-2048-cell[data-value="128"] span,
#warriors-hub .wh-2048-cell[data-value="256"] span,
#warriors-hub .wh-2048-cell[data-value="512"] span{color:#fffdf0;text-shadow:0 2px 2px #0008}
#warriors-hub .wh-2048-cell[data-value="2"] small,
#warriors-hub .wh-2048-cell[data-value="4"] small,
#warriors-hub .wh-2048-cell[data-value="8"] small,
#warriors-hub .wh-2048-cell[data-value="1024"] small,
#warriors-hub .wh-2048-cell[data-value="2048"] small{color:#172313}
#warriors-hub .wh-2048-cell[data-value="32"] small,
#warriors-hub .wh-2048-cell[data-value="64"] small,
#warriors-hub .wh-2048-cell[data-value="128"] small,
#warriors-hub .wh-2048-cell[data-value="256"] small,
#warriors-hub .wh-2048-cell[data-value="512"] small{color:#fffdf0}
#warriors-hub .wh-2048-top>span{
  border-color:#91a783;border-radius:6px;
  background:linear-gradient(145deg,#20382e,#14271f);
  color:#fff0b8;text-shadow:none;
}
#warriors-hub .wh-2048-score{color:#fff5d8;font:800 20px/1.2 Arial,Helvetica,sans-serif;text-shadow:none}
#warriors-hub .wh-2048-top .wh-btn{border-color:#c9c98b;background:linear-gradient(145deg,#526d49,#304a37);color:#fffbe9;text-shadow:none}
#warriors-hub .wh-ttt-cell{border-color:#91a783;border-radius:7px;background:linear-gradient(145deg,#354f3e,#20382e);color:#fff5d8}
#warriors-hub .wh-kitten-side,
#warriors-hub .wh-kitten,
#warriors-hub .wh-cat-card,
#warriors-hub .wh-bulletins,
#warriors-hub .wh-clan-card{border-radius:7px}
#warriors-hub .wh-start-title{color:#f0dfaa}
#warriors-hub .wh-start-text,
#warriors-hub .wh-help{color:#e3eadb}
#wc-rare .wc-result-box{border-radius:7px;background:linear-gradient(145deg,#0b1b15eF,#142c21eF);border-color:#91a783}
#wc-rare .wc-result{color:#fff0b8;text-shadow:none}
#wc-rare .wc-heading{color:#f0dfaa}
@media(max-width:600px){
  #warriors-hub .wh-2048-board{gap:5px;padding:6px}
  #warriors-hub .wh-2048-cell{font-size:clamp(19px,6vw,27px)}
  #warriors-hub .wh-2048-cell span{font-size:clamp(19px,6vw,27px);letter-spacing:-.8px}
  #warriors-hub .wh-2048-cell small{font-size:8px;letter-spacing:.2px;margin-top:4px}
}
@media(max-width:360px){
  #warriors-hub .wh-2048-board{gap:4px;padding:5px}
  #warriors-hub .wh-2048-cell span{font-size:clamp(17px,5.7vw,22px)}
  #warriors-hub .wh-2048-cell small{font-size:7px}
}
</style>

<!-- ИГРЫ И КОТЯТА ПО БОКАМ. Картинки заменяются файлами images/ugolok.png и images/pushinka.png; можно указать свой путь/URL в src у соответствующего img. -->
<div class="wh-play-area">
  <aside class="wh-kitten-side wh-kitten-left" aria-label="Котёнок Тварёныш">
    <div class="wh-kitten-face"><img class="wh-kitten-image" src="https://free-png.ru/wp-content/uploads/2021/05/free-png.ru-383.png" alt="Тварёныш" onerror="this.classList.add('is-missing')"><span class="wh-kitten-image-fallback" aria-hidden="true">🐈‍⬛</span></div>
    <strong>Клещик</strong>
    <p class="wh-kitten-line" data-kitten="grumpy" aria-live="polite">Ну давай, давай, позорься.</p>
  </aside>
  <section class="wh-panel wh-game">
  <h2 class="wh-game-title">Испытания лесных племён</h2>
  <div class="wh-controls wh-game-switcher" role="group" aria-label="Выбрать игру">
    <button class="wh-btn wh-game-choice" type="button" data-game="snake" aria-pressed="true">Змейка</button>
    <button class="wh-btn wh-game-choice" type="button" data-game="match" aria-pressed="false">Генератор имён</button>
    <button class="wh-btn wh-game-choice" type="button" data-game="2048" aria-pressed="false">2048</button>
    <button class="wh-btn wh-voice-toggle" type="button" aria-pressed="true" aria-label="Включить или выключить озвучку">🔊 Озвучка: вкл.</button>
  </div>

  <section class="wh-game-screen" data-screen="snake">
    <h3 class="wh-start-title">Охотничья тропа</h3>
    <p class="wh-start-text">Стань ловким охотником: собирай мышей, рыб и птиц для своего племени.</p>
    <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="220">Ученик</option><option value="160" selected>Воитель</option><option value="110">Глашатай</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>
  </section>

  <section class="wh-game-screen" data-screen="match" hidden>
    <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-heading{margin:0 0 8px;color:#f3e5b4;font-size:20px;font-weight:normal;text-align:center;letter-spacing:1.4px;text-shadow:0 2px 8px #0008}
        #wc-rare .wc-panel{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(145deg,#172b39,#1c392f 62%,#233d48);background-size:42px 42px,48px 48px,auto;border-color:#9baa7c}
        #wc-rare .wc-subtitle{color:#e0e8d6}
        #wc-rare .wc-btn{border-color:#a9b78d;background:linear-gradient(145deg,#354f3e,#263d35);color:#fff5d8;font-weight:bold;text-shadow:0 1px 2px #0008}
        #wc-rare .wc-btn:hover{background:linear-gradient(145deg,#62784d,#405c40);box-shadow:0 0 0 1px #d5bd72}
        #wc-rare .wc-result-box{background:linear-gradient(145deg,#07151de8,#122820e8);border-color:#a9b78d;box-shadow:inset 0 0 18px #0005}
        #wc-rare .wc-result{color:#fff0b8;font-weight:bold;text-shadow:0 2px 7px #000b}
        #wc-rare .wc-desc{color:#e2e9d7}
        #wc-rare .wc-hint{color:#d2dfc8;font-size:12px}
        #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">
        <div class="wc-content" id="wc-rare-content">
          <h3 class="wc-heading">Генератор имён</h3>
          <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>
    </div>
  </section>
  <section class="wh-game-screen" data-screen="2048" hidden>
    <h3 class="wh-start-title">Путь к Звёздному племени</h3><p class="wh-start-text">Соединяй одинаковые знаки силы и пройди испытание до 2048.</p>
    <div class="wh-2048-top"><span>Счёт: <b class="wh-2048-score">0</b></span><button class="wh-btn wh-2048-restart" type="button">Новая игра</button></div>
    <div class="wh-2048-board" tabindex="0" aria-label="Поле игры 2048"></div>
    <p class="wh-help">Управление: стрелки или WASD. На телефоне — свайпы. Каждое слияние укрепляет твою связь со Звёздным племенем.</p>
  </section>
</section>
  <aside class="wh-kitten-side wh-kitten-right" aria-label="Котёнок Хорошик">
    <div class="wh-kitten-face"><img class="wh-kitten-image" src="https://free-png.ru/wp-content/uploads/2021/05/free-png.ru-374.png" alt="Хорошик" onerror="this.classList.add('is-missing')"><span class="wh-kitten-image-fallback" aria-hidden="true">🐈</span></div>
    <strong>Кузнечик</strong>
    <p class="wh-kitten-line" data-kitten="kind" aria-live="polite">Не обращай на него внимания. Я в тебя верю!</p>
  </aside>
</div>

<!-- ЗВЁЗДНОЕ ПЛЕМЯ -->
<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('wc-rare');
if(!root||root.dataset.ready==='1')return;
root.dataset.ready='1';
const prefixesCommon=["Барсуко","Лисье","Мыше","Белко","Выдро","Змее","Мухо","Крепко","Львино","Светло","Серо","Перье","Сово","Еже","Лягушко","Кролико","Олене","Овце","Быко","Цвето","Сухо","Темно","Буро","Красно"];
const prefixesRare=["Тумано","Рассветно","Эхо","Призрачно","Беззвёздно","Нежно","Храбро","Мятно","Сонно","Тихо","Древне","Вечно","Забыто","Отголоско","Громко","Мило","Буре","Хмельно","Мутно"];
const suffixes={
  warrior:["коготь","клык","шёрста","хвост","бег","прыг","рык","полос","света","спинка","удар","вихрь","гром","пламя","лёд","камень","шипа","грива","тьма","завр"],
  healer:["лист","корень","роса","шёпот","тень","перо","хвоя","лоза","мох","цвета","бутон","пыльца","сок","гриб","метель","туман","лужица"],
  leader:["звёзд","звёздка","комета","метеор","звезда"],
  apprentice:["лапка","коготок","ушко","носик","хвостик","прыг","шёрстка","глазик","зубка","спинка"],
  elder:["шерст","ус","хвост","взгляд","память","тишь","покой","мудрость","след","отзвук","быль","завр"]
};
const descriptions={
  warrior:"Имя этого воина звучит как раскат грома — его боятся враги и уважают соплеменники.",
  healer:"Целитель, чьё имя шепчут травы: он слышит лес даже в полной тишине.",
  leader:"Предводитель, чьё имя становится клятвой для всего племени.",
  apprentice:"Юный оруженосец, полный энергии и вопросов — будущее племени начинается с него.",
  elder:"Старейшина, чьё имя хранит память обо всех прошедших сезонах."
};
const randomItem=array=>array[Math.floor(Math.random()*array.length)];
const result=root.querySelector('.wc-result'),desc=root.querySelector('.wc-desc');
root.querySelectorAll('[data-type]').forEach(button=>button.addEventListener('click',()=>{
  const type=button.dataset.type,pool=Math.random()<.3?prefixesRare:prefixesCommon;
  result.textContent=randomItem(pool)+randomItem(suffixes[type]);desc.textContent=descriptions[type];
}));
})();
</script>

<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 screens=[...root.querySelectorAll('.wh-game-screen')];
const choices=[...root.querySelectorAll('.wh-game-choice')];
const kittenLines={
grumpy:root.querySelector('[data-kitten="grumpy"]'),
kind:root.querySelector('[data-kitten="kind"]')
};
const comments={
grumpy:{
  win:['Повезло-повезло.',
'Ого, я такого не ожидал...',
'Ну, я бы сделал лучше.',
'Пойдет.',
'Ты жульничал, я видел!',
'За тебя Кузнечик играл?',
'Админы, забаньте этого жулика.'],
  lose:['Ну ты и гений навигации. Прям как Речной патруль.',
'Тебя бы даже мышь обогнала. Пешком.',
'Патруль окончен. Твои навыки так и не найдены.',
'Я видел пень с реакцией получше.',
'В следующий раз поручим добычу табуретке.',
'Поздравляю: ты проиграл собственному хвосту.',
'Даже рыба бы так не врезалась.',
'Лапы есть, а координация где-то потерялась.',
'План был гениален. Жаль, продержался полсекунды.',
'Это был не патруль, а экскурсия в ограду.',
'Звёздное племя просило передать: ну камон.',
'Удача отвернулась. Навыки тоже.',
'Ты управлял змейкой или чихал на клавиатуру?',
'Я бы помог, но мне слишком смешно.',
'Кажется, мышь только что поставила тебе двойку.',
'Тактика впечатляет. Особенно её отсутствие.',
'С таким патрулём даже кусты чувствуют себя в безопасности.',
'Не переживай: хуже уже не будет. Наверное.']
},
kind:{
  win:['Я знал, что ты сможешь! Даже Терзающий Звезды гордится тобой.',
'Это было замечательно! Ты молодец!',
'Победа! Отправляю тебе виртуальные обнимашки.',
'Я всегда в тебя верил.',
'Видишь? Не слушай Клещика.'],
  lose:['Ничего страшного — каждая попытка учит новому.',
'Не расстраивайся, у тебя обязательно получится!',
'Ты здорово постарался. Давай попробуем ещё раз!']
}
};
function randomItem(items){return items[Math.floor(Math.random()*items.length)]}
/* Важно: котята не говорят при старте, ходе, победе или смене игры — только после проигрыша. */
function commentBoth(kind){ /* Обычные ходы не перебивают итоговые реплики котят. */ }
let voiceEnabled=true;
const voiceToggle=root.querySelector('.wh-voice-toggle');
const kittenSides={grumpy:root.querySelector('.wh-kitten-left'),kind:root.querySelector('.wh-kitten-right')};
const kittenDefaults={grumpy:'Я прокомментирую партию, когда она закончится.',kind:'Я буду болеть за тебя! 💚'};
voiceToggle.addEventListener('click',()=>{
voiceEnabled=!voiceEnabled;
voiceToggle.setAttribute('aria-pressed',String(voiceEnabled));
voiceToggle.textContent=voiceEnabled?'🔊 Озвучка: вкл.':'🔇 Озвучка: выкл.';
if(!voiceEnabled&&'speechSynthesis' in window)window.speechSynthesis.cancel();
});
function commentAfterResult(result){
const who=Math.random()<.5?'grumpy':'kind';
const phrase=randomItem(comments[who][result]);
Object.keys(kittenLines).forEach(key=>{
  kittenLines[key].textContent=key===who?phrase:kittenDefaults[key];
  kittenSides[key].classList.toggle('is-speaking',key===who);
});
if(voiceEnabled&&'speechSynthesis' in window&&'SpeechSynthesisUtterance' in window){
  try{
   window.speechSynthesis.cancel();
   const utterance=new SpeechSynthesisUtterance(phrase);
   utterance.lang='ru-RU';utterance.rate=who==='kind'?0.9:1.02;utterance.pitch=who==='kind'?1.4:0.78;
   const voices=window.speechSynthesis.getVoices();
   const russianVoice=voices.find(v=>/^ru(-|$)/i.test(v.lang));
   if(russianVoice)utterance.voice=russianVoice;
   window.speechSynthesis.speak(utterance);
  }catch(error){/* Реплика остаётся на экране, если озвучка недоступна. */}
}
}
function selectGame(name){
screens.forEach(s=>s.hidden=s.dataset.screen!==name);
choices.forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.game===name)));
stopSnake();
commentBoth('start');
}
choices.forEach(b=>b.addEventListener('click',()=>selectGame(b.dataset.game)));

/* ЗМЕЙКА */
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 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 stopSnake(){if(timer!==null)clearInterval(timer);timer=null}
function runTimer(){stopSnake();if(running&&!paused&&!over&&!root.querySelector('[data-screen="snake"]').hidden)timer=setInterval(stepSnake,+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 resetSnake(){
stopSnake();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;
drawSnake();runTimer();canvas.focus();commentBoth('start');
}
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 stepSnake(){
if(!running||paused||over||root.querySelector('[data-screen="snake"]').hidden)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){endSnake('Патруль заблудился!');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)){endSnake('Патруль столкнулся!');return}
snake.unshift(head);
if(eating){score++;scoreNode.textContent=score;prey=randomPrey();commentBoth('move');if(!prey){over=true;running=false;stopSnake();drawSnake();commentAfterResult('win');return}}
else snake.pop();
drawSnake();
}
function drawSnakeCat(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()}
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';ctx.fillStyle=prey.type==='fish'?'#83b5b6':prey.type==='bird'?'#d8c16e':'#c7a879';ctx.beginPath();ctx.ellipse(0,0,6,4,0,0,Math.PI*2);ctx.fill();ctx.stroke();if(prey.type==='bird'){ctx.beginPath();ctx.moveTo(-5,0);ctx.lineTo(-9,-4);ctx.lineTo(-8,3);ctx.fill()}else if(prey.type==='fish'){ctx.beginPath();ctx.moveTo(5,0);ctx.lineTo(9,-4);ctx.lineTo(9,4);ctx.closePath();ctx.fill()}else{ctx.beginPath();ctx.arc(-5,-4,2.2,0,Math.PI*2);ctx.arc(0,-5,2.2,0,Math.PI*2);ctx.fill()}ctx.restore()}
function snakeMessage(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 drawSnake(){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)=>drawSnakeCat(p.x,p.y,colors[Math.floor(i/3)%colors.length],i%3===0));if(paused)snakeMessage('Патруль отдыхает')}
function endSnake(text){over=true;running=false;stopSnake();drawSnake();snakeMessage(text);commentAfterResult('lose')}
root.querySelector('.wh-begin').addEventListener('click',resetSnake);
root.querySelector('.wh-restart').addEventListener('click',resetSnake);
pauseButton.addEventListener('click',()=>{if(!running||over)return;paused=!paused;pauseButton.textContent=paused?'Продолжить':'Пауза';if(paused)stopSnake();else runTimer();drawSnake()});
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});

/* 2048 */
const board2048=root.querySelector('.wh-2048-board'),score2048=root.querySelector('.wh-2048-score');
let grid2048=[],scoreVal=0,done2048=false,touch2048=null;
function addTile2048(){const empty=[];grid2048.forEach((v,i)=>{if(!v)empty.push(i)});if(empty.length){const i=randomItem(empty);grid2048[i]=Math.random()<.9?2:4}}
function reset2048(){grid2048=Array(16).fill(0);scoreVal=0;done2048=false;addTile2048();addTile2048();render2048();commentBoth('start')}
function render2048(){board2048.replaceChildren();const ranks={2:'бродяга',4:'домашний',8:'котёнок',16:'ученик',32:'воитель',64:'старейшина',128:'целитель',256:'глашатай',512:'предводитель',1024:'избранный',2048:'Звёздный'};grid2048.forEach(v=>{const cellEl=document.createElement('div');cellEl.className='wh-2048-cell';cellEl.dataset.value=String(v);cellEl.setAttribute('aria-label',v?ranks[v]+' — '+v:'пустая поляна');if(v){const number=document.createElement('span');number.textContent=String(v);const rank=document.createElement('small');rank.textContent=ranks[v]||'сила';cellEl.append(number,rank)}board2048.appendChild(cellEl)});score2048.textContent=scoreVal}
function slide2048(line){const vals=line.filter(Boolean);let out=[],gained=0;for(let i=0;i<vals.length;i++){if(vals[i]===vals[i+1]){out.push(vals[i]*2);gained+=vals[i]*2;i++}else out.push(vals[i])}while(out.length<4)out.push(0);return {line:out,gained}}
function move2048(direction){
if(done2048||root.querySelector('[data-screen="2048"]').hidden)return;
const before=grid2048.join(','),nextGrid=Array(16).fill(0);let gained=0;
for(let n=0;n<4;n++){let ids=[];for(let k=0;k<4;k++){if(direction==='left')ids.push(n*4+k);if(direction==='right')ids.push(n*4+3-k);if(direction==='up')ids.push(k*4+n);if(direction==='down')ids.push((3-k)*4+n)}
  const result=slide2048(ids.map(i=>grid2048[i]));gained+=result.gained;ids.forEach((id,j)=>nextGrid[id]=result.line[j])}
if(before===nextGrid.join(','))return;grid2048=nextGrid;scoreVal+=gained;
addTile2048();render2048();commentBoth('move');
if(grid2048.includes(2048)){done2048=true;commentAfterResult('win');return}
const canMove=grid2048.some(v=>!v)||grid2048.some((v,i)=>i%4<3&&v===grid2048[i+1])||grid2048.some((v,i)=>i<12&&v===grid2048[i+4]);
if(!canMove){done2048=true;commentAfterResult('lose')}
}
root.querySelector('.wh-2048-restart').addEventListener('click',reset2048);
function handleGameKey(e){const map={ArrowUp:'up',w:'up',ArrowDown:'down',s:'down',ArrowLeft:'left',a:'left',ArrowRight:'right',d:'right'};if(!map[e.key])return;const active=root.querySelector('.wh-game-screen:not([hidden])');if(!active)return;if(active.dataset.screen==='snake'){e.preventDefault();setDir(map[e.key])}else if(active.dataset.screen==='2048'){e.preventDefault();move2048(map[e.key])}}
root.addEventListener('keydown',handleGameKey);
board2048.addEventListener('touchstart',e=>{const t=e.changedTouches[0];touch2048={x:t.clientX,y:t.clientY}},{passive:true});
board2048.addEventListener('touchend',e=>{if(!touch2048)return;const t=e.changedTouches[0],dx=t.clientX-touch2048.x,dy=t.clientY-touch2048.y;touch2048=null;if(Math.max(Math.abs(dx),Math.abs(dy))<18)return;move2048(Math.abs(dx)>Math.abs(dy)?(dx>0?'right':'left'):(dy>0?'down':'up'))},{passive:true});
snake=[{x:10,y:8},{x:9,y:8},{x:8,y:8},{x:7,y:8},{x:6,y:8}];prey=randomPrey();drawSnake();reset2048();

/* НОВОСТИ: У КАЖДОЙ НОВОСТИ СОБСТВЕННЫЙ КОТ, АВАТАРКА И ССЫЛКА.
   При выборе новости все три значения меняются вместе. */
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]

Отредактировано Ежонок (Вчера 15:10:58)