/* YONDER odds readouts, 2026-09-28. Loaded last on index and machine.
   One scanner language for every odds and rarity readout on the page:
   1. Rank is a scanner readout: black glass, lime corner brackets, the tier name in mono
      after a prompt mark, five rising signal bars for the level, one scan line on arrival.
   2. Rarity is a radar sweep over 100 fixed blip positions, one blip per 1% of pieces.
      The lit blips are the share of pieces this rare or rarer (share().topPct): a rarer
      piece finds fewer.
   3. The exact mix is one large mono number; the trait chances that multiply into it are
      listed underneath, the rarest one underlined in lime.
   4. The odds section: radar signal bars per trait, bar height is the weight out of
      1,000, your pick lit lime.
   All figures come from js/snag-market.js. Motion is transform and opacity only, on the
   exponential ease, and stops under reduced motion. Palette: the tokens only. */
:root{
  --yd-glass:#050706;
  --yd-bracket:linear-gradient(var(--accent-deep),var(--accent-deep));
}

/* ---------- shared pieces ---------- */
.yd-k{margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.yd-readout{container-type:inline-size;text-align:left}

/* 1. The scanner readout. #rankRead / #buildRank keep their "tag tier-*" class from JS. */
.yd-scan{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k lvl" "name name";align-items:center;gap:var(--space-8) var(--space-16);width:min(100%,340px);margin:0;padding:var(--space-16) var(--space-20);overflow:hidden;background:
  var(--yd-bracket) left top/16px 2px no-repeat,var(--yd-bracket) left top/2px 16px no-repeat,
  var(--yd-bracket) right top/16px 2px no-repeat,var(--yd-bracket) right top/2px 16px no-repeat,
  var(--yd-bracket) left bottom/16px 2px no-repeat,var(--yd-bracket) left bottom/2px 16px no-repeat,
  var(--yd-bracket) right bottom/16px 2px no-repeat,var(--yd-bracket) right bottom/2px 16px no-repeat,
  var(--yd-glass);box-shadow:inset 0 0 0 1px var(--line)}
.yd-scan>.yd-k{grid-area:k}
.yd-scan .tag.tag{grid-area:name;justify-self:start;min-height:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:700 clamp(24px,2.6vw,32px)/1.1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.yd-scan .tag.tag::before{content:">";margin-right:.4em;color:var(--accent-deep)}
.yd-lvl{grid-area:lvl;display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.yd-lvl i{display:block;width:5px;border-radius:1px;background:var(--line)}
.yd-lvl i:nth-child(1){height:20%}.yd-lvl i:nth-child(2){height:40%}.yd-lvl i:nth-child(3){height:60%}.yd-lvl i:nth-child(4){height:80%}.yd-lvl i:nth-child(5){height:100%}
.yd-lvl i.is-on,
.yd-scan[data-level="1"] .yd-lvl i:nth-child(-n+1),.yd-scan[data-level="2"] .yd-lvl i:nth-child(-n+2),
.yd-scan[data-level="3"] .yd-lvl i:nth-child(-n+3),.yd-scan[data-level="4"] .yd-lvl i:nth-child(-n+4),
.yd-scan[data-level="5"] .yd-lvl i{background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--glow) 70%,transparent)}
.yd-scanline{position:absolute;inset:0;border-bottom:2px solid var(--glow);background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--glow) 14%,transparent));opacity:0;pointer-events:none;transform:translateY(-100%)}
.yd-odds-read .yd-scanline,.yd-scan.is-scanning .yd-scanline{animation:yd-scan 1300ms var(--ease-out-expo) 80ms 1 both}
@keyframes yd-scan{0%{transform:translateY(-100%);opacity:1}70%{opacity:.9}100%{transform:translateY(0);opacity:0}}

