/* ── Google Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
    --green-deep:   #1b4332;
    --green-mid:    #2d6a4f;
    --green-bright: #40916c;
    --green-soft:   #74c69d;
    --green-pale:   #d8f3dc;
    --amber:        #f4a11a;
    --amber-dark:   #d4860a;
    --amber-pale:   #fff3cd;
    --cream:        #fffdf7;
    --white:        #ffffff;
    --text-dark:    #1a1a2e;
    --text-mid:     #3a3a5c;
    --text-light:   #6b7280;
    --card-shadow:  0 4px 24px rgba(27,67,50,.12);
    --card-hover:   0 12px 40px rgba(27,67,50,.22);
    --radius-sm:    8px;
    --radius-md:    16px;
    --radius-lg:    24px;
    --radius-xl:    32px;
    --font-head:    'Fraunces', Georgia, serif;
    --font-body:    'DM Sans', sans-serif;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--cream); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; }
img  { max-width: 100%; height: auto; display: block; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px; border-radius: 50px;
    font-family: var(--font-body); font-size: .95rem; font-weight: 600;
    cursor: pointer; border: none;
    transition: all .3s cubic-bezier(.34,1.56,.64,1);
    text-decoration: none; white-space: nowrap;
}
.btn-primary   { background: var(--amber); color: var(--green-deep); box-shadow: 0 4px 18px rgba(244,161,26,.45); }
.btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px) scale(1.02); }
.btn-secondary { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.7); }
.btn-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.btn-green     { background: var(--green-mid); color: var(--white); box-shadow: 0 4px 18px rgba(45,106,79,.4); }
.btn-green:hover { background: var(--green-deep); transform: translateY(-2px); }

/* ── Top Nav ──────────────────────────────────────────────────────────── */
.top-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    background: rgba(27,67,50,.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(116,198,157,.2);
}
.nav-brand { display: flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; flex-shrink: 0; }
.nav-brand .brand-icon  { font-size: 1.4rem; }
.nav-brand .brand-text  { font-family: var(--font-head); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.nav-brand .brand-sub   { font-size: .68rem; color: var(--green-soft); font-weight: 400; display: block; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.participant-badge {
    display: flex; align-items: center; gap: 6px;
    background: rgba(244,161,26,.15);
    border: 1.5px solid rgba(244,161,26,.5);
    border-radius: 50px; padding: 5px 10px;
    color: var(--amber); font-size: .8rem; font-weight: 600;
    white-space: nowrap;
}
.badge-count {
    background: var(--amber); color: var(--green-deep);
    border-radius: 50%; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.badge-count.bump { transform: scale(1.5); }

.section-label { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }

/* ── Team colour chips ────────────────────────────────────────────────── */
.team-a { background: #e8f4fd; border-color: #3b82f6; color: #1d4ed8; }
.team-b { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.team-c { background: #ffe4e6; border-color: #f43f5e; color: #9f1239; }
.team-d { background: #dcfce7; border-color: #22c55e; color: #14532d; }
.team-reserve { background: #f3e8ff; border-color: #a855f7; color: #6b21a8; }

/* ── Mobile nav overrides ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .top-nav { padding: 10px 14px; gap: 8px; }
    .nav-brand .brand-sub  { display: none; }
    .nav-brand .brand-text { font-size: .88rem; }
    .participant-badge span:first-child { display: none; }   /* hide "Registered" label */
    .participant-badge { padding: 5px 8px; }
    .btn { padding: 9px 16px; font-size: .82rem; }
}
@media (max-width: 380px) {
    .nav-brand .brand-text { display: none; }
}