/* LOCKET odds readouts, 2026-09-28. Loaded last on index and machine.
   One instrument language for every odds and rarity readout on the page:
   1. Rank is an engraved locker plate: stamped tier name, five screw pips for the level,
      a coloured inlay on the hinge edge.
   2. Rarity is lock depth: five door layers, one per tier, and a lime bolt thrown as deep
      as the piece is rare (share().rarerThanPct placed inside its own tier layer).
   3. The exact mix is one large mono number; the trait chances that multiply into it are
      written underneath, the rarest one underlined in lime.
   4. The odds section: one tumbler dial per trait, arc length is the weight, and the dial
      turns until your pick sits under the index mark.
   All figures come from js/snag-market.js. Motion is transform and opacity only, on the
   exponential ease, and stops under reduced motion. Palette: ink, white, mint, lime. */
:root{
  --lk-inlay:var(--line);
  --lk-engrave:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(15,25,20,.22);
  --lk-screw:radial-gradient(circle,#ffffff 0 1.2px,#c9d4ce 1.6px 3px,transparent 3.4px);
}

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

/* 1. The engraved plate. #rankRead / #buildRank keep their "tag tier-*" class from JS. */
.lk-plate{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k pips" "name name";align-items:center;gap:var(--space-8) var(--space-16);width:min(100%,340px);margin:0;padding:var(--space-16) var(--space-24) var(--space-16) var(--space-24);border-radius:14px;background:
  var(--lk-screw) 6px 6px/12px 12px no-repeat,
  var(--lk-screw) calc(100% - 6px) 6px/12px 12px no-repeat,
  var(--lk-screw) 6px calc(100% - 6px)/12px 12px no-repeat,
  var(--lk-screw) calc(100% - 6px) calc(100% - 6px)/12px 12px no-repeat,
  var(--ceramic);box-shadow:var(--ceramic-edge),inset 0 0 0 1px var(--line);isolation:isolate}
.lk-plate::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--lk-inlay)}
.lk-plate>.lk-k{grid-area:k}
.lk-plate .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:800 clamp(28px,3vw,38px)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-shadow:var(--lk-engrave);white-space:nowrap}
.lk-pips{grid-area:pips;display:inline-flex;gap:6px}
.lk-pips i{display:block;width:10px;height:10px;border-radius:50%;background:var(--band);box-shadow:inset 0 1px 2px rgba(15,25,20,.28)}
.lk-pips i.is-on,
.lk-plate[data-level="1"] .lk-pips i:nth-child(-n+1),.lk-plate[data-level="2"] .lk-pips i:nth-child(-n+2),
.lk-plate[data-level="3"] .lk-pips i:nth-child(-n+3),.lk-plate[data-level="4"] .lk-pips i:nth-child(-n+4),
.lk-plate[data-level="5"] .lk-pips i{background:var(--glow);box-shadow:0 0 6px var(--glow),inset 0 -1px 0 rgba(15,25,20,.2)}
.lk-plate[data-rank=uncommon]{--lk-inlay:var(--accent)}
.lk-plate[data-rank=rare]{--lk-inlay:var(--glow)}
.lk-plate[data-rank=epic]{--lk-inlay:var(--accent-deep)}
/* Legendary is the black glass plate, the robot's visor. */
.lk-plate[data-rank=legendary]{--lk-inlay:var(--glow);background:
  radial-gradient(circle,#56626b 0 1.2px,#2a343c 1.6px 3px,transparent 3.4px) 6px 6px/12px 12px no-repeat,
  radial-gradient(circle,#56626b 0 1.2px,#2a343c 1.6px 3px,transparent 3.4px) calc(100% - 6px) 6px/12px 12px no-repeat,
  radial-gradient(circle,#56626b 0 1.2px,#2a343c 1.6px 3px,transparent 3.4px) 6px calc(100% - 6px)/12px 12px no-repeat,
  radial-gradient(circle,#56626b 0 1.2px,#2a343c 1.6px 3px,transparent 3.4px) calc(100% - 6px) calc(100% - 6px)/12px 12px no-repeat,
  radial-gradient(120% 140% at 30% 0%,#26313a 0%,var(--ink) 60%);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 10px 22px -14px rgba(15,25,20,.7)}
.lk-plate[data-rank=legendary]>.lk-k{color:color-mix(in srgb,var(--card) 70%,transparent)}
.lk-plate[data-rank=legendary] .tag.tag{color:var(--card);text-shadow:0 0 12px color-mix(in srgb,var(--glow) 45%,transparent)}
.lk-plate[data-rank=legendary] .lk-pips i{background:#26313a;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.lk-plate[data-rank=legendary] .lk-pips i:nth-child(n){background:var(--glow);box-shadow:0 0 8px var(--glow)}

/* 2. Lock depth: five door layers, the bolt thrown through them. */
.lk-depth{min-width:0}
.lk-depth-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4) var(--space-12);margin-bottom:var(--space-8)}
.lk-depth-v{font:600 13px/1.3 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.lk-slab{--depth:0;position:relative;height:52px;border-radius:12px;background:var(--band);box-shadow:inset 0 2px 6px rgba(15,25,20,.16),inset 0 0 0 1px var(--line);overflow:hidden}
.lk-layers{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.lk-layer{position:relative;border-left:1px solid var(--line)}
.lk-layer:first-child{border-left:0}
.lk-layer:nth-child(2){background:rgba(15,25,20,.03)}.lk-layer:nth-child(3){background:rgba(15,25,20,.06)}.lk-layer:nth-child(4){background:rgba(15,25,20,.09)}.lk-layer:nth-child(5){background:rgba(15,25,20,.13)}
.lk-layer::after{content:"";position:absolute;right:6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:rgba(255,255,255,.7)}
.lk-layer.is-passed{background:color-mix(in srgb,var(--tint) 80%,var(--card))}
.lk-layer.is-here{background:color-mix(in srgb,var(--glow) 18%,var(--card));box-shadow:inset 0 0 0 2px var(--glow)}
.lk-bolt{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lk-bolt i{position:absolute;left:0;top:50%;width:100%;height:12px;margin-top:-6px;border-radius:0 6px 6px 0;background:var(--glow);box-shadow:0 0 12px color-mix(in srgb,var(--glow) 60%,transparent),inset 0 -3px 0 rgba(15,25,20,.16),inset 0 0 0 1px rgba(15,25,20,.18);transform:translateX(calc((var(--depth) - 1) * 100%));transition:transform 900ms var(--ease-out-expo);animation:lk-throw 1100ms var(--ease-out-expo) 120ms backwards}
.lk-bolt i::after{content:"";position:absolute;right:-4px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 3px var(--ink),0 2px 6px rgba(15,25,20,.3)}
.lk-bolt i::before{content:"";position:absolute;right:5px;top:50%;z-index:1;width:4px;height:8px;margin-top:-5px;border-radius:2px 2px 1px 1px;background:var(--ink)}
@keyframes lk-throw{from{transform:translateX(-100%)}}
.lk-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:var(--space-4);font:500 12px/1.3 var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lk-scale span{padding-left:2px}

/* 3. The exact mix, large, with its factors. The sentence stays whole for readers. */
.exact-mix.lk-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.lk-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}
.lk-factors{min-width:0;margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--line)}
.lk-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}
.lk-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}
.lk-factor-list li+li::before{content:"\00d7";margin:0 var(--space-8);color:var(--ink-soft)}
.lk-factor-list b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lk-factor-list li.is-rarest b{box-shadow:inset 0 -4px 0 var(--glow)}

/* ---------- Try a buy result ---------- */
#pieceFacts.lk-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,26px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
#pieceFacts #resultTraits{margin:0;font-size:inherit}
#pieceFacts #resultTraits .lk-factors{margin-top:0}

/* ---------- Build a piece: the plate under the shelf ---------- */
.combo-plate.lk-readout{display:grid;gap:var(--space-16);width:min(100%,352px);margin-top:var(--space-24);text-align:left}
.combo-plate.lk-readout>strong{display:block;margin:0;font:600 clamp(20px,2vw,24px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.combo-plate.lk-readout>.lk-factors{margin-top:0}
.combo-plate.lk-readout>p#buildMath{max-width:none;margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.combo-plate .lk-plate{width:100%}

/* ---------- Collection ladder: one pip per lock layer ---------- */
.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 .lk-pips{gap:4px}
.tier-legend .lk-pips i{width:8px;height:8px}
.tier-legend .ladder-step+.ladder-step{border-left:1px solid var(--hairline)}

/* ---------- The odds: readout head and five tumbler dials ---------- */
#odds .odds-groups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-40) var(--space-24)}
.lk-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)}
.lk-odds-read.is-idle{display:block;padding:var(--space-16) 0}
.lk-odds-piece{width:200px}
.lk-odds-piece .piece-card{width:100%}
.lk-odds-col{display:grid;gap:var(--space-16);min-width:0;container-type:inline-size}
.lk-odds-col .lk-factors{margin-top:0}
.lk-odds-top{margin:0;font:600 20px/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.lk-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)}
.lk-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}
.lk-gi{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--glow);font:600 12px/1 var(--font-mono)}
#odds .odds-group>.lk-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)}

.lk-dial{position:relative;width:min(100%,176px);aspect-ratio:1;margin:var(--space-20) auto var(--space-8)}
.lk-dial svg{display:block;width:100%;height:100%;overflow:visible}
.lk-dial-ticks{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:4;stroke-dasharray:1 4.865}
.lk-arc{fill:none;stroke:color-mix(in srgb,var(--ink) 15%,transparent);stroke-width:10}
.lk-arc.is-alt{stroke:color-mix(in srgb,var(--ink) 8%,transparent)}
.lk-arc.is-lit{stroke:var(--glow);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--glow) 80%,transparent))}
.lk-dial-turn{transform-origin:60px 60px}
.lk-dial.is-set .lk-dial-turn{animation:lk-dial-set 1400ms var(--ease-out-expo) calc(var(--i,0) * 90ms) backwards}
@keyframes lk-dial-set{from{transform:rotate(0deg)}}
.lk-knob{filter:drop-shadow(0 3px 4px rgba(15,25,20,.22))}
.lk-knob-face{fill:var(--card);stroke:var(--line);stroke-width:1}
.lk-knob-pointer{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.lk-knob-tip{fill:var(--line)}
.lk-dial.is-set .lk-knob-tip{fill:var(--glow)}
.lk-dial-mark{fill:var(--ink)}
.lk-dial-read{position:absolute;inset:0;display:grid;place-items:center;padding-top:10%;font:600 16px/1 var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none}
.lk-dial:not(.is-set) .lk-dial-read{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}

#odds .odds-bars{gap:0;margin-top:var(--space-8);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:4px;border-radius:2px}
#odds .odds-option strong{grid-column:2;grid-row:1;font:500 12px/1.3 var(--font-mono)}
.lk-led{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
#odds .odds-option.is-picked .odds-label{color:var(--ink);font-weight:700}
#odds .odds-option.is-picked .lk-led{background:var(--glow);box-shadow:0 0 6px var(--glow)}
#odds .odds-option.is-picked strong{font-weight:700}

@media(max-width:1279px){
  #odds .odds-groups{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lk-odds-read{grid-template-columns:200px minmax(0,1fr)}
  .lk-odds-read>.lk-odds-col:last-child{grid-column:2}
}
@media(max-width:767px){
  #odds .odds-groups{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .lk-odds-read{grid-template-columns:minmax(0,1fr);gap:var(--space-24);padding:var(--space-24) 0}
  .lk-odds-read>.lk-odds-col:last-child{grid-column:auto}
  .lk-odds-piece{width:min(100%,200px);margin:0 auto}
  /* Dial beside its legend on phones. */
  #odds .odds-group{grid-template-columns:128px minmax(0,1fr);grid-template-areas:"h h" "c c" "d l";column-gap:var(--space-16)}
  #odds .odds-group>h3{grid-area:h}
  #odds .odds-group>.lk-gcap{grid-area:c}
  #odds .odds-group>.lk-dial{grid-area:d;width:128px;margin:var(--space-12) 0 0;align-self:start}
  #odds .odds-group>.odds-bars{grid-area:l;margin-top:var(--space-12)}
  .lk-dial-read{font-size:14px}
  .tier-legend .ladder-step+.ladder-step{border-left:0}
}
@media(max-width:390px){
  .lk-plate{padding:var(--space-12) var(--space-16) var(--space-12) var(--space-20)}
  #odds .odds-group{grid-template-columns:104px minmax(0,1fr);column-gap:var(--space-12)}
  #odds .odds-group>.lk-dial{width:104px}
  .lk-dial-read{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .lk-bolt i{animation:none;transition:none}
  .lk-dial.is-set .lk-dial-turn{animation:none}
}