/* 2. The radar sweep. */
.yd-radarbox{min-width:0}
.yd-radar-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4) var(--space-12);margin-bottom:var(--space-12)}
.yd-radar-v{font:600 13px/1.3 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.yd-scope{position:relative;width:min(100%,208px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#0f1a12 0%,var(--yd-glass) 72%);box-shadow:inset 0 0 0 1px var(--line),0 0 0 6px var(--yd-glass),0 0 0 7px var(--line)}
.yd-scope svg{display:block;width:100%;height:100%;overflow:visible}
.yd-ring{fill:none;stroke:color-mix(in srgb,var(--accent) 18%,transparent);stroke-width:1}
.yd-cross{fill:none;stroke:color-mix(in srgb,var(--accent) 12%,transparent);stroke-width:1}
.yd-blip{fill:color-mix(in srgb,var(--ink) 20%,transparent)}
.yd-blip.is-found{fill:var(--glow);animation:yd-blip 700ms var(--ease-out-expo) var(--d,0ms) backwards}
@keyframes yd-blip{from{opacity:0}}
.yd-sweep{transform-origin:100px 100px;animation:yd-sweep 1800ms var(--ease-out-expo) both}
@keyframes yd-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.yd-sweep-edge{fill:none;stroke:var(--glow);stroke-width:1.5;opacity:.85}
.yd-hub{fill:var(--glow)}
.yd-radar-note{max-width:40ch;margin:var(--space-12) auto 0;font:400 12px/1.5 var(--font-mono);color:var(--ink-soft);text-align:center}

/* 3. The exact mix, large, with its factors. The sentence stays whole for readers. */
.exact-mix.yd-n{margin:0;font:500 12px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:left}
.exact-mix.yd-n>span{display:block;margin-top:var(--space-8);font:600 44px/1 var(--font-mono);font-size:clamp(32px,15cqi,64px);letter-spacing:-.045em;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.yd-factors{min-width:0;margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--line)}
.yd-factor-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-8) 0;margin:var(--space-8) 0 0;padding:0;list-style:none}
.yd-factor-list li{display:inline-flex;align-items:baseline;gap:6px;font:400 12px/1.4 var(--font-mono);color:var(--ink-soft);white-space:nowrap}
.yd-factor-list li+li::before{content:"\00d7";margin:0 var(--space-8);color:var(--ink-soft)}
.yd-factor-list b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.yd-factor-list li.is-rarest b{box-shadow:inset 0 -3px 0 var(--accent)}

/* ---------- Try a buy result ---------- */
#pieceFacts.yd-readout:not([hidden]){display:grid;gap:var(--space-16);width:100%;max-width:420px;margin:var(--space-16) auto 0}
#pieceFacts #rankRead{margin:0}
#pieceFacts .rarity-read{margin:0;font:600 clamp(20px,2vw,24px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
#pieceFacts #resultTraits{margin:0;font-size:inherit}
#pieceFacts #resultTraits .yd-factors{margin-top:0}

/* ---------- Build a piece: the console readout ---------- */
.yd-build-read{display:grid;gap:var(--space-16);width:100%}
.yd-build-read>strong{display:block;margin:0;font:600 clamp(20px,2vw,24px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.yd-build-read>.yd-factors{margin-top:0}
.yd-build-read>p#buildMath{margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.yd-build-read .yd-scan{width:100%}

/* ---------- Collection ladder: one more signal bar per tier ---------- */
.tier-legend .ladder-step{gap:var(--space-8)}
.tier-legend .ladder-step>span:nth-child(3){font:500 12px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tier-legend .yd-lvl{height:14px}

/* ---------- The odds: readout head and five signal groups ---------- */
#odds .odds-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-40) var(--space-24)}
.yd-odds-read{grid-column:1/-1;display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:var(--space-40);align-items:start;padding:var(--space-32) 0;border-block:1px solid var(--line)}
.yd-odds-read.is-idle{display:block;padding:var(--space-16) 0}
.yd-odds-piece{width:200px}
.yd-odds-piece .piece-card{width:100%}
.yd-odds-col{display:grid;gap:var(--space-16);min-width:0;container-type:inline-size}
.yd-odds-col .yd-factors{margin-top:0}
.yd-odds-col .yd-scope{margin:0}
.yd-odds-col .yd-radar-note{margin-left:0;text-align:left}
.yd-odds-top{margin:0;font:600 20px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.yd-odds-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8) var(--space-12);max-width:72ch;margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.yd-odds-note .tag{margin:0}
#odds .odds-group{display:grid;align-content:start;gap:0;min-width:0;padding-top:var(--space-20)}
#odds .odds-group h3{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-8);margin:0;font:600 16px/1.2 var(--font-display);letter-spacing:-.01em;text-transform:none}
.yd-gi{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--yd-glass);box-shadow:inset 0 0 0 1px var(--accent-deep);color:var(--ink);font:600 12px/1 var(--font-mono)}
#odds .odds-group>.yd-gcap{margin:var(--space-4) 0 0;font:400 12px/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

.yd-signal{display:flex;align-items:flex-end;justify-content:flex-start;gap:4px;height:96px;margin:var(--space-24) 0 0;padding:0 2px;border-bottom:1px solid var(--accent-deep);background:repeating-linear-gradient(0deg,transparent 0 9.1px,var(--hairline) 9.1px 9.6px)}
.yd-sig{position:relative;flex:1 1 0;min-width:0;max-width:28px;height:100%}
.yd-sig i{position:absolute;inset:0;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--accent) 24%,var(--card));transform-origin:50% 100%;transform:scaleY(var(--w));animation:yd-sig-up 900ms var(--ease-out-expo) calc(var(--k,0) * 50ms) backwards}
@keyframes yd-sig-up{from{transform:scaleY(0)}}
.yd-sig.is-lit i{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--glow) 55%,transparent)}
.yd-sig b{position:absolute;left:50%;bottom:calc(var(--w) * 100% + 4px);transform:translateX(-50%);font:600 12px/1 var(--font-mono);color:var(--ink);white-space:nowrap;animation:yd-fade 600ms var(--ease-out-expo) 500ms backwards}
@keyframes yd-fade{from{opacity:0}}

