/* Result experience v2: mascot-first, social, mobile-first */
.result-world-v2 { gap: 16px; }

.result-profile-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.95), transparent 27%),
    radial-gradient(circle at 88% 10%, rgba(255,178,205,.48), transparent 28%),
    linear-gradient(145deg,#fff9f5 0%,#ffeaf2 46%,#eee7ff 100%);
  box-shadow: 0 24px 70px rgba(83,48,84,.14);
}
.result-profile-card::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: -100px;
  bottom: -110px;
  border-radius: 999px;
  background: rgba(255,183,135,.2);
}
.result-profile-topline {
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}
.result-ribbon {
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 15px;
  border-radius:999px;
  background:#fff;
  color:#b5486c;
  border:1px solid rgba(181,72,108,.12);
  box-shadow:0 8px 22px rgba(92,55,88,.08);
  font-size:12px;
  font-weight:950;
}
.result-id-chip {
  padding:8px 12px;
  border-radius:999px;
  background:#34283e;
  color:#fff;
  font-size:9px;
  font-weight:950;
  letter-spacing:.09em;
}
.result-profile-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(240px,.82fr) minmax(0,1.18fr);
  gap:26px;
  align-items:center;
}
.result-character-column { min-width:0; }
.result-copy-column { min-width:0; text-align:left; }
.result-copy-column h1 {
  margin:13px 0 10px;
  font-size:clamp(42px,5.2vw,56px);
  line-height:1.03;
  letter-spacing:-.065em;
  text-wrap:balance;
  word-break:auto-phrase;
}
.result-profile-tagline {
  margin:0 0 10px;
  color:#463a47;
  font-size:clamp(16px,2vw,19px);
  line-height:1.7;
  font-weight:850;
}
.result-character-alias {
  display:inline-flex;
  max-width:100%;
  margin:0 0 11px;
  padding:8px 12px;
  border-radius:13px;
  background:linear-gradient(135deg,#34283e,#6d4d78);
  color:#fff;
  font-size:12px;
  line-height:1.35;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:0 9px 18px rgba(59,39,67,.13);
}
.result-alias-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.result-alias-row > span {
  display:inline-flex;
  padding:7px 9px;
  border-radius:12px;
  background:#fff3af;
  color:#725517;
  font-size:9px;
  font-weight:950;
  box-shadow:0 7px 15px rgba(85,68,24,.09);
}
.result-copy-column .result-hashtags { justify-content:flex-start; margin:14px 0 13px; }
.character-quote {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px 15px;
  border-radius:19px;
  background:rgba(255,255,255,.69);
  border:1px solid rgba(80,54,84,.07);
}
.character-quote > span { font-size:20px; }
.character-quote p { margin:0; color:#675a68; font-size:12px; line-height:1.65; font-weight:750; }

.mascot-character { width:min(300px,100%); margin:0 auto; }
.mascot-character-stage {
  position:relative;
  height:310px;
  overflow:hidden;
  border-radius:42px;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,239,246,.86));
  border:1px solid rgba(255,255,255,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 38px rgba(67,43,73,.1);
}
.mascot-character-stage::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-70px;
  width:260px;
  height:130px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(255,255,255,.62);
}
.mascot-head-card {
  position:absolute;
  z-index:5;
  left:50%;
  top:33px;
  width:145px;
  height:145px;
  transform:translateX(-50%) rotate(-1deg);
  display:grid;
  place-items:center;
  border-radius:46px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 15px 30px rgba(78,49,77,.13);
}
.mascot-head-emoji {
  font-size:92px;
  line-height:1;
  filter:drop-shadow(0 7px 8px rgba(64,42,68,.09));
  transform:translateY(2px);
}
.mascot-body-suit {
  position:absolute;
  z-index:3;
  left:50%;
  top:157px;
  width:156px;
  height:152px;
  transform:translateX(-50%);
  border-radius:48px 48px 25px 25px;
  background:linear-gradient(145deg,#334b78,#26385d 68%,#1f2e4d);
  box-shadow:0 12px 26px rgba(40,51,80,.2);
}
.suit-shirt {
  position:absolute;
  left:50%;
  top:5px;
  width:58px;
  height:68px;
  transform:translateX(-50%);
  clip-path:polygon(0 0,100% 0,77% 100%,23% 100%);
  background:#fff;
}
.suit-tie {
  position:absolute;
  left:50%;
  top:20px;
  width:17px;
  height:61px;
  transform:translateX(-50%);
  clip-path:polygon(50% 0,100% 15%,72% 100%,28% 100%,0 15%);
  background:linear-gradient(#ef6779,#bb344d);
}
.suit-lapel { position:absolute; top:3px; width:65px; height:78px; background:#3c5587; }
.lapel-left { left:7px; clip-path:polygon(0 0,100% 35%,55% 100%,0 72%); }
.lapel-right { right:7px; clip-path:polygon(100% 0,0 35%,45% 100%,100% 72%); }
.mascot-arm {
  position:absolute;
  z-index:6;
  top:203px;
  width:54px;
  height:80px;
  border-radius:30px;
  background:#31466f;
  display:grid;
  place-items:center;
  box-shadow:0 8px 15px rgba(44,52,78,.16);
}
.mascot-arm-left { left:39px; transform:rotate(18deg); }
.mascot-arm-right { right:39px; transform:rotate(-18deg); }
.mascot-arm-left span { font-size:27px; transform:rotate(-18deg) translateY(-7px); }
.mascot-prop {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(72,51,79,.08);
  font-size:25px;
  transform:rotate(18deg) translateY(-6px);
  box-shadow:0 8px 16px rgba(62,40,70,.11);
}
.mascot-doodle { position:absolute; z-index:7; font-weight:950; }
.doodle-a { left:24px; top:30px; color:#ff7192; font-size:25px; }
.doodle-b { right:24px; top:42px; color:#8e77e8; font-size:27px; transform:rotate(10deg); }
.doodle-c { right:28px; bottom:31px; color:#ff9f64; font-size:20px; }
.mascot-nameplate {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin:-15px auto 0;
  position:relative;
  z-index:9;
}
.mascot-nameplate strong,.mascot-nameplate span {
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(80,56,85,.08);
  background:#fff;
  box-shadow:0 8px 20px rgba(67,44,73,.08);
}
.mascot-nameplate strong { font-size:11px; color:#342b37; }
.mascot-nameplate span { font-size:10px; color:#8b687d; font-weight:850; }

.mascot-coral .mascot-character-stage,.mascot-sunset .mascot-character-stage,.mascot-orange .mascot-character-stage { background:linear-gradient(145deg,#fff9f0,#ffe1dc); }
.mascot-violet .mascot-character-stage,.mascot-plum .mascot-character-stage,.mascot-lilac .mascot-character-stage,.mascot-indigo .mascot-character-stage { background:linear-gradient(145deg,#fffaff,#e9e1ff); }
.mascot-sky .mascot-character-stage,.mascot-aqua .mascot-character-stage,.mascot-blue .mascot-character-stage { background:linear-gradient(145deg,#fbfeff,#dff0ff); }
.mascot-mint .mascot-character-stage,.mascot-green .mascot-character-stage { background:linear-gradient(145deg,#fcfff9,#def3e5); }
.mascot-cream .mascot-character-stage,.mascot-lemon .mascot-character-stage { background:linear-gradient(145deg,#fffef8,#fff0c2); }
.mascot-slate .mascot-character-stage { background:linear-gradient(145deg,#fcfcfd,#e7e4ed); }

.snapshot-section,.mission-section,.chemistry-strip {
  padding:27px;
  border-radius:31px;
  border:1px solid rgba(74,50,78,.07);
  box-shadow:0 14px 38px rgba(65,43,70,.06);
}
.social-mirror-section {
  padding:27px;
  border-radius:31px;
  background:
    radial-gradient(circle at 100% 0,rgba(255,225,145,.42),transparent 30%),
    linear-gradient(145deg,#fff,#fff6fa 52%,#f1edff);
  border:1px solid rgba(74,50,78,.07);
  box-shadow:0 14px 38px rgba(65,43,70,.06);
}
.social-mirror-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mirror-card {
  min-height:205px;
  padding:18px;
  border-radius:23px;
  display:grid;
  align-content:start;
  gap:8px;
  border:1px solid rgba(70,49,75,.06);
  background:rgba(255,255,255,.88);
}
.mirror-friend { transform:rotate(-.45deg); }
.mirror-secret { background:linear-gradient(145deg,#f7f2ff,#fff); transform:rotate(.35deg); }
.mirror-decision { background:linear-gradient(145deg,#fff8dc,#fff); transform:rotate(-.25deg); }
.mirror-assist { background:linear-gradient(145deg,#eef9ff,#fff); transform:rotate(.25deg); }
.mirror-card > span { font-size:27px; }
.mirror-card small { color:#a16f91; font-size:10px; font-weight:950; letter-spacing:.03em; }
.mirror-card p { margin:0; color:#4f4451; font-size:13px; line-height:1.72; font-weight:750; }
.friend-judge-strip {
  margin-top:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  border-radius:18px;
  background:#35283d;
  color:#fff;
}
.friend-judge-strip > div { display:grid; gap:3px; }
.friend-judge-strip span { color:#e7cbe1; font-size:9px; font-weight:950; }
.friend-judge-strip strong { font-size:15px; }
.friend-judge-strip blockquote { margin:0; max-width:48%; color:#f5eaf3; font-size:11px; line-height:1.55; font-weight:750; text-align:right; }
.snapshot-section { background:rgba(255,255,255,.86); }
.section-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.section-title-row h2,.mission-heading h2,.chemistry-copy h2 { margin:7px 0 18px; font-size:clamp(24px,4vw,33px); letter-spacing:-.045em; }
.sticker-note {
  padding:8px 11px;
  border-radius:10px 10px 10px 3px;
  background:#fff0a8;
  color:#775c18;
  font-size:9px;
  font-weight:900;
  transform:rotate(2deg);
  box-shadow:0 6px 12px rgba(94,79,24,.1);
}
.snapshot-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.snapshot-card {
  min-height:170px;
  padding:18px;
  border-radius:23px;
  border:1px solid rgba(70,49,75,.06);
  display:grid;
  align-content:start;
  gap:8px;
}
.snapshot-strength { background:linear-gradient(145deg,#fff9ee,#fff); }
.snapshot-oops { background:linear-gradient(145deg,#fff1f5,#fff); }
.snapshot-role { background:linear-gradient(145deg,#f3efff,#fff); }
.snapshot-icon { font-size:28px; }
.snapshot-card small { color:#958493; font-size:10px; font-weight:900; }
.snapshot-card ul { margin:0; padding-left:18px; display:grid; gap:7px; }
.snapshot-card li,.snapshot-card p { color:#554a57; font-size:12px; line-height:1.55; }
.snapshot-card strong { font-size:17px; line-height:1.45; }
.snapshot-card p { margin:0; }

.mission-section {
  background:linear-gradient(135deg,#32243b,#554064 60%,#7956a7);
  color:#fff;
}
.mission-heading { display:flex; gap:12px; align-items:flex-start; }
.mission-heading .section-eyebrow { color:#e7cbee; }
.mission-heading h2 { color:#fff; margin-bottom:15px; }
.mission-icon { font-size:29px; }
.mission-section ol { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.mission-section li {
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:start;
  padding:13px;
  border-radius:18px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.12);
}
.mission-section li > span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#fff;
  color:#654676;
  font-size:12px;
  font-weight:950;
}
.mission-section li p { margin:0; color:#fff; font-size:13px; line-height:1.65; font-weight:700; }
.mission-fade { margin:13px 0 0; color:#e9dcef; font-size:11px; text-align:center; }
.mission-locked-preview { background:linear-gradient(135deg,#3c2c45,#554062 68%,#694f89); }

.chemistry-strip {
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  background:linear-gradient(145deg,#f1f8ff,#fff 50%,#f8f0ff);
}
.chemistry-copy h2 { margin-bottom:0; }
.chemistry-pair { display:flex; align-items:center; gap:8px; }
.chemistry-pair article {
  width:112px;
  min-height:118px;
  padding:12px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  border-radius:21px;
  background:#fff;
  border:1px solid rgba(70,49,75,.07);
}
.chemistry-pair article > span { font-size:35px; }
.chemistry-pair small { color:#a07392; font-size:9px; font-weight:900; }
.chemistry-pair strong { text-align:center; font-size:11px; line-height:1.35; }
.chemistry-vs { color:#b889aa; font-size:22px; font-weight:950; }

.unlock-v2 { margin-top:0 !important; }
.unlock-treasure { font-size:38px; margin-bottom:5px; }
.unlock-preview-grid {
  max-width:620px;
  margin:7px auto 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.unlock-preview-grid span {
  padding:10px 7px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(90,58,90,.07);
  color:#725c72;
  font-size:10px;
  font-weight:850;
}
.v2-detail-grid { margin-top:0 !important; }

@media (max-width:760px) {
  .result-profile-card { padding:20px 16px 24px; border-radius:30px; }
  .result-profile-grid { grid-template-columns:1fr; gap:15px; }
  .result-copy-column { text-align:center; }
  .result-copy-column .result-hashtags { justify-content:center; }
  .result-copy-column h1 { font-size:clamp(36px,10.5vw,50px); }
  .result-profile-tagline { font-size:14px; }
  .character-quote { max-width:500px; margin:0 auto; text-align:left; }
  .mascot-character { width:min(260px,88vw); }
  .mascot-character-stage { height:276px; border-radius:36px; }
  .mascot-head-card { width:132px; height:132px; top:25px; border-radius:42px; }
  .mascot-head-emoji { font-size:83px; }
  .mascot-body-suit { top:143px; width:142px; height:139px; }
  .mascot-arm { top:186px; }
  .mascot-arm-left { left:32px; }
  .mascot-arm-right { right:32px; }
  .snapshot-section,.mission-section,.chemistry-strip,.social-mirror-section { padding:21px 16px; border-radius:27px; }
  .result-alias-row { justify-content:center; }
  .result-character-alias { margin-left:0; margin-right:0; }
  .social-mirror-grid { grid-template-columns:1fr; }
  .mirror-card { min-height:0; transform:none; }
  .friend-judge-strip { display:grid; text-align:center; }
  .friend-judge-strip blockquote { max-width:none; text-align:center; }
  .snapshot-grid { grid-template-columns:1fr; }
  .snapshot-card { min-height:0; }
  .section-title-row { display:block; }
  .sticker-note { display:inline-flex; margin-bottom:11px; }
  .chemistry-strip { grid-template-columns:1fr; }
  .chemistry-pair { justify-content:center; }
  .unlock-preview-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:390px) {
  .result-profile-topline { align-items:flex-start; }
  .result-ribbon { font-size:10px; padding:8px 11px; }
  .result-id-chip { font-size:7px; }
  .mascot-character-stage { height:258px; }
  .mascot-head-card { width:122px; height:122px; }
  .mascot-head-emoji { font-size:76px; }
  .mascot-body-suit { top:132px; width:132px; height:132px; }
  .mascot-arm { top:175px; width:49px; height:70px; }
  .mascot-arm-left { left:27px; }
  .mascot-arm-right { right:27px; }
  .chemistry-pair article { width:104px; }
}
