* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
}

main {
  background: url(./images/bg.png);
  width: 980px;
  height: 630px;
  position: relative;
}

.map {
  width: 980px;
  height: 630px;
  background: url('./images/map.png');
}

.moveButton {
  width: 202px;
  height: 63px;
  background: url('./images/buttons/to-university.png');
  color: #fff;
  font-size: 2rem;
  text-transform: uppercase;
}

/* Character */
.character {
  background: url('./images/character.png');
  height: 75px;
  width: 34px;
  z-index: 2;
  offset-path: path(
    'M404.00,540.00 C401.00,534.00 381.67,524.33 381.67,524.33 381.67,524.33 370.67,509.33 370.67,509.33 370.67,509.33 360.25,499.00 360.25,499.00 360.25,499.00 353.75,496.75 353.75,496.75 353.75,496.75 346.33,495.67 346.33,495.67 346.33,495.67 338.25,496.50 338.25,496.50 338.25,496.50 330.25,499.50 330.25,499.50 330.25,499.50 315.75,507.00 315.75,507.00 315.75,507.00 301.75,515.75 301.75,515.75 301.75,515.75 278.25,530.50 278.25,530.50 278.25,530.50 264.67,537.00 264.67,537.00 264.67,537.00 241.75,549.25 241.75,549.25 241.75,549.25 221.00,561.50 221.00,561.50 221.00,561.50 210.25,565.50 210.25,565.50 210.25,565.50 200.33,567.33 200.33,567.33 200.33,567.33 184.75,569.25 184.75,569.25 184.75,569.25 169.25,570.00 169.25,570.00 169.25,570.00 154.75,570.50 154.75,570.50 154.75,570.50 141.33,569.00 141.33,569.00 141.33,569.00 126.25,566.50 126.25,566.50 126.25,566.50 113.67,562.33 113.67,562.33 113.67,562.33 100.00,555.75 100.00,555.75 100.00,555.75 88.33,549.00 88.33,549.00 88.33,549.00 75.00,542.25 75.00,542.25 75.00,542.25 60.00,533.00 60.00,533.00 60.00,533.00 49.33,523.67 49.33,523.67 49.33,523.67 47.00,515.25 47.00,515.25 47.00,515.25 47.67,508.00 47.67,508.00 47.67,508.00 53.67,500.67 53.67,500.67 53.67,500.67 64.50,495.50 64.50,495.50 64.50,495.50 77.75,488.50 77.75,488.50 77.75,488.50 87.00,482.00 87.00,482.00 87.00,482.00 88.25,473.00 88.25,473.00 88.25,473.00 83.50,466.25 83.50,466.25 83.50,466.25 76.67,458.33 76.67,458.33 76.67,458.33 76.25,451.00 76.25,451.00 76.25,451.00 80.50,441.50 80.50,441.50 80.50,441.50 85.75,434.25 85.75,434.25 85.75,434.25 95.25,426.00 95.25,426.00 95.25,426.00 132.33,407.00 132.33,407.00 132.33,407.00 170.75,387.25 170.75,387.25 170.75,387.25 183.75,381.25 183.75,381.25 183.75,381.25 193.25,374.25 193.25,374.25 193.25,374.25 201.67,364.00 201.67,364.00 201.67,364.00 201.75,355.50 201.75,355.50 201.75,355.50 196.00,348.50 196.00,348.50 196.00,348.50 187.00,341.33 187.00,341.33 187.00,341.33 146.00,317.33 146.00,317.33 146.00,317.33 114.67,299.00 114.67,299.00 114.67,299.00 95.25,287.00 95.25,287.00 95.25,287.00 87.00,279.33 87.00,279.33 87.00,279.33 85.50,273.25 85.50,273.25 85.50,273.25 87.67,268.33 87.67,268.33 87.67,268.33 93.25,263.75 93.25,263.75 93.25,263.75 100.67,261.33 100.67,261.33 100.67,261.33 110.50,258.75 110.50,258.75 110.50,258.75 118.67,255.00 118.67,255.00 118.67,255.00 124.50,250.25 124.50,250.25 124.50,250.25 125.75,244.50 125.75,244.50 125.75,244.50 122.33,238.33 122.33,238.33 122.33,238.33 118.00,233.00 118.00,233.00 118.00,233.00 116.25,223.75 116.25,223.75 116.25,223.75 118.33,216.67 118.33,216.67 118.33,216.67 128.00,211.33 128.00,211.33 128.00,211.33 140.67,209.67 140.67,209.67 140.67,209.67 152.67,214.67 152.67,214.67 152.67,214.67 164.33,228.00 164.33,228.00 164.33,228.00 182.67,251.33 182.67,251.33 182.67,251.33 197.00,267.50 197.00,267.50 197.00,267.50 209.75,275.50 209.75,275.50 209.75,275.50 221.25,277.00 221.25,277.00 221.25,277.00 235.33,274.67 235.33,274.67 235.33,274.67 254.00,265.00 254.00,265.00 254.00,265.00 262.00,246.67 262.00,246.67 262.00,246.67 259.50,228.50 259.50,228.50 259.50,228.50 256.00,218.50 256.00,218.50 256.00,218.50 250.00,209.00 250.00,209.00 250.00,209.00 245.25,202.25 245.25,202.25 245.25,202.25 244.33,195.67 244.33,195.67 244.33,195.67 248.67,188.33 248.67,188.33 248.67,188.33 258.67,187.00 258.67,187.00 258.67,187.00 266.50,188.50 266.50,188.50 266.50,188.50 276.50,190.00 276.50,190.00 276.50,190.00 288.50,190.50 288.50,190.50 288.50,190.50 301.25,187.75 301.25,187.75 301.25,187.75 305.50,181.50 305.50,181.50 305.50,181.50 305.25,174.75 305.25,174.75 305.25,174.75 307.25,168.00 307.25,168.00 307.25,168.00 322.00,159.50 322.00,159.50 322.00,159.50 332.25,149.25 332.25,149.25 332.25,149.25 338.00,141.75 338.00,141.75 338.00,141.75 340.67,127.67 340.67,127.67 340.67,127.67 339.33,115.67 339.33,115.67 339.33,115.67 337.50,93.50 337.50,93.50 337.50,93.50 343.50,77.50 343.50,77.50 343.50,77.50 357.00,68.50 357.00,68.50 357.00,68.50 372.00,67.00 372.00,67.00 372.00,67.00 387.50,74.50 387.50,74.50'
  );
  position: absolute;
  top: -66px;
  left: 40px;
  offset-rotate: 0deg;
  transition: offset-distance 1s;
  offset-distance: 0%;
}

