/* ---------- Cleaned + POF-style spacing & typography tweaks ---------- */

/* Font (keep Creepster for headers; body uses clean system font for readability) */
@font-face {
  font-family: 'CreepsterLocal';
  src: url('../assets/fonts/Creepster-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===== GLOBAL BASE (NO IMAGE HERE) ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #00FF00;
  line-height: 1.45;
}

/* Page wrapper NEVER has a background */
.page-wrapper:not(.lab-page) {
  background: transparent !important;
  flex-direction: column;
  flex: 1 0 auto;
  display: flex;
  min-height: 100vh;
}

/* Keep CreepsterLocal for prominent headings only (spooky accent) */
h1, h2, .creepster {
  font-family: 'CreepsterLocal', cursive;
  letter-spacing: 0.02em;
  color: #00FF00;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.9),
     1px -1px 0 rgba(0,0,0,0.9),
    -1px  1px 0 rgba(0,0,0,0.9),
     1px  1px 0 rgba(0,0,0,0.9);
}

/* Header / nav */
header {
  background: #060606;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
}
header .logo {
  font-family: 'CreepsterLocal', cursive;
  font-size: 1.3rem;
  color: #00FF00;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Simple, compact nav buttons */
nav a {
  color: #00FF00;
  margin: 0 8px;
  text-decoration: none;
  background: #0f0f0f;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(158,255,139,0.25);
  font-size: 0.95rem;
}

/* User menu / avatar button */
.user-menu { position: relative; }
.avatar-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; }
.avatar-btn img,
.user-menu img {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #00FF00; object-fit: cover;
}
.dropdown {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  background-color: #0b0b0b;
  border: 1px solid rgba(156,255,133,0.18);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  z-index: 1000;
  flex-direction: column;
  min-width: 200px;
}
.user-menu.open .dropdown { display: block; }
.dropdown a { display:block; padding:10px 12px; color:#00FF00; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.03); }
.dropdown a:hover { background:#141414; color:#fff; }

/* Main area */
main {
  display: flex;
  justify-content: center;
  padding: 30px 20px;
  flex: 1;
  min-width: 320px;
}

/* Small buttons */
.btn-small {
  background-color: #101010;
  color: #00FF00;
  font-size: 0.88rem;
  padding: 6px 10px;
  border: 1px solid rgba(159,255,130,0.22);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
}
.btn-small:hover { transform: translateY(-1px); background-color:#00FF00; color:#0b0b0b; }

/* Toggle button (accent) */
.toggle-wrapper { text-align: center; margin: 10px 0; }
.toggle-button {
  background-color: #00FF00;
  color: #081004;
  border: none;
  padding: 8px 18px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* Utility */
.hidden { display: none !important; }

/* Song + gifts + background tags -- make subtle */
.song-box, .gifts-box, .background-name {
  background: #000;
  color: #00FF00;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(160,255,130,0.06);
}

/* Tab container */
.tabbed-content {
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 0 12px;
}
.tabpane { display: none; }
.tabpane[style*="block"] { display: block; }

/* Edit grid styling (unchanged) */
.edit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.edit-field input, .edit-field textarea, .edit-field select {
  margin-top: 0.25rem; padding: 0.45rem; border-radius: 6px; border: 1px solid rgba(160,255,130,0.14);
  background:#050505; color:#00FF00; font-size:0.95rem;
}

.edit-section {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(160, 255, 130, 0.12);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 16px;
}

.edit-section-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-family: 'CreepsterLocal', cursive;
  color: #00FF00;
}

/* Album / thumbnails */
.album-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
#albumDisplay img, #albumDisplay video {
  width:110px; height:110px; object-fit:cover; border-radius:6px; border:1px solid rgba(159,255,130,0.12); background:#000;
}

/* Lightbox */
.pfp-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.95); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
.pfp-lightbox-inner img { max-width:90vw; max-height:90vh; border-radius:12px; border:3px solid rgba(160,255,130,0.12); }

/* Subtabs */
.subtabs { position:static; z-index:500; display:flex; gap:22px; align-items:center; justify-content:center; padding:12px 16px; background:#070707; border-bottom:1px solid rgba(160,255,130,0.06); }
.subtab { background:transparent; border:none; cursor:pointer; color:#dfe; padding:6px 8px; font-size:1.05rem; }
.subtab.active { color:#00FF00; border-bottom:2px solid #9cff6b; }

/* Footer */
footer { margin-top: auto; flex-shrink: 0; background:#050505; color:#cffff0; text-align:center; padding:12px 0; border-top:1px solid rgba(160,255,130,0.06); font-size:0.9rem; }

/* ---------- PRESERVED PROFILE AREA (POF-like layout with tightened spacing) ---------- */

/* profile card grid */
.profile-card {
  display: grid;
  grid-template-columns: 300px 1fr; /* slightly narrower left column to match POF more closely */
  gap: 24px;                         /* tightened gap */
  align-items: start;
  max-width: 1100px;
  margin: 18px auto;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(8,8,8,0.65);
  border-radius: 10px;
  border: 1px solid rgba(160,255,130,0.04);
}

/* left column - avatar area */
.left-column {
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items: center; /* center avatar like POF */
}

/* avatar image (slightly smaller for better balance) */
.profile-pic-wrap img#profilePic {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid rgba(0,0,0,0.5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* profile pic container and subtle counter */
.profile-pic-wrap { position: relative; display:inline-block; }
.pfp-counter {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(0,0,0,0.5); color:#dfffe0; font-family: inherit;
  padding: 2px 8px; border-radius: 6px; font-size:0.85rem;
}

/* RIGHT COLUMN — main typography adjustments to match POF spacing */
.right-column {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;                /* consistent vertical spacing between blocks */
  font-size: 0.96rem;       /* slightly reduced for compact look */
  color: #e8fef0;
}

/* Username (keep spooky headline but reduce size) */
#usernameDisplay {
  font-family: 'CreepsterLocal', cursive;
  font-size: 30px;
  margin: 0 0 6px 0;
  color: #00FF00;
  line-height: 1.15;
}

/* small meta row under username (age/location/here-for) */
.basics-row {
  display:flex;
  gap:10px;
  align-items:center;
  color: #00FF00;
  font-size: 2rem;
  margin-bottom: 8px;
}
.basics-row .dot { width:6px; height:6px; background:#00FF00; border-radius:50%; display:inline-block; margin-right:6px; }

/* Bio block styling matched to POF: heading + tidy paragraph */
.bio-block { background: rgba(255,255,255,0.02); padding: 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.02); }
.bio-block h3 { font-family: 'CreepsterLocal', cursive; font-size: 20px; margin:0 0 8px; color:#00FF00; }
.bio-block p { margin:0; color:#00FF00; font: size 10px;; line-height:1.5; }

/* --- Profile detail sections like POF: Basics, Lifestyle, Hobbies --- */
.details-section {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.details-title {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.details-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  margin: 0;
}

.details-list dt {
  font-weight: 600;
  color: #00FF00;
}

.details-list dd {
  margin: 0 0 2px;
  color: #00FF00;
}

/* small subtle separators between major sections (POF-like clean cards) */
.right-column > .card-like {
  background: rgba(255,255,255,0.02);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(160,255,130,0.03);
}

/* Make interactive controls align to the right like POF */
.profile-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .profile-card { grid-template-columns: 1fr; padding:14px; gap:12px; }
  .left-column { align-items: center; }
  .profile-pic-wrap img#profilePic { width: 200px; height:200px; }
  .details-list { grid-template-columns: 1fr; }
}

/* final readabilty tweak */
::selection { background: rgba(156,255,130,0.14); color: #001204; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.notif-btn {
  position: relative;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  color: #15fb00; /* neon green */
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: #ff1744;
  color: #fff;
  text-align: center;
}

.hidden {
  display: none !important;
}

/* Dropdown panel */
.notif-dropdown {
  position: absolute;
  top: 52px;       /* adjust if header taller/shorter */
  right: 0;
  width: 260px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #15fb00;
  border-radius: 8px;
  padding: 0.5rem;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.notif-dropdown h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #15fb00;
}

.notif-empty {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: #aaa;
}

#notifList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.notif-item {
  padding: 0.35rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-item strong {
  font-size: 0.85rem;
  color: #fff;
}

.notif-item span {
  font-size: 0.8rem;
  color: #ccc;
}

.notif-item:hover {
  background: rgba(21, 251, 0, 0.08);
}

.dropdown a { cursor: pointer; }

.lab-prompt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lab-prompt-card {
  background: #0b0b0b;
  border: 2px solid #15fb00;
  padding: 24px;
  max-width: 420px;
  color: #fff;
  border-radius: 12px;
  text-align: center;
}

.lab-prompt-card h2 {
  color: #15fb00;
  margin-bottom: 12px;
}

.lab-prompt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

.lab-prompt-actions button {
  padding: 10px 16px;
  cursor: pointer;
}

.horror-quiz-card {
  width: 90%;
  max-width: 520px;

  background: #0b0b0b;
  border: 2px solid #15fb00;
  border-radius: 14px;

  padding: 24px;
  text-align: center;

  box-shadow: 0 0 40px rgba(21, 251, 0, 0.35);
}

/* ===============================
   GLOBAL OVERLAY BASE
================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

.overlay.hidden {
  display: none;
}

/* Dark background */
.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
}

/* Modal box */
.overlay-box {
  position: relative;
  z-index: 1;

  background: #0b0b0b;
  border: 1px solid #2aff00;
  border-radius: 12px;

  padding: 24px;
  max-width: 420px;
  width: 90%;

  box-shadow: 0 0 30px rgba(42, 255, 0, 0.25);
  text-align: center;
}

/* Horror Quiz Overlay */
#horrorQuizOverlay {
  position: fixed;
  inset: 0; /* shorthand for top/left/right/bottom = 0 */
  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.75); /* dark veil */
  backdrop-filter: blur(4px);

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

  z-index: 9999; /* higher than headers, modals, etc */
}

/* Hidden state */
#horrorQuizOverlay.hidden {
  display: none;
}

.quiz-modal {
  background: rgba(10, 10, 10, 0.95);
  border: 2px solid #15fb00;
  border-radius: 16px;

  padding: 28px 32px;
  max-width: 480px;
  width: 90%;

  box-shadow: 0 0 40px rgba(21, 251, 0, 0.4);
  text-align: center;
}

.quiz-modal h2 {
  font-family: "Creepster", cursive;
  color: #15fb00;
  margin-bottom: 12px;
}

.quiz-modal button {
  margin: 10px;
}

.secondary-btn {
  background: transparent;
  border: 1px dashed #15fb00;
  color: #15fb00;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.secondary-btn:hover {
  background: rgba(21,251,0,.1);
}

/* 🔧 MOBILE BACKGROUND FIX */
@media (max-width: 768px) {
  html {
    background-repeat: repeat !important;
    background-size: auto !important;
    background-position: top left !important;
    background-attachment: scroll !important;
  }

  body,
  .page-wrapper {
    background: transparent !important;
  }
}

.photo-slots{
  display:grid;
  grid-template-columns: repeat(5, 92px);
  gap:12px;
  margin-top:10px;
}

.photo-slot{
  width:92px;
  height:92px;
  border-radius:12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.photo-slot.empty::after{
  content:"+";
  font-size:34px;
  opacity:.6;
}

.photo-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo-slot .slot-del{
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background: rgba(0,0,0,.7);
  color:#fff;
  font-weight:700;
  line-height:24px;
  display:none;
}

.photo-slot.filled:hover .slot-del{
  display:block;
}

.photo-manager-title{
  margin:0;
  font-size:14px;
  opacity:.9;
}

/* ===== MOBILE NAV FIX ===== */
@media (max-width: 768px) {

  .nav-links,
  nav,
  .header-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .nav-links a,
  nav a,
  .header-nav a,
  .nav-button {
    flex: 1 1 45%;
    text-align: center;
    min-width: 140px;
  }
}

/* ===== FORCE FULL-WIDTH HEADER & FOOTER (MOBILE) ===== */
@media (max-width: 768px) {

  header,
  footer,
  .site-header,
  .site-footer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0;
    right: 0;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
  }
}

/* ===== MOBILE FORM FIXES ===== */
@media (max-width: 768px) {

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS zoom */
  }

  .edit-section,
  .profile-section,
  .form-group {
    width: 100%;
    overflow: visible;
  }

  .edit-grid,
  .profile-grid {
    display: block;
  }
}

@media (max-width: 768px) {
  footer {
    margin-top: 32px;
    position: relative;
    clear: both;
  }
}

@media (max-width: 768px) {
  .page-wrapper,
  .container,
  .main-wrapper,
  .site-wrapper {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  header,
  footer {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
}

@media (max-width: 768px) {

  /* Kill desktop grids */
  .edit-profile-grid,
  .profile-grid,
  .edit-grid {
    display: block !important;
  }

  /* Stack everything */
  .edit-section,
  .profile-section {
    width: 100%;
    margin-bottom: 24px;
  }

  /* Photo grids */
  .profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Inputs */
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .nav-links,
  .header-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .nav-links a,
  .header-nav a {
    width: 100%;
    text-align: center;
  }
}

/* ============================
   MOBILE LAYOUT RESET (FINAL)
============================ */
@media (max-width: 768px) {

  /* 1️⃣ Stop desktop centering */
  main {
    display: block !important;
    justify-content: unset !important;
    padding: 16px 12px !important;
  }

  /* 2️⃣ Full-width content */
  .tabbed-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3️⃣ Header & footer true full width */
  header,
  footer {
    width: 100vw !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* 4️⃣ Kill all desktop grids */
  .profile-card,
  .edit-grid,
  .settings-grid {
    display: block !important;
  }

  /* 5️⃣ Fix photo grids */
  .photo-slots {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .photo-slot {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* 6️⃣ Inputs never cut off */
  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: 16px; /* iOS zoom fix */
  }

  /* 7️⃣ Edit sections breathe */
  .edit-section {
    margin-bottom: 20px;
  }

  /* 8️⃣ Subtabs stack cleanly */
  .subtabs {
    flex-wrap: wrap;
    gap: 10px;
  }

  .subtab {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 768px) {
  header nav a {
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  header nav {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .edit-section-title {
    margin-bottom: 14px;
  }

  .edit-field {
    margin-bottom: 12px;
  }
}

@media (max-width: 768px) {
  .photo-manager-title {
    text-align: center;
    margin-bottom: 8px;
  }
}

@media (max-width: 768px) {
  .edit-save-row {
    position: sticky;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    padding: 12px;
    border-top: 1px solid rgba(160,255,130,0.12);
    z-index: 50;
  }
}

/* ===============================
   GLOBAL DROPDOWN ESCAPE FIX
   (Mobile-safe, Safari-safe)
=============================== */

.user-menu,
.header-right {
  position: relative;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .user-menu .dropdown,
  .notif-dropdown {
    top: 72px;
    right: 10px;
    left: auto;
    width: min(92vw, 320px);
  }
}