/* ================================================
   PROFILE PAGE  -  ARISUE.NET
   ================================================ */

.profile-body {
  background-color: #08001a;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 16px,
      rgba(100, 0, 160, 0.12) 16px, rgba(100, 0, 160, 0.12) 17px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 16px,
      rgba(0, 60, 120, 0.12) 16px, rgba(0, 60, 120, 0.12) 17px
    ),
    radial-gradient(ellipse at 30% 20%, #1a003a 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, #001a3a 0%, transparent 55%);
}

/* ── Page wrapper ─────────────────────────── */
#profile-wrap {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 15px 18px 20px;
  background: rgba(0, 0, 12, 0.78);
  border: 3px double #cc00ff;
  box-shadow: 0 0 30px #cc00ff33;
}

/* ── Header ───────────────────────────────── */
#profile-header {
  margin: 10px 0 8px;
}

#profile-title {
  font-size: 28px;
  font-weight: bold;
  color: #ff88ff;
  text-shadow: 0 0 15px #ff00ff, 0 0 30px #ff00ff66;
}

/* ── Back nav ─────────────────────────────── */
.back-nav {
  margin: 10px 0;
}

/* ── Profile layout (photo + table side by side) ── */
.prof-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 14px auto;
}

/* ── Photo column ─────────────────────────── */
.photo-cell {
  background: #0e0030;
  text-align: center;
  padding: 15px;
  width: 210px;
  flex-shrink: 0;
  border: 3px ridge #cc00ff;
}

.photo-frame {
  display: inline-block;
  border: 3px ridge #8800cc;
  padding: 4px;
  background: #050010;
  box-shadow: 0 0 18px #8800cc66;
}

.profile-photo {
  display: block;
  width: 170px;
  height: auto;
  filter: sepia(0.15) contrast(1.05);
}

/* ── Profile table ────────────────────────── */
.prof-table {
  border-collapse: collapse;
  border: 3px ridge #cc00ff;
  background: #06001a;
  align-self: flex-start;
}

.prof-label {
  background: #1e0040;
  color: #dd88ff;
  font-size: 15px;
  padding: 8px 14px;
  border-right: 1px solid #880088;
  border-bottom: 1px solid #330055;
  white-space: nowrap;
  text-shadow: 0 0 6px #cc00ff;
  min-width: 85px;
  text-align: left;
}

.prof-val {
  background: #080018;
  color: #ccffcc;
  font-size: 15px;
  padding: 8px 16px;
  border-bottom: 1px solid #220033;
  min-width: 200px;
  text-align: left;
}

/* ── Self-intro ───────────────────────────── */
#intro-section {
  margin: 18px auto;
  max-width: 520px;
}

.intro-box {
  background: #080018;
  border: 2px solid #880088;
  padding: 16px 22px;
  color: #eeccff;
  font-size: 16px;
  line-height: 2.2;
  text-align: left;
  box-shadow: inset 0 0 14px #44000066;
}

.intro-box p {
  margin: 4px 0;
}

/* ── Banner in profile ────────────────────── */
.banner-img {
  border: 1px solid #555;
  vertical-align: middle;
}

.banner-img:hover {
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}

/* ================================================
   MOBILE RESPONSIVE  (max-width: 600px)
   ================================================ */
@media (max-width: 600px) {
  #profile-wrap {
    padding: 10px 10px 16px;
    border-width: 2px;
  }

  #profile-title {
    font-size: 22px;
  }

  /* 写真とテーブルを縦並びに */
  .prof-layout {
    flex-direction: column;
    align-items: center;
  }

  .photo-cell {
    width: 100%;
    max-width: 260px;
  }

  .profile-photo {
    width: 140px;
  }

  .prof-table {
    width: 100%;
  }

  .prof-label {
    font-size: 14px;
    padding: 7px 10px;
    min-width: 70px;
  }

  .prof-val {
    font-size: 14px;
    padding: 7px 10px;
    min-width: 0;
    word-break: break-word;
  }

  #intro-section {
    max-width: 100%;
  }

  .intro-box {
    font-size: 15px;
    padding: 12px 14px;
  }
}