/* Realm Board — private prototype
   Two layers, never blended:
     BRAND LAYER : black + Realm Board yellow, sparse and restrained
     DATA LAYER  : E yellow / L light blue / C red / R purple, clean and precise
*/

:root {
  /* brand layer */
  --rb-yellow: #F8E204;
  --rb-yellow-dim: #8A7D07;
  --rb-ink: #0A0A0A;

  /* base */
  --bg: #000000;
  --panel: #101010;
  --panel-2: #191919;
  --line: #2A2A2A;
  --text: #F2F2F2;
  --dim: #949494;

  /* functional STEPN stats — never overridden by brand colors */
  --stat-E: #FFC93C;
  --stat-L: #59C7F2;
  --stat-C: #FF5A52;
  --stat-R: #9B7BFF;
  --neutral: #6C7889;

  /* STEPN quality */
  --q-common: #9AA6B2;
  --q-uncommon: #43C86A;
  --q-rare: #3B9DFF;
  --q-epic: #C558F5;
  --q-legendary: #FFA033;

  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

:where(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--rb-yellow);
  outline-offset: 2px;
}

.hero, .board-guide, .realm-switcher, .tabs, .board, .foot, .cta-bar { position: relative; z-index: 1; }

/* ===================== BRAND LAYER ===================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 4px 12px 3px;
  border-bottom: 1px solid var(--line);
}
.hero__inner { position: relative; z-index: 1; }

/* --- brand panel: the logo area reads as one graphic, not a header row --- */
.brandpanel {
  position: relative;
  padding: 3px 8px 2px;
  background: var(--bg);
  overflow: hidden;
}
.brandpanel__top {
  position: relative;
  padding-top: 2px;
}

.brandmark {
  display: block;
  /* The mark shared this row with four lines of safety copy. Those lines are
     now in the footer, so the row exists only to carry the logo and the live
     count - and the point of moving them was to get the board on screen
     sooner, which only happens if the hero actually loses height. */
  width: min(46%, 150px);
  max-width: 100%;
  height: auto;
  margin: 0 0 0 -3px;
  object-fit: contain;
  /* The approved logo ships with an opaque black ground. Screen blending drops
     that ground optically against the flat black panel; the asset itself stays
     untouched. */
  mix-blend-mode: screen;
}

/* The right of the hero reads purpose, scope, live demand, then safety. */
.brandpanel__claim {
  position: absolute;
  top: 2px;
  right: 0;
  width: 54%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  text-align: left;
  z-index: 1;
}
.brandpanel__purpose { max-width: 100%; }
.brandpanel__eyebrow,
.brandpanel__scope { margin: 0; white-space: nowrap; }
.brandpanel__eyebrow {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .075em;
}
.brandpanel__scope {
  margin-top: 1px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .015em;
}
.brandpanel__claim-item {
  max-width: 100%;
  line-height: 1;
}
.brandpanel__claim-item--demand {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 8px;
  padding: 0 0 1px;
  color: #FFFFFF;
}
.brandpanel__claim-item--demand strong {
  font-size: clamp(3.25rem, 16.4vw, 4.25rem);
  font-weight: 950;
  line-height: .76;
  letter-spacing: -.06em;
  color: var(--rb-yellow);
}
.brandpanel__claim-item--demand span {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .04em;
  padding-bottom: 1px;
  text-align: left;
  color: #FFFFFF;
}

/* Support, not headline: same weight family as the count so the column reads
   as one block, but dim and at the 11px floor so the number keeps the eye.
   A hairline separates the measurement from the description. */
.brandpanel__concept {
  margin: 3px 0 0;
  padding: 7px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  max-width: 100%;
  color: var(--dim);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .03em;
}
.brandpanel__concept li { white-space: nowrap; }

