/* Round 7: a buy action and its result share one open instrument. */
.try-buy{width:calc(100% - 32px);max-width:1800px;margin-inline:auto;scroll-margin-top:112px}
.demo-intro{max-width:60ch;font-size:clamp(18px,2vw,24px);line-height:1.5;margin-bottom:32px}
.buy-instrument{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:32px;border-block:1px solid var(--line)}
.buy-action .kicker{margin-bottom:12px}.buy-action .component-caption{margin-top:12px;max-width:44ch}.buy-action>.field-help{margin-top:24px}
.buy-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.buy-choice{display:flex;flex-direction:column;align-items:center;justify-content:end;gap:8px;min-height:48px;padding:16px 8px;background:transparent;border:1px solid var(--line);border-radius:18px;color:var(--ink);font:400 14px/1.4 var(--font-body);cursor:pointer;transition:transform 180ms var(--ease),background 180ms var(--ease)}
.buy-choice svg{width:100%;max-width:112px;height:auto;aspect-ratio:1}.buy-choice strong{font-size:14px;font-weight:600}.buy-choice small{font:400 12px/1.5 var(--font-mono);white-space:nowrap}
.buy-choice:hover{background:var(--tint);transform:translateY(-3px)}.buy-choice:active{transform:scale(.98)}.buy-choice:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}.buy-choice:disabled{cursor:progress}.buy-choice[aria-busy=true]{background:var(--tint);opacity:.65}
.buy-session{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;font-size:14px}.buy-session p{font-variant-numeric:tabular-nums}.buy-session .btn{font-size:14px}
.buy-result{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;text-align:center}
.buy-result .piece-preview{width:min(100%,280px);min-width:0;margin:0 auto}.buy-result .piece-card{width:100%}
.empty-piece{width:100%;aspect-ratio:100/112;border:1px dashed var(--ink-soft);border-radius:28px;background:var(--tint);opacity:.4}
#fireRead{font:600 clamp(20px,2vw,28px)/1.35 var(--font-display);letter-spacing:-.02em;margin:0}
#resultTraits{font:400 16px/1.6 var(--font-body);margin-top:12px}.buy-result .rarity-read{font-size:clamp(28px,3vw,44px);margin-top:20px}.buy-result #rankRead{margin-top:8px}.buy-result .btn{margin-top:12px;font-size:14px}.buy-result #repeatRead{font-size:14px;line-height:1.5;margin-top:8px}
.buy-proof{margin-top:16px}.buy-proof>summary{width:fit-content;min-height:48px;padding-block:12px;font:400 14px/1.5 var(--font-body);cursor:pointer}.buy-proof>p{max-width:76ch;line-height:1.7;margin-block:16px}
.proof-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-block:24px}.proof-controls label{display:block;margin-bottom:8px}.proof-controls .wallet-row{margin:0}.proof-controls input{font-size:14px}.proof-controls #firePiece{margin-top:8px}.proof-seed{max-width:76ch;border-top:1px solid var(--line);padding-block:24px}.proof-seed#seed-reader{margin-top:0}.proof-seed #seedRead{min-height:0;font-family:var(--font-mono)}
.demo-status{font-size:13px;color:var(--ink-soft);margin-top:8px}.hero-trading{font-size:clamp(16px,1.6vw,21px);line-height:1.55;max-width:40ch;margin:24px auto 0}.buy-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}.buy-links p{flex-basis:100%;font-size:14px}
.piece-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);margin-block:24px}.piece-tabs button{min-height:48px;padding:12px 20px;border:0;border-radius:12px 12px 0 0;background:transparent;color:var(--ink);font:600 16px/1.5 var(--font-body);cursor:pointer}.piece-tabs button[aria-selected=true]{background:var(--glow)}
.lookup-input{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin-top:12px}.lookup-input input{font-size:16px}#walletPanel{padding-top:16px}#lookupStatus{margin-block:24px;line-height:1.6;max-width:72ch}.wallet-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.wallet-piece{max-width:280px;min-width:0}.wallet-piece .piece-card{width:100%}.wallet-piece>p,.wallet-piece>a{margin-top:12px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.wallet-piece>a{display:inline-flex;min-height:44px;align-items:center}.wallet-piece .tag{margin-left:8px}.wallet-piece code{overflow-wrap:anywhere}.check-panel>header{margin-bottom:24px}
#showAllPieces{margin-top:24px}.buy-links[hidden],.buy-result [hidden],.buy-proof [hidden],.piece-tabs [hidden],#my-pieces [hidden],#showAllPieces[hidden]{display:none}
/* The beam runs once per click, and stays still before and after it. */
.beam-horizontal .beam-dash,.beam-vertical .beam-dash{animation:none;opacity:0}.how-strip.is-firing .beam-horizontal .beam-dash{animation:beam-across 560ms var(--ease) 1;opacity:1}.how-strip.is-firing .beam-vertical .beam-dash{animation:beam-down 560ms var(--ease) 1;opacity:1}
@media(min-width:768px){.try-buy{width:calc(100% - 64px)}}
@media(min-width:1440px){.buy-instrument{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px}.buy-result{grid-template-columns:280px minmax(0,1fr);text-align:left}}

