/* ROBIEGGZ — mint page: the mint card, your nest (inventory), the crack modal
 * and the odds table. Builds on site.css (tokens, buttons, stage, modals). */

.lbl { display: block; font-family: var(--pixel); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.mint-page h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.03em; margin-top: 14px; }
.mint-page h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; margin-top: 12px; }

/* ---------------- hero + mint card ---------------- */
.mint-hero { padding-top: clamp(48px, 7vw, 84px); }
.mint-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(28px, 5vw, 64px); align-items: center; }

.mint-grid > * { min-width: 0; }
.curve { margin-top: 30px; max-width: 460px; }
.curve svg { width: 100%; height: 120px; display: block; overflow: visible; background: rgba(20, 10, 6, .06); clip-path: var(--px); }
.curve-base { fill: none; stroke: rgba(20, 10, 6, .25); stroke-width: 4; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.curve-done { fill: none; stroke: var(--ink); stroke-width: 5; vector-effect: non-scaling-stroke; }
.curve-dot { fill: var(--ink); }
.curve-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--pixel); font-size: 12px; color: #33470a; text-transform: uppercase; }

.mint-card { background: #fff; clip-path: var(--px-lg); box-shadow: inset 0 0 0 3px var(--ink), inset 0 -8px 0 rgba(20, 10, 6, .1); padding: 26px; }
.mint-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mint-pill { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; padding: 5px 12px 6px; clip-path: var(--px-sm); background: var(--lime-soft); color: var(--lime-text); }
.mint-pill.live { background: var(--ink); color: var(--lime); }
.mint-pill.live::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--lime); animation: blink 1s steps(2) infinite; }
.mint-pill.out { background: var(--gold); color: var(--ink); }
.mint-eth { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.mint-progress { margin-top: 20px; }
.mint-count { font-size: 15px; color: var(--muted); }
.mint-count b { font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mint-bar { margin-top: 8px; display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; }
.mint-bar i { height: 14px; background: var(--line); }
.mint-bar i.on { background: var(--lime); box-shadow: inset 0 -3px 0 var(--lime-d); }
.mint-bar i.at { background: var(--ink); animation: fillstep 1.2s steps(3) infinite; }

.mint-price { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mint-price > div { background: var(--shell); padding: 12px 14px; clip-path: var(--px-sm); }
.mint-price b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 2px; }

.mint-qty { margin-top: 20px; }
.qty { display: flex; margin-top: 8px; }
.qty-btn { font: inherit; font-size: 24px; font-weight: 700; width: 52px; border: 0; background: var(--ink); color: #fff; cursor: pointer; clip-path: var(--px-sm); }
.qty-btn:hover { background: var(--ink-2); }
.qty input { flex: 1 1 0; width: 0; min-width: 0; font: inherit; font-size: 24px; font-weight: 800; text-align: center; border: 0; margin: 0 6px; padding: 8px; background: var(--shell); color: var(--ink); clip-path: var(--px-sm); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--lime); }
.qty-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.qty-chips button { font-family: var(--pixel); font-size: 13px; border: 0; padding: 6px 12px 7px; background: var(--lime-soft); color: var(--ink); cursor: pointer; clip-path: var(--px-sm); }
.qty-chips button:hover, .qty-chips button.on { background: var(--lime); }

.mint-total { margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--line); }
.mint-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mint-total-row b { font-size: 26px; font-variant-numeric: tabular-nums; }
.mint-total-sub { font-size: 13px; color: var(--muted); margin-top: 2px; min-height: 1.4em; }
.mint-go { width: 100%; margin-top: 16px; }
.mint-msg { margin-top: 12px; font-size: 14px; min-height: 0; }
.mint-msg:empty { display: none; }
.mint-msg .m { padding: 10px 12px; clip-path: var(--px-sm); background: var(--shell); display: flex; gap: 10px; align-items: flex-start; }
.mint-msg .m + .m { margin-top: 6px; }
.mint-msg .m.ok { background: var(--lime-soft); }
.mint-msg .m.err { background: #ffe9e2; color: #7a1c06; }
.mint-msg .m a { color: inherit; font-weight: 700; }
.mint-msg .spin { flex: 0 0 10px; height: 10px; margin-top: 6px; background: var(--ink); animation: blink .6s steps(2) infinite; }
.mint-fine { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.mint-fine code { font-size: 12px; word-break: break-all; }

/* ---------------- nest ---------------- */
.nest-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.nest-meta { margin-top: 10px; color: rgba(255, 255, 255, .7); font-size: 16px; }
.nest-meta b { color: #fff; }
.nest-meta .credit { display: inline-block; margin-left: 6px; color: var(--lime); }
.nest-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.nest-egg { font: inherit; color: #fff; text-align: center; border: 0; cursor: pointer; padding: 16px 10px 12px; background: rgba(255, 255, 255, .06); clip-path: var(--px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); transition: transform .12s steps(2), background .15s; position: relative; }
.nest-egg:hover { background: rgba(180, 240, 0, .12); transform: translateY(-3px); }
.nest-egg .art { display: block; width: 56px; height: 70px; margin: 0 auto; }
.nest-egg:not(.open):hover .art { animation: ishake .5s steps(4) infinite; }
.nest-egg .no { display: block; margin-top: 10px; font-family: var(--pixel); font-size: 12px; color: rgba(255, 255, 255, .55); }
.nest-egg .what { display: block; margin-top: 2px; font-weight: 700; font-size: 15px; }
.nest-egg .amt { display: block; font-size: 13px; color: var(--lime); font-variant-numeric: tabular-nums; }
.nest-egg.open { cursor: default; background: rgba(255, 255, 255, .03); }
.nest-egg.open:hover { transform: none; }
.nest-egg.t-mother { box-shadow: inset 0 0 0 2px #d68bff; background: rgba(214, 139, 255, .14); }
.nest-egg.t-emerald { box-shadow: inset 0 0 0 2px var(--lime); }
.nest-egg.t-gold { box-shadow: inset 0 0 0 2px var(--gold); }
.nest-egg.fresh { animation: pop .4s ease both; }
.nest-empty { margin-top: 30px; padding: 40px 20px; text-align: center; color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .04); clip-path: var(--px); }
.nest-empty [data-egg] { width: 56px; height: 70px; opacity: .5; }
.nest-empty p { margin-top: 12px; }

/* ---------------- crack modal ---------------- */
.cmodal { position: fixed; inset: 0; z-index: 90; background: rgba(8, 12, 2, .78); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px; }
.cmodal.open { display: flex; }
.csheet { position: relative; width: min(480px, 100%); max-height: calc(100svh - 32px); overflow: auto; padding: 22px 22px 24px; color: #fff; text-align: center; clip-path: var(--px-lg);
  background: radial-gradient(500px 300px at 50% 0%, rgba(180, 240, 0, .18), transparent 70%), linear-gradient(180deg, var(--forest-2), var(--forest)); animation: pop .25s ease both; }
.csheet--wide { width: min(640px, 100%); }
.cclose { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: rgba(255, 255, 255, .6); font-size: 28px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.cclose:hover { color: #fff; }
.cno { font-family: var(--pixel); font-size: 13px; text-transform: uppercase; color: var(--lime); }
.csheet .stage { margin-top: 4px; height: 360px; }
.cfoot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.stage[data-kind="mother"] .stage-glow, .stage.mother .stage-glow { background: radial-gradient(circle, rgba(214, 139, 255, .6), transparent 65%); animation: pulse 1s ease-in-out infinite; }
.stage.mother .drop-tier { background: #d68bff; }
.stage[data-kind="mystery"] .stage-glow { background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%); }

.all-total { margin-top: 10px; }
.all-total b { display: block; font-size: clamp(40px, 8vw, 60px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(180, 240, 0, .45); }
.all-total span { font-weight: 700; color: var(--lime); }
.all-list { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; text-align: center; }
.all-list .ae { padding: 10px 6px; background: rgba(255, 255, 255, .06); clip-path: var(--px-sm); animation: pop .35s ease both; }
.all-list .ae [data-egg] { width: 36px; height: 45px; }
.all-list .ae b { display: block; font-size: 13px; margin-top: 4px; }
.all-list .ae span { display: block; font-size: 12px; color: var(--lime); }

/* ---------------- odds + fairness ---------------- */
.odds { margin-top: 30px; background: #fff; clip-path: var(--px-lg); box-shadow: inset 0 0 0 3px var(--ink); padding: 8px 22px; }
.odds-row { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 12px; align-items: center; padding: 14px 0; border-top: 2px dashed var(--line); }
.odds-row--head { border-top: 0; font-family: var(--pixel); font-size: 12px; text-transform: uppercase; color: var(--muted); padding: 10px 0 6px; }
.odds-egg { display: flex; align-items: center; gap: 12px; }
.odds-egg [data-egg] { width: 32px; height: 40px; flex: 0 0 32px; }
.odds-egg b { display: block; line-height: 1.2; }
.odds-egg .rarity { display: inline-block; margin-top: 4px; }
.odds-row .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.odds-row .sub { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.rarity.r5 { background: #d68bff; color: var(--ink); }

.fair { margin-top: 28px; padding: 26px; background: var(--shell); clip-path: var(--px-lg); box-shadow: inset 0 0 0 2px var(--line); }
.fair h3 { font-size: 22px; }
.fair-steps { margin: 14px 0 0 20px; display: grid; gap: 10px; color: var(--ink-2); }
.fair-steps code { word-break: break-all; }
.fair-hash { margin-top: 16px; }
.fair-hash code { display: block; margin-top: 4px; padding: 8px 10px; word-break: break-all; font-size: 13px; }
.fair-log { display: inline-block; margin-top: 16px; font-weight: 700; }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .mint-grid { grid-template-columns: minmax(0, 1fr); }
  .mint-card { max-width: 520px; width: 100%; margin: 0 auto; }
  .mint-copy { text-align: center; }
  .mint-copy .lead { margin-left: auto; margin-right: auto; }
  .curve { margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
  .mint-card { padding: 20px; }
  .mint-bar { grid-template-columns: repeat(25, 1fr); }
  .odds { padding: 4px 14px; }
  .odds-row { grid-template-columns: 1.5fr 1fr; row-gap: 6px; }
  .odds-row--head span:nth-child(n+3) { display: none; }
  .odds-row .c3, .odds-row .c4 { grid-column: span 1; font-size: 14px; }
  .nest-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .nest-egg .art { width: 44px; height: 55px; }
  .csheet .stage { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .nest-egg:not(.open):hover .art, .mint-bar i.at, .mint-pill.live::before { animation: none; }
}