:root {
  --ink: #211a3a;
  --muted: #6c6680;
  --pending: #aaa5b7;
  --paper: #fffdf7;
  --cream: #fff4c7;
  --purple: #6d4aff;
  --purple-dark: #4b2ecc;
  --coral: #ff5c6c;
  --lime: #b8f34a;
  --aqua: #46d9d0;
  --yellow: #ffd84d;
  --border: #2b2149;
  --shadow: 7px 7px 0 var(--border);
  font-family: Inter, ui-rounded, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 216, 77, .52) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 95% 70%, rgba(70, 217, 208, .28) 0 10rem, transparent 10.1rem),
    linear-gradient(180deg, #fffdf7 0%, #fff9e9 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='4' cy='4' r='1.4' fill='%23211a3a'/%3E%3C/svg%3E");
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }

.site-header {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 26px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 1.13rem; font-weight: 900; letter-spacing: -.03em; }
.brand em { color: var(--purple); font-style: normal; }
.brand-mark { width: 36px; height: 36px; border: 2px solid var(--border); border-radius: 50%; background: var(--lime); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--border); transform: rotate(-8deg); }
.brand-mark i { width: 14px; height: 14px; border: 2px solid var(--border); border-radius: 50%; position: relative; }
.brand-mark i::before, .brand-mark i::after { content: ""; width: 2px; height: 2px; border-radius: 50%; background: var(--border); position: absolute; top: 3px; }
.brand-mark i::before { left: 2px; } .brand-mark i::after { right: 2px; }
.header-note { color: var(--muted); font-size: .85rem; font-weight: 750; }

.shell { position: relative; z-index: 1; width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 58px 0 80px; }
.shell.narrow { width: min(700px, calc(100% - 36px)); }
.public-shell { padding-top: 46px; }