@media(max-width:767px){.buy-instrument{grid-template-columns:minmax(0,1fr);gap:32px}.buy-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.buy-choice{min-height:48px;padding:12px}.buy-choice svg{max-width:80px}.buy-result{grid-template-columns:minmax(0,1fr);text-align:center}.buy-result .piece-preview{grid-row:1}.proof-controls{grid-template-columns:minmax(0,1fr)}.lookup-input{grid-template-columns:minmax(0,1fr) auto}.lookup-input .btn[type=submit]{grid-column:1/-1}.wallet-pieces{grid-template-columns:minmax(0,1fr);justify-items:center}.wallet-piece{width:min(100%,280px)}.hero-trading{max-width:34ch}.demo-intro{font-size:18px}}
@media(prefers-reduced-motion:reduce){.buy-choice{transition:none}.buy-choice:hover,.buy-choice:active{transform:none}.how-strip.is-firing .beam-dash{animation:none;opacity:0}}

/* Round 9: mint share leads, exact-combination odds stay secondary. */
.rarity-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.rarity-heading .tag{flex:none}
.buy-result .rarity-heading{margin-top:20px}
.buy-result .rarity-read{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin:0;flex:1 1 220px}
.buy-result #rankRead{margin:0}
.exact-mix,.piece-back .exact-mix{font:400 13px/1.5 var(--font-body);color:var(--ink-soft);margin-top:8px}
.piece-back .rarity-summary{font:600 16px/1.3 var(--font-body)}
.piece-back .piece-odds{font:inherit}
#phoneOdds{min-width:0;white-space:normal;overflow-wrap:break-word}

.build-maths>strong{font-size:clamp(24px,3vw,36px);letter-spacing:-.02em}

#phoneOdds .exact-mix{display:block;margin-top:2px}

/* Delivery stays in the existing wallet instrument. Long receipt data wraps on phones. */
#connectPieces,#keepDelivering{min-height:44px;max-width:100%;white-space:normal}
#deliveryProgress{padding-left:24px;margin:20px 0;overflow-wrap:anywhere}
#deliveryProgress li{padding:8px 0;line-height:1.5}
#deliveryProgress a{display:inline-block;min-height:44px;padding:10px 6px}
#deliveryQuiet{margin:12px 0;color:var(--ink-soft)}
#walletPieces .wallet-piece{min-width:0;overflow-wrap:anywhere}

/* LOCKET redesign: "Try a buy" reads as a keypad unlocking a locker, not a row of coin
   buttons with a plain result card underneath. Additive only: .buy-choice, .buy-buttons and
   .buy-result keep every rule above, so machine.html's unmodified markup is unaffected. */
.kicker-keyhole{width:16px;height:16px;vertical-align:-3px;margin-right:6px;fill:var(--ink-soft)}
.keypad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:380px}
.keypad-key{position:relative;aspect-ratio:1;justify-content:center;background:var(--ink);border-color:var(--ink);border-radius:20px;overflow:hidden}
.keypad-key::before{content:"";position:absolute;top:12px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--glow);opacity:.45;transition:opacity 160ms var(--ease),box-shadow 160ms var(--ease)}
.keypad-key:hover{background:#182019;transform:translateY(-3px)}
.keypad-key:hover::before,.keypad-key[aria-busy=true]::before{opacity:1;box-shadow:0 0 8px var(--glow)}
.keypad-key[aria-busy=true]{background:#182019}
.keypad-key strong{order:2;font:500 11px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--card);opacity:.72}
.keypad-key small{order:1;font:700 22px/1.1 var(--font-mono);color:var(--glow)}
.keypad-key:focus-visible{outline:3px solid var(--glow);outline-offset:3px}

.seal-sequence{display:flex;align-items:center;gap:16px;margin:20px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:var(--tint)}
.seal-keyhole{width:26px;height:26px;flex:none;fill:var(--ink-soft);opacity:.55;transition:fill 200ms var(--ease),opacity 200ms var(--ease),transform 200ms var(--ease)}
.seal-steps{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font:400 12px/1.4 var(--font-mono);color:var(--ink-soft)}
.seal-step{opacity:.35}
.seal-sequence.is-sealing .seal-step{animation:seal-step-in 200ms var(--ease) forwards}
.seal-steps .seal-step:nth-child(1){animation-delay:0ms}
.seal-steps .seal-step:nth-child(2){animation-delay:150ms}
.seal-steps .seal-step:nth-child(3){animation-delay:300ms}
.seal-steps .seal-step:nth-child(4){animation-delay:450ms}
.seal-sequence.is-sealing .seal-keyhole{animation:seal-keyhole-turn 600ms var(--ease) forwards}
.seal-sequence.is-sealed .seal-step{opacity:1;color:var(--ink)}
.seal-sequence.is-sealed .seal-keyhole{fill:var(--glow);opacity:1;transform:rotate(90deg)}
@keyframes seal-step-in{from{opacity:.35}to{opacity:1;color:var(--ink)}}
@keyframes seal-keyhole-turn{from{transform:rotate(0deg)}to{transform:rotate(90deg)}}
@media(max-width:767px){.keypad-grid{max-width:300px}.seal-sequence{flex-wrap:wrap;gap:12px}}
@media(max-width:390px){.keypad-key small{font-size:19px}}
@media(prefers-reduced-motion:reduce){
  .keypad-key:hover{transform:none}
  .seal-sequence.is-sealing .seal-step{animation:none;opacity:1}
  .seal-sequence.is-sealing .seal-keyhole{animation:none;transform:rotate(90deg);fill:var(--accent-deep)}
}
