/* Result eyebrow: keep multi-line streak messages visually centered everywhere. */
#result-dialog #result-eyebrow{
  width:100%;
  display:block;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}

/*
  Mobile uses bottom sheets for most dialogs. These specific dialogs are centered.
  The result dialog additionally uses a controlled non-top-layer overlay on phones
  so mobile WebKit never gets a chance to paint a reopened native modal off-center.
*/
@media(max-width:780px){
  #result-dialog #result-eyebrow{
    max-width:calc(100% - 36px);
    margin-left:auto;
    margin-right:auto;
    letter-spacing:1.15px;
  }

  #result-dialog.dialog,
  #leave-run-dialog.dialog,
  #trivia-leave-dialog.dialog,
  #auth-dialog.dialog,
  #patch-notes-dialog.patch-notes-dialog,
  #help-dialog.dialog,
  #about-dialog.dialog{
    position:fixed!important;
    inset:auto!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    margin:0!important;
    transform:translate(-50%,-50%)!important;
    width:min(calc(100vw - 28px),520px)!important;
    max-width:520px!important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }

  #leave-run-dialog.dialog,
  #trivia-leave-dialog.dialog,
  #auth-dialog.dialog{
    width:min(calc(100vw - 28px),430px)!important;
    max-width:430px!important;
  }

  body.phl-result-overlay-open{
    overflow:hidden!important;
  }

  .phl-result-mobile-backdrop{
    position:fixed;
    inset:0;
    z-index:2190;
    background:#080710bb;
    pointer-events:auto;
    touch-action:none;
  }

  .phl-result-mobile-backdrop[hidden]{
    display:none!important;
  }

  #result-dialog.dialog[data-phl-mobile-overlay="1"]{
    display:block!important;
    z-index:2200!important;
    animation:none!important;
    transition:none!important;
    will-change:auto!important;
  }

  #result-dialog.dialog[data-phl-mobile-overlay="1"]::backdrop{
    display:none!important;
    background:transparent!important;
  }

  /* The centered Result dialog must not inherit the generic mobile-sheet close
     button float. That float also steals horizontal space from the title. */
  #result-dialog.dialog .dialog-close{
    position:absolute!important;
    float:none!important;
    top:8px!important;
    right:10px!important;
    margin:0!important;
  }

  #result-dialog.dialog > h2{
    width:100%!important;
    text-align:center!important;
    clear:both!important;
  }
}


/* Canonical Holographic Name Color. */
.trainer-name[data-name-color="holographic"],
.trainer-name-text[data-name-color="holographic"]{
  display:inline-block!important;
  background:linear-gradient(100deg,#ffffff 0%,#82e4ff 14%,#76a8ff 27%,#b487ff 40%,#ff8fce 54%,#ffd19f 67%,#85efdc 80%,#c9a7ff 92%,#ffffff 100%)!important;
  background-size:320% 100%!important;
  background-position:0% 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  animation:phl-holographic-name-final 2.8s ease-in-out infinite!important;
  will-change:background-position;
}

/* Canonical Rainbow Name Color: the same moving gradient on every trainer-name surface. */
.trainer-name[data-name-color="rainbow"],
.trainer-name-text[data-name-color="rainbow"]{
  display:inline-block!important;
  background:linear-gradient(90deg,
    #ff3b30 0%,#ff9500 7%,#ffd60a 14%,#34c759 21%,#32d6ff 28%,#0a84ff 35%,#8e5cff 42%,#ff2d95 49%,
    #ff3b30 56%,#ff9500 63%,#ffd60a 70%,#34c759 77%,#32d6ff 84%,#0a84ff 91%,#8e5cff 96%,#ff2d95 100%)!important;
  background-size:200% 100%!important;
  background-position:0% 50%;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  animation:phl-rainbow-name-final 1.9s linear infinite!important;
  will-change:background-position;
}
.personalized-profile-chip .profile-chip-name,
.account-sidebar-user strong,
.profile-hero h1{
  -webkit-text-fill-color:initial;
}
.admin-cosmetic-dialog{width:min(900px,calc(100vw - 32px))!important}
.admin-cosmetic-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.admin-cosmetic-group[data-admin-cosmetic-group="frames"]{grid-column:1/-1}
.admin-frame-items{grid-template-columns:repeat(2,minmax(0,1fr))}
.cosmetics-unlock-note{display:grid!important;gap:7px!important}
.cosmetics-unlock-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:start}
.cosmetics-unlock-row strong{color:#d9ccff}
.cosmetics-unlock-row span{color:var(--muted)}
@media(max-width:860px){
  .admin-cosmetic-grid{grid-template-columns:1fr!important}
  .admin-cosmetic-group[data-admin-cosmetic-group="frames"]{grid-column:auto}
  .admin-frame-items{grid-template-columns:1fr}
  .cosmetics-unlock-row{grid-template-columns:1fr;gap:2px}
}

@keyframes phl-holographic-name-final{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes phl-rainbow-name-final{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}