/* ============================================================
   SkinSignal / the prestige page, signed out
   renderPublic in js/prestige.js. Every rule is scoped to the public
   view (.pl-wrap--public, set only while nobody is signed in, and the
   .pp-* classes only it draws), so a signed in reader's page is exactly
   as css/prestige-page.css draws it.

     the hero     Your stack is your rank, three principles, the real
                  Immortal emblem in a gold and blue light (CSS light,
                  not a painted scene), and the Tier 30 panel
     the ladder   all thirty real emblems and names in five groups of
                  six; the prestige edge warms group by group, from
                  neutral to a restrained gold on the last
     the band     Where do you land, an unrevealed rank drawn in plain
                  UI geometry, and Sign in with Steam

   Gold is prestige (the title, earned, Immortal, the last group); blue
   is the way in (Steam) and the other principles. No money anywhere.
   ============================================================ */

.pl-wrap--public { max-width: 1440px; }

.pp-eyebrow {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e4ae39;
}
.pp-gold { color: #e4ae39; }

/* ============================================================
   THE HERO
   ============================================================ */
.pp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(8px, 1vw, 16px) 0 clamp(8px, 1vw, 12px);
}

.pp-title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(40px, 4.7vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #f4f6fa;
}
.pp-title__line { display: block; }
.pp-lede {
  max-width: 540px;
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  color: #c3c9d3;
}

.pp-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  margin: clamp(26px, 2.6vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.pp-pr {
  --pr: 76, 141, 255;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.pp-pr--gold { --pr: 228, 174, 57; }
.pp-pr__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(var(--pr), 0.3);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--pr), 0.1), rgba(var(--pr), 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pp-pr__icon svg { width: 22px; height: 22px; fill: none; stroke: rgb(var(--pr)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-pr__text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: #8f96a3;
}
.pp-pr__text b {
  display: block;
  margin-bottom: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #eef1f6;
}
.pp-pr__text b span { margin-right: 8px; color: rgb(var(--pr)); }

/* The Immortal emblem, in a light made of CSS: gold above, blue below. */
.pp-hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 30vw, 440px);
}
.pp-hero__light {
  position: absolute;
  inset: -6% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 34%, rgba(228, 174, 57, 0.2), rgba(228, 174, 57, 0) 70%),
    radial-gradient(46% 40% at 50% 66%, rgba(61, 127, 255, 0.16), rgba(61, 127, 255, 0) 72%),
    radial-gradient(60% 18% at 50% 92%, rgba(228, 174, 57, 0.1), rgba(228, 174, 57, 0) 70%);
}
.pp-hero__emblem {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(260px, 26vw, 380px);
  aspect-ratio: 1 / 1;
}
.pp-hero__emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7));
}

/* The Tier 30 panel. */
.pp-panel {
  position: relative;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 22, 34, 0.94), rgba(8, 12, 20, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.pp-panel::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 174, 57, 0.7), transparent);
}
.pp-panel__k {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8f96a3;
}
.pp-panel__name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(36px, 3vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: #e4ae39;
}
.pp-panel__line {
  margin: 12px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: #b9bfca;
}
.pp-panel__ask {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(76, 141, 255, 0.22);
  border-radius: 12px;
  background: rgba(10, 18, 34, 0.55);
}
.pp-panel__ask-k {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: #f4f6fa;
}
.pp-panel__ask-line {
  margin: 6px 0 16px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: #8f96a3;
}
.pp-panel .pp-cta { width: 100%; justify-content: center; }

/* ============================================================
   THE LADDER
   ============================================================ */
.pp-ladder {
  position: relative;
  padding: clamp(24px, 2.4vw, 38px);
  border: 1px solid rgba(76, 141, 255, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(61, 127, 255, 0.07), rgba(61, 127, 255, 0) 70%),
    linear-gradient(180deg, rgba(12, 18, 30, 0.92), rgba(6, 9, 15, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.pp-ladder__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(18px, 1.8vw, 26px);
}
.pp-ladder__title {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e4ae39;
}
.pp-ladder__sub {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: #8f96a3;
}
.pp-ladder__chip {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(228, 174, 57, 0.35);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f1cf7a;
  background: rgba(228, 174, 57, 0.05);
}

.pp-groups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
/* The prestige edge, warming up the groups: neutral, then a little blue,
   then gold on the last. */
.pp-group {
  --edge: rgba(255, 255, 255, 0.07);
  --tint: rgba(255, 255, 255, 0);
  --k: 118, 166, 255;
  padding: 16px 10px 14px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--tint), rgba(255, 255, 255, 0) 60%), rgba(9, 13, 21, 0.7);
}
.pp-group--2 { --edge: rgba(255, 255, 255, 0.08); }
.pp-group--3 { --edge: rgba(118, 166, 255, 0.14); --tint: rgba(61, 127, 255, 0.03); }
.pp-group--4 { --edge: rgba(118, 166, 255, 0.2); --tint: rgba(61, 127, 255, 0.05); }
.pp-group--5 { --edge: rgba(228, 174, 57, 0.38); --tint: rgba(228, 174, 57, 0.06); --k: 228, 174, 57; }

