/* Small finishing touches shared by the ranking, guide, and profile. */
.guide-page .guide-hero h1 {
  font-family: Manrope, sans-serif !important;
  font-size: clamp(48px, 6.8vw, 84px);
  font-weight: 800 !important;
  line-height: 1.08;
  letter-spacing: -.065em !important;
  text-shadow: none;
}
.guide-page .guide-hero h1 em {
  font-style: normal;
  color: #c8b4ff;
  text-shadow: 0 5px 28px #9a70ed35;
}

.topbar .back-rating {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  gap: 5px;
  padding: 0 10px !important;
  border: 1px solid #ffffff25;
  border-radius: 8px;
  background: #ffffff08;
  color: #c8c4d1;
  font: 600 11px Manrope, sans-serif;
  white-space: nowrap;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.topbar .back-rating span { display: inline !important; }
.topbar .back-rating:hover {
  background: #b9a3ff14;
  border-color: #b9a3ff70;
  color: #eee7ff;
}

#players .player-row {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 102px;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1),
              background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
#players .player-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, #b9a3ff15, transparent 54%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
#players .player-row::after {
  content: '';
  position: absolute;
  inset: 8px 16px;
  border-block: 1px solid #cdb6ff75;
  border-radius: 3px;
  opacity: 0;
  transform: scaleX(.84);
  transition: opacity .35s ease, transform .46s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
#players .player-row:hover,
#players .player-row:focus-visible {
  z-index: 2;
  transform: translateY(-3px);
  border-color: #b9a3ff73;
  box-shadow: 0 15px 28px #0006, 0 0 0 1px #b9a3ff16;
  outline: none;
}
#players .player-row:hover::before,
#players .player-row:focus-visible::before { opacity: 1; }
#players .player-row:is(:hover, :focus-visible)::after {
  opacity: .7;
  transform: scaleX(1);
}
#players .player-row:nth-child(-n+3):hover,
#players .player-row:nth-child(-n+3):focus-visible {
  box-shadow: 0 18px 34px #0008, 0 0 24px #aa8dff20;
}
#players .player-row:nth-child(-n+3) {
  background-image: linear-gradient(110deg, #b9a3ff0a, transparent 55%);
}
#players .player-row:nth-child(-n+3) .rank {
  position: relative;
  overflow: hidden;
  transition: transform .36s cubic-bezier(.16, 1, .3, 1),
              box-shadow .36s ease, filter .36s ease;
}
#players .player-row:nth-child(-n+3) .rank::after,
#players .player-row:nth-child(-n+3) .tier::after {
  content: '';
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -55%;
  width: 36%;
  transform: translateX(-180%) rotate(22deg);
  background: linear-gradient(90deg, transparent, #ffffff8c, transparent);
  opacity: 0;
  pointer-events: none;
}
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .rank {
  transform: translateY(-3px) scale(1.09) rotate(-4deg);
  box-shadow: 0 8px 20px #9066ea55, inset 0 1px #ffffff6b;
  filter: saturate(1.2);
}
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .rank::after,
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .tier::after {
  opacity: 1;
  animation: top-badge-glint .75s ease-out both;
}
#players .player-row:nth-child(-n+3) .player strong,
#players .player-row:nth-child(-n+3) .time {
  transition: transform .3s ease, color .3s ease;
}
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .player strong {
  transform: translateX(5px);
  color: #f2eaff;
}
#players .player-row:is(:hover, :focus-visible) .player strong {
  background: linear-gradient(105deg, #f7f3ff 20%, #bda3ff 42%, #ffffff 54%, #f7f3ff 75%);
  background-size: 235% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: player-name-shimmer 2.3s linear infinite;
}
@keyframes player-name-shimmer {
  from { background-position: 115% 0; }
  to { background-position: -115% 0; }
}
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .time {
  color: #d8c5ff;
}
#players .player-row .tier {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
#players .player-row .tier-ht3 {
  background: linear-gradient(125deg, #59408f, #312447 70%);
  border: 1px solid #d6a74c7d;
  color: #ffd47b;
  box-shadow: inset 0 1px #ffffff28, 0 3px 10px #0004;
}
#players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .tier {
  transform: translateY(-2px) scale(1.045);
  border-color: #e4bd79;
  box-shadow: 0 0 0 1px #e4bd7926, 0 7px 16px #8f60c846;
}
@keyframes top-badge-glint {
  from { transform: translateX(-180%) rotate(22deg); }
  to { transform: translateX(650%) rotate(22deg); }
}
#players .player-row .player {
  align-self: stretch;
  overflow: visible;
}
#players .skin-frame {
  position: relative;
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 90px;
  align-self: end;
  margin: -14px 0 -8px;
  pointer-events: none;
}
#players .skin-frame::before {
  content: '';
  position: absolute;
  inset: 15px -4px 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #a07dff42, transparent 72%);
  filter: blur(9px);
  opacity: .25;
  transform: scale(.8);
  transition: opacity .35s ease, transform .35s ease;
}
#players .player-row:is(:hover, :focus-visible) .skin-frame::before {
  opacity: 1;
  transform: scale(1.12);
}
#players .skin-frame .skin {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 118px !important;
  height: 118px !important;
  max-width: none;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 8px #0009) !important;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s ease;
}
#players .player-row:hover .skin,
#players .player-row:focus-visible .skin {
  transform: translateX(-50%) translateY(-8px) scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 15px 11px #000b) !important;
  animation: skin-hover-float 2.4s ease-in-out infinite alternate;
}
@keyframes skin-hover-float {
  from { transform: translateX(-50%) translateY(-5px) scale(1.05) rotate(-2deg); }
  to { transform: translateX(-50%) translateY(-10px) scale(1.09) rotate(1deg); }
}