.step-1 {
  offset-distance: 8.3%;
}
.step-2 {
  offset-distance: 14.5%;
}
.step-3 {
  offset-distance: 21%;
}
.step-4 {
  offset-distance: 27.2%;
}
.step-5 {
  offset-distance: 34.2%;
}
.step-6 {
  offset-distance: 39.3%;
}
.step-7 {
  offset-distance: 45.3%;
}
.step-8 {
  offset-distance: 54.1%;
}
.step-9 {
  offset-distance: 60.3%;
}
.step-10 {
  offset-distance: 69.1%;
}

.control {
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  padding: 0 7px;
}

/* Slider */
.slider-container {
  position: relative;
  background: url('./images/friends-block.png');
  width: 536px;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-container .slider-overflow {
  overflow: hidden;
  width: 480px;
  height: 55px;
  display: flex;
  align-items: center;
}

.slider-container .slider {
  display: flex;
  align-items: center;
  transition: transform 1s;
}

.slider-container .slider .add-to-friends {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 23px;
  height: 22px;
  cursor: pointer;
}

.slider-container .slider-item {
  position: relative;
  height: 50px;
  margin: 0 5px;
}

/* Slider control */
.slider-container .slider-control {
  position: absolute;
  z-index: 3;
  top: 15px;
  cursor: pointer;
}

.slider-container .slider-control.prev {
  left: 10px;
}

.slider-container .slider-control.next {
  right: 10px;
}

/* Rating */
.overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(163, 137, 102, 0.5);
  display: none;
}

.rating-window {
  background: url(./images/rating-modal-bg-primary.png) center;
  background-size: cover;
  position: absolute;
  z-index: 10;
  top: -100%;
  left: 50%;
  width: 523px;
  min-height: 455px;
  padding: 100px 25px 0px;
  transform: translateX(-50%);
  transition: top 1s ease-in-out;
  border-radius: 10px;
  color: #fff;
  font-family: sans-serif;
}

.rating-window-inner {
  position: relative;
}

.rating-window.active {
  top: 10%;
}

.overlay.active {
  display: block;
}

.rating-modal-header {
  background: url(./images/rating-modal-header.png) center;
  background-size: cover;
  position: absolute;
  top: -3%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 264px;
  height: 33px;
  display: block;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 2px;
}

.rating-table-container {
  background: url(./images/rating-modal-bg-secondary.png) center;
  background-size: cover;
  max-height: 324px;
  border-radius: 10px;
  padding: 25px;
}

.rating-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
}

.rating-table thead {
  background: url('./images/rating-table-header.png') center no-repeat;
  width: 400px;
  height: 30px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

.rating-table tr {
  display: flex;
  width: 400px;
  align-items: center;
  justify-content: space-around;
}

.rating-table tbody {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-table tbody tr {
  background: url('./images/rating-table-row.png') center no-repeat;
  height: 30px;
}

.rating-table td:nth-child(1),
th:nth-child(1) {
  width: 50px;
  text-align: center;
}

.rating-table td:nth-child(2),
th:nth-child(2) {
  width: 30px;
  text-align: center;
}

.rating-table td:nth-child(3),
th:nth-child(3) {
  width: 200px;
  text-align: left;
}

.rating-table td:nth-child(4),
th:nth-child(4) {
  width: 50px;
  text-align: center;
}

.rating-table-container .player-image {
  width: 26px;
  height: auto;
  display: flex;
  align-items: center;
}

.rating-table .friend-highlight {
  background: url('./images/rating-table-friend-row.png') center no-repeat;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

.rating-table tbody::-webkit-scrollbar {
  width: 5px;
}

.rating-table tbody::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #19758b;
}

.rating-table tbody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #f9f9fd;
}