@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Inter:wght@300&display=swap');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* CSS is in css/pages, so go up twice to reach /assets */
  background-image: url("../../assets/backgrounds/rel_tester.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #f2f2f2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: -1;
}

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

/* Return button */
.return-btn {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  z-index: 10;
}

/* Layout */
.wrap {
  width: min(1300px, 95vw);

  height: 100vh;          /* key */
  overflow: hidden;       /* key: page stays locked */

  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  align-items: start;
}

.main {
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 14px;

  height: 100%;           /* key */
  overflow-y: auto;       /* key */
  overflow-x: hidden;

  min-height: 0;          /* key for grid children to scroll */
}


/* Title box */
.titlebox {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.78);
  text-align: center;
}

.titlebox h1 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.15em;
  color: #c9b2ff;
  font-size: 3rem;
}

.titlebox p {
  margin: 8px 0 0;
  font-size: 1rem;
  opacity: 1;
}

/* Filter + clear row */
.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Shorter filter input */
#filter {
  flex: 1;
}

/* Clear button */
.clear-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgb(59, 0, 0);
  color: #ff0000;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.clear-btn:hover {
  background: rgba(255,255,255,0.15);
}


/* Character grid */
.select-area {
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #000000;
}

.char-btn {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
}

.char-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  pointer-events: none;
}

.char-btn.selected-a { border-color: #4da6ff; }
.char-btn.selected-b { border-color: #ff4d6d; }

/* Test button */
.test-btn {
  align-self: center;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #000;
  cursor: pointer;
}

/* Result area */
.result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 200px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(43, 43, 43, 0.596);
}

.side {
  text-align: center;
  font-weight: 600;
  opacity: 0.92;
}

.side img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 6px;
}

.center {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

/* Arrows */
.arrow {
  font-size: 4.1rem;
  text-align: center;
  font-weight: 900;

  text-shadow:
    -0.5px -0.5px 0 #ffffff,
     0.5px -0.5px 0 #ffffff,
    -0.5px  0.5px 0 #ffffff,
     0.5px  0.5px 0 #ffffff;
}

.arrow .caption {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  margin-bottom: 8px;
  color: #f2f2f2;
  text-shadow: none;
}

.arrow.love { color: #ff5e99; }
.arrow.lust { color: #ff0055; }
.arrow.best-friends { color: #009e22; }
.arrow.friends { color: #27d168; }
.arrow.acquainted { color: #cccccc; }
.arrow.not-great { color: #0077ff; }
.arrow.confused { color: #9000ff; }

/* Legend */
.legend {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgb(0, 0, 0);
  align-self: start;
}

.legend-title {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  opacity: 1;
  margin-bottom: 10px;
}

.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.legend-pill {
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.legend-pill.love { color: #ff5e99; }
.legend-pill.lust { color: #ff0055; }
.legend-pill.best-friends { color: #009e22; }
.legend-pill.friends { color: #27d168; }
.legend-pill.acquainted { color: #cccccc; }
.legend-pill.not-great { color: #0077ff; }
.legend-pill.confused { color: #9000ff; }