* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}


body {

  background: #fafafa;

  color: #111;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

}


.page {

  width:
    min(900px, calc(100% - 40px));

  min-height: 100vh;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

}


/* =============================
   HEADER
============================= */

.header {

  text-align: center;

  padding-top: 12vh;

}


.header h1 {

  margin: 0;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.18em;

}


.header p {

  margin: 10px 0 0;

  color: #888;

  font-size: 13px;

}


/* =============================
   MAIN SQUARE
============================= */

.square-section {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 18vh;

}


#square {

  display: block;

  width: 20px;

  height: 20px;

  background: #111;

  cursor: pointer;

}


#square-link {

  display: block;

  line-height: 0;

}


.owner {

  margin-top: 24px;

  font-size: 14px;

  font-weight: 500;

}


.price {

  margin-top: 7px;

  font-size: 14px;

  color: #555;

}


.timer {

  margin-top: 7px;

  font-size: 12px;

  color: #999;

}


#take-square {

  margin-top: 28px;

  padding: 11px 18px;

  border: 1px solid #111;

  background: #111;

  color: white;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.04em;

  cursor: pointer;

}


#take-square:hover {

  background: #333;

}


/* =============================
   HIDDEN
============================= */

.hidden {

  display: none;

}


/* =============================
   BID FORM
============================= */

.bid-section {

  width:
    min(460px, 100%);

  margin-top: 60px;

}


.bid-card {

  padding: 28px;

  background: white;

  border: 1px solid #e5e5e5;

}


.bid-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 20px;

}


.bid-header h2 {

  margin: 0;

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.12em;

}


.close-button {

  border: 0;

  background: transparent;

  color: #999;

  font-size: 24px;

  line-height: 1;

  cursor: pointer;

  padding: 0;

}


.close-button:hover {

  color: #111;

}


.current-price {

  margin-bottom: 25px;

  font-size: 13px;

  color: #666;

}


.current-price strong {

  color: #111;

}


/* =============================
   FORM
============================= */

#bid-form {

  display: flex;

  flex-direction: column;

}


#bid-form label {

  margin-bottom: 7px;

  font-size: 12px;

  font-weight: 500;

}


#bid-form input[type="text"],
#bid-form input[type="number"] {

  width: 100%;

  height: 42px;

  margin-bottom: 20px;

  padding: 0 12px;

  border: 1px solid #ddd;

  background: #fff;

  color: #111;

  font: inherit;

  font-size: 13px;

  outline: none;

}


#bid-form input:focus {

  border-color: #111;

}


/* =============================
   FIELD HELP
============================= */

.field-help {

  margin-top: -14px;

  margin-bottom: 22px;

  color: #aaa;

  font-size: 11px;

}


/* =============================
   BID INPUT
============================= */

.bid-input {

  display: flex;

  align-items: center;

  height: 42px;

  margin-bottom: 5px;

  border: 1px solid #ddd;

  background: #fff;

}


.bid-input:focus-within {

  border-color: #111;

}


.bid-input span {

  padding-left: 12px;

  color: #777;

}


.bid-input input {

  flex: 1;

  height: 100%;

  margin: 0 !important;

  border: 0 !important;

  outline: none;

}


/* =============================
   BID HELP
============================= */

.bid-help {

  margin-bottom: 8px;

  color: #999;

  font-size: 11px;

}


.bid-help strong {

  color: #555;

}


.bid-limit {

  margin-bottom: 22px;

  color: #aaa;

  font-size: 11px;

}


/* =============================
   COLOR
============================= */

.color-row {

  display: flex;

  gap: 10px;

  margin-bottom: 25px;

}


#color {

  width: 42px;

  height: 42px;

  padding: 3px;

  border: 1px solid #ddd;

  background: white;

  cursor: pointer;

}


#color-hex {

  flex: 1;

  height: 42px;

  margin: 0 !important;

}


/* =============================
   SUBMIT
============================= */

#submit-bid {

  height: 42px;

  border: 1px solid #111;

  background: #111;

  color: white;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.04em;

  cursor: pointer;

}


#submit-bid:hover {

  background: #333;

}


/* =============================
   CANCEL
============================= */

.cancel-button {

  margin-top: 12px;

  border: 0;

  background: transparent;

  color: #888;

  font-size: 12px;

  cursor: pointer;

}


.cancel-button:hover {

  color: #111;

}


/* =============================
   ERROR
============================= */

.form-error {

  min-height: 18px;

  margin-top: 14px;

  color: #c33;

  font-size: 12px;

}


/* =============================
   SUCCESS
============================= */

.success-section {

  width:
    min(460px, 100%);

  margin-top: 60px;

}


.success-card {

  padding: 45px 28px;

  background: white;

  border: 1px solid #e5e5e5;

  text-align: center;

}


.success-title {

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.14em;

}


.success-owner {

  margin-top: 28px;

  font-size: 16px;

  font-weight: 500;

}


.success-price {

  margin-top: 8px;

  font-size: 14px;

  color: #555;

}


.success-message {

  margin-top: 24px;

  color: #777;

  font-size: 13px;

  line-height: 1.6;

}


.done-button {

  margin-top: 28px;

  padding: 11px 24px;

  border: 1px solid #111;

  background: #111;

  color: white;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.04em;

  cursor: pointer;

}


.done-button:hover {

  background: #333;

}


/* =============================
   LEADERBOARD
============================= */

.leaderboard-section {

  width:
    min(600px, 100%);

  margin-top: 18vh;

  padding-bottom: 80px;

}


.leaderboard-section h2 {

  margin: 0 0 20px;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


.leaderboard-row {

  display: grid;

  grid-template-columns:
    40px
    1fr
    120px
    80px;

  gap: 12px;

  padding: 12px 0;

  border-top: 1px solid #e8e8e8;

  font-size: 12px;

}


.leaderboard-row:last-child {

  border-bottom:
    1px solid #e8e8e8;

}


.leaderboard-header {

  color: #999;

}


/* =============================
   FOOTER
============================= */

footer {

  margin-top: auto;

  padding: 40px 0 30px;

  color: #aaa;

  font-size: 11px;

}


/* =============================
   MOBILE
============================= */

@media (max-width: 600px) {

  .header {

    padding-top: 8vh;

  }


  .square-section {

    margin-top: 14vh;

  }


  .bid-section,
  .success-section {

    margin-top: 45px;

  }


  .bid-card,
  .success-card {

    padding: 22px;

  }


  .leaderboard-section {

    margin-top: 14vh;

  }


  .leaderboard-row {

    grid-template-columns:
      30px
      1fr
      90px
      65px;

    gap: 8px;

    font-size: 11px;

  }

}