/* CTF PAGE POLISH */
.ctf-wrap { padding-top: 0; padding-bottom: 3rem; }

body:has(.ctf-grid) .page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--navbar-h, 68px) + 2.5rem);
  padding-bottom: 2.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,212,255,.12);
  background:
    radial-gradient(ellipse at 70% 0%, rgba(0,212,255,.11) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,212,255,.05) 0%, transparent 100%);
}
body:has(.ctf-grid) .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}
body:has(.ctf-grid) .page-hero .container { position: relative; z-index: 1; }

/* filter bar */
.ctf-filterbar {
  gap: .6rem;
  padding: .7rem;
  margin-bottom: 1.5rem;
  background: #080d13;
  border: 1px solid rgba(0,212,255,.12);
  border-radius: 14px;
}
.ctf-search-input-wrap input {
  border-radius: 999px !important;
  background: #0a1018 !important;
  border-color: rgba(0,212,255,.16) !important;
}
.ctf-search-input-wrap input:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.12) !important;
}
.ctf-filter-dropdown summary {
  border-radius: 999px;
  background: #0a1018;
  border-color: rgba(0,212,255,.16);
  padding: .55rem 1.1rem;
}
.ctf-filter-dropdown[open] summary { border-color: #00d4ff; color: #00d4ff; }
.ctf-filter-dropdown .ctf-filter-panel {
  background: #0a1018;
  border-color: rgba(0,212,255,.2);
  border-radius: 12px;
}
.ctf-category-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.ctf-category-pills .tools-filter-btn {
  border-radius: 999px;
  padding: .4rem .95rem;
  font-size: .74rem;
  letter-spacing: .08em;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: #aab5c6;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.ctf-category-pills .tools-filter-btn:hover { border-color: #00d4ff; color: #fff; }
.ctf-category-pills .tools-filter-btn.active { background: rgba(0,212,255,.14); border-color: #00d4ff; color: #00d4ff; }
.ctf-filterbar .btn { border-radius: 999px; }
.ctf-results-count { color: #8b98a5; }

/* cards */
.ctf-d-beginner { --cc: #22c55e; --cc-a: rgba(34,197,94,.5); --cc-g: rgba(34,197,94,.2); --cc-bg: rgba(34,197,94,.1); }
.ctf-d-intermediate { --cc: #f59e0b; --cc-a: rgba(245,158,11,.5); --cc-g: rgba(245,158,11,.2); --cc-bg: rgba(245,158,11,.1); }
.ctf-d-advanced { --cc: #f43f5e; --cc-a: rgba(244,63,94,.5); --cc-g: rgba(244,63,94,.2); --cc-bg: rgba(244,63,94,.1); }
.ctf-d-other        { --cc: #00d4ff; --cc-a: rgba(0,212,255,.5);    --cc-g: rgba(0,212,255,.18);   --cc-bg: rgba(0,212,255,.1); }

.ctf-card {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1520 0%, #080d13 100%);
  border: 1px solid rgba(255,255,255,.08);
  animation: ctfIn .5s ease backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), border-color .3s, box-shadow .3s;
}
.ctf-card:hover {
  transform: translateY(-6px);
  border-color: var(--cc-a, rgba(0,212,255,.5));
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px var(--cc-a, rgba(0,212,255,.3)), 0 0 34px var(--cc-g, rgba(0,212,255,.15));
}
.ctf-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.1), transparent);
  transform: skewX(-18deg);
  z-index: 3;
  pointer-events: none;
  transition: left .7s ease;
}
.ctf-card:hover::before { left: 130%; }
@keyframes ctfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ctf-card-banner { height: 128px; }
.ctf-card-banner img { transition: transform .6s ease; }
.ctf-card:hover .ctf-card-banner img { transform: scale(1.08); }
.ctf-card-icon { transition: transform .4s ease; }
.ctf-card:hover .ctf-card-icon { transform: scale(1.18); }
.ctf-card-diffbar { height: 3px; box-shadow: 0 0 14px var(--cc, transparent); z-index: 2; }
.ctf-card-cat {
  position: absolute;
  top: .65rem;
  left: .65rem;
  z-index: 4;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e7e9ea;
  background: rgba(4,7,11,.65);
  border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.ctf-card-title { transition: color .2s; }
.ctf-card:hover .ctf-card-title { color: #fff; }
.ctf-card-footer { gap: .5rem; }
.ctf-pill {
  display: inline-flex;
  align-items: center;
  padding: .22rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ctf-pill-diff { text-transform: capitalize; color: var(--cc, #cdd6f4); background: var(--cc-bg, rgba(255,255,255,.06)); border: 1px solid var(--cc-a, rgba(255,255,255,.15)); }
.ctf-pill-pts { color: #00d4ff; background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.35); }
.ctf-card-go {
  margin-left: auto;
  color: #00d4ff;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.ctf-card:hover .ctf-card-go { opacity: 1; transform: none; }
@media (hover: none) { .ctf-card-go { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ctf-card, .ctf-card::before, .ctf-card-banner img, .ctf-card-icon, .ctf-card-go { animation: none; transition: none; }
  .ctf-card:hover { transform: none; }
}

/* CTF SIZE AND DIFFICULTY */
.ctf-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.1rem; }
.ctf-card-banner { height: 104px; }
.ctf-card-body { padding: .95rem 1.05rem 1.05rem; }
.ctf-card-title { font-size: .98rem; margin-bottom: .3rem; }
.ctf-card-desc { font-size: .8rem; margin-bottom: .75rem; }
.ctf-pill { padding: .18rem .6rem; font-size: .68rem; }
.ctf-card-footer { gap: .6rem; }

/* CTF SUBTITLE */
body:has(.ctf-grid) .page-subtitle { max-width: 760px; line-height: 1.65; }

/* CTF GO LINE */
.ctf-card-footer { flex-wrap: wrap; row-gap: .5rem; }
.ctf-card-go {
  flex: 0 0 100%;
  margin: 0;
  text-align: left;
  transform: translateY(-4px);
}