.safety {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.safety li {
  font-size: 11px;
  letter-spacing: .1em;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  background: var(--panel);
  white-space: nowrap;
}
.safety--block { margin-bottom: 12px; }

/* Board guide + compact community utilities */
.board-guide { margin: 10px 12px 0; }
.board-guide--below { margin-top: 0; margin-bottom: 12px; }
.operator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.operator p { margin: 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
.operator b { color: var(--text); letter-spacing: .06em; }
.utility-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.utility-link {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 3px 10px 4px 8px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.utility-link:hover { color: var(--text); background: var(--panel-2); }
.utility-link:focus-visible { outline-color: var(--rb-yellow); }
.utility-link:active { transform: translateY(1px); }
.utility-link[aria-disabled="true"] {
  color: var(--dim);
  border-style: dashed;
  opacity: .65;
  cursor: not-allowed;
}
.utility-link[data-state="copied"] { color: var(--rb-yellow); border-color: var(--rb-yellow); background: var(--panel); }

/* ===================== REALMS + TABS ===================== */
.realm-switcher {
  margin: 0 12px;
  padding: 0;
  border: 0;
  background: var(--bg);
}
.realm-switcher__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.realm-option {
  min-width: 0;
  min-height: 44px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.realm-option small {
  min-width: 1.6em;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 11px;
  letter-spacing: 0;
}
.realm-option.is-on {
  border-color: var(--line);
  background: var(--bg);
  color: var(--rb-yellow);
  box-shadow: inset 0 -2px 0 var(--rb-yellow);
}
.realm-option:focus-visible { outline-color: var(--rb-yellow); }

/* One mark per WANTED. The row is a third flex line inside the existing
   control, so the switcher gains a reading without gaining a heading, and the
   button keeps its 44px target. Marks are a fixed 3px and never stretch: a
   mark that grows to fill the space is a bar, and a bar over four posts
   argues something the four posts do not say. */
.realm-option { flex-wrap: wrap; align-content: center; padding: 0 4px; }
.realm-option__marks {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
  height: 3px;
  margin-top: 3px;
  overflow: hidden;
}
.realm-option__marks:empty { margin-top: 0; }
.realm-option__marks i {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  /* Deliberately not brand yellow. The sticky CTA owns filled yellow, and the
     selected realm is already said twice - yellow label, yellow underline. A
     third yellow here would compete with the one thing that is an action. */
  background: rgba(255, 255, 255, .35);
}
.realm-option.is-on .realm-option__marks i { background: rgba(255, 255, 255, .85); }
/* Zero keeps its number and simply stops arguing. */
.realm-option[data-zero] small { opacity: .45; }

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 0 12px;
  margin-top: 0;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.tab {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .12em;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
}
.tab.is-on {
  color: var(--rb-yellow);
  background: var(--bg);
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--rb-yellow);
}
.tab__count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, .12);
}
.tab.is-on .tab__count { background: rgba(255, 255, 255, .08); }

/* ===================== BOARD ===================== */
.board { padding: 4px 12px 16px; }

.key {
  padding: 0;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(16, 16, 16, .92);
}
.key__label {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 44px;
  padding: 7px 28px 7px 9px;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--dim);
  cursor: pointer;
  list-style: none;
}
.key__label::-webkit-details-marker { display: none; }
.key__label::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--dim);
  font-size: .8rem;
}
.key[open] .key__label::after { content: "−"; }
.key__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  padding: 0 9px 9px;
}
.key__row--gem { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.key__cell { display: grid; place-items: center; min-width: 0; }
.key__cell svg { width: 100%; height: auto; max-width: 40px; }
.list { display: flex; flex-direction: column; gap: 12px; }
.board-state {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px 18px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  text-align: center;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .08em;
}
.board-state strong { color: var(--text); font-size: .78rem; }
.board-state .btn { min-width: 168px; }
.board-state--loading { min-height: 120px; }
.board-state--error { border-top-color: var(--stat-C); }

/* ===================== CARD (DATA LAYER) ===================== */
.card {
  position: relative;
  padding: 13px 13px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
}
/* Unseen marker. A dot, never the word NEW - it has to survive a reader who
   does not read English, and a count of one is the whole message. Brand yellow
   is safe here: it is the only yellow dot on a card, and the stat colours
   (E/L/C/R) are letters in tiles, never bare dots. */
.card__unread {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rb-yellow);
  /* A hairline of the card's own ground keeps a 6px marker from reading as a
     small filled control next to the sticky CTA. */
  box-shadow: 0 0 0 1.5px var(--bg);
  pointer-events: none;
}
.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.card__ids { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card__type {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--text);
}

/* Quality: colour plus a five-step count, no text. An initial is deliberately
   not used - it would collide with the E / L / C / R stat alphabet. */
