/* Hero rebuilt from a single coherent illustration, without overlaid member-name labels. */
.hero{background:radial-gradient(ellipse at 50% 40%,#a238ab,#210e49 75%,#100522)}
.hero-stage,.hero-pink-glow,.hero-noise{display:none}
.hero-illustration{position:absolute;z-index:3;inset:0;background:url('./assets/hero-unified.webp') center top / cover no-repeat;animation:hero-arrive 1.25s ease-out both;pointer-events:none}
.hero:before{z-index:4;background:linear-gradient(180deg,rgba(8,7,40,.2),transparent 25%,transparent 63%,rgba(16,5,34,.38) 84%,#0c062ccc)}
.hero .rays{z-index:4;opacity:.45}.hero-stars{z-index:5}.hero-sidecopy{z-index:6;top:160px;right:1%}
.hero-title-wrap{z-index:10;top:45%}.hero-live-data{z-index:11}.hero .bottom-crowd{z-index:5;opacity:.5}
@keyframes hero-arrive{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
/* Member editorial gallery */
.member-feature{position:relative;padding:100px clamp(16px,5vw,72px) 105px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#3c0f58 0%,#9a2d86 31%,#e45aa5 66%,#531267 100%)}
.member-feature:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.52;background:radial-gradient(ellipse at 50% 10%,#ffc6e6 0%,transparent 60%),radial-gradient(ellipse at 9% 45%,#419eff 0%,transparent 40%),radial-gradient(ellipse at 90% 42%,#7fd9ff 0%,transparent 43%)}
.member-feature-glow{position:absolute;pointer-events:none;z-index:-1;inset:0;background-image:radial-gradient(#fff9 1.3px,transparent 2px);background-size:31px 31px;mask-image:linear-gradient(180deg,transparent,#0006 45%,transparent)}
.member-feature-heading{text-align:center;margin:auto auto 54px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-shadow:0 2px 16px #4c0b63}
.member-feature-heading p{width:100%;order:-2;margin:0;font-size:13px;font-weight:800;letter-spacing:.18em;color:#fff0f9}
.member-feature-heading h2{margin:0;font-size:clamp(34px,4.1vw,61px);font-weight:900;letter-spacing:.08em;white-space:nowrap}
.member-feature-line{width:clamp(20px,9vw,145px);height:1px;background:linear-gradient(90deg,transparent,#ffffffbd,transparent)}
.member-feature-grid{position:relative;max-width:1140px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(12px,2vw,32px)}
.member-feature-person{min-width:0;position:relative;--member-accent:#69aaff;transition:transform .32s;filter:drop-shadow(0 17px 24px #2508378f)}
.member-feature-person:hover{transform:translateY(-9px)}
.member-color-pink{--member-accent:#ff78c9}.member-color-aqua{--member-accent:#76d9fa}
.member-feature-portrait{width:100%;aspect-ratio:4/5;position:relative;background:linear-gradient(145deg,var(--member-accent),#350f67);overflow:hidden;clip-path:polygon(0 2%,98% 0,100% 98%,2% 100%);box-shadow:0 0 0 4px #fff}
.member-feature-portrait:before{content:'';position:absolute;inset:0;background:var(--member-image) center top/cover no-repeat;transition:transform .8s ease}
.member-feature-person:hover .member-feature-portrait:before{transform:scale(1.045)}
.member-feature-portrait:after{content:'';position:absolute;inset:0;border:6px solid #fff7;box-shadow:inset 0 0 45px #fff6;pointer-events:none}
.member-feature-caption{position:relative;text-align:center;padding:17px 6px 0;text-shadow:0 2px 14px #330e5f}
.member-feature-color{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.12em;padding:5px 16px;border-top:1px solid #fffd;border-bottom:1px solid #fffd}
.member-feature-caption h3{font-size:clamp(18px,2.15vw,31px);white-space:nowrap;margin:9px 0 2px;font-weight:900;letter-spacing:.04em}
.member-feature-roman{font:700 10px 'DM Sans',sans-serif;letter-spacing:.21em;opacity:.7}
.member-feature-bottom{text-align:center;margin:55px auto 0;font-size:clamp(17px,2.2vw,28px);font-weight:900;letter-spacing:.13em;text-shadow:0 0 20px #ff78ce}
@media(max-width:800px){.hero-illustration{background-size:auto 70%;background-position:center 62px}.hero-title-wrap{top:42%}.member-feature{padding:75px 22px 78px}.member-feature-grid{gap:11px}}
@media(max-width:580px){.hero-illustration{background-size:130% auto;background-position:center 82px}.hero-title-wrap{top:37%}.hero-sidecopy{right:2%;top:90px}.member-feature{padding:68px 14px 74px}.member-feature-heading{margin-bottom:30px}.member-feature-heading h2{font-size:32px}.member-feature-line{width:24px}.member-feature-grid{grid-template-columns:1fr;gap:21px;max-width:390px}.member-feature-person{display:grid;grid-template-columns:46% 54%;align-items:center;gap:0;filter:drop-shadow(0 12px 18px #25083775)}.member-feature-person:nth-child(2){direction:rtl}.member-feature-person:nth-child(2)>*{direction:ltr}.member-feature-portrait{aspect-ratio:4/5}.member-feature-portrait:after{border-width:3px;box-shadow:inset 0 0 16px #fff8}.member-feature-color{font-size:11px;padding:5px 12px;letter-spacing:.08em}.member-feature-caption{padding:12px 4px}.member-feature-caption h3{font-size:clamp(19px,5vw,23px);letter-spacing:.02em}.member-feature-roman{font-size:9px;letter-spacing:.08em}.member-feature-bottom{font-size:17px;margin-top:39px}}
@media(prefers-reduced-motion:reduce){.hero-illustration{animation:none}.member-feature-person,.member-feature-portrait:before{transition:none}}


/* v21: nicknames – integrated typographic accent; no generic cards or badges. */
.member-feature-nickname{display:flex;align-items:baseline;justify-content:center;gap:.5em;margin:14px auto 0;line-height:1.4;white-space:nowrap;transform:rotate(-2deg)}
.member-feature-nickname-label{font-family:'Zen Maru Gothic',sans-serif;font-size:clamp(10px,.85vw,12px);font-weight:700;letter-spacing:.06em;color:#fff;opacity:.95}
.member-feature-nickname strong{position:relative;display:inline-block;color:#fff;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:clamp(22px,2.15vw,32px);font-weight:900;letter-spacing:.025em;text-shadow:0 2px 1px rgba(51,6,79,.55), 0 0 13px var(--member-accent), 0 0 26px var(--member-accent)}
.member-feature-nickname strong:after{content:'';position:absolute;bottom:-4px;left:4%;width:94%;height:5px;border-radius:100%;background:var(--member-accent);transform:rotate(-3deg);box-shadow:0 2px 9px rgba(255,255,255,.6)}
@media(max-width:580px){
 .member-feature-nickname{margin-top:11px;gap:.38em}
 .member-feature-nickname-label{font-size:10px}
 .member-feature-nickname strong{font-size:clamp(20px,5.5vw,25px)}
}


/* Ver.45 — member social links, same visual language as member portraits */
.member-color-blue {--member-accent:#5a9dff;}
.member-x-link {
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;max-width:100%;margin:25px auto 0;padding:9px 20px;
  border:1px solid rgba(255,255,255,.8);border-radius:100px;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(19,9,52,.38));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 19px rgba(21,7,56,.3),0 0 18px color-mix(in srgb,var(--member-accent) 42%,transparent);
  color:#fff;text-decoration:none!important;
  font:800 12px/1.35 'Zen Maru Gothic','Noto Sans JP',sans-serif;
  letter-spacing:.065em;text-shadow:0 1px 7px rgba(17,4,48,.55);
  transition:background .2s,box-shadow .2s,transform .2s;
}
.member-x-logo {display:block;flex:0 0 17px;filter:drop-shadow(0 1px 3px rgba(12,3,37,.25));}
.member-x-link:hover,.member-x-link:focus-visible {
  transform:translateY(-2px);
  background:linear-gradient(135deg,color-mix(in srgb,var(--member-accent) 45%,rgba(255,255,255,.2)),rgba(19,9,52,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 9px 23px rgba(21,7,56,.5),0 0 22px color-mix(in srgb,var(--member-accent) 52%,transparent);
}
.member-x-link:focus-visible {outline:3px solid #fff;outline-offset:4px;}
@media(max-width:580px){
  .member-x-link{margin-top:19px;padding:10px 12px;min-height:40px;gap:7px;font-size:11px;letter-spacing:0;}
  .member-x-logo{width:15px;height:15px;flex-basis:15px;}
}
@media(prefers-reduced-motion:reduce){.member-x-link{transition:none;}}


/* Ver.46 — Xのロゴだけで構成するコンパクトなプロフィールボタン */
.member-feature .member-x-link {
  width:48px; height:48px; min-height:48px; max-width:none;
  padding:0; gap:0; border-radius:50%;
  margin:21px auto 0;
}
.member-feature .member-x-logo {
  display:block; width:20px; height:20px; flex:0 0 20px;
}
@media(max-width:580px){
  .member-feature .member-x-link {width:44px;height:44px;min-height:44px;margin-top:17px;padding:0;gap:0;}
  .member-feature .member-x-logo {width:19px;height:19px;flex-basis:19px;}
}


/* Ver.52 — Risa's TikTok, aligned to the right of her existing X button. */
.member-feature .member-social-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:21px auto 0;
}
.member-feature .member-social-links .member-x-link { margin:0; }
.member-feature .member-tiktok-logo {
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
}
@media(max-width:580px) {
  .member-feature .member-social-links { margin-top:17px;gap:12px; }
  .member-feature .member-tiktok-logo { width:19px;height:19px;flex-basis:19px; }
}


/* Ver.54 — Risa member portrait: show the supplied photo with a real <img>.
   Keeps the original card geometry; avoids CSS-background-only image loading. */
.member-color-pink .member-feature-portrait::before{content:none!important;}
.member-color-pink .member-feature-portrait>img{
  position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  object-position:center 14%;
  transition:transform .8s ease;
}
.member-color-pink:hover .member-feature-portrait>img{transform:scale(1.045);}
@media(prefers-reduced-motion:reduce){.member-color-pink .member-feature-portrait>img{transition:none;}}

/* Ver.71: Saveable native image elements for A-rin and Reina (match Risa).
   Preserve center-top cover crop, card shape, and hover treatment. */
.member-color-blue .member-feature-portrait::before,
.member-color-aqua .member-feature-portrait::before { content:none!important; }
.member-color-blue .member-feature-portrait>img,
.member-color-aqua .member-feature-portrait>img {
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;
  transition:transform .8s ease;
  -webkit-touch-callout:default;
  -webkit-user-select:auto;
  user-select:auto;
  pointer-events:auto;
}
.member-color-blue:hover .member-feature-portrait>img,
.member-color-aqua:hover .member-feature-portrait>img { transform:scale(1.045); }
@media(prefers-reduced-motion:reduce) {
  .member-color-blue .member-feature-portrait>img,
  .member-color-aqua .member-feature-portrait>img { transition:none; }
}