/* ================= ROBIZARDS — mint page (single screen) ================= */

/* lock the page to one viewport on desktop */
.mint-page { height: 100vh; overflow: hidden; }

.mint-grid {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 84px clamp(16px, 3vw, 40px) 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}
/* override the global `section` padding from styles.css */
.mint-grid .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* ---------- left ---------- */
.mint-head { text-align: center; margin-bottom: clamp(14px, 2.2vh, 26px); }
.mint-head img {
  width: clamp(52px, 7vh, 76px);
  border: var(--pix-border) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: clamp(10px, 1.6vh, 18px);
  animation: bob 2.4s ease-in-out infinite;
}
.mint-head h1 {
  font-size: clamp(17px, 2.5vw, 28px);
  color: var(--green);
  text-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 10px;
}
.mint-head p { color: var(--cream-dim); font-size: clamp(17px, 1.5vw, 21px); }

.countdown {
  background: var(--night-deep);
  border: var(--pix-border) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(16px, 2.4vh, 26px) 18px;
  text-align: center;
  margin-bottom: clamp(14px, 2vh, 22px);
}
.cd-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, .9vw, 11px);
  color: var(--cyan);
  letter-spacing: 3px;
  margin-bottom: clamp(12px, 2vh, 20px);
}
.countdown.live .cd-label { color: var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.cd-clock { display: flex; justify-content: center; align-items: flex-start; gap: 5px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(46px, 4.6vw, 66px); }
.cd-unit b {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(17px, 2.2vw, 28px);
  color: var(--green);
  text-shadow: 3px 3px 0 var(--ink);
}
.cd-unit span {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--cream-dim);
  margin-top: 9px;
  letter-spacing: 1px;
}
.cd-sep {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(15px, 1.9vw, 24px);
  color: var(--purple-bright);
}
.cd-date {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, .85vw, 10px);
  color: var(--cream-dim);
  margin-top: clamp(12px, 2vh, 20px);
  letter-spacing: 2px;
}

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
  background: var(--night-deep);
  border: var(--pix-border) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: clamp(12px, 1.8vh, 18px) 6px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 1.4vw, 17px);
  color: var(--gold);
  margin-bottom: 9px;
}
.stat span { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--cream-dim); letter-spacing: 1px; }

.supply-bar { height: 16px; background: var(--night-darker); border: var(--pix-border) solid var(--ink); }
.supply-bar > i {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--green) 0 12px, var(--green-bright) 12px 24px);
  transition: width .5s ease;
}
.supply-text { text-align: center; color: var(--cream-dim); margin-top: 9px; font-size: 19px; }

/* ---------- right ---------- */

.mint-box {
  background: var(--night-deep);
  border: var(--pix-border) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(16px, 2.4vh, 26px) clamp(16px, 1.8vw, 24px);
}
/* hidden until the gate opens — only the eligibility checker shows */
.mint-box.pre-live { display: none; }

.qty-label {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, .9vw, 11px);
  color: var(--cyan);
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-align: center;
}
.qty-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: clamp(14px, 2vh, 20px); }
.qty {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 1.1vw, 14px);
  padding: clamp(12px, 1.8vh, 17px) 0;
  color: var(--cream);
  background: var(--night-darker);
  border: var(--pix-border) solid var(--ink);
  cursor: pointer;
  transition: transform .1s, background .15s, color .15s;
}
.qty:hover { background: var(--purple-dark); transform: translateY(-2px); }
.qty.selected { background: var(--green); color: var(--ink); box-shadow: 0 5px 0 var(--ink); transform: translateY(-2px); }

.cost-row, .cost-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: clamp(7px, 1.1vh, 11px) 0;
  color: var(--cream-dim);
  border-bottom: 3px solid var(--night-darker);
  font-size: clamp(17px, 1.5vw, 21px);
}
.cost-row b { color: var(--cream); }
.cost-row b.free { color: var(--green); font-family: 'Press Start 2P', monospace; font-size: clamp(10px, 1vw, 12px); }
.cost-total { border-bottom: none; padding-top: 13px; margin-bottom: clamp(13px, 2vh, 19px); }
.cost-total span { font-family: 'Press Start 2P', monospace; font-size: clamp(9px, .9vw, 11px); color: var(--cream); }
.cost-total b { font-family: 'Press Start 2P', monospace; font-size: clamp(11px, 1.1vw, 13px); color: var(--gold); }

.mint-btn {
  display: block;
  width: 100%;
  font-size: clamp(12px, 1.3vw, 16px);
  padding: clamp(15px, 2.2vh, 21px);
  border: none;
}
.fee-note { font-size: clamp(15px, 1.3vw, 17px); color: var(--cream-dim); text-align: center; margin-top: 12px; line-height: 1.35; }
.mint-status { text-align: center; margin-top: 10px; color: var(--cyan); min-height: 22px; font-size: 19px; }
.mint-status.err { color: var(--crimson); }

/* ---------- success overlay ---------- */
#mintSuccess {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(43, 40, 57, .96);
  overflow-y: auto;
  padding: 90px 24px 40px;
}
#mintSuccess.show { display: block; animation: pop .35s ease; }
.success-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--night-deep);
  border: var(--pix-border) solid var(--green);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 40px 26px;
}
#mintSuccess h2 {
  color: var(--green);
  font-size: clamp(16px, 4vw, 24px);
  text-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 14px;
}
#mintSuccess p { color: var(--cream-dim); margin-bottom: 22px; }

.revealed { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
.revealed figure { width: 96px; animation: pop .4s ease both; }
.revealed img {
  width: 100%;
  image-rendering: pixelated;
  border: var(--pix-border) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--night-darker);
}
.revealed figcaption { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--cream-dim); margin-top: 8px; }

/* ---------- short screens: let the columns breathe ---------- */
@media (max-height: 700px) {
  .mint-head img { display: none; }
  .mint-head { margin-bottom: 10px; }
}

/* ---------- mobile: stack and allow scrolling ---------- */
@media (max-width: 900px) {
  .mint-page { height: auto; overflow: visible; }
  .mint-grid {
    height: auto;
    grid-template-columns: 1fr;
    padding: 110px 20px 60px;
    max-width: 560px;
  }
  .mint-head img { display: block; }
}