.q {
  display: inline-grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 2px;
  width: 42px;
  padding: 5px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
}
.q i {
  height: 8px;
  border-radius: 1px;
  /* the unlit segments are the denominator - they must stay readable, or
     4-of-5 and 5-of-5 collapse into the same mark */
  background: rgba(255, 255, 255, .18);
}
.q[data-step="1"] i:nth-child(-n + 1),
.q[data-step="2"] i:nth-child(-n + 2),
.q[data-step="3"] i:nth-child(-n + 3),
.q[data-step="4"] i:nth-child(-n + 4),
.q[data-step="5"] i { background: var(--q-color); }
.q--common { --q-color: var(--q-common); }
.q--uncommon { --q-color: var(--q-uncommon); }
.q--rare { --q-color: var(--q-rare); }
.q--epic { --q-color: var(--q-epic); }
.q--legendary { --q-color: var(--q-legendary); border-color: color-mix(in srgb, var(--q-legendary) 45%, transparent); }

.gemtag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--rb-ink);
  background: var(--sc);
}

.chip {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.chip--time { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.chip__clock {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip--realm {
  border-color: var(--line);
  color: var(--dim);
  font-size: 11px;
}

/* priority 1: max buy price */
.price { margin: 2px 0 10px; }
.price__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(1.9rem, 9.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: #FFFFFF;
}
.price__value .op { color: var(--text); font-size: .62em; font-weight: 800; }
.price__unit {
  font-size: .38em;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--dim);
}

/* sockets + base stats sit side by side */
.spec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .55);
}
.sockets {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 5px;
}
.sockets__cell { display: grid; place-items: center; }
.rb-socket, .rb-gem {
  --render-size: var(--mark-size);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--render-size);
  height: var(--render-size);
  border-radius: 16%;
  font-variant-numeric: tabular-nums;
}
.rb-socket {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--mark-color) 8%, var(--panel));
}
/* Quality is a four-slot meter on the lower edge: lit segments = horn count.
   Discrete separated marks are counted at a glance; a fraction of a continuous
   outline is not. Never a digit - horn count stays shape-only. */
.rb-socket__meter {
  position: absolute;
  left: calc(var(--render-size) * .13);
  right: calc(var(--render-size) * .13);
  bottom: calc(var(--render-size) * .11);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(1px, calc(var(--render-size) * .045));
  pointer-events: none;
  z-index: 1;
}
.rb-socket__meter i {
  height: max(3px, calc(var(--render-size) * .085));
  border-radius: 1px;
  background: var(--line);
}
.rb-socket[data-horns="1"] .rb-socket__meter i:nth-child(-n + 1),
.rb-socket[data-horns="2"] .rb-socket__meter i:nth-child(-n + 2),
.rb-socket[data-horns="3"] .rb-socket__meter i:nth-child(-n + 3),
.rb-socket[data-horns="4"] .rb-socket__meter i { background: var(--mark-color); }
/* Legendary carries two reinforcements beyond the fourth segment, because
   3-vs-4 is the pair a count has to work hardest to separate. */
.rb-socket[data-horns="4"] {
  background: color-mix(in srgb, var(--mark-color) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--mark-color) 45%, transparent);
}
.rb-socket__glyph,
.rb-gem__glyph {
  position: relative;
  z-index: 1;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
}
.rb-socket__glyph {
  color: var(--mark-color);
  font-size: max(11px, calc(var(--render-size) * .34));
  padding-bottom: calc(var(--render-size) * .17);
}
.rb-socket__minimum {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: 2;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.rb-socket--any {
  border: 1.5px dashed var(--neutral);
  background: var(--panel-2);
}
.rb-socket--any .rb-socket__glyph { color: var(--dim); padding-bottom: 0; }

/* Original Realm Board gem data tiles: numeral = level, letter/colour = stat,
   outline/tint/solid weight = tier. No image or gem-like silhouette. */
.rb-gem {
  color: var(--mark-color);
  font-size: max(11px, calc(var(--render-size) * .4));
}
.rb-gem[data-tier="1"] {
  border: 1.5px solid var(--mark-color);
  background: transparent;
}
.rb-gem[data-tier="2"] {
  border: 2px solid var(--mark-color);
  background: color-mix(in srgb, var(--mark-color) 12%, var(--panel));
}
.rb-gem[data-tier="3"] {
  border: 2px solid var(--mark-color);
  background: var(--mark-color);
  color: var(--rb-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rb-ink) 55%, transparent);
}
.rb-gem__glyph { color: currentColor; }

