:root {
    --pink:        #ff4d94;
    --pink-deep:   #e01f6f;
    --purple:      #a855f7;
    --sky:         #38bdf8;
    --mint:        #34d399;
    --sun:         #fbbf24;
    --ink:         #3b2540;
    --muted:       #8b7590;
    --paper:       #ffffff;
    --radius:      20px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    font-family: "Fredoka", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 12% 8%,  #ffe3f1 0%, transparent 45%),
        radial-gradient(circle at 88% 4%,  #e9d5ff 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, #dbf4ff 0%, transparent 55%),
        #fff7fb;
    min-height: 100vh;
}

.wrap { width: min(880px, 100% - 1.75rem); margin-inline: auto; }

/* ---------- masthead ---------- */

.masthead { text-align: center; padding: 2.25rem 0 1.25rem; }

.kicker {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--purple);
}

.masthead h1 {
    margin: .2rem 0;
    font-size: clamp(2.1rem, 7vw, 3rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

/* Gradient is scoped to the words: applying it to the whole h1 made the emoji
   transparent too, since background-clip:text needs color:transparent. */
.title-text {
    background: linear-gradient(100deg, var(--pink) 0%, var(--purple) 55%, var(--sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cherry {
    display: inline-block;
    animation: bounce 2.4s ease-in-out infinite;
}
/* Offset so the two cherries bob out of sync rather than in lockstep. */
.cherry.right { animation-delay: 1.2s; }
@keyframes bounce {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-8px) rotate(8deg); }
}

.tagline { margin: 0; color: var(--muted); font-size: 1rem; font-weight: 500; }
.team-size { margin: .45rem 0 0; color: var(--muted); font-size: .92rem; font-weight: 500; }
.team-size strong { color: var(--pink-deep); }

/* ---------- progress ---------- */

.progress-card {
    background: var(--paper);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    box-shadow: 0 6px 20px rgba(224, 31, 111, .10);
    margin-bottom: 1rem;
}
.progress-top {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; font-size: .95rem; margin-bottom: .5rem;
}
.progress-track {
    height: 12px; border-radius: 999px; background: #f6e6f0; overflow: hidden;
}
.progress-fill {
    height: 100%; width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink), var(--purple), var(--sky));
    transition: width .5s ease;
}

/* ---------- banner ---------- */

.banner {
    border-radius: 14px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    font-weight: 500;
    background: #fff4d6;
    color: #8a5a00;
}
.banner.error { background: #ffe0e6; color: var(--pink-deep); }

/* ---------- headings ---------- */

h2 {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--purple);
    margin: 1.4rem 0 .9rem;
}

.loading { text-align: center; color: var(--muted); }

/* ---------- games: 4 across, 2 rows ---------- */

.games {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
}

.game {
    background: var(--paper);
    border-radius: var(--radius);
    padding: .85rem .7rem 0.9rem;
    text-align: center;
    box-shadow: 0 5px 16px rgba(59, 37, 64, .09);
    border-top: 6px solid var(--c, var(--pink));
    display: flex;
    flex-direction: column;
    gap: .3rem;
    transition: transform .16s ease, box-shadow .16s ease;
}
.game:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(59,37,64,.14); }

