:root {
  --ink: #0b1218;
  --fog: #d7e0e8;
  --amber: #e8b86d;
  --amber-deep: #b8792f;
  --glass: rgba(10, 16, 22, 0.72);
  --line: rgba(232, 184, 109, 0.28);
  --ok: #8fdfb5;
  --bad: #ff8f8f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--fog);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.atmosphere {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(232, 184, 109, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(8, 12, 18, 0.55), rgba(8, 12, 18, 0.92)),
    center / cover no-repeat url("https://gateway.pinata.cloud/ipfs/bafybeiguf3kbmwc4azb4cxekistgl3dtllsvzju46pgry25riqttjo2gtm");
  filter: saturate(0.9) contrast(1.05);
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}

.eyebrow {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: rgba(215, 224, 232, 0.72);
}

.brand {
  margin: 0;
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 0.95;
  color: #f4efe6;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(215, 224, 232, 0.88);
}

.countdown {
  margin-top: 0.6rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(10px);
}

.phase-label {
  margin: 0 0 0.75rem;
  font-family: Fraunces, Georgia, serif;
  font-size: 1.25rem;
  color: var(--amber);
}

.clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.clock div {
  text-align: center;
  padding: 0.7rem 0.2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.clock span {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-variant-numeric: tabular-nums;
}

.clock small {
  color: rgba(215, 224, 232, 0.65);
  font-size: 0.75rem;
}

.timeline {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.timeline li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.92rem;
}

.timeline li.active {
  border-color: var(--amber);
  color: var(--amber);
}

.timeline li.done {
  opacity: 0.45;
}

.eligibility {
  margin-top: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.34);
}

.eligibility.none {
  border-color: rgba(255, 143, 143, 0.35);
}

.eligibility-title {
  margin: 0 0 0.35rem;
  font-family: Fraunces, Georgia, serif;
  color: var(--amber);
  font-size: 1.05rem;
}

.eligibility-body {
  margin: 0;
  line-height: 1.45;
  color: rgba(215, 224, 232, 0.9);
}

.timeline li.eligible {
  box-shadow: inset 3px 0 0 var(--amber);
}

.timeline li.ineligible {
  opacity: 0.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.5rem;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0.85rem 1.25rem;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: transparent;
  border-color: rgba(232, 184, 109, 0.55);
  color: var(--fog);
}

.btn.mint {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: #1a1208;
}

.wallet, .status, .links {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(215, 224, 232, 0.8);
}

.status.ok { color: var(--ok); }
.status.bad { color: var(--bad); }

.links a {
  color: var(--amber);
  text-decoration: none;
}

@media (max-width: 560px) {
  .timeline li {
    flex-direction: column;
    gap: 0.2rem;
  }
}