.statreq {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.statreq__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  min-width: 0;
}
.statreq__ic {
  flex: none;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--sc);
  color: var(--rb-ink);
  font-size: 11px;
  font-weight: 900;
}
.statreq__val {
  font-size: .84rem;
  font-weight: 800;
  color: var(--sc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statreq__val .op { font-weight: 700; opacity: .85; margin-right: 1px; }
.statreq__val.is-any { font-size: .7rem; letter-spacing: .08em; opacity: .6; }

.spec--gem { justify-content: flex-start; gap: 14px; }
.gembig { flex: none; }
.gemmeta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gemmeta__lv {
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--sc);
}

.card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.btn {
  flex: 1;
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .1em;
  padding: 11px 8px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
/* The only outward action on a card points at the official marketplace.
   Nothing here addresses, contacts or identifies the poster. */
.btn--market {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--text);
}
.btn--details {
  flex: 0 0 auto;
  width: 56px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--dim);
}
.btn--details svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Skin: a glyph plus one of three states, so the word disappears. */
.chip--skin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.chip__skin {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.chip--skin[data-skin="YES"] { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.chip--skin[data-skin="NO"] { color: var(--dim); }
.chip--skin[data-skin="ANY"] { color: var(--dim); }
.btn--post {
  background: var(--rb-yellow);
  border-color: var(--rb-yellow);
  color: var(--rb-ink);
  font-size: .84rem;
  min-height: 48px;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.form__message {
  margin: 4px 0 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 90, 82, .58);
  border-radius: 8px;
  color: #FF8B85;
  background: rgba(255, 90, 82, .08);
  font-size: 11px;
  line-height: 1.45;
}

/* ===================== STICKY CTA ===================== */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 22px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .88) 62%);
  pointer-events: none;
}
.cta {
  pointer-events: auto;
  max-width: 300px;
  min-height: 44px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--rb-yellow);
  color: var(--rb-ink);
  font: inherit;
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .1em;
  padding: 13px 22px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 6px rgba(0, 0, 0, .55);
}

.card__shoe {
  flex: none;
  display: grid;
  place-items: center;
  opacity: .85;
}
.card__shoe svg { display: block; }

/* ---- START ---------------------------------------------------------
   A compact two-step entry point immediately after the Hero. */
.howto {
  position: relative;
  z-index: 1;
  margin: 8px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}
.howto__inner { position: relative; padding: 10px 12px 11px; }

/* A section label, not a headline. It only has to say which part of the page
   this is; the two steps under it carry the meaning, and a large sentence here
   competed with the board for attention while explaining less. */
.howto__title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
}
/* hand-drawn rule between steps, never a card border */
.step + .step {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='6'%3E%3Cpath d='M0 4.2 C 24 1.4, 46 5.6, 70 3 C 94 .8, 116 5.2, 140 2.4' fill='none' stroke='%232A2A2A' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='8 7'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
}
.step__num {
  grid-column: 1;
  margin-left: -7px;
  font-size: clamp(1.55rem, 7.4vw, 2rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--step-c);
  opacity: .9;
}
/* if text-stroke is unsupported the numeral still shows, just filled */
@supports not (-webkit-text-stroke: 1px red) {
  .step__num { color: var(--step-c); opacity: .38; }
}
.step { --step-c: var(--dim); color: var(--dim); }

.step__main { grid-column: 2; min-width: 0; }
/* Optical alignment only: the WANTED content sits slightly lower beside the
   taller HOME SCREEN tap row. Transform preserves divider, CTA and section geometry. */
