/* Agent Periodic Lab — 2026-10-30 lab bench + weight levels. Loaded after redesign.css.
   1) Weight levels: 5 bands from the on-chain weight (batchInfo.w): lv1 = 1, lv2 = 2–3, lv3 = 4–9, lv4 = 10–99, lv5 = 100+.
      Read at a glance from the 5-segment gauge at the bottom of the card (lit count = level) and from the frame:
      lv1 matte hairline, lv2 clear hairline, lv3 double frame, lv4 bright double frame + glow, lv5 triple foil frame + strong glow.
      Family hue (--c) and material (element / superheavy / compound) stay as before.
   2) Reaction rig: Input | Mix | Output in one row, same layout on phone and desktop, sized from the rig width (cqw). */

/* ---------- weight levels ---------- */
.card .clv{position:absolute; left:50%; bottom:4.2%; z-index:3; display:flex; gap:max(1.5px, 2cqw); transform:translateX(-50%); pointer-events:none}
.card .clv i{display:block; width:max(4px, 10.5cqw); height:max(2.5px, 3cqw); border-radius:1px; background:rgba(255,255,255,.12)}
.card.lv1 .clv i:nth-child(-n+1),.card.lv2 .clv i:nth-child(-n+2),.card.lv3 .clv i:nth-child(-n+3),
.card.lv4 .clv i:nth-child(-n+4),.card.lv5 .clv i{background:color-mix(in srgb, var(--c) 72%, #fff)}
.card.lv4 .clv i:nth-child(-n+4),.card.lv5 .clv i{box-shadow:0 0 4px color-mix(in srgb, var(--c) 80%, transparent)}
.card:has(.clv) .ccat{bottom:10.5%}
.card:has(.clv) .csold,.card:has(.clv) .cst{bottom:22%}

.card.lv1:not(.dim){filter:saturate(.55) brightness(.88)}
.card.lv1 .csym{opacity:.86}
.card.lv2{border-color:color-mix(in srgb, var(--c) 52%, #2a3040); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.card.lv3{border-color:color-mix(in srgb, var(--c) 72%, #2a3040); box-shadow:inset 0 0 0 2.5px #0c0e12, inset 0 0 0 3.5px color-mix(in srgb, var(--c) 45%, transparent)}
.card.lv4{border-color:color-mix(in srgb, var(--c) 88%, #fff);
  box-shadow:inset 0 0 0 2px #0c0e12, inset 0 0 0 3px color-mix(in srgb, var(--c) 72%, #fff), inset 0 0 0 5px #0c0e12, inset 0 0 0 6px color-mix(in srgb, var(--c) 38%, transparent), 0 0 16px -6px color-mix(in srgb, var(--c) 90%, transparent)}
.card.lv4 .csym{font-weight:700}
.card.lv5{border-color:color-mix(in srgb, var(--c) 45%, #fff6e0);
  box-shadow:inset 0 0 0 2px #0c0e12, inset 0 0 0 3px color-mix(in srgb, var(--c) 85%, #fff), inset 0 0 0 5px #0c0e12, inset 0 0 0 6px color-mix(in srgb, var(--c) 62%, #fff), inset 0 0 0 8px #0c0e12, inset 0 0 0 9px color-mix(in srgb, var(--c) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 22px -5px var(--c)}
.card.lv5 .csym{font-weight:800}
@container (max-width:56px){
  .card.lv4{box-shadow:inset 0 0 0 1.5px #0c0e12, inset 0 0 0 2.5px color-mix(in srgb, var(--c) 72%, #fff), 0 0 12px -5px color-mix(in srgb, var(--c) 90%, transparent)}
  .card.lv5{box-shadow:inset 0 0 0 1.5px #0c0e12, inset 0 0 0 2.5px color-mix(in srgb, var(--c) 85%, #fff), inset 0 0 0 4px #0c0e12, inset 0 0 0 5px color-mix(in srgb, var(--c) 55%, #fff), 0 0 14px -4px var(--c)}
}
.card.dim.lv4,.card.dim.lv5{box-shadow:inset 0 0 0 2px #0c0e12, inset 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent)}
/* rows that hold a card echo its level */
.wt:has(.lv4),.mk-item:has(.lv4),.rc:has(.out .lv4){border-color:color-mix(in srgb, var(--bnb) 26%, var(--line))}
.wt:has(.lv5),.mk-item:has(.lv5),.rc:has(.out .lv5){border-color:color-mix(in srgb, var(--bnb) 42%, var(--line)); background:linear-gradient(180deg, rgba(240,212,138,.05), rgba(255,255,255,.015))}
.legend .lv-key{gap:7px}
.legend .clv-key{display:inline-flex; gap:2px; width:auto; height:auto; background:none}
.legend .clv-key i{display:block; width:6px; height:3px; border-radius:1px; background:rgba(255,255,255,.18)}
.legend .clv-key i:nth-child(-n+3){background:var(--bnb2)}

/* ---------- reaction rig ---------- */
#flaskZone.rig{container-type:inline-size; position:relative; display:flex; align-items:center; justify-content:center; min-width:0;
  padding:14px 12px 16px; border-radius:18px; border:1px solid var(--line2);
  background:radial-gradient(60% 70% at 50% 62%, rgba(215,181,106,.05), transparent 72%), #0c0e12; transition:border-color .3s}
#flaskZone.rig.loaded{border-color:rgba(255,255,255,.2)}
#flaskZone.rig.drag{border-color:var(--bnb)}
.rig-g{--g:1.4cqw; --rc:min(15cqw, 82px); --inw:calc(var(--rc) * 2 + 6px); --lk:min(6cqw, 48px); --vw:min(28cqw, 150px); --pw:min(19cqw, 104px);
  display:grid; grid-template-columns:var(--inw) var(--lk) var(--vw) var(--lk) var(--pw);
  grid-template-areas:"kin . krx . kout" "in lin rx lout out"; column-gap:var(--g); row-gap:10px; align-items:center; justify-content:center}
.rig-k{font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(236,232,224,.5); text-align:center; white-space:nowrap}
.k-in{grid-area:kin} .k-rx{grid-area:krx} .k-out{grid-area:kout}
.rig-in{grid-area:in; display:grid; grid-template-columns:repeat(2, var(--rc)); gap:6px; justify-content:center; align-content:center}
.rig-in.one{grid-template-columns:var(--rc)}
.rig-in .slot{position:relative; width:var(--rc)}
.rig-in .slot .card{width:100%}
.rig-in .slot.spent .card{opacity:.26; filter:grayscale(.7); transition:opacity .45s, filter .45s}
.rig-in .slot .x{position:absolute; left:-5px; top:-5px; z-index:4; width:18px; height:18px; border-radius:50%; background:#1d2027; border:1px solid var(--line2); color:#e9e6df; font:600 12px/1 var(--sans); display:grid; place-items:center; cursor:pointer}
.rig-in .ph,.rig-out .q{aspect-ratio:5/7; border-radius:10px; border:1px dashed rgba(236,232,224,.18); background:rgba(255,255,255,.012); position:relative}
.rig-in .ph{width:var(--rc)}
.rig-in .ph::before,.rig-in .ph::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; border-radius:1px; background:rgba(236,232,224,.36); transform:translate(-50%,-50%)}
.rig-in .ph::after{transform:translate(-50%,-50%) rotate(90deg)}
.rig-out{grid-area:out; width:var(--pw); justify-self:center}
.rig-out .q{display:grid; place-items:center; color:rgba(236,232,224,.34); font:500 clamp(16px, 6cqw, 26px)/1 var(--mono)}
.rig-out .card{width:100%}
#flaskZone.ready .rig-out .card{box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c) 80%, transparent)}
.rig-rx{grid-area:rx; display:grid; place-items:center}
.rig-link{position:relative; height:1px; align-self:center; background:linear-gradient(90deg, rgba(236,232,224,.06), rgba(236,232,224,.3)); overflow:visible}
.l-in{grid-area:lin} .l-out{grid-area:lout}
.rig-link::after{content:""; position:absolute; right:0; top:50%; width:5px; height:5px; border-top:1px solid rgba(236,232,224,.45); border-right:1px solid rgba(236,232,224,.45); transform:translate(-1px,-50%) rotate(45deg)}
.rig-link::before{content:""; position:absolute; left:0; top:-1px; width:30%; height:3px; border-radius:2px; opacity:0; background:linear-gradient(90deg, transparent, var(--bnb2), transparent)}
#flaskZone.flow-in .l-in::before,#flaskZone.flow-out .l-out::before{animation:rig-flow .62s cubic-bezier(.4,0,.2,1) infinite}
@keyframes rig-flow{0%{transform:translateX(-30%); opacity:0} 25%{opacity:1} 100%{transform:translateX(260%); opacity:0}}

/* vessel */
.vsl{position:relative; width:var(--vw); aspect-ratio:100/120; isolation:isolate; --rx:transparent}
.vsl-svg{display:block; width:100%; height:100%; overflow:visible}
.vsl::before{content:""; position:absolute; left:-8%; right:-8%; top:30%; bottom:-6%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--rx) 55%, transparent), transparent); filter:blur(8px); opacity:0; transition:opacity .6s}
.vsl.has-liq::before{opacity:.32}
.vsl.rx-mix::before{opacity:.65; animation:vsl-breathe 1.1s ease-in-out infinite alternate}
.vsl.rx-form::before{opacity:1}
@keyframes vsl-breathe{to{transform:scale(1.08)}}
.vsl-body{fill:rgba(255,255,255,.02)}
.vsl-glass{fill:none; stroke:rgba(236,232,224,.66); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.vsl-tick{fill:none; stroke:rgba(236,232,224,.24); stroke-width:1; vector-effect:non-scaling-stroke}
.vsl-liq{transform-origin:50px 110px}
.vsl-liq rect{fill:transparent; transform:translateY(0); transition:transform .72s cubic-bezier(.3,.7,.2,1), fill 1s ease}
.vsl-liq rect.on{opacity:.9}
.vsl-surf{fill:#fff; opacity:0; transition:transform .72s cubic-bezier(.3,.7,.2,1), opacity .3s}
.vsl-surf.on{opacity:.32}
.vsl.rx-mix .vsl-liq{animation:vsl-slosh .9s ease-in-out infinite alternate}
@keyframes vsl-slosh{from{transform:skewY(-2.2deg)} to{transform:skewY(2.2deg)}}
.vsl-bubs .bub{fill:rgba(255,255,255,.78); opacity:0; transform-box:fill-box; transform-origin:center}
.vsl.rx-mix .bub{animation:vsl-rise 1.05s cubic-bezier(.4,0,.6,1) infinite}
@keyframes vsl-rise{0%{transform:translateY(0) scale(.5); opacity:0} 18%{opacity:.85} 100%{transform:translateY(-32px) scale(1.1); opacity:0}}
.vsl-core{opacity:0; transition:opacity .5s}
.vsl.rx-form .vsl-core{opacity:.9}
.vsl-mol{transition:opacity .45s}
.vsl.rx-done .vsl-mol,.vsl.rx-done .vsl-core{opacity:0}
.vsl-mol .bd{stroke:rgba(255,255,255,.92); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:20; stroke-dashoffset:20; vector-effect:non-scaling-stroke; animation:vsl-bond .46s cubic-bezier(.4,0,.2,1) forwards}
.vsl-mol .at{fill:color-mix(in srgb, var(--rx) 30%, #fff); transform-box:fill-box; transform-origin:center; animation:vsl-atom .56s cubic-bezier(.2,.8,.2,1) both}
.vsl-mol[data-m=break] .bd{stroke-dashoffset:0; animation:vsl-unbond .42s .32s cubic-bezier(.4,0,.2,1) forwards}
.vsl-mol[data-m=break] .at{animation:vsl-atom-out .7s .3s cubic-bezier(.4,0,.2,1) both}
@keyframes vsl-bond{to{stroke-dashoffset:0}}
@keyframes vsl-unbond{to{stroke-dashoffset:20; opacity:0}}
@keyframes vsl-atom{from{transform:translate(var(--fx), var(--fy)) scale(.4); opacity:0} to{transform:none; opacity:1}}
@keyframes vsl-atom-out{from{transform:none; opacity:1} to{transform:translate(calc(var(--fx) * -1.3), calc(var(--fy) * -1.3)) scale(.6); opacity:0}}
.vsl-drip{position:absolute; left:calc(50% - 1.25px); top:5%; width:2.5px; height:58%; border-radius:2px; z-index:2; pointer-events:none; transform:scaleY(0);
  background:linear-gradient(180deg, color-mix(in srgb, var(--dc, #fff) 90%, #fff), color-mix(in srgb, var(--dc, #fff) 70%, transparent))}
.rx-mote{position:fixed; z-index:80; width:10px; height:10px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff 0 28%, var(--dc, #fff) 50%, transparent 72%); box-shadow:0 0 12px 3px color-mix(in srgb, var(--dc, #fff) 70%, transparent)}

.bench-msg{font-size:13px; line-height:1.45; text-wrap:balance; overflow-wrap:anywhere}
@media (max-width:600px){ #flaskZone.rig{padding:12px 10px 14px} .rig-k{font-size:10px; letter-spacing:.12em} }
@media (prefers-reduced-motion: reduce){ .vsl.rx-mix .vsl-liq,.vsl.rx-mix .bub,.vsl.rx-mix::before{animation:none} }
.rig-in .card .cnt{min-width:16px; height:16px; padding:0 4px; font-size:10px; right:5%; top:3.5%}