:root {
  --paper: #f3efe8;
  --paper-deep: #e8e2d8;
  --ink: #1f1d1a;
  --muted: #6b655c;
  --pilot: #e8813a;
  --mech: #7a9e8e;
  --mech-deep: #5f8273;
  --crawler: #c94e8f;
  --rust: #b85c3c;
  --rust-deep: #9a4a30;
  --card: #a9d6e5;
  --card-deep: #8cc3d6;
  --ok: #2f7d4f;
  --warn: #b7791f;
  --bad: #b3261e;
  --radius: 6px;
  --font-display: "Avenir Next Condensed", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: "Avenir Next", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.4; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; margin: 0 0 0.4rem; }
a { color: var(--rust-deep); }
main { padding: 1rem; max-width: 1280px; margin: 0 auto; }

.masthead { display: flex; align-items: baseline; gap: 1.5rem; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); }
.wordmark { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.masthead nav a { color: var(--paper); margin-right: 1rem; text-transform: uppercase; font-family: var(--font-display); }

.section-mech .banner { background: var(--mech); }
.section-pilot .banner { background: var(--pilot); }
.section-crawler .banner { background: var(--crawler); }
.banner { color: white; padding: 0.6rem 1rem; margin: -1rem -1rem 1rem; }
.banner h1 { font-size: 2rem; text-transform: uppercase; margin: 0; }

.flash { background: var(--mech); color: white; padding: 0.5rem 1rem; margin: 0; }
.flash-alert { background: var(--bad); }

.btn, button, input[type=submit] { font-family: var(--font-display); font-size: 1rem; padding: 0.35rem 0.8rem; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; display: inline-block; }
.btn-secondary { background: var(--paper-deep); color: var(--ink); }
.btn-danger { background: var(--bad); }
.btn-rust { background: var(--rust); }
button:disabled { opacity: 0.35; cursor: default; }

input[type=text], input[type=number], textarea, select { font: inherit; padding: 0.4rem; border: 1px solid var(--muted); border-radius: var(--radius); background: white; width: 100%; }
label { display: block; font-family: var(--font-display); font-weight: 700; margin-top: 0.6rem; }
.field-row { display: flex; gap: 0.4rem; align-items: flex-end; }
.field-row > :first-child { flex: 1; }

.roster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.roster-column h2 { color: white; padding: 0.3rem 0.6rem; text-transform: uppercase; }
.roster-column.mech h2 { background: var(--mech); }
.roster-column.pilot h2 { background: var(--pilot); }
.roster-column.crawler h2 { background: var(--crawler); }
.roster-card { background: white; border-radius: var(--radius); padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.roster-card .meta { color: var(--muted); font-size: 0.9rem; }
.roster-card form { display: inline; }

.masthead { flex-wrap: wrap; }
.whoami { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; font-family: var(--font-display); }
.whoami form { display: inline; }
.login-panel { max-width: 420px; margin: 3rem auto; }
.btn-discord { background: #5865f2; font-size: 1.15rem; padding: 0.5rem 1.1rem; }
.roster-card.is-others { opacity: 0.8; background: var(--paper-deep); }
.claim-bar { background: var(--paper-deep); border-left: 5px solid var(--warn); padding: 0.5rem 0.8rem; margin-bottom: 1rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.claim-bar form { display: inline; }