/* Covered: still editable, just no longer asking for attention. */
.game.taken { background: #f6f3f8; box-shadow: 0 2px 8px rgba(59,37,64,.05); opacity: .8; }
.game.taken:hover { opacity: 1; }
.game.taken .game-emoji { filter: saturate(.3); }
.game.taken .game-opp { color: var(--muted); font-weight: 500; }
.game.taken .game-where { background: #ece8ef; color: #9b8ea6; }

/* Played: out of play entirely. */
.game.past { background: #f7f5f8; box-shadow: none; opacity: .62; }
.game.past:hover { transform: none; box-shadow: none; }
.game.past .game-emoji { filter: grayscale(1); }
.game.past .game-opp,
.game.past .game-num { color: #a99fb2; }
.game.past .game-where { background: #ece8ef !important; color: #a99fb2 !important; }

.done {
    font-size: .8rem;
    font-weight: 600;
    color: #a99fb2;
    padding: .4rem .3rem;
}
.done small {
    display: block;
    font-weight: 500;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.game-num {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}

.game-emoji { font-size: 1.9rem; line-height: 1.1; }

.game-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
}

.game-where {
    font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    padding: .16rem .5rem; border-radius: 999px; align-self: center;
}
.game-where.home { background: #dcfce7; color: #15803d; }
/* Deliberately not blue: blue on these cards means the jersey, nothing else. */
.game-where.away { background: #f3e8ff; color: #7e22ce; }

.jersey {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .16rem .48rem .16rem .34rem;
    border-radius: 999px;
}
.jersey-icon { width: .82rem; height: .82rem; flex: none; }

.jersey.blue  { background: #dbeafe; color: #1d4ed8; }
.jersey.blue  .jersey-icon { fill: #2563eb; stroke: #1d4ed8; stroke-width: 1; }

/* A white shirt needs an outline or it vanishes into the card. */
.jersey.white { background: #f4f4f5; color: #52525b; }
.jersey.white .jersey-icon { fill: #fff; stroke: #a1a1aa; stroke-width: 1.4; }

.game.past .jersey,
.game.taken .jersey { opacity: .7; }

.game-opp  { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.game-date { font-size: .74rem; color: var(--muted); }
.game-arrive {
    font-size: .66rem;
    font-weight: 600;
    color: var(--pink);
    letter-spacing: .02em;
}
.game.past .game-arrive,
.game.taken .game-arrive { color: #b0a3b8; }

.game-loc {
    display: block;
    font-size: .68rem;
    line-height: 1.3;
    color: var(--purple);
    text-decoration: none;
    border-radius: 6px;
    padding: .1rem .2rem;
}
.game-loc:hover { background: #f3ecfb; text-decoration: underline; }
.game.past .game-loc { color: #b0a3b8; pointer-events: none; }

.game-slot { margin-top: auto; padding-top: .5rem; }

.signed {
    background: linear-gradient(135deg, #fff0f7, #f5ecff);
    border-radius: 12px;
    padding: .4rem .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--pink-deep);
    cursor: pointer;
    border: none;
    width: 100%;
    font-family: inherit;
}
.signed small { display: block; font-weight: 500; font-size: .66rem; color: var(--muted); }
.signed:hover { filter: brightness(.97); }

/* Claimed and locked: shown, not editable. */
.claimed {
    background: linear-gradient(135deg, #f2ecf7, #ece6f4);
    border-radius: 12px;
    padding: .4rem .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: #7b6a88;
}
.claimed small {
    display: block;
    font-weight: 500;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #a99fb2;
}

.ics-link {
    margin-top: .35rem;
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 600;
    color: var(--purple);
    cursor: pointer;
    padding: .15rem;
    border-radius: 8px;
}
.ics-link:hover { background: #f3ecfb; }

/* ---------- buttons ---------- */

.btn {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .45rem .8rem;
    border: none;
    cursor: pointer;
    width: 100%;
}
.btn.primary {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    color: #fff;
    box-shadow: 0 4px 12px rgba(224,31,111,.28);
}
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: #f3ecf6; color: var(--muted); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- dialog ---------- */

.dialog {
    border: none;
    border-radius: 24px;
    padding: 0;
    width: min(370px, calc(100% - 2rem));
    box-shadow: 0 20px 55px rgba(59,37,64,.3);
}
.dialog::backdrop { background: rgba(59,37,64,.4); backdrop-filter: blur(2px); }
.dialog form { padding: 1.4rem; }
.dialog h3 { margin: 0; font-size: 1.25rem; text-align: center; color: var(--pink-deep); }
.dialog-game { margin: .3rem 0 1rem; text-align: center; color: var(--muted); font-size: .85rem; }

.dialog label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }

.dialog input {
    font-family: inherit;
    font-size: 1rem;
    padding: .6rem .75rem;
    border: 2px solid #f0e3ee;
    border-radius: 12px;
    width: 100%;
    background: #fffafd;
}
.dialog input:focus { outline: none; border-color: var(--pink); }

.field-hint { margin: .4rem 0 0; font-size: .74rem; color: var(--muted); }
.dialog-note {
    margin: .9rem 0 0;
    padding: .55rem .7rem;
    border-radius: 10px;
    background: rgba(255, 77, 148, .08);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 500;
}
.dialog-note strong { color: var(--pink-deep); }
.dialog-error { color: var(--pink-deep); font-size: .8rem; margin: .6rem 0 0; font-weight: 500; }

.dialog-actions { display: flex; gap: .5rem; margin-top: 1.1rem; }
.dialog-actions.stack { flex-direction: column; }

/* Success panel shown after a signup saves. */
.done-panel { padding: 1.4rem; text-align: center; }
.done-emoji { font-size: 2.6rem; line-height: 1; }
.done-panel h3 { margin: .4rem 0 0; font-size: 1.25rem; color: var(--pink-deep); }
.done-panel .field-hint { margin-top: .7rem; }

.footer { text-align: center; color: var(--muted); font-size: .9rem; padding: 2rem 0 2.5rem; font-weight: 500; }

/* ---------- responsive ---------- */

@media (max-width: 780px) {
    .games { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .games { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cherry { animation: none; }
    .game, .progress-fill { transition: none; }
}