/* Adoption Day / mint console.
   Extends styles.css -- same terminal palette, same Courier, same hairline
   green borders. Nothing here redefines a base token. */

.mint-hero{padding-bottom:clamp(1.2rem,3vw,1.8rem);}

.daystamp{
  font-size:clamp(0.6rem,1.7vw,0.68rem);
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--green-dim);
  margin-bottom:0.9rem;
}
/* The stamp breathes like the entrance prompt, so the page feels alive
   without anything actually moving. */
.daystamp.live{animation:pulse 2.4s ease-in-out infinite;color:var(--green);}

.mint-section{max-width:520px;margin:0 auto;border-bottom:none;}

/* ---------- counter ---------- */
.counter{border:1px solid var(--line);padding:clamp(0.9rem,3vw,1.15rem);margin-bottom:clamp(1rem,3vw,1.3rem);}
.counter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.6rem;}
.counter-label{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);}
.counter-nums{font-size:clamp(0.85rem,2.4vw,0.95rem);color:var(--muted);font-variant-numeric:tabular-nums;}
.counter-nums b{color:var(--green);font-weight:normal;}

.meter{height:3px;background:rgba(57,255,20,0.09);overflow:hidden;}
.meter-fill{height:100%;width:0;background:var(--green);transition:width 0.5s ease;box-shadow:0 0 8px rgba(57,255,20,0.5);}

