@font-face {
  font-family: "Chakra Petch";
  src: url("/static/fonts/chakra-petch-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("/static/fonts/chakra-petch-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #1b1036;
  --panel: #2a1b52;
  --panel-edge: #4a3a86;
  --ink: #ffffff;
  --ink-soft: #d9d2f5;
  --ink-quiet: #b3a8e0;
  --ready: #c6ff3d;
  --ready-ink: #1b1036;
  --loadout: #ff3d8b;
  --loadout-ink: #1b1036;
  --error: #ffb3cd;
  --radius: 14px;
  --display: "Chakra Petch", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gap: clamp(1rem, 4vw, 1.5rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1.0625rem/1.5 var(--body);
  caret-color: var(--ready);
  accent-color: var(--ready);
}

::selection { background: var(--ready); color: var(--ready-ink); }

a { color: var(--ready); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ready); outline-offset: 3px; border-radius: 4px; }

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }


.lobby {
  max-width: 34rem;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.25rem, 6vw, 2.5rem) var(--gap) 3rem;
  display: grid;
  gap: var(--gap);
}

.lobby > h1 {
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  line-height: 0.95;
}
h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.lead { margin: -0.25rem 0 0; color: var(--ink-soft); font-size: 1.125rem; }
.nowrap { white-space: nowrap; }


.match {
  background: var(--panel);
  border: 2px solid var(--ready);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: grid;
  gap: 0.25rem;
}
.match p { margin: 0; }
.match__time {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ready);
  font-variant-numeric: tabular-nums;
}
.match__date { font-size: 1.125rem; font-weight: 600; }
.venue { font-weight: 700; color: var(--ink); }
.match__where { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--panel-edge); }

.about { margin: 0; color: var(--ink-soft); }


.todo { display: grid; gap: 0.75rem; }
.todo > h2 { font-size: 1.5rem; }
.todo__rsvp {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: var(--gap);
  display: grid;
  gap: 0.875rem;
}


.loadout {
  background: var(--loadout);
  color: var(--loadout-ink);
  border-radius: var(--radius);
  padding: var(--gap);
}
.loadout p { margin: 0.5rem 0 1rem; }


.intel h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.intel dl { margin: 0; display: grid; gap: 0.875rem; }
.intel dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ready);
}
.intel dd { margin: 0.125rem 0 0; color: var(--ink-soft); }


.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1.25rem;
  border: 0;
  border-radius: 12px;
  font: 700 1.125rem/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn--loadout { background: var(--loadout-ink); color: var(--ink); }
.btn--loadout:hover { background: #2e1d5c; }
.btn--loadout:focus-visible { outline-color: var(--loadout-ink); }
.btn--ready { background: var(--ready); color: var(--ready-ink); }
.btn--outline { background: transparent; color: var(--ready); border: 2px solid var(--ready); }
.btn--outline:hover { background: color-mix(in srgb, var(--ready) 12%, transparent); }
.btn--big { min-height: 3.75rem; font-size: 1.5rem; }
.btn--ready:hover { background: #d4ff6b; }


.join { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.join h2 { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1; }
.join form { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.note { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.hint { margin: -0.25rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

.field { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 600; padding: 0; }
.optional { color: var(--ink-quiet); font-weight: 400; }

input[type="text"], textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 12px;
  padding: 0.75rem 0.875rem;
  transition: border-color 160ms ease-out;
}
input[type="text"]:hover, textarea:hover { border-color: var(--ink-quiet); }
input[type="text"]:focus, textarea:focus { border-color: var(--ready); outline: 2px solid var(--ready); outline-offset: 0; }
textarea { resize: vertical; min-height: 5.5rem; }
[aria-invalid="true"] { border-color: var(--error); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  height: 100%;
  padding: 0.75rem 0.875rem;
  border: 2px solid var(--ink-quiet);
  border-radius: 12px;
  background: var(--panel);
  line-height: 1.25;
  text-wrap: balance;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}
.tile span::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-sizing: border-box;
}
.tile:hover span { border-color: var(--ink); }
.tile input:checked + span { border-color: var(--ready); background: var(--ready); color: var(--ready-ink); font-weight: 700; }
.tile input:checked + span::before { border-color: var(--ready-ink); padding: 3px; background: var(--ready-ink); background-clip: content-box; }
.tile input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

.error { margin: 0; color: var(--error); font-weight: 600; font-size: 0.9375rem; }

.back { margin: 0; font-weight: 600; }


.admin { max-width: 40rem; margin: 0 auto; padding: 1.25rem var(--gap) 3rem; }
.admin h1 { font-size: 2rem; margin-bottom: 1rem; }
.admin .totals { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.admin .totals p { margin: 0; color: var(--ink-soft); }
.admin .totals strong { color: var(--ready); }
.admin .replies { list-style: none; padding: 0; }
.admin .reply { border-top: 1px solid var(--panel-edge); padding: 0.6rem 0; }
.admin .reply p { margin: 0.15rem 0; overflow-wrap: anywhere; }
.admin .allergy { color: var(--loadout); font-weight: 600; }
.admin .when, .admin .note { color: var(--ink-quiet); font-size: 0.9375rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

[hidden] { display: none !important; }
.admin .reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin .reply-foot form { margin: 0; }
.admin .remove { font: 600 0.9375rem/1 var(--body); color: var(--ink-soft); background: transparent; border: 1px solid var(--panel-edge); border-radius: 12px; padding: 0.5rem 0.75rem; min-height: 2.25rem; cursor: pointer; }
.admin .remove:hover { color: var(--error); border-color: var(--error); }