[html]
<div class="rfmap-wrap rfguest">
  <main class="rfmap">
    <p class="ams">
      <a href="#">ams name 1</a><a href="#">ams name 1</a><a href="#">ams name 1</a><a href="#">ams name 1</a>
      <a href="#">ams name 1</a><a href="#">ams name 1</a><a href="#">ams name 1</a><a href="#">ams name 1</a>
    </p>

    <div class="row">
      <div class="col">
        <span class="letters">девочки</span>
        <div class="list">
          <i>по 12.05 (включительно)</i>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <i>по 12.05 (включительно)</i>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
        </div>
      </div>
      <div class="col">
        <span class="letters">мальчики</span>
        <div class="list">
          <i>по 12.05 (включительно)</i>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <i>по 12.05 (включительно)</i>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
          <a class="user" href="#"><b>group names</b> — name surname</a>
        </div>
      </div>
    </div>

    <ul class="rules">
      <li>внешку держим <u>сутки за гостями</u></li>
      <li>за зарегистрированными <u>до открытия</u> при условии <u>1 соо в день</u></li>
      <li>дубли можно только осторожно :)</li>
      <li>внешность считается свободной c 00.00 по мск, если чел не оставил соо</li>
    </ul>

    <span class="room" aria-hidden="true"></span>
  </main>
</div>

<style>@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700;900&display=swap');

@font-face {
  font-family: 'rf-fa-solid';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

/* common wrapper + tokens */
.rfmap-wrap {
  --white: #fff;
  --black: #000;
  --06black: rgba(0, 0, 0, 0.6);
  --gray: #eee;
  --brand: #D99FA6;
  --font-family-jost: 'Jost', sans-serif;
  --font-family-hv: 'HomeVideo-Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --plank-gradient: linear-gradient(96deg, #ACACAC 3.85%, #E49E9B 101.34%);
  --link-gradient: linear-gradient(95.82deg, rgba(174, 174, 174, 0.35) 3.85%, rgba(228, 158, 155, 0.35) 101.34%);
  --link-gradient-hover: linear-gradient(95.82deg, rgba(228, 158, 155, 0.35) 3.85%, rgba(132, 28, 28, 0.35) 101.34%);
  --boxshadow-hover: -4px 4px 12px 0 rgba(217, 159, 166, 0.60);
  --icon-shadow-inner: 1px 1px 0px rgba(255, 255, 255, 0.5);
  --category-shadow-inner: 2px 3px 0px rgba(238, 238, 238, 0.15);
  --text-padding: 5px 8px;
  --border-dashed: 1px dashed rgba(0, 0, 0, 0.2);

  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  text-align: center;
}

/* внешности: main/background glow */
.rfmap-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: 1250px;
  height: 759px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 510px 290px at 318px 273px, rgba(175, 188, 217, 0.30), rgba(175, 188, 217, 0.11) 39%, transparent 68%),
    radial-gradient(ellipse 505px 340px at 900px 309px, rgba(199, 215, 182, 0.37), rgba(199, 215, 182, 0.12) 38%, transparent 68%),
    radial-gradient(ellipse 480px 300px at 495px 510px, rgba(217, 159, 166, 0.32), rgba(217, 159, 166, 0.10) 40%, transparent 70%);
}

.rfmap {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 890px;
  height: 759px;
  overflow: visible;
  color: var(--black);
  font-family: var(--font-family-jost);
  font-size: 10px;
  line-height: normal;
  text-align: left;
  vertical-align: top;
  background: transparent;
  isolation: isolate;
}

.rfmap,
.rfmap * {
  box-sizing: border-box;
}

.rfmap::before,
.rfmap::after {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-size: 96px;
  font-weight: 900;
  line-height: 1.33;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
}

.rfmap::before {
  content: "boys";
  left: 488px;
  top: 73px;
  color: rgba(175, 188, 217, 0.5);
}

.rfmap::after {
  content: "girls";
  left: 204px;
  top: 369px;
  color: rgba(208, 164, 160, 0.5);
}

.rfmap .rules {
  position: absolute;
  z-index: 2;
  left: 62px;
  top: 49px;
  width: 409px;
  height: 44px;
  margin: 0;
  overflow: hidden;
  color: var(--06black);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2 !important;
  text-transform: lowercase;
}

.rfmap .hint {
  position: absolute;
  z-index: 2;
  left: 719px;
  top: 49px;
  width: 111px;
  height: 24px;
  margin: 0;
  color: var(--06black);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
  text-transform: lowercase;
  white-space: nowrap;
}

.rfmap .key {
  display: inline-flex !important;
  width: 38px;
  height: 12px;
  margin-left: 3px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  background: #d9d9d9;
  color: var(--06black);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: top;
}

.rfmap .row {
  position: absolute;
  z-index: 3;
  left: 62px;
  top: 159px;
  width: 766px;
  height: 222px;
  display: flex;
  gap: 8px;
}

.rfmap .row + .row {
  top: 447px;
}

.rfmap .col {
  position: relative;
  width: 250px;
  height: 222px;
  flex: 0 0 250px;
  margin: 0;
}

.rfmap .col::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 22px;
  width: 250px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--gray);
}

