@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    /* ⚙️ основные ручки */
    --bg1:#49a9ff;            /* центр градиента */
    --bg2:#1b6cff;            /* края градиента */
    --tile:20px;             /* размер тайла (реже = больше) */
    --tile2:30px;            /* второй слой (ещё реже) */
    --pat-opacity:0.18;       /* прозрачность основного слоя */
    --pat2-opacity:0.10;      /* прозрачность дополнительного слоя */
    --fade-inner:45%;         /* где паттерн ещё виден */
    --fade-outer:100%;        /* где исчезает */
  }


*{
    margin: 0;
}

body{
    background-color: #050505;
}

.frame{
    background-color: #202020;
    width: 360px;
    height: 620px;
    border-radius: 20px;
    justify-content: center;
  align-items: center;
  padding: 20px;
  background-position: 40px 40px; /* смещение, ломает “совпадение” */
    
}

.parent{
    display: flex;
  justify-content: center;
  align-items: center;
}

.gift{
    width: 100%;
    height: 220px;
    border-radius: 20px;
    display: flex;
  justify-content: center;
  align-items: center;
    background: radial-gradient(circle, #58a3c8 0%, #5485c4 100%);
    position: relative;
    overflow: hidden; /* 👈 важно! обрезает всё, что выходит за рамки */
}

/* слой с паттернами */
.pattern{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.35;

  /* 🔹 один локальный PNG-файл */
  background-image:
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png"),
    url("icons/Kitsune\ Mask.png");

  /* 🔹 размеры и редкость расположения */
  /* большие и маленькие версии одной картинки */
  background-size:
    20px 20px,
    20px 20px,
    20px 20px,
    30px 30px,
    30px 30px,
    30px 30px,
    30px 30px,
    20px 20px,
    20px 20px,
    20px 20px,
    20px 20px,
    30px 30px,
    20px 20px,
    30px 30px,
    30px 30px;

  /* 🔹 редкое расположение — увеличиваем тайл */
  background-repeat: no-repeat;
  background-position:
    84% 85%,
    30% 75%,
    76% 50%,
    50% 4%,
    71% 25%,
    71% 75%,
    24% 50%,
    30% 25%,
    50% 96%,
    15% 20%,
    10% 40%,
    12% 67%,
    88% 17%,
    89% 57%; /* компактный вертикальный овал и пара боковых групп */
  background-blend-mode: multiply;

  /* эффект постепенного исчезновения к краям */
  mask-image: radial-gradient(circle at center,rgba(0,0,0,1) 45%,rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center,rgba(0,0,0,1) 30px 30px,32%,rgba(0,0,0,0) 100%);
}

.model-gift{
    width: 40%;
    
}

.gift_name{
    position: absolute;
    width: 100%;
    height: 40px;
    bottom: 20px;
    left: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-gift{
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    position: absolute;
}

.collectible-gift{
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    position: absolute;
    top: 35px;
}