:root{
  --pine:#061c17; --pine2:#0a2a21; --moss:#134434; --leaf:#2bb77a; --leafd:#13804f;
  --brass:#e9b949; --brass2:#fde48f; --brassd:#9c6d14;
  --vellum:#f3e6c4; --vellum2:#dcc58c; --umber:#4a300c;
  --txt:#e3ece6; --dim:#97b5a6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 16px;
  font:400 15px/1.55 Mulish,system-ui,sans-serif; color:var(--txt);
  background:
    radial-gradient(circle at 50% 38%,rgba(233,185,73,.12) 0,transparent 42%),
    radial-gradient(circle at 50% 40%,var(--moss) 0,var(--pine) 60%);
  background-color:var(--pine);
}
a{color:var(--brass2)}
.mint{width:100%;max-width:720px;text-align:center}

.mint-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mint-logo{font:900 24px/1 Cinzel,serif;letter-spacing:3px;text-transform:uppercase;color:var(--brass)}
.mint-logo i{font:800 10px Mulish,sans-serif;font-style:normal;letter-spacing:3px;color:var(--dim);margin-left:6px;vertical-align:middle}
.mint-login{font-weight:800;font-size:13px;text-decoration:none;color:var(--txt);padding:6px 14px;border:1px solid var(--brassd);border-radius:6px}

/* ---- medallion with beads around ---- */
.orbit{display:grid;gap:12px;justify-items:center;margin-bottom:18px}
.medal{
  position:relative; width:250px; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; padding:22px;
  background:
    repeating-conic-gradient(from 0deg,var(--brass) 0 4deg,var(--brassd) 4deg 8deg);
  box-shadow:0 0 0 6px var(--pine2),0 0 0 8px var(--brassd),0 0 40px rgba(233,185,73,.35),0 18px 40px rgba(0,0,0,.5);
}
.medal::before{
  content:""; position:absolute; inset:12px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#fff7da 0,var(--vellum) 35%,var(--vellum2) 100%);
  box-shadow:inset 0 0 0 3px var(--brassd),inset 0 0 0 7px var(--vellum),inset 0 0 0 8px var(--brassd),inset 0 -10px 24px rgba(110,70,10,.3);
}
.medal-fox{position:absolute;top:-22px;left:50%;width:62px;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.medal-face{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;color:var(--umber);font-weight:400}
.medal-top{font:800 10px/1.25 Mulish,sans-serif;letter-spacing:1.5px;text-transform:uppercase;max-width:150px}
.medal-num{
  font:900 56px/1 Cinzel,serif; margin:4px 0 2px;
  background:linear-gradient(180deg,var(--brass2) 0,var(--brass) 50%,var(--brassd) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #7a520c; filter:drop-shadow(0 2px 0 rgba(80,50,8,.35));
}
.medal-amt{font:700 21px/1 Cinzel,serif;color:#2d1d06}

.beads{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.bead{
  font-size:12px;color:var(--dim);padding:9px 6px;border-radius:40px;
  background:rgba(4,20,16,.6);border:1px solid var(--moss);
}
.bead b{display:block;font:700 18px/1.15 Cinzel,serif;color:var(--brass)}

.mint-text{font-size:14px;color:var(--dim);max-width:560px;margin:0 auto 16px}
.mint-text a{font-weight:800}
.mint-games{font-size:12px;color:var(--dim);margin:-4px auto 16px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.mint-games a{text-decoration:none;font-weight:800;color:var(--brass);padding:4px 10px;border:1px solid var(--brassd);border-radius:20px;background:rgba(233,185,73,.06)}
.mint-cta{
  display:inline-block;padding:13px 40px;border-radius:999px;text-decoration:none;
  font:800 16px/1 Mulish,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#4fd696,var(--leaf) 45%,var(--leafd));
  border:2px solid var(--brass);box-shadow:0 0 0 4px rgba(156,109,20,.35),inset 0 2px 0 rgba(255,255,255,.35),0 8px 18px rgba(0,0,0,.4);
  transition:transform .15s;
}
.mint-cta:hover{transform:scale(1.04)}
.mint-tc{font-size:11px;color:var(--dim);margin-top:8px}

.mint-foot{margin-top:18px;padding-top:10px;border-top:1px dashed var(--moss);font-size:11px;color:var(--dim)}
.mint-foot a{color:var(--dim)}

@media (min-width:640px){
  .orbit{grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
  .medal{grid-column:2;grid-row:1 / span 2;width:290px}
  .medal-num{font-size:66px}
  .beads{display:contents}
  .bead{width:100%;max-width:170px}
  .bead-1{grid-column:1;grid-row:1;justify-self:end}
  .bead-2{grid-column:1;grid-row:2;justify-self:end}
  .bead-3{grid-column:3;grid-row:1;justify-self:start}
  .bead-4{grid-column:3;grid-row:2;justify-self:start}
}
@media (max-width:360px){.medal{width:230px}.medal-num{font-size:48px}}