/* Horde Hold — стили сайта. Вся графика берётся из /assets/game (Tiny Swords). */

:root {
  --water: #47aba9;
  --ink: #23304a;
  --ink-soft: #4a5468;
  --cream: #fff6dc;
  --gold: #f4c95d;
  --font: "MedievalSharp", Georgia, serif;
  --font-head: "Jacquard 24", "MedievalSharp", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--water); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font: 18px/1.5 var(--font);
  color: var(--ink);
  background: var(--water) url("/assets/game/terrain/tileset/water-background-color.png");
}

/* Курсоры из ассетов; хотспот — кончик стрелки и указательного пальца. */
html { cursor: url("/assets/game/ui-elements/ui-elements/cursors/cursor_01.png") 22 17, auto; }
a, button, .btn { cursor: url("/assets/game/ui-elements/ui-elements/cursors/cursor_02.png") 24 17, pointer; }

img, .sprite { image-rendering: pixelated; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 400; }

.wrap {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 24px 16px 32px;
}

/* ---------- Облака ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  width: 576px;
  height: 256px;
  background: no-repeat center / contain;
  image-rendering: pixelated;
  animation: drift 26s ease-in-out infinite alternate;
}
.cloud-1 { background-image: url("/assets/game/terrain/decorations/clouds/clouds_01.png"); top: 2%;  left: -260px; }
.cloud-2 { background-image: url("/assets/game/terrain/decorations/clouds/clouds_03.png"); top: 38%; left: -320px; animation-duration: 34s; }
.cloud-3 { background-image: url("/assets/game/terrain/decorations/clouds/clouds_05.png"); top: 75%; left: -220px; animation-duration: 30s; }
.cloud-4 { background-image: url("/assets/game/terrain/decorations/clouds/clouds_02.png"); top: 12%; right: -300px; animation-duration: 38s; }
.cloud-5 { background-image: url("/assets/game/terrain/decorations/clouds/clouds_07.png"); top: 60%; right: -260px; animation-duration: 28s; }

@keyframes drift {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* ---------- 9-slice панели ---------- */

/* Бумажный свиток: основная доска секции. */
.board {
  position: relative;
  margin: 0 0 56px;
  padding: 72px 64px 80px;
  border-image: url("/assets/game/ui-elements/banners/banner_horizontal.png") 64 fill / 64px round;
}

/* Резная вставка внутри доски. */
.panel {
  padding: 20px 24px;
  border-image: url("/assets/game/ui-elements/banners/carved_9slides.png") 64 fill / 32px round;
}

/* ---------- Ленты-заголовки ---------- */

.ribbon {
  display: inline-block;
  height: 64px;
  padding: 0 72px;
  font-size: 38px;
  line-height: 44px;
  white-space: nowrap;
  font-family: var(--font-head);
  color: var(--cream);
  text-shadow:
    -2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink),
    2px 3px 0 rgba(0, 0, 0, .25);
  border-image: url("/assets/game/ui-elements/ribbons/ribbon_blue_3slides.png") 0 64 fill / 0 64px stretch;
}
.ribbon-red { border-image-source: url("/assets/game/ui-elements/ribbons/ribbon_red_3slides.png"); }

/* Лента секции «висит» на верхнем крае доски. */
.board > .ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.ribbon-small {
  height: 48px;
  padding: 0 52px;
  font-size: 28px;
  line-height: 34px;
  border-image-width: 0 48px;
}

.ribbon-big {
  height: 112px;
  padding: 0 120px;
  font-size: 54px;
  line-height: 80px;
  border-image-width: 0 112px;
}

/* Заголовок главной — как на игровой панели, в масштабе ленты 112/64:
   шлем на плоской части ленты, за левым загибом; буквы 96 px (четырёхкратный
   Jacquard 24), межбуквенное — минус пиксель шрифта, текст поднят на 6 px
   (строка на 12 px ниже) и начинается в 4 px от видимого края шлема. */