.rfmap .letters {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 250px;
  height: 21px;
  margin: 0;
  padding: 0;
  color: var(--black);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.33;
  text-align: center;
  text-transform: lowercase;
  white-space: nowrap;
}

.rfmap .list {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 34px;
  width: 232px;
  height: 176px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.rfmap .list::-webkit-scrollbar { width: 4px; }
.rfmap .list::-webkit-scrollbar-track { background: transparent; }
.rfmap .list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.18);
}

.rfmap a.user {
  position: relative;
  z-index: 1;
  width: 226px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
  margin: 0;
  padding: 0 0 0 14px;
  border-bottom: var(--border-dashed);
  color: var(--black);
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
  outline: none;
  background: transparent;
  transition: font-size 160ms ease;
}

.rfmap a.user::before {
  content: "\f521";
  position: absolute;
  left: 0;
  top: 3px;
  width: 10px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8a8a8;
  font-family: 'rf-fa-solid';
  font-size: 9px;
  font-weight: 900;
  font-style: normal;
  line-height: 8px;
}

.rfmap a.user:hover,
.rfmap a.user:focus-visible {
  font-size: 10.6px;
}

.rfmap a.user b {
  font-weight: 700;
}

/* гостевая: только отличия, основные внешности выше не удалены */
.rfmap-wrap.rfguest::before {
  display: none;
}

.rfmap-wrap.rfguest .rfmap {
  width: 890px;
  height: 466px;
}

.rfmap-wrap.rfguest .rfmap::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: url('https://forumstatic.ru/files/0018/1c/bd/32450.jpg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 890px 466px;
}

.rfmap-wrap.rfguest .rfmap::after {
  content: none;
}

.rfmap .ams {
  display: none;
}

.rfmap-wrap.rfguest .ams {
  position: absolute;
  z-index: 2;
  left: 345px;
  top: 42px;
  width: 252px;
  height: 40px;
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-hv);
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  letter-spacing: -0.7px;
  text-transform: uppercase;
}

.rfmap-wrap.rfguest .ams a {
  position: absolute;
  width: 54px;
  height: 10px;
  display: block;
  color: var(--06black);
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: font-size 160ms ease;
}

.rfmap-wrap.rfguest .ams a:hover,
.rfmap-wrap.rfguest .ams a:focus-visible {
  font-size: 10.6px;
}

.rfmap-wrap.rfguest .ams a:nth-child(1) { left: 0; top: 0; }
.rfmap-wrap.rfguest .ams a:nth-child(2) { left: 77px; top: 0; }
.rfmap-wrap.rfguest .ams a:nth-child(3) { left: 151px; top: 0; }
.rfmap-wrap.rfguest .ams a:nth-child(4) { left: 48px; top: 15px; }
.rfmap-wrap.rfguest .ams a:nth-child(5) { left: 125px; top: 15px; }
.rfmap-wrap.rfguest .ams a:nth-child(6) { left: 199px; top: 15px; }
.rfmap-wrap.rfguest .ams a:nth-child(7) { left: 91px; top: 30px; }
.rfmap-wrap.rfguest .ams a:nth-child(8) { left: 166px; top: 30px; }

.rfmap-wrap.rfguest .row {
  z-index: 2;
  left: 196px;
  top: 114px;
  width: 512px;
  height: 222px;
  gap: 12px;
}

.rfmap-wrap.rfguest .row + .row {
  top: 114px;
}

.rfmap-wrap.rfguest .col::before {
  display: none;
}

.rfmap-wrap.rfguest .letters {
  position: static;
  display: block;
  width: 250px;
  height: 12px;
  margin: 0 0 10px;
  color: rgba(0, 0, 0, 0.2);
  text-shadow: var(--category-shadow-inner);
  font-size: 12px;
  line-height: 12px;
  text-align: right;
  text-transform: uppercase;
}

.rfmap-wrap.rfguest .list {
  position: static;
  width: 250px;
  height: 200px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: var(--gray);
}

.rfmap-wrap.rfguest .list i {
  width: 110px;
  min-height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px 2px 3px;
  background: var(--link-gradient);
  color: rgba(0, 0, 0, 0.5);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-transform: lowercase;
  white-space: nowrap;
}

.rfmap-wrap.rfguest .rules {
  left: 196px;
  top: 385px;
  width: 470px;
  height: auto;
  padding: 0 0 0 12px;
  overflow: visible;
  color: var(--black);
  font-size: 10px;
  line-height: 1.1 !important;
  white-space: nowrap;
}

.rfmap-wrap.rfguest .rules li {
  margin: 0 0 1px;
  padding: 0;
}

.rfmap-wrap.rfguest .rules u {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: 100% 1px;
}

.rfmap .room {
  display: none;
}

.rfmap-wrap.rfguest .room {
  position: absolute;
  z-index: 5;
  left: 602px;
  top: 310px;
  width: 271px;
  height: 149px;
  display: block;
  pointer-events: none;
  background: none;
  transform: none;
}

.rfmap-wrap.rfguest .room::before {
  content: "";
  position: absolute;
  left: -57px;
  top: -26px;
  width: 344px;
  height: 180px;
  pointer-events: none;
  background-image: url('https://forumstatic.ru/files/0018/1c/bd/67746.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 456px auto;
}</style>[/html][hideprofile]