:root {
  --night: #071015;
  --deep: #0c201d;
  --jade: #648b76;
  --pale: #b8c9b7;
  --bronze: #c79b57;
  --gold: #e8c985;
  --warm: #f3ead8;
  --line: #846a43;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--night);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--warm);
  background: #050a0e url("/football-anime-bg.jpg") center top/cover fixed
    no-repeat;
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}
button,
input {
  font: inherit;
}
.hero {
  min-height: 760px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 6vw, 90px) 48px;
  background: url("/football-anime-bg.jpg") center 45% / cover no-repeat;
  overflow: hidden;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #050a0ff2 0%,
      #071015c7 42%,
      #0710155e 72%,
      #050a0fbd 100%
    ),
    linear-gradient(0deg, #071015 0%, transparent 45%);
}
header,
.hero-copy,
.event-bar {
  position: relative;
  z-index: 1;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
header img {
  width: clamp(150px, 18vw, 250px);
  filter: drop-shadow(0 12px 22px #000b);
}
.admin-link,
.refresh {
  color: var(--gold);
  background: #071015b8;
  border: 1px solid #8f7148;
  padding: 10px 14px;
  cursor: pointer;
}
.hero-copy {
  margin: auto 0;
  max-width: 820px;
}
.eyebrow,
.section-title > span,
.roster-head span {
  font-family: Arial, sans-serif;
  color: var(--bronze);
  font-size: 11px;
  letter-spacing: 0.25em;
  font-weight: 800;
}
h1 {
  font-size: clamp(58px, 8.5vw, 118px);
  line-height: 0.9;
  margin: 18px 0;
  letter-spacing: -0.05em;
  text-shadow: 0 5px 24px #000;
}
h1 em {
  color: var(--gold);
  font-style: normal;
}
.motto {
  color: var(--pale);
  font-size: 16px;
  letter-spacing: 0.12em;
}
.event-bar {
  display: grid;
  grid-template-columns: 1fr 0.85fr 1.35fr;
  max-width: 1050px;
  background: #091615e8;
  border: 1px solid #886b45;
  box-shadow: 10px 10px 0 #0008;
}
.event-bar div {
  padding: 20px 24px;
  border-right: 1px solid #5f5039;
}
.event-bar div:last-child {
  border: 0;
}
.event-bar small,
.event-bar strong {
  display: block;
}
.event-bar small {
  color: #a58b66;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
}
.event-bar strong {
  font-size: 18px;
  color: #fff6df;
}
.signup,
.roster {
  max-width: 1080px;
  margin: 0 auto;
  background: #091412ed;
  border-left: 1px solid #554a38;
  border-right: 1px solid #554a38;
  padding: 70px clamp(20px, 5vw, 70px);
}
.signup {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
}
.section-title h2,
.roster h2 {
  font-size: 48px;
  margin: 10px 0;
}
.section-title p {
  color: #9bac9e;
}
form label,
.admin-card label {
  display: block;
  font-size: 12px;
  color: #c7b898;
  margin-bottom: 18px;
}
input {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  padding: 0 15px;
  color: var(--warm);
  background: #07100f;
  border: 1px solid #6c5a3e;
  outline: none;
}
input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px #c79b5722;
}
.second {
  display: flex !important;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #5a513f;
  cursor: pointer;
}
.second input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bronze);
}
.second span {
  display: flex;
  flex-direction: column;
}
.second small {
  color: #879789;
  margin-top: 3px;
}
#signup-button,
.admin-actions button {
  width: 100%;
  height: 54px;
  border: 1px solid #e1bc76;
  color: #08100f;
  background: linear-gradient(135deg, #e5c47e, #a97e43);
  font-weight: 900;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.message {
  min-height: 20px;
  color: var(--gold);
  font-size: 12px;
}
.roster {
  border-top: 1px solid #554a38;
}
.roster-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.count {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.count strong {
  font-family: Impact, sans-serif;
  font-size: 72px;
  color: var(--gold);
  line-height: 0.8;
}
.count small {
  color: #9dac9f;
}
.refresh {
  margin: 28px 0 12px;
}
.roster-list {
  border-top: 1px solid #74623f;
}
.player-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 15px;
  min-height: 72px;
  border-bottom: 1px solid #323d35;
}
.number {
  font-family: monospace;
  color: #8f8168;
}
.player-row strong {
  font-size: 16px;
}
.tag {
  color: #19160f;
  background: var(--gold);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
}
.cancel {
  border: 0;
  color: #9a8e7a;
  background: transparent;
  cursor: pointer;
}
.empty {
  padding: 70px 0;
  text-align: center;
  color: #8f9c92;
}
.admin-panel {
  position: fixed;
  z-index: 20;
  inset: 0;
  background: #000c;
  overflow: auto;
  padding: 20px;
}
.admin-card {
  position: relative;
  max-width: 560px;
  margin: 30px auto;
  padding: 36px;
  background: #0b1715;
  border: 1px solid #927549;
  box-shadow: 0 20px 70px #000;
}
.close {
  position: absolute;
  right: 18px;
  top: 14px;
  border: 0;
  background: transparent;
  color: #ddc48e;
  font-size: 30px;
}
.admin-actions {
  display: grid;
  gap: 10px;
}
.admin-actions button {
  justify-content: center;
}
.admin-roster-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #39423a;
}
.admin-roster-row button {
  color: #e5c47e;
  background: transparent;
  border: 0;
}
footer {
  min-height: 150px;
  background: #050a0ef2;
  border-top: 1px solid #5c4d36;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: #988a71;
  font-size: 12px;
}
footer img {
  width: 44px;
}
@media (max-width: 720px) {
  body {
    background-attachment: scroll;
    background-position: 54% top;
  }
  .hero {
    min-height: 720px;
    padding: 18px 18px 30px;
    background-position: 54% center;
  }
  header img {
    width: 150px;
  }
  .admin-link {
    font-size: 10px;
  }
  .hero-copy {
    margin: 50px 0 38px;
  }
  .event-bar {
    grid-template-columns: 1fr;
  }
  .event-bar div {
    border-right: 0;
    border-bottom: 1px solid #5f5039;
    padding: 14px 18px;
  }
  .event-bar strong {
    font-size: 17px;
  }
  .signup {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 52px;
  }
  .roster {
    padding-top: 52px;
  }
  .section-title h2,
  .roster h2 {
    font-size: 38px;
  }
  .player-row {
    grid-template-columns: 34px 1fr auto;
  }
  .player-row .cancel {
    grid-column: 2/4;
    justify-self: end;
  }
  .count strong {
    font-size: 58px;
  }
}