.title .ribbon-big {
  padding-left: 224px;
  font-size: 90px;
  line-height: 78px;
  letter-spacing: -4px;
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-block;
  height: 64px;
  min-width: 180px;
  padding: 0 40px;
  font: 24px/50px var(--font);
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  border-image: url("/assets/game/ui-elements/buttons/button_blue_3slides.png") 0 64 fill / 0 64px stretch;
  transition: filter .12s;
}
.btn:hover { filter: brightness(1.08) saturate(1.1); }
.btn:active {
  border-image-source: url("/assets/game/ui-elements/buttons/button_blue_3slides_pressed.png");
  line-height: 54px;
}
.btn:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }

.btn-red { color: var(--cream); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); border-image-source: url("/assets/game/ui-elements/buttons/button_red_3slides.png"); }
.btn-red:active { border-image-source: url("/assets/game/ui-elements/buttons/button_red_3slides_pressed.png"); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.actions-center { justify-content: center; }

/* ---------- Спрайты ---------- */

/*
 * Анимация по листу кадров: --img — лист, --frames — кадров в анимации,
 * --cols — колонок в листе (если больше кадров), --row — строка листа,
 * --fw/--fh — размер кадра на экране, --dur — длительность цикла.
 */
.sprite {
  display: inline-block;
  flex: none;
  width: var(--fw, 192px);
  height: var(--fh, 192px);
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: calc(var(--cols, var(--frames)) * var(--fw, 192px)) auto;
  background-position-y: calc(var(--row, 0) * var(--fh, 192px) * -1);
  animation: sprite var(--dur, .9s) steps(var(--frames)) infinite;
}
@keyframes sprite {
  from { background-position-x: 0; }
  to   { background-position-x: calc(var(--frames) * var(--fw, 192px) * -1); }
}

.s-delay { animation-delay: -.45s; }
.flip { transform: scaleX(-1); }

.s-pawn         { --img: url("/assets/game/units/blue-units/pawn/pawn_idle.png");             --frames: 8; }
.s-pawn-axe     { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-axe.png");         --frames: 8; }
.s-pawn-wood    { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-wood.png");        --frames: 8; }
.s-pawn-pickaxe { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-pickaxe.png");     --frames: 8; }
.s-pawn-gold    { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-gold.png");        --frames: 8; }
.s-pawn-stone   { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-stone.png");       --frames: 8; }
.s-pawn-knife   { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-knife.png");       --frames: 8; }
.s-pawn-meat    { --img: url("/assets/game/units/blue-units/pawn/pawn_idle-meat.png");        --frames: 8; }
.s-pawn-chop    { --img: url("/assets/game/units/blue-units/pawn/pawn_interact-axe.png");     --frames: 6; --dur: .7s; }
.s-pawn-mine    { --img: url("/assets/game/units/blue-units/pawn/pawn_interact-pickaxe.png"); --frames: 6; --dur: .7s; }
.s-pawn-cut     { --img: url("/assets/game/units/blue-units/pawn/pawn_interact-knife.png");   --frames: 4; --dur: .5s; }

.s-warrior      { --img: url("/assets/game/units/blue-units/warrior/warrior_idle.png");      --frames: 8; }
.s-archer       { --img: url("/assets/game/units/blue-units/archer/archer_idle.png");        --frames: 6; }
.s-archer-shoot { --img: url("/assets/game/units/blue-units/archer/archer_shoot.png");       --frames: 8; --dur: 1s; }
.s-monk         { --img: url("/assets/game/units/blue-units/monk/idle.png");                  --frames: 6; }
/* У копейщика кадр 320 px (место под копьё), масштаб пикселей тот же, что у остальных. */
.s-lancer       { --img: url("/assets/game/units/blue-units/lancer/lancer_idle.png");        --frames: 12; --dur: 1.2s; --fw: 320px; --fh: 320px; }

.s-goblin-torch     { --img: url("/assets/game/factions/goblins/troops/torch/red/torch_red.png"); --frames: 7; --cols: 7; }
.s-goblin-torch-run { --img: url("/assets/game/factions/goblins/troops/torch/red/torch_red.png"); --frames: 6; --cols: 7; --row: 1; --dur: .6s; }
.s-goblin-tnt       { --img: url("/assets/game/factions/goblins/troops/tnt/red/tnt_red.png");     --frames: 6; --cols: 7; }

.s-sheep  { --img: url("/assets/game/terrain/resources/meat/sheep/sheep_idle.png"); --frames: 6; --fw: 128px; --fh: 128px; }
.s-tree-1 { --img: url("/assets/game/terrain/resources/wood/trees/tree1.png"); --frames: 8; --fh: 256px; --dur: 1.4s; }
.s-tree-2 { --img: url("/assets/game/terrain/resources/wood/trees/tree2.png"); --frames: 8; --fh: 256px; --dur: 1.6s; }
.s-tree-3 { --img: url("/assets/game/terrain/resources/wood/trees/tree3.png"); --frames: 8; --dur: 1.5s; }

/* В кадре много пустоты: обрезаем её отрицательными полями в потоке. */
.unit  { margin: -58px -58px -50px; }
.tree  { margin: -48px -36px -24px; }
.sheep { margin: -40px -30px -30px; }
.stone { width: 96px; height: 96px; margin: -20px -14px -16px; }
.rock  { width: 64px; height: 64px; margin: 0 -10px -6px; }

/* ---------- Hero ---------- */

.hero { margin-bottom: 56px; }

.title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 -36px;
  /* Лента начинается на 77 px левее шлема: сдвигаем, чтобы по центру
     стояла сама лента. */
  padding-left: 77px;
}
/* Шлем 168 px (96 из 64 игровой панели) лежит на ленте в 77 px от её левого
   края и поднят на 12 px к середине её полотна; справа у картинки 38/256
   прозрачного поля. */
.title-avatar {
  position: relative;
  top: -19px;
  z-index: 1;
  width: 168px;
  height: 168px;
  margin-right: -245px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2));
}

.hero-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 16px;
  align-items: center;
  margin: 0;
}

.tagline { margin: 0 0 8px; font-family: var(--font-head); font-size: 40px; line-height: 1.15; color: var(--ink); }
.hero-text p:not(.tagline):not(.actions) { margin: 0; color: var(--ink-soft); }

/* Сцена с абсолютным позиционированием: координаты задаются --x/--y. */
.stage { position: relative; }
.stage > * { position: absolute; left: var(--x, 0); top: var(--y, 0); }

.stage-castle { width: 560px; height: 320px; }

/* ---------- Ресурсы ---------- */

.lead { max-width: 760px; margin: 0 auto 24px; text-align: center; color: var(--ink-soft); }

.rows { display: grid; gap: 16px; }

.row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.row-info h3 { font-size: 32px; }
.row-info p { margin: 4px 0 0; font-size: 17px; color: var(--ink-soft); }

.row-scene {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  min-height: 110px;
}

/* ---------- Карточки ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.card p { margin: 10px 0 0; font-size: 17px; color: var(--ink-soft); }
.card-art { display: flex; justify-content: center; height: 120px; margin-bottom: 6px; }
.card-art .unit { margin-top: -46px; }
/* Кадр копейщика на 128 px больше: обрезаем по 64 px с каждой стороны сверх обычного. */
.unit.s-lancer { margin: -122px -122px -114px; }
/* Ноги на одной линии с остальными; копьё выступает над карточкой. */
.card-art .unit.s-lancer { margin-top: -110px; }
#army .cards { margin-top: 48px; row-gap: 48px; }

.stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  margin: 12px 0 0;
  font-size: 16px;
}
.stats dt { text-align: right; color: var(--ink-soft); }
.stats dd { margin: 0; text-align: left; }

.weak { font-size: 16px; color: #9b3b32 !important; }

.horde-march {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 24px;
  height: 90px;
}
.horde-march .unit { margin-top: -66px; }

/* ---------- Шаги ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  min-height: 44px;
  padding-left: 60px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -4px;
  width: 48px;
  height: 48px;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--ink);
  background: url("/assets/game/ui-elements/ui-elements/buttons/tinyroundbluebutton.png") center / contain no-repeat;
  image-rendering: pixelated;
}

/* ---------- Анимации (/motions) ---------- */

/* Вкладки цветов — радиокнопки без JS: видна только выбранная команда. */
.color-radio { position: absolute; opacity: 0; pointer-events: none; }
.color-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.color-tab { text-transform: capitalize; filter: grayscale(.6) brightness(.95); }
.motions { display: none; }
#color-blue:checked   ~ .motions[data-color="blue"],
#color-red:checked    ~ .motions[data-color="red"],
#color-yellow:checked ~ .motions[data-color="yellow"],
#color-purple:checked ~ .motions[data-color="purple"],
#color-black:checked  ~ .motions[data-color="black"] { display: block; }
#color-blue:checked   ~ .color-tabs [for="color-blue"],
#color-red:checked    ~ .color-tabs [for="color-red"],
#color-yellow:checked ~ .color-tabs [for="color-yellow"],
#color-purple:checked ~ .color-tabs [for="color-purple"],
#color-black:checked  ~ .color-tabs [for="color-black"] { filter: none; }

.motions-group { margin: 32px 0 12px; font-family: var(--font-head); font-size: 40px; text-align: center; }
.motion-char { margin-bottom: 16px; }
.motion-char h3 { margin: 0 0 8px; font-size: 28px; }
.motion-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; }
.motion { display: flex; flex-direction: column; align-items: center; margin: 0; }
/* 10 кадров в секунду для любой длины анимации; пустые поля кадра обрезаем. */
.motion .sprite {
  animation-duration: calc(var(--frames) * .1s);
  margin: calc(var(--fh) * -.22) calc(var(--fw) * -.22) calc(var(--fh) * -.2);
}
.motion figcaption { position: relative; max-width: 160px; font-size: 15px; text-align: center; overflow-wrap: anywhere; color: var(--ink-soft); }
.motion figcaption small { opacity: .7; }

/* ---------- Ошибки ---------- */

.board-small { max-width: 560px; margin: 64px auto; text-align: center; }
.board-small p { margin: 8px 0; }
.stage-error { display: flex; justify-content: center; height: 72px; }
.stage-error > * { position: static; margin-top: -40px; }

/* ---------- Подвал ---------- */

.footer {
  position: relative;
  z-index: 1;
  padding: 0 16px 32px;
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.footer a { color: inherit; }

/* ---------- Адаптив ---------- */

@media (max-width: 1000px) {
  .hero-board { grid-template-columns: 1fr; }
  .stage-castle { justify-self: center; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .board { padding: 64px 40px 72px; border-image-width: 48px; }
  /* Заголовок главной ужимается целиком, с теми же пропорциями. */
  .title { zoom: .6; }
  .stage-castle { zoom: .56; }
  .row { grid-template-columns: 1fr; }
  .row-scene, .horde-march { zoom: .7; justify-content: center; }
  .cards, .cards-3, .steps { grid-template-columns: 1fr; }
  .cloud { opacity: .6; }
}

@media (max-width: 480px) {
  .title { zoom: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .sprite, .cloud { animation: none; }
}

/* ---------- Музыка ---------- */

.music-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 64px;
  height: 64px;
  padding: 0 0 6px;
  border: 0;
  background: url("/assets/game/ui-elements/buttons/button_blue.png") no-repeat center / 100%;
  font: 30px/1 var(--font);
  color: var(--ink);
  cursor: pointer;
  transition: filter .12s;
}
.music-toggle:hover { filter: brightness(1.08) saturate(1.1); }
.music-toggle:active { background-image: url("/assets/game/ui-elements/buttons/button_blue_pressed.png"); padding-top: 4px; }
.music-toggle:focus-visible { outline: 3px dashed var(--gold); outline-offset: 2px; }
.music-toggle.is-muted { opacity: .7; text-decoration: line-through; text-decoration-thickness: 3px; }
/* Музыка готова, но браузер ждёт первого действия на странице. */
.music-toggle.is-waiting { animation: music-pulse 1.2s ease-in-out infinite; }
@keyframes music-pulse {
  50% { transform: scale(1.12); filter: brightness(1.15) saturate(1.2); }
}