/* Small finishing touches shared by the ranking, guide, and profile. */
.guide-page .guide-hero h1 {
  font-family: 'Press Start 2P', monospace !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; }
}

/* Real player skins stay visible as a clean cutout instead of a remote composite. */
.guide-hero-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 28px;
  width: min(760px, 94%);
  height: 250px;
  margin: 22px auto 4px;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.32));
}
.guide-hero-art::after {
  content: '→';
  position: absolute;
  left: 50%;
  top: 45%;
  color: #a78bfa;
  font: 28px 'DM Mono', monospace;
  transform: translate(-50%, -50%);
}
.guide-hero-art > img {
  width: 180px;
  height: 242px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: guide-skin-in 720ms var(--motion-ease) both;
}
.guide-hero-art > img:last-child { animation-delay: 90ms; }
.guide-hero-art > span { display: none; }
.guide-skin-img {
  width: 108px !important;
  height: 172px !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: pixelated;
  opacity: .92;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.28));
}
.guide-media:has(.guide-skin-img) {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.guide-media:has(.guide-skin-img) > span:not(.guide-chase-arrow) {
  flex: 0 0 100%;
  text-align: center;
}
.guide-chase-arrow {
  color: #a78bfa;
  font: 22px 'DM Mono', monospace;
  align-self: center;
}
@keyframes guide-skin-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .guide-hero-art { width: 100%; height: 190px; gap: 10px; }
  .guide-hero-art > img { width: 130px; height: 185px; }
  .guide-skin-img { width: 84px !important; height: 136px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-hero-art > img { animation: none !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-assessment{margin:4px 0 16px;padding:16px 18px;border:1px solid #48404f;border-radius:12px;background:#17151c;color:#d6cadf;font:12px/1.65 Manrope,sans-serif}
.tier-assessment strong{display:block;color:#e6dbf6;font-size:13px}.tier-assessment p{margin:8px 0 0;color:#ada3bb;font-size:11px}.tier-assessment ul{margin:8px 0;padding-left:18px}.tier-assessment.is-valid{border-color:#554177}.tier-assessment.is-blocked{border-color:#805843}.tier-assessment.is-blocked strong{color:#eabea4}
.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}}

/* Manhunt guide: a clean editorial layer with the same pixel display face as Rules. */
.guide-page .guide-hero h1,
.guide-page .guide-copy h2,
.guide-page .guide-copy > i,
.guide-page .guide-quickcheck b {
  font-family: 'Press Start 2P', monospace !important;
}
.section-heading h2,
.how h2,
.faq h2,
.telegram-card h2,
.rules-list h2 {
  font-family: 'Press Start 2P', monospace !important;
  letter-spacing: -.02em;
}
.guide-page .guide-hero h1 { text-transform: uppercase; }
.guide-page .guide-hero h1 em { text-shadow: none !important; }
.guide-page .guide-copy h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.35; letter-spacing: -.025em; }
.guide-hero-art {
  display: block;
  width: min(760px, 94%);
  height: auto;
  margin: 22px auto 4px;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.32));
  animation: guide-art-in 780ms var(--motion-ease) both;
}
.guide-quickcheck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  color: #9aa3b2;
  font: 10px 'DM Mono', monospace;
  letter-spacing: .03em;
}
.guide-quickcheck span {
  padding: 8px 10px;
  border: 1px solid rgba(167,139,250,.24);
  border-radius: 8px;
  background: rgba(16,19,25,.72);
}
.guide-quickcheck b { color: #d9ccff; font-size: 9px; }
.guide-media {
  position: relative;
  overflow: hidden;
  border-style: solid;
  border-color: rgba(167,139,250,.28);
  background: linear-gradient(145deg, rgba(24,22,34,.72), rgba(10,11,14,.8));
  padding: 14px;
  transition: transform 260ms var(--motion-ease), border-color 260ms ease, box-shadow 260ms ease;
}
.guide-callout {
  border: 1px solid rgba(167,139,250,.28) !important;
  border-left-width: 1px !important;
  border-radius: 12px !important;
}
.guide-media::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 11px;
  pointer-events: none;
}
.guide-media img {
  width: min(100%, 520px);
  max-height: 188px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: .9;
  transition: transform 320ms var(--motion-ease), opacity 260ms ease;
}
.guide-media:hover,
.guide-row:focus-within .guide-media {
  transform: translateY(-4px);
  border-color: rgba(167,139,250,.62);
  box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 30px rgba(167,139,250,.08);
}
.guide-media:hover img,
.guide-row:focus-within .guide-media img { transform: scale(1.035); opacity: 1; }
.guide-media span { position: relative; z-index: 1; }
.guide-media b { display: none; }
@keyframes guide-art-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .guide-hero-art { width: 100%; margin-top: 14px; }
  .guide-quickcheck { gap: 6px; }
  .guide-quickcheck span { width: 100%; }
  .guide-page .guide-copy h2 { font-size: 21px; }
  .guide-media { min-height: 180px; }
  .guide-media img { max-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-hero-art, .guide-media, .guide-media img { animation: none !important; transition: none !important; }
  .guide-media:hover, .guide-row:focus-within .guide-media { transform: none; }
  .guide-media:hover img, .guide-row:focus-within .guide-media img { transform: none; }
}

