/* Classic MySpace 2006 chrome + pimped profile overrides */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #ffffff;
  background: #000000 url("../assets/effects/stars-bg.svg") repeat;
  cursor: none;
  overflow-x: hidden;
}

a { color: #ff66cc; text-decoration: underline; }
a:hover { color: #00ffff; }

img { border: 0; }

/* ---- Custom cursor ---- */
#sparkle-cursor {
  position: fixed;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 99999;
  margin-left: -4px;
  margin-top: -4px;
  background: url("../assets/effects/cursor-sparkle.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 4px #ff66cc);
}

/* ---- Glitter canvas ---- */
#glitter-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99990;
}

/* ---- Site chrome ---- */
.ms-topbar {
  background: #6698cb;
  border-bottom: 1px solid #003399;
  padding: 4px 8px;
  font-size: 10px;
  color: #fff;
  position: relative;
  z-index: 10;
}

.ms-topbar a { color: #fff; text-decoration: none; margin: 0 4px; font-weight: bold; }
.ms-topbar a:hover { text-decoration: underline; color: #ffcc00; }

.ms-header {
  background: #ffffff;
  padding: 8px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  border-bottom: 3px solid #003399;
  position: relative;
  z-index: 10;
}

.ms-logo {
  height: 48px;
  width: auto;
  max-width: 220px;
  display: block;
}

.ms-tagline {
  color: #666;
  font-size: 10px;
  font-style: italic;
  margin-left: -8px;
}

.ms-search {
  margin-left: auto;
  font-size: 11px;
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
}

.ms-search input[type="text"] {
  width: 160px;
  font-size: 11px;
  border: 1px solid #6698cb;
  padding: 2px;
}

.ms-search input[type="submit"] {
  font-size: 11px;
  background: #6698cb;
  color: #fff;
  border: 1px solid #003399;
  padding: 2px 8px;
  cursor: pointer;
}

.ms-nav {
  background: #003399;
  padding: 4px 8px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.ms-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  margin: 0 8px;
}

.ms-nav a:hover { color: #ffcc00; }

/* ---- Profile shell ---- */
.ms-wrap {
  width: 800px;
  max-width: 100%;
  margin: 12px auto 40px;
  position: relative;
  z-index: 5;
  padding: 0 8px;
}

.ms-marquee {
  background: #000;
  border: 2px solid #ff66cc;
  color: #00ffff;
  font-weight: bold;
  padding: 4px;
  margin-bottom: 10px;
  box-shadow: 0 0 12px #ff66cc;
  overflow: hidden;
}

.ms-marquee marquee {
  display: block;
  width: 100%;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
}

.profile-table > tbody > tr > td {
  vertical-align: top;
  padding: 4px;
}

.col-left { width: 300px; }
.col-right { width: auto; }

/* ---- Module boxes (classic MySpace) ---- */
.ms-box {
  background: rgba(20, 0, 30, 0.92);
  border: 2px solid #ff66cc;
  margin-bottom: 8px;
  box-shadow: 0 0 10px rgba(255, 102, 204, 0.45);
}

.ms-box-head {
  background: linear-gradient(180deg, #ff66cc 0%, #cc0077 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 6px;
  text-shadow: 1px 1px 0 #660033;
}

.ms-box-body {
  padding: 6px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.45;
}

.ms-box-body .label {
  color: #00ffff;
  font-weight: bold;
}

.display-name {
  font-size: 16px;
  font-weight: bold;
  color: #ff66cc;
  text-shadow: 0 0 8px #ff66cc;
  margin: 0 0 4px;
}

.online-now {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.profile-pic {
  width: 180px;
  height: auto;
  max-width: 100%;
  border: 3px solid #ff66cc;
  box-shadow: 0 0 14px #ff66cc;
  display: block;
  margin: 6px auto;
  background: #111;
}

.mood-row {
  text-align: center;
  margin: 4px 0 8px;
  color: #ffccff;
}

.mood-row img {
  vertical-align: middle;
  margin-left: 4px;
}

/* Contacting table — classic blue chrome */
.contact-table {
  width: 100%;
  border-collapse: collapse;
  background: #d5e8f8;
  border: 1px solid #6698cb;
  color: #000;
}

.contact-table th {
  background: #6698cb;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-align: left;
  padding: 3px 6px;
}

.contact-table td {
  padding: 3px 4px;
  vertical-align: middle;
  width: 50%;
}

.contact-table a {
  color: #003399;
  text-decoration: none;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-table a:hover { text-decoration: underline; color: #0000ff; }

.contact-table img.icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* Details / Interests tables */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table td {
  padding: 2px 4px;
  vertical-align: top;
  border-bottom: 1px dotted #663355;
}

.info-table td.k {
  width: 110px;
  color: #00ffff;
  font-weight: bold;
  white-space: nowrap;
}

.info-table td.v { color: #ffe6ff; }

/* Friend space */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}

.friend {
  display: block;
  text-decoration: none;
  color: #ff66cc;
}

.friend img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 2px solid #ff66cc;
  background: #222;
  display: block;
  margin: 0 auto 3px;
}

.friend:hover img {
  border-color: #00ffff;
  box-shadow: 0 0 8px #00ffff;
}

.friend span {
  display: block;
  font-size: 10px;
  word-break: break-all;
}

.friends-count {
  text-align: center;
  margin-bottom: 6px;
  color: #00ffff;
  font-weight: bold;
}

/* Comments */
.comment {
  display: table;
  width: 100%;
  border-bottom: 1px solid #663355;
  padding: 8px 0;
}

.comment-left {
  display: table-cell;
  width: 90px;
  vertical-align: top;
  text-align: center;
  padding-right: 8px;
}

.comment-left img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ff66cc;
}

.comment-left a {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.comment-right {
  display: table-cell;
  vertical-align: top;
  color: #ffe6ff;
}

.comment-date {
  color: #9999aa;
  font-size: 10px;
  margin-bottom: 4px;
}

.comment-body {
  font-size: 11px;
}

/* Music player fake widget */
.music-player {
  background: #111;
  border: 1px solid #ff66cc;
  padding: 6px;
  margin-top: 6px;
}

.music-player .track {
  color: #00ffff;
  font-weight: bold;
  margin-bottom: 4px;
}

.music-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

.music-controls button {
  background: #ff66cc;
  border: 1px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  cursor: pointer;
}

.music-controls button:hover { background: #00ffff; color: #000; }

.eq {
  flex: 1;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #ff66cc 0 3px,
    transparent 3px 6px
  );
  opacity: 0.35;
}

.eq.playing {
  animation: eqpulse 0.4s linear infinite;
  opacity: 1;
}

@keyframes eqpulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Blurbs */
.blurb-title {
  color: #ff66cc;
  font-weight: bold;
  font-size: 12px;
  margin: 0 0 4px;
  border-bottom: 1px solid #ff66cc;
  padding-bottom: 2px;
}

.glitter-text {
  background: linear-gradient(90deg, #ff66cc, #00ffff, #ffff00, #ff66cc);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 2s linear infinite;
  font-weight: bold;
}

@keyframes shine {
  to { background-position: 200% center; }
}

.blink-hot {
  animation: blink 0.8s step-start infinite;
  color: #ffff00;
  font-weight: bold;
}

.rickroll-link {
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  color: #ffff00 !important;
  text-decoration: underline;
  text-shadow: 0 0 8px #ff66cc, 0 0 16px #ff00aa;
  animation: blink 1.1s step-start infinite;
  border: 3px dashed #ff66cc;
  padding: 10px 14px;
  background: rgba(255, 0, 150, 0.2);
}

.rickroll-link:hover {
  color: #00ffff !important;
  border-color: #00ffff;
}

.project-link {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px dashed #ff66cc;
  background: rgba(255, 102, 204, 0.08);
}

.project-name {
  font-size: 14px;
  font-weight: bold;
  color: #00ffff;
  text-decoration: underline;
  text-shadow: 0 0 6px #00ffff;
}

.project-link a:hover .project-name {
  color: #ffff00;
  text-shadow: 0 0 8px #ffff00;
}

.project-desc {
  margin-top: 4px;
  color: #ffe6ff;
  font-size: 11px;
  line-height: 1.4;
}

.project-footer {
  text-align: center;
  margin: 8px 0 0;
}

.footer-ms {
  text-align: center;
  color: #888;
  font-size: 10px;
  padding: 20px 8px 40px;
  position: relative;
  z-index: 5;
}

.footer-ms a { color: #6698cb; }

/* View counter */
.view-count {
  text-align: center;
  margin: 8px 0;
  font-family: "Courier New", monospace;
  color: #00ff00;
  text-shadow: 0 0 6px #00ff00;
}

/* Responsive for phones — keep the chaos, make it usable */
@media (max-width: 820px) {
  body {
    cursor: auto;
    font-size: 13px;
  }

  #sparkle-cursor { display: none; }

  .ms-topbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 8px;
    scrollbar-width: none;
  }

  .ms-topbar::-webkit-scrollbar { display: none; }

  .ms-topbar a {
    margin: 0 6px;
    flex-shrink: 0;
  }

  .ms-header {
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;
  }

  .ms-logo {
    height: 36px;
    max-width: 160px;
  }

  .ms-search {
    width: 100%;
    margin-left: 0;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .ms-search input[type="text"] {
    flex: 1;
    min-width: 120px;
    width: auto;
    font-size: 16px; /* avoids iOS zoom */
    padding: 6px;
  }

  .ms-search input[type="submit"] {
    font-size: 13px;
    padding: 6px 12px;
  }

  .ms-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
    padding: 6px 4px;
  }

  .ms-nav a {
    font-size: 12px;
    margin: 2px 6px;
    padding: 4px 2px;
  }

  .ms-wrap {
    width: 100%;
    margin: 8px auto 24px;
    padding: 0 6px;
  }

  /* Only stack the main two profile columns — not nested tables */
  .profile-table {
    display: block;
    width: 100%;
  }

  .profile-table > tbody {
    display: block;
    width: 100%;
  }

  .profile-table > tbody > tr {
    display: block;
    width: 100%;
  }

  .profile-table > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 2px 0;
  }

  .col-left,
  .col-right {
    width: 100% !important;
  }

  .display-name {
    font-size: 20px;
  }

  .profile-pic {
    width: min(220px, 70vw);
  }

  .ms-box-body {
    font-size: 13px;
    padding: 8px;
  }

  .ms-box-head {
    font-size: 13px;
    padding: 6px 8px;
  }

  /* Contact grid stays 2-col, bigger tap targets */
  .contact-table {
    table-layout: fixed;
  }

  .contact-table td {
    width: 50%;
    padding: 0;
  }

  .contact-table a {
    font-size: 12px;
    padding: 10px 6px;
    min-height: 44px;
  }

  .contact-table img.icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .info-table td.k {
    width: 90px;
    font-size: 12px;
  }

  .info-table td.v {
    font-size: 12px;
  }

  .friends-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .friend img {
    width: 100%;
    max-width: 72px;
    height: auto;
    aspect-ratio: 1;
  }

  .rickroll-link {
    font-size: 16px;
    padding: 12px 10px;
    max-width: 100%;
  }

  .music-controls button {
    font-size: 13px;
    padding: 8px 14px;
    min-height: 40px;
  }

  .comment {
    display: flex;
    gap: 8px;
  }

  .comment-left,
  .comment-right {
    display: block;
  }

  .comment-left {
    width: 70px;
    flex-shrink: 0;
    padding-right: 0;
  }

  .footer-ms {
    font-size: 11px;
    line-height: 1.8;
    padding-bottom: 48px;
  }
}

@media (max-width: 420px) {
  .friends-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-table a {
    font-size: 11px;
    flex-direction: column;
    text-align: center;
    gap: 4px;
    justify-content: center;
  }

  .info-table,
  .info-table tbody,
  .info-table tr,
  .info-table td {
    display: block;
    width: 100%;
  }

  .info-table td.k {
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
  }

  .info-table td.v {
    padding-top: 2px;
    padding-bottom: 8px;
  }
}