.counter-foot{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;margin-top:0.65rem;flex-wrap:wrap;}
.pill{font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.25rem 0.55rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);}
.pill-idle{color:var(--muted);}
.pill-open{color:var(--green);border-color:var(--green-dim);background:rgba(57,255,20,0.06);}
.pill-soon{color:#d8a13a;border-color:#5a4415;}
.pill-closed{color:#d05a5a;border-color:#5a2020;}
.countdown{font-size:0.66rem;color:var(--muted);letter-spacing:0.08em;font-variant-numeric:tabular-nums;}

/* ---------- console ---------- */
.console{border:1px solid var(--line);padding:clamp(1.1rem,3.5vw,1.5rem);}
.console-row{display:flex;justify-content:space-between;gap:0.9rem;padding:0.45rem 0;border-bottom:1px dotted rgba(57,255,20,0.1);font-size:clamp(0.72rem,1.9vw,0.78rem);}
.console-row .k{color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;font-size:0.62rem;padding-top:0.15rem;white-space:nowrap;}
.console-row .v{color:var(--text);text-align:right;}
.console-row .v.addr{word-break:break-all;font-size:0.7rem;}
.v.ok{color:var(--green);}
.v.warn{color:#d8a13a;}
.v.bad{color:#d05a5a;}

/* ---------- quantity ---------- */
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.9rem 0 0.2rem;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);}
.step-btn{
  width:2.1rem;height:2.1rem;background:transparent;border:none;color:var(--green);
  font-family:inherit;font-size:1rem;cursor:pointer;line-height:1;
}
.step-btn:hover:not(:disabled){background:rgba(57,255,20,0.08);}
.step-btn:disabled{color:#2a2a2a;cursor:not-allowed;}
.stepper input{
  width:2.4rem;height:2.1rem;text-align:center;background:var(--panel);
  border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:0.85rem;
}
.stepper input:focus{outline:none;}
/* Price sits with the stepper on the right, not stranded in the value column
   opposite it. margin-left:auto packs both against the right edge so the row
   reads "Companions ....... 0.00053 ETH  [- 1 +]". */
.total{font-size:0.75rem;color:var(--muted);white-space:nowrap;margin-left:auto;}

.mint-btn{width:100%;margin-top:1rem;}
.mint-btn[aria-busy="true"]{color:var(--muted);border-color:var(--line);cursor:progress;}

.console .fineprint{font-size:0.62rem;color:#3a3a3a;margin-top:0.7rem;line-height:1.45;text-align:center;}

/* ---------- receipt ---------- */
.tokens{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.6rem 0;}
.token-chip{
  border:1px solid var(--green-dim);color:var(--green);
  padding:0.2rem 0.5rem;font-size:0.7rem;letter-spacing:0.04em;
}

.legalese{
  font-size:0.6rem;color:#2f2f2f;line-height:1.6;text-align:center;
  max-width:400px;margin:clamp(1.4rem,4vw,2rem) auto 0;
}

@media (prefers-reduced-motion:reduce){
  .daystamp.live{animation:none;}
  .meter-fill{transition:none;}
}

/* ---------- header wallet button ---------- */
.wallet-btn{
  font-family:inherit;
  font-size:clamp(0.62rem,1.6vw,0.7rem);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
  background:transparent;
  border:1px solid var(--green-dim);
  padding:0.42rem 0.85rem;
  cursor:pointer;
  line-height:1;
  transition:background 0.2s;
}
.wallet-btn:hover{background:rgba(57,255,20,0.08);}
.wallet-btn.connected{
  color:var(--text);
  border-color:var(--line);
  text-transform:none;
  letter-spacing:0.04em;
}
.wallet-btn.connected::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:0.5rem;vertical-align:middle;
  box-shadow:0 0 6px var(--green);
}

.terms{display:flex;gap:0.6rem;justify-content:center;flex-wrap:wrap;}

/* ---------- wallet picker ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.82);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
}
.modal-backdrop[hidden]{display:none;}
.modal-card{
  width:min(340px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  padding:clamp(1rem,3vw,1.3rem);
  box-shadow:0 0 40px rgba(57,255,20,0.06);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.9rem;}
.modal-head h3{
  font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--green);font-weight:normal;line-height:1;
}
.modal-x{
  background:none;border:none;color:var(--muted);font-size:1.1rem;
  cursor:pointer;line-height:1;padding:0 0.2rem;font-family:inherit;
}
.modal-x:hover{color:var(--green);}

.wallet-list{display:flex;flex-direction:column;gap:0.4rem;}
.wallet-row{
  display:flex;align-items:center;gap:0.65rem;width:100%;
  background:transparent;border:1px solid var(--line);
  padding:0.65rem 0.75rem;cursor:pointer;
  font-family:inherit;font-size:0.8rem;color:var(--text);text-align:left;
  transition:border-color 0.15s,background 0.15s;
}
.wallet-row:hover{border-color:var(--green-dim);background:rgba(57,255,20,0.05);}
.wallet-icon{width:22px;height:22px;border-radius:5px;flex:0 0 22px;}
.wallet-dot{
  width:22px;height:22px;border-radius:5px;flex:0 0 22px;
  border:1px solid var(--green-dim);
}
.wallet-name{flex:1;}
.wallet-tag{
  font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);
}
.wallet-empty{font-size:0.75rem;color:var(--muted);margin-bottom:0.6rem;line-height:1.5;}
.modal-foot{font-size:0.62rem;color:#3a3a3a;margin-top:0.9rem;line-height:1.5;text-align:center;}

/* A mint button that cannot mint says why and stops being clickable. */
.mint-btn:disabled,.mint-btn.disabled{
  color:#4a4a4a;border-color:#2a2a2a;cursor:not-allowed;background:none;
}
.mint-btn:disabled:hover,.mint-btn.disabled:hover{background:none;}

/* ---------- minted success modal ---------- */
.minted-sheet{width:min(420px,100%);}
.minted-sub{font-size:0.75rem;color:var(--muted);margin-bottom:0.9rem;line-height:1.5;}
.minted-grid{
  display:grid;gap:0.6rem;
  grid-template-columns:repeat(auto-fit,minmax(120px,160px));
  justify-content:center;
  max-height:min(52vh,420px);overflow-y:auto;
}
/* One companion deserves the spotlight, not a thumbnail in the corner. */
.minted-grid[data-count="1"]{grid-template-columns:min(240px,90%);}
.minted-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(120px,180px));}
.minted-card{
  display:flex;flex-direction:column;gap:0.4rem;
  border:1px solid var(--line);padding:0.5rem;
  transition:border-color 0.15s,background 0.15s;
}
.minted-card:hover{border-color:var(--green-dim);background:rgba(57,255,20,0.05);}
.minted-card img{
  width:100%;aspect-ratio:1/1;display:block;
  image-rendering:pixelated;background:#0b0d0e;
}
.minted-id{
  font-size:0.66rem;color:var(--green);letter-spacing:0.06em;text-align:center;
}
.modal-foot a{color:var(--green);border-bottom:1px solid var(--green-dim);}
.modal-foot a:hover{background:rgba(57,255,20,0.08);}

/* Art tile inside a minted card: square, pixel-crisp, labelled fallback
   while tokenURI resolves or when the art is not revealed yet. */
.minted-art{
  display:block;width:100%;aspect-ratio:1/1;background:#0b0d0b;
  overflow:hidden;position:relative;
}
.minted-art img{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;display:block;
}
/* The token id is known the instant the receipt lands, but the art needs a
   tokenURI read plus two gateway hops. Without a visible wait state that gap
   reads as a broken image, so the tile breathes and carries a ring until the
   art swaps in. */
.minted-wait{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:0.5rem;
  align-items:center;justify-content:center;
  color:var(--green-dim);font-size:0.8rem;letter-spacing:0.08em;
  animation:tilePulse 1.6s ease-in-out infinite;
}
.minted-wait::before{
  content:"";width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(57,255,20,0.18);
  border-top-color:var(--green);
  animation:tileSpin 0.7s linear infinite;
}
/* Terminal state: art could not be resolved. Stop spinning, stop pulsing,
   just label the tile. */
.minted-wait-done{animation:none;}
.minted-wait-done::before{display:none;}
@keyframes tileSpin{to{transform:rotate(360deg);}}
@keyframes tilePulse{0%,100%{opacity:0.55;}50%{opacity:1;}}

/* Art fades in rather than snapping, so the handoff from spinner to image
   does not flash. */
.minted-art img{animation:tileFade 0.25s ease-out;}
@keyframes tileFade{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .minted-wait,.minted-wait::before,.minted-art img{animation:none;}
  .minted-wait::before{border-top-color:rgba(57,255,20,0.18);}
}

/* The pills space themselves through .terms gap; the base .fee bottom margin
   otherwise doubles up and opens a canyon between them on mobile. */
.terms .fee{margin-bottom:0;}

/* Button sits outside nav so mobile can put brand + button on the top row.
   Desktop: nav hugs the button on the right. */
header nav{margin-left:auto;}
header .wallet-btn{margin-left:clamp(1rem,3vw,1.5rem);}
header nav a,.wallet-btn{white-space:nowrap;}

/* ---------- mobile header: brand + button, links underneath ---------- */
@media (max-width:640px){
  header{flex-wrap:wrap;row-gap:0.55rem;}
  header .wallet-btn{order:2;margin-left:auto;padding:0.5rem 0.8rem;}
  header nav{
    order:3;flex:1 1 100%;
    justify-content:flex-start;
    gap:0.45rem 1.1rem;
  }
  .mint-section{max-width:100%;}
  /* Real thumbs need real tap targets. */
  .step-btn{width:2.75rem;height:2.75rem;}
  .stepper input{height:2.75rem;width:2.75rem;}
  .mint-btn{padding-top:0.85rem;padding-bottom:0.85rem;}
  .minted-grid{grid-template-columns:repeat(auto-fit,minmax(104px,140px));}
  .minted-grid[data-count="1"]{grid-template-columns:min(220px,86%);}
}