/* Public sign-up page. Matches design-reference/signup-mockup.html. */

.hero-content{
  position:relative;
}

main, header, footer{
  position:relative;
  z-index:1;
}

header{
  max-width:760px;
  margin:0 auto;
  padding:48px 24px 28px;
  text-align:center;
  overflow:hidden;
}

.crest{
  width:56px; height:56px;
  margin:0 auto 12px;
  border-radius:50%;
  border:2px solid var(--amber-500);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:0.02em;
  color:var(--amber-500);
  background:var(--pitch-800);
}

/* The `auto` side margins matter. `header p` below sets both max-width:440px
   and margin:0 auto; a class selector beats a type selector, so the margin
   shorthand here wins while the max-width still applies. With `margin:0 0 10px`
   these become 440px-wide blocks pinned flush-left in the 712px content box,
   putting their centred text 136px left of the real centre on every viewport
   wide enough for the max-width to bind. */
.club-name{
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--chalk);
  margin:0 auto 10px;
}

.eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--chalk-dim);
  margin:0 auto 10px;
}

h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px, 6vw, 52px);
  line-height:1.05;
  letter-spacing:0.01em;
  margin:0 0 12px;
  text-transform:uppercase;
}

header p{
  font-size:15px;
  line-height:1.6;
  color:var(--chalk-dim);
  max-width:440px;
  margin:0 auto 22px;
}

.counter{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  background:var(--pitch-800);
  border:1px solid var(--chalk-faint);
  border-radius:var(--radius-sm);
  padding:8px 16px;
}
.counter .n{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--amber-500);
}
.counter .label{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--chalk-dim);
}

.board{
  max-width:720px;
  margin:0 auto;
  padding:12px 20px 60px;
}

.board-label{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  color:var(--chalk-dim);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.board-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--chalk-faint);
}

/* Live status line under the board label: load failures and claim
   confirmations. Hidden until there is something to say. */
.board-status{
  display:none;
  margin:0 0 16px;
  font-size:13px;
  line-height:1.5;
  color:var(--chalk-dim);
}
.board-status.show{ display:block; }
.board-status.success{ color:var(--amber-500); }
.board-status.error{ color:var(--danger); }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(54px, 1fr));
  gap:9px;
}
.grid.loading{ opacity:0.45; }

.tile{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--chalk-faint);
  background:transparent;
  color:var(--chalk-dim);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:400;
  cursor:pointer;
  transition:transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  padding:0;
}
.tile:hover:not(.taken){
  border-color:var(--chalk);
  color:var(--chalk);
  transform:translateY(-2px);
}
.tile:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(242,169,59,0.45);
}
.tile.taken{
  background:var(--amber-500);
  border-color:var(--amber-600);
  color:var(--amber-ink);
  cursor:default;
}
.tile .initials{
  font-family:var(--font-body);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:0.03em;
  margin-top:1px;
}

footer{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 48px;
  text-align:center;
  font-size:12px;
  color:var(--chalk-faint);
}

.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(4,12,8,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.15s ease;
}
.overlay.open{ opacity:1; visibility:visible; }

.card{
  width:100%;
  max-width:380px;
  background:var(--chalk);
  color:var(--pitch-900);
  border-radius:var(--radius-md);
  padding:30px 28px 26px;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--amber-500);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}

.card .eyebrow{
  color:rgba(11,46,31,0.55);
  margin-bottom:6px;
}
.card h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:30px;
  text-transform:uppercase;
  margin:0 0 18px;
}

.field{ margin-bottom:14px; }
.field label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(11,46,31,0.6);
  margin-bottom:6px;
}
/* Selects share the input rule so the two field types stay visually identical.
   `appearance:none` plus an inline-SVG chevron replaces the OS control, which
   would otherwise render at a different height and colour on every platform. */
.field input,
.field select{
  width:100%;
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:15px;
  border:1px solid rgba(11,46,31,0.22);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--pitch-900);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:34px;
  line-height:1.35;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230B2E1F' stroke-opacity='0.55' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
/* Nothing chosen yet: match the placeholder weight of the text inputs. */
.field select.placeholder{ color:rgba(11,46,31,0.42); }
.field select option{ color:var(--pitch-900); }

.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--amber-600);
  box-shadow:0 0 0 3px rgba(242,169,59,0.28);
}
.field .error{
  display:none;
  font-size:12px;
  color:var(--danger);
  margin-top:5px;
}
.field.invalid input,
.field.invalid select{ border-color:var(--danger); }
.field.invalid .error{ display:block; }

/* Form-level message, e.g. losing the race for a number (409). */
.form-error{
  display:none;
  margin:0;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(224,121,106,0.45);
  background:rgba(224,121,106,0.12);
  font-size:13px;
  line-height:1.45;
  color:#8C2F1E;
}
.form-error.show{ display:block; }

.actions{
  display:flex;
  gap:10px;
  margin-top:20px;
}
.actions button{
  flex:1;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:1px solid transparent;
}
.actions button:disabled{
  opacity:0.6;
  cursor:default;
}
.btn-cancel{
  background:transparent;
  border-color:rgba(11,46,31,0.25);
  color:var(--pitch-900);
}
.btn-cancel:hover:not(:disabled){ background:rgba(11,46,31,0.05); }
.btn-claim{
  background:var(--amber-500);
  color:var(--amber-ink);
}
.btn-claim:hover:not(:disabled){ background:var(--amber-600); }