.step--2 .step__main { transform: translateY(3px); }
.step__tap {
  grid-column: 2;
  min-width: 0;
  min-height: 44px;
  margin: -5px 0;
  padding: 5px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.step__tap .step__head { margin-bottom: 5px; }
.step__tap:active { background: var(--panel); }
.step__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.step__icon { flex: none; width: 26px; height: 26px; }
.step__icon svg { display: block; width: 100%; height: 100%; }
/* HOME SCREEN and WANTED are the subject of each step, so they stay white and
   never break mid-phrase - a wrapped "HOME / SCREEN" reads as two things. */
.step__title {
  margin: 0;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.step__body {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--dim);
}
/* the iOS share glyph sits inline in the sentence, never as a button */
.step__glyph {
  display: inline-block;
  width: .78em;
  height: .78em;
  vertical-align: -.08em;
  color: var(--text);
}
.step__glyph svg { display: block; width: 100%; height: 100%; }

.howto__cta {
  display: block;
  width: 100%;
  margin-top: 7px;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .12em;
  padding: 13px 10px;
  min-height: 44px;
  cursor: pointer;
}
.howto__cta:active { transform: translateY(1px); }

.foot {
  padding: 4px 14px 4px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .12em;
  text-align: center;
}
.foot__utilities { margin: 0 auto 12px; max-width: 360px; }
.foot p { margin: 3px 0; }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 2px 0 10px;
}
.foot__links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The hero's former claims. Permanent facts belong where permanent facts
   already live, not in the first screen of every return visit. */
.foot__safety {
  margin: 0 0 10px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .08em;
}

/* ===================== PUBLIC INFORMATION PAGES ===================== */
.legal-page { min-height: 100vh; }
.legal-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top, 0px)) 16px calc(36px + env(safe-area-inset-bottom, 0px));
}
.legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.legal-head__brand {
  color: var(--text);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.legal-head__back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
}
.legal-content { padding: 30px 0 24px; }
.legal-content h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(1.7rem, 9vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.legal-content h2 {
  margin: 28px 0 8px;
  color: var(--text);
  font-size: .8rem;
  line-height: 1.35;
  letter-spacing: .12em;
}
.legal-content p,
.legal-content li {
  color: var(--dim);
  font-size: .82rem;
  line-height: 1.72;
}
.legal-content p { margin: 0 0 14px; }
.legal-content ul { margin: 8px 0 18px; padding-left: 20px; }
.legal-content strong { color: var(--text); }
.legal-content a { color: var(--rb-yellow); overflow-wrap: anywhere; }
.legal-meta {
  margin-bottom: 26px !important;
  color: var(--dim) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
}
.legal-notice {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.legal-page .foot { padding: 22px 0 0; border-top: 1px solid var(--line); }

/* ===================== SHEETS ===================== */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 2px solid var(--rb-yellow);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .7);
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-size: .78rem; font-weight: 900; letter-spacing: .18em; }
.sheet__body {
  padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet--compact .sheet__panel { max-height: none; }
.home-guide { display: grid; gap: 8px; padding-top: 18px; }
.home-guide__step {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
}
.home-guide__step strong { font-size: .78rem; letter-spacing: .08em; }
.home-guide__num {
  width: 24px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.home-guide__share { width: 24px; height: 24px; color: var(--rb-yellow); }
.home-guide__share svg { display: block; width: 100%; height: 100%; }
.home-guide__plus { color: var(--rb-yellow); font-size: 1.35rem; line-height: 1; }
.home-guide__arrow { color: var(--dim); font-size: 1rem; line-height: 1; text-align: center; }
.xbtn {
  flex: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.modes { display: flex; gap: 6px; }
.mode {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .12em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
}
.mode.is-on {
  background: var(--bg);
  border-color: var(--line);
  color: var(--rb-yellow);
  box-shadow: inset 0 -2px 0 var(--rb-yellow);
}

.note { margin: 8px 0 0; font-size: .74rem; color: var(--text); }
.note--dim { color: var(--dim); font-size: 11px; }

.owner {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.owner__label {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--dim);
  margin-bottom: 8px;
}
.owner__btns { display: flex; gap: 8px; }
.owner__btns .btn { font-size: 11px; padding: 10px 4px; }
.owner__price { margin-top: 12px; }
.owner__price > label,
.ownership-notice {
  display: block;
  color: var(--dim);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
}
.owner__price > label { margin-bottom: 8px; }
.owner__message { margin: 10px 0 0; color: var(--stat-C); font-size: 11px; line-height: 1.4; }
.ownership-notice {
  margin: 4px 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ===================== FORMS ===================== */
.vh {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}
.field { margin-bottom: 18px; }
.field__label {
  display: block;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--dim);
  margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--dim);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  min-height: 44px;
  line-height: 20px;
}
.vh:checked + .chip-btn {
  background: rgba(248, 226, 4, .1);
  border-color: var(--rb-yellow);
  color: var(--text);
}
.vh:focus-visible + .chip-btn,
.vh:focus-visible + .shape-btn,
.vh:focus-visible + .lvl-btn { outline-color: var(--rb-yellow); }

/* stat chips keep their functional color, never brand yellow */
.chips--stat .chip-btn { min-width: 44px; text-align: center; }
.chips--stat input[value="E"]:checked + .chip-btn { background: var(--stat-E); border-color: var(--stat-E); color: var(--rb-ink); }
.chips--stat input[value="L"]:checked + .chip-btn { background: var(--stat-L); border-color: var(--stat-L); color: var(--rb-ink); }
.chips--stat input[value="C"]:checked + .chip-btn { background: var(--stat-C); border-color: var(--stat-C); color: var(--rb-ink); }
.chips--stat input[value="R"]:checked + .chip-btn { background: var(--stat-R); border-color: var(--stat-R); color: var(--rb-ink); }
.chips--stat input[value="ANY"]:checked + .chip-btn { background: var(--neutral); border-color: var(--neutral); color: var(--rb-ink); }
.chips--realm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips--realm .chip-btn { min-width: 0; text-align: center; }

/* The 2x2 cell grid IS the TL/TR/BL/BR position map. Only the selected
   position's editor is open, so every control keeps a full 44px target. */
.sockgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: 220px;
  margin: 0 auto 8px;
}
.sockcell {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}
.sockcell[aria-pressed="true"] {
  border-color: var(--rb-yellow);
  background: rgba(248, 226, 4, .1);
}
.sockcell:focus-visible { outline: 2px solid var(--rb-yellow); outline-offset: 2px; }
.sockedit {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(16, 16, 16, .9);
}
.sockedit .chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 6px;
}
.sockedit .chip-btn {
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  letter-spacing: 0;
  text-align: center;
}
.sockedit__label {
  display: block;
  margin: 1px 0 5px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
}

.shapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.shape-btn {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}
.vh:checked + .shape-btn { border-color: var(--rb-yellow); background: rgba(248, 226, 4, .1); }

.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.statedit {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sc) 10%, transparent);
  min-width: 0;
}
.chip-btn--any {
  padding: 6px 7px;
  font-size: 11px;
  min-height: 44px;
  line-height: 16px;
}
.vh:checked + .chip-btn--any { background: var(--sc); border-color: var(--sc); color: var(--rb-ink); }
.statedit__min {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  flex: 1;
  color: var(--sc);
  font-weight: 800;
  cursor: text;
}
.statedit__min input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  appearance: none;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: transparent;
  color: var(--sc);
  font: inherit;
  font-weight: 800;
  font-size: .82rem;
  padding: 3px 0;
}
.statedit__min input:focus-visible { outline: 2px solid var(--rb-yellow); outline-offset: 2px; }
.statedit__min input:disabled { opacity: .3; pointer-events: none; }

.lvlgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lvl-btn {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
}
.lvl-btn small { font-size: 11px; letter-spacing: .1em; color: var(--dim); font-weight: 800; }
.vh:checked + .lvl-btn { border-color: var(--rb-yellow); background: rgba(248, 226, 4, .1); }
.vh:checked + .lvl-btn small { color: var(--text); }

