@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  --text: #ffffff;
  --muted: rgba(255,255,255,.84);
  --glass: rgba(255,255,255,.16);
  --glass-strong: rgba(255,255,255,.24);
  --line: rgba(255,255,255,.35);
  --shadow: 0 18px 50px rgba(27, 23, 83, .25);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #6670ba;
  overflow-x: hidden;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(63,56,145,.15), rgba(34,30,92,.55)),
    url("../assets/background.jpg") center top / cover no-repeat;
  transform: scale(1.04);
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(104,89,207,.10), rgba(30,27,88,.48));
}
.page-glow {
  position: fixed;
  z-index: -2;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .30;
  pointer-events: none;
}
.glow-a { top: 5%; left: -180px; background: #ffd4ee; }
.glow-b { right: -180px; bottom: 5%; background: #79c9ff; }

.container {
  width: min(100% - 28px, 600px);
  margin: 0 auto;
  padding: 48px 0 32px;
}

.profile { text-align: center; }
.avatar-wrap {
  position: relative;
  display: inline-block;
}
.avatar {
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 8px 30px rgba(29,24,85,.28);
}
.status-dot {
  position: absolute;
  right: 4px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: #6de2a1;
}
h1 {
  margin: 14px 0 4px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: .03em;
  text-shadow: 0 3px 18px rgba(22,20,66,.3);
}
.bio {
  margin: 20px auto 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
  text-shadow: 0 2px 10px rgba(21,20,63,.35);
}

.socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 17px 0 24px;
}
.social {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 20px rgba(28,24,88,.12);
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.social:hover, .social:focus-visible {
  transform: translateY(-3px) scale(1.04);
  background: rgba(255,255,255,.30);
  box-shadow: 0 12px 28px rgba(28,24,88,.20);
}
.social:active { transform: scale(.94); }

.links { display: grid; gap: 12px; }
.link-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 86px;
  padding: 9px 17px 9px 9px;
  overflow: hidden;
  color: #2f326b;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.60);
  border-radius: var(--radius);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, box-shadow .22s ease;
}
.link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.42) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.link-card:hover {
  transform: translateY(-3px) scale(1.008);
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 60px rgba(29,24,85,.28);
}
.link-card:hover::after { transform: translateX(130%); }
.link-card:active { transform: scale(.985); transition-duration: .08s; }

.link-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 15px;
}
.thumb-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(127,132,213,.65), rgba(173,174,236,.85));
  color: #fff;
  font-size: 25px;
}
.link-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: 0;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 13px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(30,25,86,.15);
}
.link-icon.pixiv { background: #19a7e8; }
.link-icon.x { background: #11152a; }
.link-icon.booth { background: #ef4f70; }
.link-icon.member { background: #7258e9; }
.link-icon.other { background: #7d87c7; }

.link-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 12px;
}
.link-copy strong {
  font-size: 15px;
  line-height: 1.3;
}
.link-copy small {
  color: #666b9d;
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arrow {
  margin-left: auto;
  padding-left: 10px;
  font-size: 31px;
  font-weight: 300;
  line-height: 1;
  color: #55609a;
  transition: transform .2s ease;
}
.link-card:hover .arrow { transform: translateX(4px); }

.section-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 32px 0 15px;
  color: rgba(255,255,255,.96);
  font-size: 12px;
  letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(25,20,72,.3);
}
.section-title span { height: 1px; flex: 1; background: rgba(255,255,255,.55); }
.section-title b { font-weight: 500; white-space: nowrap; }

.follow-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.circle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}
.circle img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.circle:hover { transform: translateY(-3px); background: rgba(255,255,255,.28); }
.circle:active { transform: scale(.93); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.gallery-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: 0 10px 25px rgba(29,24,85,.18);
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-grid a:hover img { transform: scale(1.07); }

footer {
  margin-top: 30px;
  text-align: center;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 12px rgba(25,20,72,.35);
}
footer p { margin: 0 0 18px; font-size: 12px; }
footer p span { margin-left: 4px; }
footer small { font-size: 11px; opacity: .75; }

@media (max-width: 430px) {
  .container { width: min(100% - 20px, 600px); padding-top: 34px; }
  .avatar { width: 94px; height: 94px; }
  h1 { font-size: 25px; }
  .bio { font-size: 12px; }
  .social { width: 39px; height: 39px; }
  .link-card { min-height: 78px; padding-right: 13px; }
  .link-thumb { width: 58px; height: 58px; border-radius: 13px; }
  .link-icon { width: 40px; height: 40px; margin-left: 0; border-radius: 12px; font-size: 19px; }
  .link-copy { margin-left: 9px; }
  .link-copy strong { font-size: 14px; }
  .link-copy small { font-size: 10px; }
  .gallery-grid { gap: 7px; }
  .gallery-grid a { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* v0.2 brand icons */
.brand-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  background: rgba(255,255,255,.92);
}
.brand-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-icon img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.brand-icon.fanza { background: #fff; }
.brand-icon.dlsite { background: #fff; }
.fanza-thumb img { transform: scale(.95); }
.dlsite-thumb img { transform: scale(1.02); }
@media (max-width: 600px) {
  .brand-thumb { padding: 8px; }
  .brand-icon img { width: 29px; height: 29px; }
}

/* v0.3 custom creator links */
.brand-icon { background: #fff; }
.brand-icon img { width: 31px; height: 31px; object-fit: contain; }
.brand-icon.fanza img, .brand-icon.dlsite img { width: 34px; height: 28px; }
.brand-icon.xenochat { background: transparent; }
.brand-icon.pictspace { background: #4b78e8; }
.brand-icon.discord { background: #5865f2; }
.brand-icon.email { background: #5967a8; }
.contact-copy { font: inherit; text-align: left; border: 1px solid rgba(255,255,255,.60); width: 100%; cursor: pointer; }
.contact-copy .copy-note { font-size: .9em; opacity: .8; }
.contact-copy.copied .copy-note { color: #5967a8; font-weight: 700; }
@media (max-width: 430px) { .brand-icon img { width: 28px; height: 28px; } .brand-icon.fanza img, .brand-icon.dlsite img { width: 31px; height: 26px; } }

/* ==========================================
   Language Switcher
   ========================================== */

.language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.language-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.language-button:hover {
  color: rgba(255, 255, 255, 0.9);
}

.language-button.active {
  color: #ffffff;
}

.language-separator {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}