.result-world {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 4px 0 28px;
}

.result-world .result-hero,
.result-world .result-grid,
.result-world .share-box,
.result-world .unlock-box,
.result-world .compatibility {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.buzz-result-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 28px 28px 30px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 38px;
  background:
    radial-gradient(circle at 14% 9%, rgba(255,255,255,.94), transparent 24%),
    radial-gradient(circle at 86% 7%, rgba(255,184,209,.58), transparent 32%),
    linear-gradient(145deg, #fff8f5 0%, #ffe9f2 47%, #eee6ff 100%);
  box-shadow: 0 24px 68px rgba(90, 49, 89, .14);
}

.buzz-result-hero::before,
.buzz-result-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.buzz-result-hero::before {
  width: 210px;
  height: 210px;
  left: -95px;
  bottom: -88px;
  background: rgba(255, 186, 153, .23);
}
.buzz-result-hero::after {
  width: 190px;
  height: 190px;
  right: -80px;
  bottom: -74px;
  background: rgba(142, 123, 246, .16);
}

.result-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.type-stamp {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(71, 54, 78, .08);
  color: #756b7b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .1em;
}

.mascot-wrap {
  position: relative;
  z-index: 2;
  width: 176px;
  height: 176px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 52px;
  border: 1px solid rgba(255,255,255,.96);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(73, 45, 81, .12);
  transform: rotate(-1deg);
}
.mascot-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 44px;
  background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(255,220,231,.42));
}
.mascot-face {
  position: relative;
  z-index: 2;
  font-size: 94px;
  line-height: 1;
  filter: drop-shadow(0 12px 14px rgba(72, 48, 74, .12));
}
.mascot-accessory {
  position: absolute;
  z-index: 4;
  right: -7px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  border: 1px solid rgba(80, 54, 84, .08);
  box-shadow: 0 10px 24px rgba(72, 45, 78, .14);
  font-size: 24px;
  transform: rotate(7deg);
}
.mascot-animal {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 999px;
  background: #302537;
  color: white;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mascot-spark { position: absolute; z-index: 4; font-weight: 900; }
.spark-one { top: 13px; left: 18px; color: #ff8a78; font-size: 23px; }
.spark-two { top: 23px; right: 22px; color: #9f89ef; font-size: 11px; }

.mascot-coral::before, .mascot-sunset::before, .mascot-orange::before { background: linear-gradient(145deg, #fff6ef, #ffd9d9); }
.mascot-violet::before, .mascot-plum::before, .mascot-lilac::before, .mascot-indigo::before { background: linear-gradient(145deg, #fff8ff, #e8deff); }
.mascot-sky::before, .mascot-aqua::before, .mascot-blue::before { background: linear-gradient(145deg, #f8fdff, #ddecff); }
.mascot-mint::before, .mascot-green::before { background: linear-gradient(145deg, #fbfff9, #dff3e8); }
.mascot-cream::before, .mascot-lemon::before { background: linear-gradient(145deg, #fffef6, #fff0bf); }
.mascot-slate::before { background: linear-gradient(145deg, #fbfbfd, #e5e2ea); }

.result-subtype {
  position: relative;
  z-index: 2;
  margin-top: 7px !important;
  padding: 7px 12px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255, 99, 128, .12);
  box-shadow: 0 7px 18px rgba(90, 50, 87, .07);
}
.buzz-result-hero h1 {
  position: relative;
  z-index: 2;
  margin: 15px auto 8px;
  font-size: clamp(42px, 8vw, 72px);
  line-height: 1.02;
  letter-spacing: -.07em;
}
.buzz-result-hero .tagline {
  position: relative;
  z-index: 2;
  max-width: 610px;
  margin: 0 auto 15px;
  color: #4f414e;
  font-size: clamp(16px, 2.4vw, 19px);
  font-weight: 850;
  line-height: 1.65;
}
.result-hashtags {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px auto 12px;
}
.result-hashtags span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(85, 57, 90, .07);
  color: #8d5272;
  font-size: 11px;
  font-weight: 900;
}
.mascot-caption {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 10px auto 4px !important;
  color: #756773 !important;
  font-size: 13px !important;
  font-weight: 750;
  line-height: 1.7 !important;
}
.buzz-result-hero .code {
  position: relative;
  z-index: 2;
  margin-top: 14px;
}

.section-eyebrow {
  color: #b36987;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
}
.aruaru-section,
.style-section,
.compatibility-preview {
  padding: 28px;
  border: 1px solid rgba(89, 61, 91, .07);
  border-radius: 32px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 44px rgba(72, 48, 75, .07);
}
.aruaru-section h2,
.style-section h2,
.compatibility-preview h2 {
  margin: 8px 0 20px;
  font-size: clamp(25px, 4vw, 34px);
  letter-spacing: -.045em;
}
.aruaru-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.aruaru-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 102px;
  padding: 17px;
  border: 1px solid #f0e7ee;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fffafb);
}
.aruaru-card > span { font-size: 24px; line-height: 1; }
.aruaru-card p {
  margin: 0;
  color: #493f4b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.65;
}
.aruaru-main {
  grid-column: 1 / -1;
  min-height: 118px;
  align-items: center;
  background: linear-gradient(135deg, #36283e, #584064 63%, #7650a7);
  border: 0;
  box-shadow: 0 14px 30px rgba(55, 35, 66, .15);
}
.aruaru-main > span { font-size: 34px; }
.aruaru-main p {
  color: white;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 950;
  letter-spacing: -.02em;
}

.preview-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.highlight-card {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(73, 51, 75, .07);
  box-shadow: 0 10px 28px rgba(70, 47, 74, .05);
}
.highlight-card > span { font-size: 28px; }
.highlight-card div { display: grid; gap: 5px; }
.highlight-card small { color: #817582; font-size: 11px; font-weight: 850; }
.highlight-card strong { color: #352d38; font-size: 14px; line-height: 1.5; }
.highlight-card.good { background: linear-gradient(145deg, #fff7ef, #fff); }
.highlight-card.oops { background: linear-gradient(145deg, #fff3f6, #fff); }
.highlight-card.role { background: linear-gradient(145deg, #f6f1ff, #fff); }
.highlight-card.match { background: linear-gradient(145deg, #eef8ff, #fff); }

.fun-unlock {
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  padding: 32px 26px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(168, 137, 245, .21), transparent 25%),
    linear-gradient(145deg, #fff8f8, #fff0f4 50%, #f4edff) !important;
}
.unlock-emoji { display: block; margin-bottom: 9px; font-size: 32px; }
.fun-unlock h2 { max-width: 620px; margin-left: auto; margin-right: auto; font-size: clamp(25px, 4.5vw, 34px); }
.unlock-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 5px auto 19px;
}
.unlock-pills span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #765f76;
  font-size: 11px;
  font-weight: 850;
}

.style-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.style-mini-card {
  min-height: 148px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
  padding: 17px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fbf7ff);
  border: 1px solid #eee5f0;
}
.style-mini-card > span { font-size: 25px; }
.style-mini-card small { color: #938794; font-size: 10px; font-weight: 850; }
.style-mini-card strong { color: #3f3542; font-size: 14px; line-height: 1.4; }
.style-mini-card p { margin: 1px 0 0; color: #746978; font-size: 10.5px; line-height: 1.55; font-weight: 700; }

.rich-result-grid { gap: 13px !important; margin-top: 0 !important; }
.rich-result-grid .result-card {
  position: relative;
  padding: 22px;
  border-radius: 26px;
  box-shadow: 0 12px 32px rgba(67, 45, 71, .06);
}
.card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  font-size: 22px;
}
.rich-result-grid h3 { font-size: 17px; }
.intro-result { background: linear-gradient(145deg, #fff, #fff8f4) !important; }
.strength-card { background: linear-gradient(145deg, #fff7ee, #fff) !important; }
.pitfall-card { background: linear-gradient(145deg, #fff1f6, #fff) !important; }
.fit-card { background: linear-gradient(145deg, #edf7ff, #fff) !important; }
.subtype-card { background: linear-gradient(145deg, #f4efff, #fff) !important; }
.hack-card { background: linear-gradient(135deg, #34263c, #574064 58%, #7854a6) !important; color: white; border: 0 !important; }
.hack-card h3, .hack-card li { color: white !important; }
.axis-card { background: linear-gradient(145deg, #fff, #f7f4ff) !important; }
.action-tip-list { margin: 0; padding-left: 22px; display: grid; gap: 11px; }
.action-tip-list li { color: #5b505e; font-size: 14px; line-height: 1.7; }

.compat-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.compat-preview-grid article {
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 20px;
  border-radius: 25px;
  border: 1px solid rgba(74, 51, 78, .07);
}
.compat-good { background: linear-gradient(145deg, #eff9ff, #fff); }
.compat-spicy { background: linear-gradient(145deg, #fff3f6, #fff); }
.compat-emoji { font-size: 37px; }
.compat-preview-grid small { color: #9a718b; font-size: 10px; font-weight: 950; }
.compat-preview-grid strong { font-size: 17px; }
.compat-preview-grid p { margin: 4px 0 0; color: #746876; font-size: 12px; line-height: 1.65; }

.buzz-share-box {
  margin-top: 0 !important;
  padding: 27px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(165, 112, 255, .35), transparent 28%),
    linear-gradient(145deg, #2d2234, #513860 64%, #6b4192) !important;
  box-shadow: 0 20px 50px rgba(51, 32, 62, .18);
}
.share-copy-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.share-kicker {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #f5eefa;
  font-size: 10px;
  font-weight: 900;
}
.buzz-share-box h2 { margin: 11px 0 7px; font-size: clamp(24px, 4vw, 31px); }
.buzz-share-box p { max-width: 590px; margin-bottom: 18px !important; }
.share-big-emoji { font-size: 45px; }
.share-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}
.share-reasons span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #eee4f2;
  font-size: 10px;
  font-weight: 800;
}
.social-cta-card { text-align: center; }
.social-cta-card .share-big-emoji { display: block; margin-bottom: 6px; }

.result-world .compatibility {
  background: linear-gradient(145deg, #eef7ff, #f7f0ff);
  border-radius: 30px;
}
.login-modal-fun { background: linear-gradient(160deg, #fff, #fff6f8 68%, #f6f1ff); }

@media (max-width: 680px) {
  .result-world { gap: 14px; }
  .buzz-result-hero { padding: 22px 17px 26px; border-radius: 30px; }
  .result-topline { margin-bottom: 13px; }
  .type-stamp { font-size: 8px; min-height: 30px; }
  .mascot-wrap { width: 154px; height: 154px; border-radius: 44px; }
  .mascot-wrap::before { border-radius: 37px; }
  .mascot-face { font-size: 82px; }
  .mascot-accessory { width: 43px; height: 43px; bottom: 23px; font-size: 21px; }
  .buzz-result-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .buzz-result-hero .tagline { font-size: 15px; }
  .result-hashtags { gap: 5px; }
  .result-hashtags span { padding: 7px 9px; font-size: 9px; }
  .aruaru-section, .style-section, .compatibility-preview { padding: 21px 17px; border-radius: 27px; }
  .aruaru-grid { grid-template-columns: 1fr; }
  .aruaru-main { grid-column: auto; }
  .aruaru-card { min-height: 0; }
  .preview-highlights { grid-template-columns: 1fr 1fr; gap: 8px; }
  .highlight-card { min-height: 120px; padding: 14px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .highlight-card > span { font-size: 25px; }
  .highlight-card strong { font-size: 12px; }
  .style-card-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .style-mini-card { min-height: 145px; padding: 14px; }
  .rich-result-grid { grid-template-columns: 1fr !important; }
  .rich-result-grid .result-card.full { grid-column: auto !important; }
  .compat-preview-grid { grid-template-columns: 1fr; }
  .share-copy-row { display: block; }
  .share-big-emoji { margin-top: 10px; }
  .buzz-share-box { padding: 22px 17px !important; border-radius: 27px !important; }
  .fun-unlock { padding: 26px 17px !important; border-radius: 27px !important; }
}

@media (max-width: 390px) {
  .preview-highlights { grid-template-columns: 1fr; }
  .style-card-grid { grid-template-columns: 1fr 1fr; }
  .mascot-caption { font-size: 12px !important; }
}