/* GS - GameScape Online: member profile overlay + Friends tab. Square neon glass. */
.gsp-overlay {
  --gsl-cyan: #22e4ff;
  --gsl-mag: #e03cff;
  --gsl-grad: linear-gradient(90deg, #22e4ff 0%, #4f7bff 45%, #e03cff 100%);
  position: fixed;
  inset: 0;
  z-index: 3050;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(5 4 15 / 60%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: "Exo 2", system-ui, sans-serif;
  color: #eef1ff;
}
.gsp-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid rgb(34 228 255 / 50%);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 14%) 0%, rgb(255 255 255 / 0%) 90px),
    radial-gradient(520px 260px at 100% 0%, rgb(224 60 255 / 18%), transparent 70%),
    radial-gradient(520px 300px at 0% 100%, rgb(34 228 255 / 14%), transparent 70%),
    rgb(12 10 34 / 95%);
  box-shadow: 0 0 34px rgb(34 228 255 / 25%), 0 30px 80px rgb(0 0 0 / 70%), inset 0 1px 0 rgb(255 255 255 / 30%);
  scrollbar-width: thin;
  scrollbar-color: rgb(160 90 255 / 50%) transparent;
  animation: gsl-in .22s cubic-bezier(.2, .7, .2, 1) both;
}
.gsp-close { position: absolute; top: 12px; right: 12px; }
.gsp-head { display: flex; align-items: center; gap: 16px; padding-right: 40px; }
.gsp-avatar {
  flex: none;
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 3px;
  background: linear-gradient(#0a0820, #0a0820) padding-box, var(--gsl-grad) border-box;
  box-shadow: 0 0 18px rgb(34 228 255 / 35%);
}
.gsp-name {
  margin: 0 0 6px;
  font: 800 26px/1.1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .03em;
  word-break: break-word;
  background: var(--gsl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gsp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.gsp-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgb(215 222 255 / 65%); }
.gsp-state::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: rgb(215 222 255 / 35%); }
.gsp-state.on { color: #a9f3ff; }
.gsp-state.on::before { background: var(--gsl-cyan); box-shadow: 0 0 8px var(--gsl-cyan); }

.gsp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 18px 0 14px; }
.gsp-stats div {
  padding: 10px 12px;
  border: 1px solid rgb(120 140 255 / 22%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%), rgb(5 4 15 / 45%);
}
.gsp-stats dt { font: 700 10px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgb(200 205 255 / 60%); }
.gsp-stats dd { margin: 6px 0 0; font: 700 17px/1.1 "Orbitron", system-ui, sans-serif; color: #fff; }
.gsp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gsp-acts .gsl-act { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
.gsp-now {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgb(224 60 255 / 50%);
  border-radius: 2px;
  background: rgb(224 60 255 / 10%);
  color: #f3b3ff;
  text-decoration: none;
  font-weight: 600;
}
.gsp-now:hover, .gsp-now:focus-visible { border-color: var(--gsl-cyan); outline: none; color: #fff; }

.gsp-sec { margin-top: 14px; }
.gsp-h { margin: 0 0 8px; font: 700 11px/1 "Orbitron", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gsl-cyan); }
.gsp-strip { display: flex; gap: 10px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(160 90 255 / 50%) transparent; }
.gsp-game { display: flex; flex-direction: column; gap: 3px; width: 92px; color: #fff; text-decoration: none; }
.gsp-game img {
  width: 92px;
  height: 124px;
  object-fit: cover;
  border: 1px solid rgb(34 228 255 / 40%);
  border-radius: 2px;
  background: #0a0820;
}
.gsp-game:hover img, .gsp-game:focus-visible img { border-color: var(--gsl-cyan); box-shadow: 0 0 12px rgb(34 228 255 / 45%); }
.gsp-game:focus-visible { outline: none; }
.gsp-game__name { font-size: 12px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gsp-game__plat { font-size: 10.5px; color: #a9f3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsp-muted { margin: 4px 0; font-size: 13px; color: rgb(215 222 255 / 60%); }
.gsp-foot { margin-top: 16px; font-size: 11.5px; }

/* Friends tab */
.gsp-add { display: flex; gap: 8px; margin-bottom: 10px; }
.gsp-add .gsl-input { flex: 1; min-width: 0; height: 38px; }
.gsp-friends { padding: 0; overflow: visible; }
.gsl-dot.is-off { background: rgb(215 222 255 / 30%); box-shadow: none; }

@media (width < 600px) {
  .gsp-card { padding: 18px; }
  .gsp-avatar { width: 58px; height: 58px; }
  .gsp-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .gsp-card { animation: none; } }