/*
  PonsGuy mint site - single mint page, glassmorphism.

  Design language from the reference shot (dribbble.com/shots/27023284):
  frosted translucent panels over a colourful backdrop, a pill nav, a chunky
  uppercase headline with one cyan accent word, gradient CTA pills.

  Hard rules for this build:
    - one page, one purpose: mint. No gallery/traits/FAQ routes.
    - every icon is an inline SVG symbol (see the sprite in index.html). No
      emoji, no icon font, no dingbat glyphs.
    - no em-dash in copy.
    - glass fill is DARK translucent (solve_glass.py): a white fill leaks
      backdrop luminance into the text background and forces the backdrop near
      black, killing the glass look. A dark fill holds contrast AND lets the
      colourful backdrop show through.
*/

/* ----------------------------------------------------------- tokens */
:root {
  --bg-0:       #17140d;   /* warm near-black behind everything */
  --blue:       #385edb;
  --cyan:       #55c2f3;
  /* Gradient end used UNDER dark ink. Reference blue #385edb gives only
     3.40:1 with #06121f; #417ce2 clears 4.5 while staying in-family. */
  --blue-ink:   #417ce2;
  --cream:      #dcd9d2;

  /* glass steps - DARK translucent fill. Base (16,18,28); at these alphas the
     lightest text tier clears WCAG AA with the backdrop capped at gray ~107,
     while >=48% of the colourful backdrop still shows through the blur. */
  --glass:        rgba(16, 18, 28, 0.42);
  --glass-2:      rgba(16, 18, 28, 0.52);
  --glass-strong: rgba(20, 24, 38, 0.66);
  --rim:          rgba(255, 255, 255, 0.30);
  --rim-soft:     rgba(255, 255, 255, 0.14);

  /* type on glass, measured against the composited glass-over-backdrop. */
  --ink:        #ffffff;
  --ink-2:      rgba(255, 255, 255, 0.90);
  --ink-3:      rgba(255, 255, 255, 0.66);

  --ok:         #46d38a;
  --warn:       #f0a53a;

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --maxw: 1120px;
  --pad: clamp(16px, 4vw, 34px);

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-0);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* backdrop image the panels blur. object-fit cover, fixed so it does not
   scroll away on the short single page. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('img/backdrop.jpg') center / cover no-repeat, var(--bg-0);
}

.ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle;
       flex: none; }
.ico.sm { width: 15px; height: 15px; }

a { color: inherit; }

/* ----------------------------------------------------------- shell */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 26px) var(--pad) 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 26px);
}

/* glass surface used by main + modals */
.glass {
  background: var(--glass);
  border: 1px solid var(--rim-soft);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------- nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 9px 9px 16px;
  background: var(--glass);
  border: 1px solid var(--rim-soft);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 15px;
}
.logo img { border-radius: 9px; display: block; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: 600 14px var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-ghost .ico { width: 17px; height: 17px; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block;
       flex: none; }
.dot-off  { background: #6b7280; }
.dot-idle { background: #6b7280; }
.dot-on   { background: var(--ok);   box-shadow: 0 0 0 3px rgba(70,211,138,.22); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(240,165,58,.22); }

/* ----------------------------------------------------------- mint layout */
.mint {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3.5vw, 44px);
  flex: 1;
}

/* ---- left column: art + copy ---- */
.mint-left { min-width: 0; display: flex; flex-direction: column; }

.art {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #4b3bcf 0%, #3f7fe0 52%, #5fd0e8 100%);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 420px;
}
.art img,
.art .art-media { width: 100%; height: 100%; object-fit: cover; display: block; }

.art-cap {
  margin: 10px 2px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mint-left h1 {
  margin: 22px 0 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.mint-left h1 span {
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(85, 194, 243, 0.5);
}

.lede {
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 15px;
}

/* ---- right column: mint control ---- */
.mint-right {
  min-width: 0;
  background: var(--glass-2);
  border: 1px solid var(--rim-soft);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.run { text-align: left; }
.run-count { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.run-count b { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; }
.run-cap { font-size: 13px; color: var(--ink-3); }
.run-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

.strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(50, minmax(0, 1fr));
  gap: 3px;
}
.strip i { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.strip i.on { background: linear-gradient(180deg, var(--cyan), var(--blue)); }

.order-tag { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.06em;
             text-transform: uppercase; color: var(--ink-3); }

/* ---- quantity: drag slider ----
   A native range input, fully repainted. The track is drawn with a gradient
   whose hard stop sits at --fill (set from JS), so the filled portion works
   identically in every engine instead of relying on ::-moz-range-progress. */
.qty-slider { display: flex; flex-direction: column; gap: 10px; }

.qty-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.qty-now {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qty-limit { font-size: 12px; color: var(--ink-3); }
.qty-limit b { color: var(--ink-2); font-weight: 700; }

.qty-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* tall enough that the whole strip is a comfortable drag/touch target */
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;      /* let horizontal drags move the thumb, not scroll */
  --fill: 0%;
}
.qty-range:active { cursor: grabbing; }

/* --- track --- */
.qty-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background:
    linear-gradient(90deg, var(--cyan) 0%, var(--blue-ink) var(--fill),
                    rgba(255, 255, 255, 0.07) var(--fill),
                    rgba(255, 255, 255, 0.07) 100%);
}
.qty-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--rim);
  background:
    linear-gradient(90deg, var(--cyan) 0%, var(--blue-ink) var(--fill),
                    rgba(255, 255, 255, 0.07) var(--fill),
                    rgba(255, 255, 255, 0.07) 100%);
}

/* --- thumb --- */
.qty-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #06121f;
  background: linear-gradient(180deg, #ffffff, #d8e6f7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  /* centre the 26px thumb on the 10px track: (10 - 26) / 2 */
  margin-top: -8px;
}
.qty-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #06121f;
  background: linear-gradient(180deg, #ffffff, #d8e6f7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.qty-range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.qty-range:hover::-moz-range-thumb { transform: scale(1.06); }
.qty-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.qty-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.qty-range:focus { outline: none; }

/* --- tick numbers under the track ---
   Two modes. With a small cap every value gets a label and flex spacing is
   enough. Past 12 values the labels are landmarks only (1, 5, 10, ... max) and
   each one is positioned by percentage so it sits over its actual value rather
   than being spread evenly, which would put "5" in the wrong place. */
.qty-scale {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}
.qty-scale.is-sparse {
  display: block;
  position: relative;
  height: 14px;
  padding: 0;
}
.qty-tick {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.qty-scale.is-sparse .qty-tick {
  position: absolute;
  top: 0;
  /* The thumb is 22px wide and its centre travels from 11px to width-11px, so
     a label at 0% must sit 11px in from the left edge to line up with it. The
     translate keeps the label centred on that point. */
  transform: translateX(-50%);
  white-space: nowrap;
}

.ticket {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket > div { display: flex; align-items: baseline; justify-content: space-between;
                gap: 12px; }
.ticket dt { font-size: 13px; color: var(--ink-3); }
.ticket dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2);
             text-align: right; overflow-wrap: anywhere; }

.ticket-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rim-soft);
}
.ticket-total span { font-size: 13px; color: var(--ink-3); }
.ticket-total b { font-size: 20px; font-weight: 800; }

/* primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border: none;
  border-radius: var(--r-sm);
  color: #06121f;
  background: linear-gradient(100deg, var(--cyan), var(--blue-ink));
  font: 700 15px var(--font);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(56, 94, 219, 0.34);
}
.btn-primary.block { width: 100%; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  filter: none;
}
.btn-primary:disabled .ico { opacity: 0.5; }

.mint-note { margin: 0; font-size: 12px; color: var(--ink-3); }

/* ----------------------------------------------------------- footer */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
  padding: 0 4px;
}
.foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--cyan);
          text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- modals */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 14, 0.66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: min(440px, 100%);
  padding: 24px;
  background: var(--glass-strong);
}
.wallet-card { max-width: min(460px, 100%); }