.pp-group__k {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  color: rgb(var(--k));
}
.pp-group__label {
  margin: 4px 0 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  color: #6f7785;
}
.pp-group__ranks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* A rank: the emblem breathing on its own, the number and the name. */
.pp-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 2px 8px;
  border-radius: 10px;
  transition: translate var(--hover-dur, 200ms) var(--ease), background-color var(--hover-dur, 200ms) ease;
}
/* A square box whatever the artwork's own shape: the height is set, not
   left to the picture, so a tall emblem cannot stretch its box. */
.pp-emblem { --em: clamp(52px, 4.4vw, 70px); display: block; width: var(--em); height: var(--em); min-height: 0; }
.pp-emblem picture { display: block; width: 100%; height: 100%; }
.pp-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
  transition: filter var(--hover-dur, 200ms) ease;
}
/* The number over the name, so a name only ever breaks between words. */
.pp-rank__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #b9bfca;
  overflow-wrap: normal;
  hyphens: none;
}
.pp-rank__no {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #6f7785;
}
.pp-rank:hover { translate: 0 -3px; background: rgba(255, 255, 255, 0.03); }
.pp-rank:hover .pp-emblem img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(var(--k), 0.35)) brightness(1.08); }
.pp-rank:hover .pp-rank__name { color: #ffffff; }

/* Immortal: the same system, a stronger gold edge. */
.pp-rank--top { background: rgba(228, 174, 57, 0.06); box-shadow: inset 0 0 0 1px rgba(228, 174, 57, 0.4); }
.pp-rank--top .pp-rank__name { font-weight: 700; color: #f4f6fa; }
.pp-rank--top .pp-emblem img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(228, 174, 57, 0.3)); }

/* ============================================================
   WHERE DO YOU LAND
   ============================================================ */
.pp-find {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.62fr);
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  padding: clamp(26px, 2.6vw, 40px);
  border: 1px solid rgba(228, 174, 57, 0.3);
  border-radius: 20px;
  background:
    radial-gradient(40% 90% at 85% 50%, rgba(228, 174, 57, 0.06), rgba(228, 174, 57, 0) 70%),
    radial-gradient(40% 90% at 50% 50%, rgba(61, 127, 255, 0.06), rgba(61, 127, 255, 0) 70%),
    linear-gradient(180deg, rgba(14, 18, 28, 0.94), rgba(7, 10, 16, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}
.pp-find__title > span { display: block; }
.pp-find__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 0.98;
  text-transform: uppercase;
  color: #f4f6fa;
}
.pp-find__line {
  max-width: 520px;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: #b9bfca;
}
.pp-find__act {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.6);
}
.pp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #b9bfca;
}
.pp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.pp-trust svg { width: 17px; height: 17px; fill: none; stroke: #4c8dff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* The unrevealed rank: UI geometry, never an emblem. A rotated square
   with a dashed inner square and a question mark. */
.pp-unrev { display: grid; justify-items: center; text-align: center; }
.pp-unrev__frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 14px;
}
.pp-unrev__frame::before,
.pp-unrev__inner {
  content: '';
  position: absolute;
  rotate: 45deg;
  border-radius: 10px;
}
.pp-unrev__frame::before {
  inset: 12px;
  border: 1px solid rgba(228, 174, 57, 0.45);
  background: linear-gradient(135deg, rgba(228, 174, 57, 0.1), rgba(61, 127, 255, 0.06));
  box-shadow: 0 0 30px -8px rgba(228, 174, 57, 0.35);
}
.pp-unrev__inner { inset: 26px; border: 1px dashed rgba(255, 255, 255, 0.22); }
.pp-unrev__q {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: #f1cf7a;
}
.pp-unrev__k {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8f96a3;
}
.pp-unrev__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: #f4f6fa;
}
.pp-unrev__line {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #8f96a3;
}

/* ============================================================
   NARROWER
   ============================================================ */
@media (max-width: 1279px) {
  .pp-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .pp-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 28px; align-items: center; }
  .pp-panel__ask { margin-top: 0; grid-row: 1 / 4; grid-column: 2; }
  .pp-panel__line { border-bottom: 0; padding-bottom: 0; }
  .pp-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-find { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-unrev { grid-column: 1 / -1; }
}

/* Tablet: the copy over the emblem; the ladder in two columns of groups. */
@media (max-width: 900px) {
  .pp-hero { grid-template-columns: minmax(0, 1fr); }
  .pp-hero__art { min-height: 0; padding: 12px 0; }
  .pp-panel { display: block; }
  .pp-panel__ask { margin-top: 20px; }
  .pp-principles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-emblem { --em: 60px; }
  /* Five groups in two columns: the Prestige group takes the last row
     whole, six across. */
  .pp-group--5 { grid-column: 1 / -1; }
  .pp-group--5 .pp-group__ranks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pp-find { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: one group per row, still three emblems across, big enough to
   read every name. */
@media (max-width: 560px) {
  .pp-groups { grid-template-columns: minmax(0, 1fr); }
  .pp-emblem { --em: 64px; }
  .pp-group--5 .pp-group__ranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-rank__name { font-size: 12.5px; }
  .pp-group__ranks { gap: 16px 8px; }
  .pp-find .pp-cta,
  .pp-panel .pp-cta { width: 100%; justify-content: center; }
  .pp-find__act { padding: 18px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-rank,
  .pp-emblem img { transition: none; }
  .pp-rank:hover { translate: none; }
}