/* Unique Manhunt scene assets: one composition per guide step. */
.guide-hero-art {
  display: block;
  width: min(820px, 96%);
  height: auto;
  margin: 22px auto 4px;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.24));
}
.guide-hero-art .guide-scene-img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  image-rendering: auto;
}
.guide-media:has(.guide-scene-img) {
  display: grid;
  place-items: center;
  gap: 10px;
}
.guide-media .guide-scene-img {
  display: block;
  width: min(100%, 560px);
  max-height: 250px;
  object-fit: contain;
  image-rendering: auto;
}
.guide-media:has(.guide-scene-img) > span {
  width: 100%;
  text-align: center;
}
@media (max-width: 760px) {
  .guide-hero-art { width: 100%; margin-top: 14px; }
  .guide-hero-art .guide-scene-img { max-height: 250px; }
  .guide-media .guide-scene-img { max-height: 185px; }
}


/* 2026-10-31 solo-ranked guide and profile polish. */
.guide-scorecard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(760px,94%);margin:16px auto 0}
.guide-scorecard>div{display:grid;gap:6px;padding:14px 12px;border:1px solid rgba(167,139,250,.24);border-radius:12px;background:linear-gradient(145deg,rgba(24,22,34,.84),rgba(10,11,14,.86));text-align:center;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.guide-scorecard b{color:#d9ccff;font:16px 'DM Mono',monospace;letter-spacing:.04em}
.guide-scorecard span{color:#8f8999;font:9px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.guide-media{overflow:visible!important;padding:10px 12px 15px;border-style:solid!important;background:linear-gradient(145deg,rgba(24,22,34,.62),rgba(10,11,14,.74));box-shadow:0 16px 34px rgba(0,0,0,.18)}
.guide-media::after{display:none!important}
.guide-media .guide-scene-img{position:relative;z-index:1;filter:drop-shadow(0 14px 18px rgba(0,0,0,.22))}
.profile-moments{margin-top:72px;padding-top:36px;border-top:1px solid var(--line)}
.profile-moments-head{margin-bottom:20px}
.profile-moments-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.profile-moments-grid figure{position:relative;overflow:hidden;margin:0;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#101114;box-shadow:0 16px 34px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease}
.profile-moments-grid figure:hover{transform:translateY(-5px);border-color:rgba(185,163,255,.36);box-shadow:0 22px 42px rgba(0,0,0,.28)}
.profile-moments-grid img{display:block;width:100%;height:190px;object-fit:contain;padding:10px;background:radial-gradient(circle at 50% 38%,rgba(139,102,255,.12),transparent 62%),#0b0c10;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.profile-moments-grid figure:hover img{transform:scale(1.045)}
.profile-moments-grid figcaption{display:grid;gap:6px;padding:14px 15px 16px}
.profile-moments-grid figcaption b{font:11px 'DM Mono',monospace;color:#d9ccff;letter-spacing:.04em}
.profile-moments-grid figcaption span{color:#85808d;font-size:11px;line-height:1.45}
@media(max-width:760px){.guide-scorecard{grid-template-columns:1fr;width:100%}.profile-moments{margin-top:50px}.profile-moments-grid{grid-template-columns:1fr}.profile-moments-grid img{height:220px}}

/* Important callout: readable pixel treatment. */
.guide-callout strong{font-family:'Press Start 2P',monospace!important;font-size:clamp(14px,1.8vw,20px);letter-spacing:.03em;color:#f3efff;text-shadow:0 0 18px rgba(185,163,255,.24)}
.guide-callout span{font-size:clamp(12px,1.25vw,15px);line-height:1.65}

/* 2026-11-01 Manhattan guide and rules refresh */
.guide-page.guide-editorial,
.rules-page.rules-editorial {
  width: min(1180px, 100%);
  max-width: 1180px;
  padding-left: 28px;
  padding-right: 28px;
}
.guide-hero-featured {
  min-height: auto;
  padding: 72px 0 66px;
  text-align: left;
  align-items: stretch;
}
.guide-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(330px, .98fr);
  align-items: center;
  gap: clamp(30px, 6vw, 92px);
}
.guide-hero-copy .eyebrow { justify-content: flex-start; }
.guide-hero-copy .guide-intro { max-width: 630px !important; margin: 0 0 20px !important; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; }
.guide-hero-copy .hero-actions { justify-content: flex-start; margin-top: 26px; }
.guide-hero-featured .guide-hero-copy h1 { text-align: left; margin: 20px 0 22px; }
.guide-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 650px;
}
.guide-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 10px;
  background: rgba(16,19,25,.66);
  color: #9aa3b2;
  font: 10px 'DM Mono', monospace;
  letter-spacing: .02em;
}
.guide-hero-proof b { color: #d9ccff; font-size: 9px; }
.guide-skin-feature {
  position: relative;
  min-height: 450px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr);
  align-items: end;
  gap: 8px;
  overflow: visible;
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 22px;
  padding: 20px 18px 18px;
  background:
    radial-gradient(circle at 70% 34%, rgba(167,139,250,.2), transparent 42%),
    linear-gradient(145deg, rgba(22,23,31,.92), rgba(8,10,14,.76));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.28);
}
.guide-skin-feature::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: 18%;
  top: 16%;
  border-radius: 50%;
  background: rgba(167,139,250,.16);
  filter: blur(46px);
  pointer-events: none;
}
.guide-skin-guide-img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 330px) !important;
  height: 410px !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,.42));
  image-rendering: auto !important;
  animation: guide-skin-enter 760ms var(--motion-ease) both;
}
.guide-skin-note {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(10,12,18,.72);
  box-shadow: 0 16px 38px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.guide-skin-note small { color: #b9a3ff; font: 9px 'DM Mono', monospace; letter-spacing: .12em; }
.guide-skin-note strong { color: #f4f0ff; font: 700 15px/1.35 Manrope, sans-serif; letter-spacing: -.02em; }
.guide-skin-note span { color: #a2a0ac; font-size: 11px; line-height: 1.5; }
@keyframes guide-skin-enter { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.guide-steps { gap: 32px; }
.guide-row { min-height: 290px; gap: clamp(34px, 7vw, 100px); }
.guide-media { border-radius: 18px; background: linear-gradient(145deg, rgba(24,22,34,.78), rgba(10,11,14,.86)); }
.guide-media .guide-scene-img { width: min(100%, 590px); max-height: 280px; }
.guide-media > span { letter-spacing: .12em; }
.guide-copy { padding: 8px 0; }
.guide-copy p { max-width: 510px; line-height: 1.8; }
.guide-score-callout {
  display: grid;
  gap: 22px;
  margin: 56px 0 18px;
  padding: 30px 32px 32px;
  border: 1px solid rgba(167,139,250,.25) !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 100% 0%, rgba(167,139,250,.15), transparent 45%), linear-gradient(145deg, rgba(23,20,34,.88), rgba(10,11,15,.88));
}
.guide-callout-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); align-items: end; gap: 26px; }
.guide-callout-head .eyebrow { margin-bottom: 13px; }
.guide-callout-head h2 { margin: 0; color: #f3efff; font: 700 clamp(22px, 3.3vw, 34px)/1.22 Manrope, sans-serif; letter-spacing: -.045em; }
.guide-callout-head h2 em { color: #c7b6ff; font-style: normal; }
.guide-callout-head p { margin: 0; color: #a6a1ae; font-size: 13px; line-height: 1.7; }
.guide-scorecard { width: 100%; margin: 0; }
.guide-callout-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-callout-actions .primary-btn, .guide-callout-actions .secondary-btn { min-height: 42px; }

.rules-editorial { padding-top: 72px !important; }
.rules-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 60px; align-items: end; padding: 22px 0 52px; }
.rules-hero-copy h1 { margin: 18px 0 20px !important; text-align: left !important; font: 800 clamp(38px, 5.6vw, 68px)/1.08 Manrope, sans-serif !important; letter-spacing: -.055em !important; text-shadow: none !important; }
.rules-hero-copy h1 em { color: #c7b6ff; font-style: normal; }
.rules-hero-copy p { max-width: 600px; margin: 0; color: #a6a1ae; font-size: 15px; line-height: 1.75; }
.rules-hero-copy .hero-actions { margin-top: 26px; }
.rules-hero-stats { display: grid; gap: 10px; }
.rules-hero-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.13); }
.rules-hero-stats b { color: #e3d8ff; font: 18px 'DM Mono', monospace; }
.rules-hero-stats span { color: #8e8998; font: 10px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.rules-server-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; margin: 0 0 36px; padding: 22px; border: 1px solid rgba(167,139,250,.2); border-radius: 18px; background: linear-gradient(145deg, rgba(22,21,30,.86), rgba(11,13,17,.86)); }
.rules-server-panel h2 { margin: 10px 0 8px; font: 700 22px/1.25 Manrope, sans-serif; letter-spacing: -.03em; }
.rules-server-panel p { margin: 0; color: #94909d; font-size: 12px; line-height: 1.65; }
.rules-server-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rules-server-actions .server-option { min-height: 110px; padding: 15px 16px; border-radius: 14px; gap: 8px; }
.rules-server-actions .server-option strong { font-size: clamp(15px, 1.4vw, 18px); letter-spacing: -.02em; }
.rules-server-actions .server-option span { color: #b9a3ff; font-size: 10px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.rule-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 16px; min-height: 190px; padding: 22px 22px 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg, rgba(22,22,29,.78), rgba(12,14,18,.84)); transition: transform 240ms var(--motion-ease), border-color 240ms ease, box-shadow 240ms ease; }
.rule-card:hover { transform: translateY(-4px); border-color: rgba(167,139,250,.42); box-shadow: 0 20px 42px rgba(0,0,0,.22); }
.rule-index { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(167,139,250,.34); border-radius: 10px; color: #c7b6ff; background: rgba(167,139,250,.08); font: 11px 'DM Mono', monospace; }
.rule-card h2 { margin: 0 0 9px; font: 700 17px/1.35 Manrope, sans-serif; letter-spacing: -.02em; }
.rule-card p { margin: 0; color: #a6a1ae; font-size: 12px; line-height: 1.72; }
.rule-card code { color: #e3d8ff; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.18); border-radius: 6px; padding: 2px 5px; font: 11px 'DM Mono', monospace; }
.tier-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 32px; align-items: center; margin-top: 40px; padding: 26px 26px 28px; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.tier-panel-copy h2 { margin: 12px 0 12px; font: 700 clamp(23px, 3.2vw, 34px)/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.tier-panel-copy p { max-width: 480px; margin: 0; color: #a6a1ae; font-size: 13px; line-height: 1.75; }
.tier-ranges { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 7px; }
.tier-ranges div { display: grid; gap: 8px; justify-items: center; padding: 13px 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(16,18,24,.72); }
.tier-ranges span { color: #a59bb8; font: 10px 'DM Mono', monospace; }
.tier-ranges b { color: #e6dcff; font: 12px 'DM Mono', monospace; }
.rules-apply { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 42px; padding: 26px 0 4px; }
.rules-apply h2 { margin: 12px 0 8px; font: 700 28px/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.rules-apply p { max-width: 580px; margin: 0; color: #a6a1ae; font-size: 13px; line-height: 1.7; }
.rules-apply-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
  .guide-hero-grid, .rules-hero, .rules-server-panel, .tier-panel { grid-template-columns: 1fr; }
  .guide-hero-featured { padding-top: 54px; }
  .guide-skin-feature { min-height: 390px; max-width: 620px; width: 100%; justify-self: center; }
  .rules-hero { gap: 30px; }
  .rules-hero-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .rules-hero-stats div { display: grid; gap: 6px; justify-items: start; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
  .rules-apply { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 700px) {
  .guide-page.guide-editorial, .rules-page.rules-editorial { padding-left: 18px; padding-right: 18px; }
  .guide-hero-featured .guide-hero-copy h1 { font-size: clamp(38px, 10vw, 58px); }
  .guide-hero-copy .hero-actions, .guide-callout-actions, .rules-hero-copy .hero-actions, .rules-apply-actions { flex-direction: column; align-items: stretch; }
  .guide-hero-copy .hero-actions > *, .guide-callout-actions > *, .rules-hero-copy .hero-actions > *, .rules-apply-actions > * { justify-content: center; }
  .guide-skin-feature { grid-template-columns: minmax(0, 1fr) 150px; min-height: 340px; padding: 12px; }
  .guide-skin-guide-img { height: 330px !important; }
  .guide-skin-note { padding: 13px 12px; }
  .guide-skin-note strong { font-size: 13px; }
  .guide-row { grid-template-columns: 1fr; gap: 18px; }
  .guide-row.reverse .guide-media, .guide-row.reverse .guide-copy { order: initial; }
  .guide-media { min-height: 195px; }
  .guide-media .guide-scene-img { max-height: 210px; }
  .guide-score-callout { padding: 22px 18px 24px; }
  .guide-callout-head { grid-template-columns: 1fr; gap: 10px; }
  .rules-hero-stats { grid-template-columns: 1fr; }
  .rules-server-panel { padding: 18px; }
  .rules-server-actions, .rules-grid { grid-template-columns: 1fr; }
  .rule-card { min-height: 0; }
  .tier-panel { padding: 24px 0 26px; }
  .tier-ranges { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-skin-guide-img { animation: none !important; }
  .guide-media, .rule-card, .guide-skin-feature { transition: none !important; }
}

/* Vanilla asset placement: keep the helper secondary to the actual guide content. */
.guide-hero-scene {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 18px 18px 14px;
  background: linear-gradient(145deg, rgba(22,23,28,.9), rgba(9,11,14,.84));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.26);
}
.guide-hero-scene::before {
  content: '';
  position: absolute;
  inset: 20% 10% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(185,163,255,.15), transparent 68%);
  filter: blur(22px);
  pointer-events: none;
}
.guide-hero-scene .guide-scene-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 355px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.34));
}
.guide-scene-note {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 6px;
  max-width: 170px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(9,11,15,.76);
  backdrop-filter: blur(12px);
}
.guide-scene-note small { color: #c7b6ff; font: 9px 'DM Mono', monospace; letter-spacing: .12em; }
.guide-scene-note strong { color: #f4f0ff; font-size: 13px; line-height: 1.35; }
.guide-scene-note span { color: #9d99a6; font-size: 10px; line-height: 1.45; }
.guide-score-callout { grid-template-columns: minmax(0, 1fr) 150px; align-items: center; }
.guide-callout-main { min-width: 0; }
.guide-callout-skin { display: grid; justify-items: center; align-self: stretch; gap: 6px; }
.guide-callout-skin img { display: block; width: 130px; height: 210px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 14px 14px rgba(0,0,0,.4)); }
.guide-callout-skin span { color: #b8b1c4; font: 9px/1.4 'DM Mono', monospace; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) {
  .guide-score-callout { grid-template-columns: 1fr; }
  .guide-callout-skin { grid-row: 1; justify-items: start; grid-template-columns: 92px minmax(0,1fr); align-items: end; }
  .guide-callout-skin img { width: 92px; height: 130px; }
  .guide-callout-skin span { text-align: left; }
}
@media (max-width: 700px) {
  .guide-hero-scene { min-height: 260px; padding: 10px; }
  .guide-hero-scene .guide-scene-img { max-height: 235px; }
  .guide-scene-note { right: 10px; bottom: 10px; max-width: 145px; padding: 9px 10px; }
  .guide-scene-note span { display: none; }
}