.modal-top { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; }
.modal-top h2 { margin: 0; font-size: 20px; font-weight: 700; }
.modal-x {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rim);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  flex: none;
}
.modal-x:hover { background: rgba(255, 255, 255, 0.14); }

.modal-sub { margin: 6px 0 16px; font-size: 13px; color: var(--ink-3); }
.modal-sub b { color: var(--ink-2); font-weight: 600; }

/* wallet rows */
.wallet-list { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 8px; }
.wallet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--rim-soft);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.wallet-row:hover { background: rgba(255, 255, 255, 0.12); }
.wlogo {
  width: 40px; height: 40px;
  border-radius: 11px;
  overflow: hidden;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9);
  /* hairline ring so a dark brand tile (OKX black, Rainbow navy) keeps an edge
     against the dark row instead of merging into it. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wlogo img, .wlogo svg { width: 28px; height: 28px; display: block; }
.wname { min-width: 0; font-weight: 600; font-size: 15px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wstate {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
}
.wstate .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
                box-shadow: 0 0 0 3px rgba(70,211,138,.22); }
.wstate-off { color: rgba(255, 255, 255, 0.4); }
.wchev { color: var(--ink-3); width: 18px; height: 18px; }

.modal-fine {
  margin: 16px 0 0;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px solid var(--rim-soft);
}
.modal-fine .ico { color: var(--ok); margin-top: 1px; }

/* review modal */
.review { margin: 16px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.review > div { display: flex; align-items: baseline; justify-content: space-between;
                gap: 12px; }
.review dt { font-size: 13px; color: var(--ink-3); }
.review dd { margin: 0; font-size: 14px; font-weight: 600; }
.review-total { padding-top: 12px; border-top: 1px solid var(--rim-soft); }
.review-total dt { font-size: 15px; color: var(--ink-2); }
.review-total dd { font-size: 20px; font-weight: 800; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .mint { grid-template-columns: minmax(0, 1fr); }
  .art { max-width: 340px; margin: 0 auto; }
  .art-cap { text-align: center; }
  .mint-left h1 { text-align: center; }
  .lede { margin-left: auto; margin-right: auto; text-align: center; }
}

@media (max-width: 460px) {
  .nav { padding: 8px 8px 8px 14px; }
  .btn-ghost { padding: 9px 13px; }
}

/* Very narrow: collapse the connect button to an icon so the nav row cannot
   overflow. The dot + wallet icon still communicate state; the full label
   returns above 380px. */
@media (max-width: 380px) {
  .btn-ghost #navConnectLabel { display: none; }
  .btn-ghost { padding: 10px; }
  .logo span { font-size: 14px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .chip, .wallet-row, .btn-ghost { transition: all 0.16s ease; }
}