.pricefield {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.pricefield .op { color: var(--text); font-weight: 900; font-size: 1.1rem; }
.pricefield input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 900;
  font-size: 1.3rem;
  padding: 2px 0;
}
.pricefield input::placeholder { color: #5A5A5A; }
.pricefield__unit { font-size: 11px; letter-spacing: .14em; color: var(--dim); font-weight: 800; }
.pricefield--qty { margin-top: 8px; }
.pricefield--qty input { font-size: 1rem; }

.formactions { margin-top: 4px; }
.formactions .btn { width: 100%; }
.turnstile-slot { width: 100%; }

/* ================= POST SUCCESS =================
 * One approved frame on black for about two seconds. No storyboard, no
 * impact, no burst, no debris: a posted WANTED is a small, ordinary success,
 * and the board is what the person came back for.
 *
 * The image carries its own black ground and its own centring, so it is laid
 * out whole with object-fit: contain and never cropped. On every phone in
 * range the frame is taller than the viewport is wide, so width is the
 * limiting side and the wordmark lands in the optical centre.
 */
.post-success {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
  pointer-events: none;
}
.post-success[hidden] { display: none; }
.post-success__done {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.post-success.is-on { animation: rb-done 2s linear both; }
.post-success.is-on .post-success__done { animation: rb-done-frame 2s cubic-bezier(.22, .78, .32, 1) both; }

/* 0-0.20s settle in, 0.20-1.50s hold still, 1.50-2.00s fade. The scale moves
   4% and stops - there is no overshoot, so it reads as arriving rather than
   bouncing. */
@keyframes rb-done {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rb-done-frame {
  0% { opacity: 0; transform: scale(.96); }
  10% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.share-success {
  position: fixed;
  inset: 0;
  z-index: 89;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px
    max(24px, env(safe-area-inset-bottom, 0px));
  overflow: auto;
  background: #000000;
}
.share-success[hidden] { display: none; }
.share-success__panel {
  width: min(100%, 430px);
  display: grid;
  gap: 16px;
  text-align: center;
}
.share-success__eyebrow,
.share-success__summary {
  margin: 0;
  color: var(--dim);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}
.share-success h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  line-height: 1;
  letter-spacing: .04em;
}
.share-success__x,
.share-success__back {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-decoration: none;
}
.share-success__x {
  border: 0;
  background: var(--rb-yellow);
  color: var(--rb-ink);
}
.share-success__back {
  border: 1px solid var(--line);
  background: #000000;
  color: var(--text);
}
.share-success__x:focus-visible,
.share-success__back:focus-visible {
  outline: 2px solid var(--rb-yellow);
  outline-offset: 3px;
}
body.share-success-open { overflow: hidden; }

/* ===================== TOAST ===================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 80;
  padding: 10px 16px;
  border: 1px solid var(--rb-yellow);
  border-radius: 999px;
  background: rgba(0, 0, 0, .96);
  color: var(--rb-yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--warning {
  width: max-content;
  max-width: calc(100vw - 32px);
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  border-color: #686868;
  border-radius: 12px;
  background: #050505;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .88);
  color: #FFFFFF;
  line-height: 1.45;
  letter-spacing: .06em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  /* Fade in, hold, fade out. No scale at all. */
  .post-success.is-on .post-success__done { animation: rb-done-frame-reduced 2s ease both; }
}
@keyframes rb-done-frame-reduced {
  0% { opacity: 0; transform: none; }
  10%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* narrow phones: the socket block yields so base-stat values are never clipped.
   Data readability wins over decoration. */
@media (max-width: 365px) {
  .brandmark { width: 50%; }
  /* The three lines set the column's width here; the logo yields rather than
     the copy dropping under 11px or breaking mid-phrase. */
  .brandpanel__claim {
    width: 50%;
    /* Reclaim the panel's own right padding so the copy gains its clearance
       from the logo rather than from the phone's edge. */
    margin-right: -6px;
  }
  .brandpanel__eyebrow { letter-spacing: .025em; }
  .brandpanel__scope { letter-spacing: -.025em; }
  .brandpanel__claim-item--demand strong { font-size: 3.25rem; }
  .brandpanel__claim-item--demand span { font-size: 11px; }
  .brandpanel__concept { letter-spacing: 0; }
  .realm-option { gap: 3px; letter-spacing: .08em; }
  .card__shoe { display: none; }
  .spec { gap: 8px; padding: 8px; }
  .sockets { gap: 4px; }
  .sockets .rb-socket { --render-size: 38px; }
  .statreq { gap: 5px; }
  .statreq__item { padding: 4px 5px; gap: 4px; }
  .statreq__ic { width: 17px; height: 17px; font-size: 11px; }
  .statreq__val { font-size: .76rem; }
}

/* wider phones / small tablets: keep the board readable, never stretched */
@media (min-width: 560px) {
  .hero, .board-guide, .realm-switcher, .tabs, .board, .howto, .foot {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .sheet__panel { max-width: 560px; margin: 0 auto; }
}