/*
  БАЗОВАЯ КОМПОЗИЦИЯ МОНСТРА — 520 × 760

  Координаты деталей перенесены из monster-calibration.css.
  У отдельных PNG нет transform или scale: только left, top и необязательный width.
  Для адаптации игра масштабирует весь готовый холст целиком через .monster-frame.
*/

.monster-canvas {
  position: relative;
  width: 520px;
  height: 760px;
  overflow: visible;
}

.monster-part {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ТЕЛО */

.part-body-jelly {
  left: 54px;
  top: 100px;
  z-index: 20;
}

.part-body-fuzzy {
  left: 52px;
  top: 92px;
  z-index: 20;
}

.part-body-striped {
  left: 44px;
  top: 92px;
  z-index: 20;
}

.part-body-round,
.part-body-square {
  left: 45px;
  top: 148px;
  z-index: 20;
  width: 430px;
}

.part-body-triangle {
  left: 60px;
  top: 85px;
  z-index: 20;
  width: 400px;
}

/* ГЛАЗА */

.part-eyes-three {
  left: 140px;
  top: 200px;
  z-index: 40;
  width: 250px;
}

.part-eyes-spring {
  left: 86px;
  top: 125px;
  z-index: 40;
}

.part-eyes-cyclops {
  left: 150px;
  top: 180px;
  z-index: 40;
  width: 220px;
}

.part-eyes-googly,
.part-eyes-sleepy {
  left: 110px;
  top: 205px;
  z-index: 40;
  width: 300px;
}

/* РОТ */

.part-mouth-teeth {
  left: 115px;
  top: 424px;
  z-index: 50;
  width: 300px;
}

.part-mouth-tongue,
.part-mouth-grimace,
.part-mouth-braces {
  left: 100px;
  top: 415px;
  z-index: 50;
  width: 320px;
}

.part-mouth-roar {
  left: 145px;
  top: 390px;
  z-index: 50;
  width: 230px;
}

/* ЛЕВАЯ И ПРАВАЯ РУКИ */

.part-arms-long-left {
  left: -110px;
  top: 110px;
  z-index: 30;
}

.part-arms-long-right {
  left: 420px;
  top: 110px;
  z-index: 30;
}

.part-arms-boxing-left {
  left: -100px;
  top: 120px;
  z-index: 30;
}

.part-arms-boxing-right {
  left: 420px;
  top: 120px;
  z-index: 30;
}

.part-arms-octopus-left,
.part-arms-robot-left,
.part-arms-spring-left {
  left: -50px;
  top: 110px;
  z-index: 30;
  width: 215px;
}

.part-arms-octopus-right,
.part-arms-robot-right,
.part-arms-spring-right {
  left: 360px;
  top: 110px;
  z-index: 30;
  width: 215px;
}

/* НОГИ */

.part-legs-stomp {
  left: 35px;
  top: 555px;
  z-index: 10;
}

.part-legs-spring {
  left: 33px;
  top: 550px;
  z-index: 10;
}

.part-legs-tiny {
  left: 31px;
  top: 550px;
  z-index: 10;
}

.part-legs-skates,
.part-legs-bird,
.part-legs-tentacles {
  left: 30px;
  top: 550px;
  z-index: 10;
  width: 460px;
}

/* ОСОБЕННОСТИ */

.part-special-horns {
  left: 72px;
  top: 35px;
  z-index: 10;
}

.part-special-bells {
  left: 146px;
  top: 70px;
  z-index: 10;
  width: 240px;
}

.part-special-spark {
  left: 88px;
  top: -70px;
  z-index: 10;
}

.part-special-propeller {
  left: 100px;
  top: 18px;
  z-index: 30;
  width: 320px;
}

.part-special-antennas {
  left: 100px;
  top: 30px;
  z-index: 30;
  width: 320px;
}

.part-special-crystals {
  left: 100px;
  top: 53px;
  z-index: 30;
  width: 320px;
}

/* ЦВЕТ ТЕЛА, РУК И НОГ */

.color-mint :is(.body-part, .arm-part, .legs-part) {
  filter: hue-rotate(80deg);
}

.color-berry :is(.body-part, .arm-part, .legs-part) {
  filter: hue-rotate(305deg) saturate(0.88);
}

.color-sun :is(.body-part, .arm-part, .legs-part) {
  filter: hue-rotate(170deg) saturate(0.8) brightness(1.13);
}

.color-ocean :is(.body-part, .arm-part, .legs-part) {
  filter: hue-rotate(145deg) saturate(1.08);
}

.color-candy :is(.body-part, .arm-part, .legs-part) {
  filter: hue-rotate(325deg) saturate(1.12) brightness(1.05);
}

/* УЗОР ПОВТОРЯЕТ ТОЧНЫЙ РАЗМЕР И ПОЗИЦИЮ ВЫБРАННОГО КОРПУСА */

.pattern-overlay {
  position: absolute;
  z-index: 21;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  clip-path: none;
  opacity: 0.58;
  mix-blend-mode: screen;
}

.body-body-jelly .pattern-overlay {
  left: 54px;
  top: 100px;
  width: 412px;
  height: 550px;
  -webkit-mask-image: url("./assets/parts/body-jelly.png");
  mask-image: url("./assets/parts/body-jelly.png");
}

.body-body-fuzzy .pattern-overlay {
  left: 52px;
  top: 92px;
  width: 416px;
  height: 565px;
  -webkit-mask-image: url("./assets/parts/body-fuzzy.png");
  mask-image: url("./assets/parts/body-fuzzy.png");
}

.body-body-striped .pattern-overlay {
  left: 44px;
  top: 92px;
  width: 433px;
  height: 563px;
  -webkit-mask-image: url("./assets/parts/body-striped.png");
  mask-image: url("./assets/parts/body-striped.png");
}

.body-body-round .pattern-overlay,
.body-body-square .pattern-overlay {
  left: 45px;
  top: 118px;
  width: 430px;
  height: 453px;
}

.body-body-round .pattern-overlay {
  -webkit-mask-image: url("./assets/parts/body-round.png");
  mask-image: url("./assets/parts/body-round.png");
}

.body-body-square .pattern-overlay {
  -webkit-mask-image: url("./assets/parts/body-square.png");
  mask-image: url("./assets/parts/body-square.png");
}

.body-body-triangle .pattern-overlay {
  left: 60px;
  top: 85px;
  width: 400px;
  height: 534px;
  -webkit-mask-image: url("./assets/parts/body-triangle.png");
  mask-image: url("./assets/parts/body-triangle.png");
}

.pattern-spots .pattern-overlay {
  background-image:
    radial-gradient(circle, #fff7a4 0 22%, transparent 24%),
    radial-gradient(circle, #d9fff3 0 18%, transparent 20%);
  background-position: 0 0, 40px 44px;
  background-size: 84px 84px;
}

.pattern-stripes .pattern-overlay {
  background: repeating-linear-gradient(
    118deg,
    transparent 0 28px,
    #fff1a8 30px 48px,
    transparent 50px 76px
  );
  opacity: 0.62;
}

.pattern-stars .pattern-overlay {
  background-image: url("./assets/patterns/stars.svg");
  background-size: 92px 92px;
  background-position: center;
  opacity: 0.76;
}

.pattern-hearts .pattern-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78' viewBox='0 0 78 78'%3E%3Cpath fill='%23ffaad2' d='M39 62 15 39C1 24 23 9 39 27 55 9 77 24 63 39Z'/%3E%3C/svg%3E");
  background-size: 78px 78px;
  opacity: 0.8;
}

.pattern-zigzag .pattern-overlay {
  background-image:
    linear-gradient(135deg, #b9fff0 25%, transparent 25%),
    linear-gradient(225deg, #b9fff0 25%, transparent 25%);
  background-position: 0 0, 28px 0;
  background-size: 56px 34px;
  opacity: 0.72;
}

.pattern-bubbles .pattern-overlay {
  background-image: radial-gradient(circle, transparent 0 10px, #fff5b8 11px 15px, transparent 16px);
  background-size: 62px 62px;
  opacity: 0.82;
}

/* МАСШТАБИРУЕТСЯ ТОЛЬКО СОБРАННЫЙ ХОЛСТ, А НЕ ОТДЕЛЬНЫЕ ДЕТАЛИ */

.monster-frame {
  --monster-scale: 0.31;
  position: relative;
  flex: 0 0 auto;
  width: 239px;
  height: 335px;
  margin: 0;
  transform: none;
  animation: assembledMonsterBreathe 2.8s ease-in-out infinite;
}

.monster-viewport {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 770px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--monster-scale));
  transform-origin: center;
  filter: drop-shadow(0 24px 20px rgba(55, 20, 88, 0.25));
}

.monster-viewport > .monster-canvas {
  position: absolute;
  left: 120px;
  top: 110px;
}

.hero-monster {
  --monster-scale: 0.5;
  width: 385px;
  height: 540px;
}

.builder-monster {
  --monster-scale: 0.31;
  width: 239px;
  height: 335px;
}

.show-monster {
  --monster-scale: 0.25;
  width: 193px;
  height: 270px;
}

@keyframes assembledMonsterBreathe {
  50% {
    translate: 0 -7px;
  }
}

@media (max-width: 760px) {
  .hero-monster {
    --monster-scale: 0.29;
    width: 223px;
    height: 313px;
  }

  .builder-monster {
    --monster-scale: 0.225;
    width: 173px;
    height: 243px;
  }

  .show-monster {
    --monster-scale: 0.19;
    width: 146px;
    height: 205px;
    margin: 0;
  }
}

/* Keep the landing illustration compact on short screens. Longer game
   screens still scroll inside #game-scroll, not the browser document. */
@media (max-width: 760px) and (max-height: 680px) {
  .hero-stage { overflow: hidden; }
  .hero-monster {
    --monster-scale: 0.20;
    width: 170px;
    height: 218px;
  }
}

@media (min-width: 761px) and (max-height: 680px) {
  .hero-monster {
    --monster-scale: 0.37;
    width: 300px;
    height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .monster-frame {
    animation: none;
  }
}

/* PNG уже очищены: миниатюрам больше не нужны старые clip-path и маски. */
.part-option .part-thumb {
  width: 100%;
  height: 95px;
  aspect-ratio: auto;
  object-fit: contain;
  clip-path: none;
}

.part-option .part-thumb[class*="thumb-"] {
  clip-path: none;
}