.player-profile .skin-stage {
  min-height: 420px;
  height: clamp(420px, 47vw, 530px);
  border-color: #b9a3ff42;
  background:
    radial-gradient(ellipse at 50% 46%, #8f60db35 0, #8f60db10 35%, transparent 68%),
    linear-gradient(145deg, #14111e, #090b11 72%);
  transition: border-color .4s ease, box-shadow .4s ease;
}
.player-profile .skin-stage:hover {
  border-color: #c4a9ff9c;
  box-shadow: inset 0 0 0 1px #c4a9ff2b, 0 30px 80px #0008, 0 0 32px #8657e11d;
}
.player-profile .skin-stage img {
  top: auto;
  bottom: -3%;
  left: 50%;
  width: min(100%, 510px);
  max-width: 100%;
  height: 106%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%) !important;
}
.player-profile .skin-stage:hover img {
  transform: translateX(-50%) translateY(-8px) scale(1.035) !important;
}
.player-profile .skin-stage .skin-fallback-logo {
  width: 108px;
  height: 108px;
  bottom: calc(50% - 54px);
}

@media (max-width: 760px) {
  .guide-page .guide-hero h1 { font-size: clamp(42px, 9.5vw, 64px); }
  .topbar .back-rating {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .topbar .back-rating span { display: none !important; }
  #players .player-row { min-height: 88px !important; }
  #players .skin-frame { flex-basis: 76px; width: 76px; height: 74px; margin: -6px 0 -5px; }
  #players .skin-frame .skin { width: 90px !important; height: 90px !important; }
  .player-profile .skin-stage { min-height: 350px; height: min(94vw, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  #players .player-row,
  #players .player-row::before,
  #players .player-row::after,
  #players .skin-frame .skin,
  #players .skin-frame::before,
  #players .rank,
  #players .tier,
  #players .player strong,
  #players .time,
  #players .rank::after,
  #players .tier::after { transition: none; animation: none !important; }
  #players .player-row:hover,
  #players .player-row:focus-visible { transform: none; }
  #players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .rank,
  #players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .tier,
  #players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .player strong {
    transform: none;
  }
  #players .player-row:is(:hover, :focus-visible) .skin {
    transform: translateX(-50%);
  }
  #players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .rank::after,
  #players .player-row:nth-child(-n+3):is(:hover, :focus-visible) .tier::after {
    opacity: 0;
  }
  #players .player-row:is(:hover, :focus-visible) .player strong {
    animation: none;
    -webkit-text-fill-color: currentColor;
  }
  .player-profile .skin-stage img { transition: none; }
  .player-profile .skin-stage:hover img { transform: translateX(-50%) !important; }
}

.tier-score-card{margin:4px 0 18px;padding:18px;border:1px solid rgba(185,163,255,.3);border-radius:14px;background:linear-gradient(135deg,#181522,#101116 68%);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.tier-score-card header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid rgba(185,163,255,.18)}
.tier-score-card header span{flex:1;min-width:160px;color:#d6c7f6;font:700 12px Manrope,sans-serif;letter-spacing:.02em}
.tier-score-card header strong{color:#ece4ff;font:700 26px 'DM Mono',monospace}
.tier-score-card header strong small{color:#918a9e;font-size:12px}
.tier-score-card header em{padding:7px 10px;border-radius:8px;background:#402968;color:#edddff;font:700 12px 'DM Mono',monospace;font-style:normal}
.tier-score-card ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0;padding:0;list-style:none}
.tier-score-card li{display:flex;justify-content:space-between;gap:9px;padding:10px 11px;border:1px solid #2c2834;border-radius:9px;background:#101015;color:#ded8e9;font-size:11px}
.tier-score-card li span{min-width:0}.tier-score-card li small{display:block;margin-top:4px;color:#8e8799;font:10px 'DM Mono',monospace}
.tier-score-card li strong{flex:none;color:#c6a9ff;font:700 14px 'DM Mono',monospace}.tier-score-card li strong i{color:#746b80;font-size:10px;font-style:normal}
.tier-score-card p{margin:0;color:#847e90;font-size:10px;line-height:1.55}
@media(max-width:700px){.tier-score-card ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.tier-score-card ol{grid-template-columns:1fr}}