/* OUT result polish — mobile-aligned stats + stronger LAST VOICE finish */

body.out-result-v8 .overlay{
  background:
    radial-gradient(circle at 13% 18%,rgba(255,73,172,.13),transparent 27%),
    radial-gradient(circle at 87% 12%,rgba(79,211,255,.14),transparent 29%),
    radial-gradient(circle at 50% 100%,rgba(135,76,255,.11),transparent 36%),
    rgba(2,7,15,.91)!important;
}

body.out-result-v8 .overlay-card{
  position:relative!important;
  isolation:isolate;
}
body.out-result-v8 .overlay-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  aspect-ratio:1;
  right:-52px;
  top:-68px;
  border-radius:50%;
  pointer-events:none;
  opacity:.52;
  background:
    radial-gradient(circle,transparent 0 34%,rgba(105,221,255,.17) 34.5% 35.5%,transparent 36% 48%,rgba(143,244,199,.10) 48.5% 49.3%,transparent 50% 62%,rgba(255,255,255,.055) 62.5% 63%,transparent 64%);
  filter:drop-shadow(0 0 18px rgba(105,221,255,.10));
}
body.out-result-v8 .overlay-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:4%;
  right:4%;
  top:38%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(105,221,255,.22),rgba(255,110,193,.16),transparent);
  box-shadow:0 0 22px rgba(105,221,255,.16);
}

body.out-result-v8 .result-grid{
  align-items:stretch!important;
}
body.out-result-v8 .result-item{
  position:relative;
  overflow:hidden;
  border-color:rgba(143,220,255,.16)!important;
  background:
    linear-gradient(180deg,rgba(18,34,56,.76),rgba(5,12,25,.91))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.16);
}
body.out-result-v8 .result-item::after{
  content:"";
  position:absolute;
  left:8px;right:8px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(112,225,255,.38),transparent);
}

.out-end-card{
  position:relative;
  overflow:hidden;
}
body.out-result-v8 .out-end-card:not([hidden]){
  grid-template-columns:92px minmax(0,1fr);
  gap:16px;
  margin:16px 0 12px;
  padding:15px 17px;
  border-width:1.5px;
  border-radius:22px;
  background:
    radial-gradient(circle at 7% 50%,color-mix(in srgb,var(--end-color,#69ddff) 18%,transparent),transparent 30%),
    linear-gradient(120deg,rgba(8,18,34,.96),rgba(15,8,28,.95));
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 38px color-mix(in srgb,var(--end-color,#69ddff) 13%,transparent),
    0 18px 44px rgba(0,0,0,.28);
}
body.out-result-v8 .out-end-card::before{
  content:"";
  position:absolute;
  width:150px;
  aspect-ratio:1;
  left:-25px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(circle,transparent 0 33%,color-mix(in srgb,var(--end-color,#69ddff) 30%,transparent) 34% 35%,transparent 36% 48%,color-mix(in srgb,var(--end-color,#69ddff) 17%,transparent) 49% 50%,transparent 51% 64%,rgba(255,255,255,.07) 65% 65.7%,transparent 67%);
}
body.out-result-v8 .out-end-card::after{
  content:"";
  position:absolute;
  left:112px;right:18px;bottom:12px;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--end-color,#69ddff) 55%,transparent),transparent 78%);
  opacity:.65;
}
body.out-result-v8 .out-end-character{
  position:relative;
  z-index:1;
  width:92px;height:92px;
  border-radius:18px;
  border-width:2px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.035),
    0 0 28px color-mix(in srgb,var(--end-color,#69ddff) 30%,transparent);
}
body.out-result-v8 .out-end-copy{position:relative;z-index:1}
body.out-result-v8 .out-end-name{
  font-size:9px;
  letter-spacing:.24em;
  margin-bottom:6px;
  color:color-mix(in srgb,var(--end-color,#69ddff) 76%,white 24%);
}
body.out-result-v8 .out-end-copy blockquote{
  font-size:clamp(18px,2vw,28px);
  line-height:1.28;
  letter-spacing:.015em;
  text-shadow:0 0 20px rgba(255,255,255,.07);
}
body.out-result-v8 .out-end-copy cite{font-size:9px;margin-top:6px}
body.out-result-v8 .out-end-copy p{font-size:11px!important;margin-top:9px!important;letter-spacing:.12em}

body.out-result-v8 .out-share-panel{
  border-color:rgba(117,220,255,.18);
  background:
    radial-gradient(circle at 5% 0,rgba(105,221,255,.08),transparent 34%),
    linear-gradient(180deg,rgba(9,18,33,.94),rgba(5,10,21,.97));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.28);
}

@media(max-width:760px){
  /* Keep all five result metrics aligned. REWIND must not become a full-width orphan. */
  body.out-result-v8 .result-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    margin:10px 0!important;
  }
  body.out-result-v8 .result-item,
  body.out-result-v8 .result-item:last-child{
    grid-column:auto!important;
    min-height:64px!important;
    padding:8px 5px!important;
    border-radius:13px!important;
  }
  body.out-result-v8 .result-item span{font-size:6px!important;letter-spacing:.07em!important}
  body.out-result-v8 .result-item b{font-size:17px!important;line-height:1.05!important}

  body.out-result-v8 .out-end-card:not([hidden]){
    grid-template-columns:76px minmax(0,1fr);
    gap:11px;
    margin:12px 0 10px;
    padding:11px 12px;
    border-radius:18px;
  }
  body.out-result-v8 .out-end-character{width:76px;height:76px;border-radius:15px}
  body.out-result-v8 .out-end-name{font-size:7px;margin-bottom:4px;letter-spacing:.18em}
  body.out-result-v8 .out-end-copy blockquote{font-size:15px;line-height:1.3}
  body.out-result-v8 .out-end-copy cite{font-size:7px;margin-top:4px}
  body.out-result-v8 .out-end-copy p{font-size:8.5px!important;margin-top:6px!important}
  body.out-result-v8 .out-end-card::after{left:96px;bottom:9px}
  body.out-result-v8 .overlay-card::before{width:150px;right:-46px;top:-44px;opacity:.42}
}

@media(max-width:390px){
  body.out-result-v8 .result-grid{gap:3px!important}
  body.out-result-v8 .result-item,
  body.out-result-v8 .result-item:last-child{padding:7px 3px!important;min-height:59px!important}
  body.out-result-v8 .result-item span{font-size:5.4px!important}
  body.out-result-v8 .result-item b{font-size:14px!important}
  body.out-result-v8 .out-end-card:not([hidden]){grid-template-columns:66px minmax(0,1fr);padding:9px 10px;gap:9px}
  body.out-result-v8 .out-end-character{width:66px;height:66px}
  body.out-result-v8 .out-end-copy blockquote{font-size:13.5px}
  body.out-result-v8 .out-end-copy p{font-size:7.5px!important}
}