/* ==========================================================================
   compete-3d.css — /compete/ and /compete/<uid>/.
   ==========================================================================
   The listing was a stack of flat rows: every event looked equally urgent, and
   the one fact that decides whether a student enters — how long is left — was
   buried in a grey meta line. This turns each row into a card whose loudest
   element is the countdown, banded by urgency.
   ========================================================================== */

.page-compete, .page-event {
  --c-line: rgb(255 255 255 / .1);
  --c-card: rgb(255 255 255 / .04);
  --c-urgent: #ff5c5c;
  --c-soon:   #ffb545;
  /* NO overflow-x on the body. `overflow: clip` (or hidden) on an ancestor
     CLIPS fixed-position descendants — it broke the PDF modal on every notes
     page, which rendered inline in the flow with its close button off-screen
     instead of as an overlay. The clip belongs on the elements that actually
     overflow (the 3D art stages), not on the page. */
}
.theme-light .page-compete, .theme-light .page-event {
  --c-line: rgb(15 18 26 / .13);
  --c-card: rgb(15 18 26 / .03);
}
.page-compete .section, .page-event .section, .cpHero { position: relative; z-index: 1; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.cpHero { padding-block: clamp(var(--s-10), 6vw, var(--s-16)) clamp(var(--s-6), 4vw, var(--s-10)); }
.cpHero__in {
  display: grid; gap: clamp(var(--s-8), 5vw, var(--s-14));
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
}
@media (max-width: 62rem) { .cpHero__in { grid-template-columns: 1fr; } .cpArt { order: -1; } }
.cpHero__h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 3.9rem); line-height: 1.04; letter-spacing: -.035em; margin: var(--s-3) 0 var(--s-4); }
.cpHero__sub { color: var(--text-mid); font-size: var(--fs-lg); max-width: 46ch; }
.cpHero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 var(--s-7); }
.cpChip {
  display: inline-flex; align-items: center; gap: .4ch; padding: .42rem .8rem;
  border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-card);
  font-size: var(--fs-sm); color: var(--text-mid);
}
.cpChip strong { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.cpChip--open { border-color: rgb(120 220 160 / .4); color: rgb(150 235 190); }
.cpHero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ── HERO ART: a 3D stack of the real open events ───────────────────────── */
.cpArt { position: relative; min-height: clamp(17rem, 30vw, 24rem); perspective: 1400px; display: grid; place-items: center; }
.cpArt__stage {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--ax, 0deg)) rotateY(var(--ay, 0deg));
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.cpArt__glow {
  position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(240 198 74 / .2), transparent 62%); filter: blur(28px);
}
.cpArt__card {
  position: absolute; display: grid; gap: 2px; justify-items: start;
  width: min(17rem, 76%); padding: var(--s-4);
  border-radius: var(--radius-lg); border: 1px solid var(--c-line);
  background: linear-gradient(150deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 60%), var(--surface-1);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / .85);
  transform: translate3d(calc(var(--i) * .9rem), calc(var(--i) * 2.1rem - 3.1rem), calc(var(--i) * -40px)) rotateX(6deg);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  z-index: calc(10 - var(--i));
}
.cpArt__stage:hover .cpArt__card { transform: translate3d(calc(var(--i) * 1.6rem), calc(var(--i) * 2.9rem - 4.3rem), calc(var(--i) * -18px)) rotateX(3deg); }
.cpArt__card img { width: 2rem; height: 2rem; border-radius: 8px; object-fit: cover; background: #fff; }
.cpArt__card b { color: var(--text-hi); font-size: var(--fs-sm); }
.cpArt__card span { color: var(--text-lo); font-size: .62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.cpArt__ring { position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgb(240 198 74 / .2); transform: rotateX(74deg); animation: cpSpin 24s linear infinite; }
@keyframes cpSpin { to { rotate: 360deg; } }

/* ── EVENT CARDS ────────────────────────────────────────────────────────── */
.evtGrid {
  display: grid; gap: clamp(var(--s-4), 2vw, var(--s-5));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.evtGrid--muted .evt { opacity: .72; }
.evtGrid--muted .evt:hover { opacity: 1; }

.evt {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015) 62%), var(--surface-1);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
}
.theme-light .evt { background: linear-gradient(160deg, #fff, #f7f7f9 62%); }
.evt:hover { border-color: rgb(240 198 74 / .45); box-shadow: 0 0 0 1px rgb(240 198 74 / .28), 0 22px 56px -22px rgb(0 0 0 / .7); }
/* One stretched link over the whole card — the row used to have a tiny
   "Details" button as the only target. */
.evt__hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.evt:focus-within { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
.evt__sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0;
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .1), transparent 62%);
  transition: opacity .3s;
}
.evt:hover .evt__sheen { opacity: 1; }

.evt__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.evt__logo { width: 2.75rem; height: 2.75rem; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.evt__logo--none {
  display: grid; place-items: center; background: var(--c-card);
  border: 1px solid var(--c-line); color: var(--y-yellow);
  font-family: var(--font-display); font-size: 1.2rem;
}
/* The countdown, banded. Red only inside three days — spend it rarely or it
   stops meaning "hurry". */
.evt__days {
  display: grid; justify-items: end; gap: 0; text-align: right;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--text-mid);
}
.evt__days b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.evt__days i { font-style: normal; font-size: .56rem; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.evt__days.is-urgent { color: var(--c-urgent); border-color: rgb(255 92 92 / .5); background: rgb(255 92 92 / .12); }
.evt__days.is-soon   { color: var(--c-soon); border-color: rgb(255 181 69 / .45); background: rgb(255 181 69 / .1); }
.evt__days.is-done   { color: var(--text-lo); }

.evt__tag { margin: var(--s-2) 0 0; font-family: var(--font-mono); font-size: .64rem; color: var(--text-lo); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.evt__title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-hi); }
.evt__hook { margin: 0; color: var(--text-lo); font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evt__facts { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.evt__facts li { font-size: .66rem; color: var(--text-lo); padding: .14rem .5rem; border-radius: 999px; border: 1px solid var(--c-line); }
.evt__prize { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--text-mid); }
.evt__prize span { color: var(--y-yellow); font-family: var(--font-mono); font-size: .62rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-right: .4ch; }
.evt__go { margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-mid); }
.evt:hover .evt__go { color: var(--y-yellow); }

@media (max-width: 40rem) {
  .cpArt { min-height: 13rem; }
  .cpArt__card { width: 88%; padding: var(--s-3); }
  .cpHero__cta { display: grid; }
  .cpHero__cta .btn { width: 100%; justify-content: center; }
  .evtGrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cpArt__ring { animation: none; }
  .cpArt__stage, .cpArt__card, .evt { transition: none; }
}

/* ── EVENT DETAIL: the "pass" ───────────────────────────────────────────── */
.evPass__card {
  position: relative; display: grid; justify-items: center; gap: var(--s-2);
  width: min(17rem, 78%); padding: var(--s-6);
  border-radius: var(--radius-lg); border: 1px solid var(--c-line);
  background: linear-gradient(150deg, rgb(255 255 255 / .11), rgb(255 255 255 / .02) 60%), var(--surface-1);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -26px rgb(0 0 0 / .9);
  transform: translateZ(50px) rotateX(4deg);
}
.theme-light .evPass__card { background: linear-gradient(150deg, #fff, #f6f6f9 60%); }
.evPass__logo { width: 3.5rem; height: 3.5rem; border-radius: 12px; object-fit: cover; background: #fff; }
.evPass__logo--none {
  display: grid; place-items: center; background: var(--c-card);
  border: 1px solid var(--c-line); color: var(--y-yellow);
  font-family: var(--font-display); font-size: 1.5rem;
}
.evPass__name { color: var(--text-hi); font-size: var(--fs-sm); text-align: center; line-height: var(--lh-snug); }
.evPass__days {
  display: grid; justify-items: center; gap: 0; margin-top: var(--s-2);
  padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--text-mid);
}
.evPass__days b { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.evPass__days i { font-style: normal; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.evPass__days.is-urgent { color: var(--c-urgent); border-color: rgb(255 92 92 / .5); background: rgb(255 92 92 / .12); }
.evPass__days.is-soon   { color: var(--c-soon); border-color: rgb(255 181 69 / .45); background: rgb(255 181 69 / .1); }
.evPass__days.is-done   { color: var(--text-lo); }
.evPass__dead { font-size: .66rem; color: var(--text-lo); }

.cpChip--urgent { border-color: rgb(255 92 92 / .5); color: var(--c-urgent); background: rgb(255 92 92 / .1); }
.cpChip--soon   { border-color: rgb(255 181 69 / .45); color: var(--c-soon); background: rgb(255 181 69 / .1); }
.cpChip--open   { border-color: rgb(120 220 160 / .4); color: rgb(150 235 190); }