* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #090604;
}

body {
  min-height: 100vh;
  overflow: hidden;
}

.page-bg {
  position: fixed;
  inset: -30px;
  background-image:
    linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)),
    url("frecia254-social.png");
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.06);
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;

  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.artboard {
  position: relative;

  /* Zachowuje dokładne proporcje oryginalnego obrazu 1402x1122. */
  width: min(100vw, calc(100vh * 1402 / 1122));
  aspect-ratio: 1402 / 1122;

  max-height: 100vh;

  box-shadow: 0 0 55px rgba(0,0,0,.58);
}

.main-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Klikalne pola leżą dokładnie na kafelkach widocznych na grafice. */
.hotspot {
  position: absolute;
  display: block;
  z-index: 5;

  cursor: pointer;
  border-radius: 22px;
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Delikatne podświetlenie po najechaniu — nie zmienia grafiki. */
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  opacity: 0;

  border: 2px solid rgba(255, 198, 74, .82);
  box-shadow:
    0 0 18px rgba(255, 177, 45, .38),
    inset 0 0 16px rgba(255, 194, 70, .10);

  transition: opacity .14s ease;
  pointer-events: none;
}

.hotspot:hover::after,
.hotspot:focus-visible::after {
  opacity: 1;
}

/* Współrzędne procentowe względem oryginalnego obrazu. */
.discord {
  left: 35.7%;
  top: 37.3%;
  width: 17.2%;
  height: 9.5%;
}

.instagram {
  left: 53.5%;
  top: 37.3%;
  width: 17.2%;
  height: 9.5%;
}

.tiktok {
  left: 35.7%;
  top: 48.9%;
  width: 17.2%;
  height: 9.4%;
}

.kick {
  left: 53.5%;
  top: 48.9%;
  width: 17.2%;
  height: 9.4%;
}

.youtube {
  left: 41.1%;
  top: 60.2%;
  width: 23.7%;
  height: 10.0%;
}

@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .page {
    min-height: 100svh;
  }

  .hotspot {
    border-radius: 14px;
  }
}