#odds .odds-bars{gap:0;margin-top:var(--space-12);border-top:1px solid var(--line)}
#odds .odds-option{grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-8);padding:var(--space-8) 0;border-bottom:1px solid var(--hairline)}
#odds .odds-label{flex-wrap:wrap;min-width:0;gap:4px var(--space-8);font:500 13px/1.3 var(--font-body);color:var(--ink-soft)}
#odds .odds-label .tag{margin:0;flex:none}
#odds .odds-column{grid-column:1/-1;grid-row:2;height:3px;border-radius:2px}
#odds .odds-option strong{grid-column:2;grid-row:1;font:500 12px/1.3 var(--font-mono)}
#odds .odds-option.is-picked .odds-label{color:var(--ink);font-weight:700}
#odds .odds-option.is-picked strong{font-weight:700}

@media(max-width:1279px){
  #odds .odds-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yd-odds-read{grid-template-columns:200px minmax(0,1fr)}
  .yd-odds-read>.yd-odds-col:last-child{grid-column:2}
}
@media(max-width:767px){
  #odds .odds-groups{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .yd-odds-read{grid-template-columns:minmax(0,1fr);gap:var(--space-24);padding:var(--space-24) 0}
  .yd-odds-read>.yd-odds-col:last-child{grid-column:auto}
  .yd-odds-piece{width:min(100%,200px);margin:0 auto}
  .yd-odds-col .yd-scope{margin:0 auto}
  .yd-odds-col .yd-radar-note{margin-left:auto;text-align:center}
  .yd-signal{height:80px;background:repeating-linear-gradient(0deg,transparent 0 7.5px,var(--hairline) 7.5px 8px)}
}
@media(max-width:390px){
  .yd-scan{padding:var(--space-12) var(--space-16)}
}
@media(prefers-reduced-motion:reduce){
  .yd-scanline{display:none}
  .yd-sweep,.yd-blip.is-found,.yd-sig i,.yd-sig b{animation:none}
}