h1, h2 { font-family: "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif; margin: 0; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(2.6rem, 7vw, 5.8rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.08; }
p { line-height: 1.65; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 48rem; }
.eyebrow { color: var(--purple); font-size: .72rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.microcopy { color: var(--muted); font-size: .78rem; line-height: 1.45; }

.card { background: rgba(255,255,255,.92); border: 2px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
.login-card, .form-card { padding: clamp(28px, 6vw, 52px); }
.login-card h1, .form-card h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.stack { display: grid; gap: 19px; margin-top: 30px; }
.field { display: grid; gap: 8px; color: var(--ink); font-weight: 800; font-size: .88rem; }
.field input, .field textarea, .field select, .copy-row input { width: 100%; border: 2px solid var(--border); border-radius: 13px; padding: 14px 15px; color: var(--ink); background: #fff; outline: none; transition: box-shadow .15s, transform .15s; }
.field input:focus, .field textarea:focus, .field select:focus, .copy-row input:focus { box-shadow: 0 0 0 4px rgba(109,74,255,.2); transform: translateY(-1px); }
.field textarea { resize: vertical; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.button { appearance: none; border: 2px solid var(--border); border-radius: 999px; padding: 12px 20px; background: white; color: var(--ink); font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: 3px 3px 0 var(--border); transition: transform .12s, box-shadow .12s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); }
.button:focus-visible { outline: 4px solid rgba(109,74,255,.25); outline-offset: 2px; }
.button.primary { background: var(--purple); color: #fff; }
.button.secondary { background: var(--lime); }
.button.big { padding: 15px 24px; font-size: 1.02rem; }
.button.small { padding: 8px 15px; font-size: .82rem; }
.text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 800; }
.back-link { display: inline-flex; margin-bottom: 24px; color: var(--purple-dark); font-weight: 850; text-decoration: none; }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.page-head h1 { font-size: clamp(3.4rem, 8vw, 6.4rem); }
.session-list { display: grid; gap: 16px; }
.session-card { display: grid; grid-template-columns: 115px 1fr auto; align-items: center; gap: 24px; padding: 20px; border: 2px solid var(--border); border-radius: 20px; background: white; }
.session-card__date { align-self: stretch; display: grid; place-items: center; text-align: center; padding: 12px; border-radius: 13px; background: var(--yellow); font-weight: 950; }
.session-card h2 { font-size: 1.5rem; }
.session-card p { margin: 5px 0 0; color: var(--muted); }
.session-card__meta { display: flex; align-items: center; gap: 12px; }
.pill, .you-pill, .pending-pill { display: inline-flex; border-radius: 999px; padding: 6px 11px; background: var(--cream); color: var(--ink); font-size: .76rem; font-weight: 900; white-space: nowrap; }

.hero-grid, .manage-grid, .admin-session-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(28px, 6vw, 70px); align-items: center; }
.hero-copy h1 { font-size: clamp(4rem, 10vw, 8rem); max-width: 850px; }
.event-time { color: var(--purple); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 950; line-height: 1.2; }
.event-time.small { font-size: 1.15rem; }
.sport-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--lime); border: 2px solid var(--border); border-radius: 999px; padding: 8px 13px; margin-bottom: 22px; font-weight: 950; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--border); }
.sport-badge span { color: var(--coral); }
.signup-card { padding: clamp(28px, 5vw, 46px); transform: rotate(1deg); }
.squiggle { width: 180px; height: 25px; margin-top: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='25' viewBox='0 0 180 25'%3E%3Cpath d='M3 17c17-22 29 19 46-2s31 18 49-1 31 18 48-2 22 8 31 1' fill='none' stroke='%23ff5c6c' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.public-roster { margin-top: 70px; padding: clamp(24px, 5vw, 42px); }
.roster-card { padding: 30px; }
.roster-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.roster-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.roster-list li { min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 9px 3px; border-bottom: 1px dashed rgba(43,33,73,.25); font-weight: 800; }
.roster-list li.is-you { color: var(--purple-dark); }
.roster-list li.is-pending { color: var(--pending); }
.roster-list li.is-pending .roster-number { color: #c7c2cc; }
.roster-number { color: var(--coral); font-size: .75rem; font-weight: 950; }
.roster-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.you-pill { background: var(--lime); }
.pending-pill { background: #f4f1e8; color: var(--pending); }
.court-progress { margin: 0 0 24px; padding: 15px 17px; border: 2px solid var(--border); border-radius: 16px; background: var(--cream); }
.court-progress__labels { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }
.court-progress__labels strong { font-size: 1rem; }
.court-progress__labels span, .court-progress p { color: var(--muted); font-size: .76rem; font-weight: 750; }
.court-progress__track { height: 12px; margin-top: 10px; overflow: hidden; border: 2px solid var(--border); border-radius: 999px; background: white; }
.court-progress__track span { display: block; height: 100%; background: linear-gradient(90deg, var(--coral), var(--yellow)); transition: width .2s ease; }
.court-progress p { margin: 8px 0 0; line-height: 1.35; }
.empty-roster, .empty-state { padding: 38px; text-align: center; color: var(--muted); }
.empty-roster span, .empty-state > span { color: var(--coral); font-size: 2.3rem; }

.hero-card { padding: clamp(30px, 6vw, 54px); background: var(--cream); }
.hero-card.compact h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
.invite-box { margin-top: 30px; padding: 20px; border: 2px dashed var(--border); border-radius: 17px; background: rgba(255,255,255,.68); }
.invite-box > label { display: block; font-size: .78rem; font-weight: 950; margin-bottom: 9px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.copy-row input { min-width: 0; font-size: .78rem; }
.personal-link { background: white; }
.manage-grid { align-items: stretch; }

.alert { border: 2px solid #b71931; background: #ffe4e8; color: #8c1025; border-radius: 13px; padding: 12px 14px; font-weight: 750; margin: 18px 0; }
.success-banner { margin: 0 0 30px; padding: 15px 20px; border: 2px solid var(--border); border-radius: 14px; background: var(--lime); box-shadow: 4px 4px 0 var(--border); font-weight: 900; }
.error-card { padding: 50px; text-align: center; }
.error-code { color: var(--coral); font-size: 5rem; font-weight: 950; }
.error-card p { color: var(--muted); }
.empty-state { border: 2px dashed rgba(43,33,73,.45); border-radius: 20px; }

.site-footer { position: relative; z-index: 1; width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 22px 0 35px; color: var(--muted); font-size: .78rem; border-top: 1px solid rgba(43,33,73,.15); }
.confetti { position: fixed; width: 12px; height: 42px; border: 3px solid var(--border); background: var(--coral); z-index: 0; }
.confetti-one { top: 16%; right: 4%; transform: rotate(27deg); }
.confetti-two { bottom: 10%; left: 3%; height: 12px; border-radius: 50%; background: var(--aqua); }

.pop-in { animation: pop-in .45s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 780px) {
  .site-header { padding-top: 18px; }
  .header-note { display: none; }
  .shell { padding-top: 38px; }
  .hero-grid, .manage-grid, .admin-session-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: clamp(3.7rem, 19vw, 6rem); }
  .signup-card { transform: none; }
  .page-head { align-items: start; flex-direction: column; }
  .session-card { grid-template-columns: 86px 1fr; }
  .session-card__meta { grid-column: 1 / -1; justify-content: space-between; }
  .field-grid, .roster-list { grid-template-columns: 1fr; }
  .copy-row { grid-template-columns: 1fr; }
  .copy-row .button { width: 100%; }
  .court-progress__labels { align-items: start; flex-direction: column; gap: 3px; }
}