/* ================================================================
 * ctf.css — CTF events area
 * ================================================================
 * Layout only. Every colour comes from academy-theme.css, which is
 * loaded after this file and republishes the dashboard's purple /
 * pink / amber palette on the short token names used below.
 * ================================================================ */

/* All colour tokens live in academy-theme.css (loaded after this file). */

* { box-sizing: border-box; }

/* body, header, h1, .btn and card colours are owned by
   academy-theme.css. Only layout stays here. */
.wrap { max-width: 1150px; margin: 0 auto; padding: 0 20px 40px; }

.head {
    max-width: 1150px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.head-title { display: flex; align-items: center; gap: 16px; }
h1 i { color: var(--gold); }

/* ---------- event cards ---------- */
/* min() keeps the 360px floor from overflowing viewports narrower than the
   card (it falls back to the container width instead of forcing a scrollbar). */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.card {
    padding: 18px; display: flex; flex-direction: column;
}

.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.badge {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    border-radius: 99px; padding: 3px 9px;
    display: inline-flex; align-items: center; gap: 6px;
}

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.card h3 { margin: 0 0 8px; font-size: 16px; }
.desc { font-size: 13px; color: var(--mut); margin: 8px 0; }
.meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--mut); margin: 6px 0; }

/* ---------- challenge list ---------- */
.challenges { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.challenge { border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.challenge-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.challenge-title { font-weight: 600; font-size: 14px; }
.challenge-desc { font-size: 12px; color: var(--mut); margin: 4px 0 0; }
.pts { font-size: 12px; white-space: nowrap; }
.flagrow { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.flagrow input {
    flex: 1 1 180px; border-radius: 7px; padding: 8px 11px; font-size: 13px;
}
.flagrow input:disabled { opacity: .5; }
.hint { font-size: 12px; margin-top: 7px; }
.solved-note { font-size: 13px; margin-top: 7px; }

/* ---------- leaderboard ---------- */
.lb { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.lb th, .lb td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.lb th { color: var(--mut); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.lb td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lb tr.me td { font-weight: 600; }

.empty { color: var(--mut); font-size: 14px; padding: 30px 0; text-align: center; }
.signin { padding: 26px; text-align: center; margin-bottom: 22px; }

/* ---------- toast ---------- */
#toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    padding: 12px 22px; border-radius: 10px; font-size: 14px;
    display: none; z-index: 10000; max-width: 90vw;
}

@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 20px; } }