/* =====================================================================
   Choose-your-night page — full ESS treatment.

   The whole page is ESS: ink ground, violet light, acid accent. Each
   night sits on black so the panels read as objects on the page rather
   than holes in it, and each carries its own violet so the pair are
   siblings, not twins. Square corners throughout, matching the event
   pages.

   Palette
     #0D0218  ink      (the page)      #D2FF00  acid    (accent)
     #000000  black    (panel ground)  #7E00FF  violet
     #FFFFFF  white    (text)          #B400FF  magenta
   ================================================================== */

:root {
  --ink: #0d0218;
  --black: #000000;
  --paper: #ffffff;

  --acid: #d2ff00;
  --violet: #7e00ff;
  --magenta: #b400ff;

  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, .68);
  --text-faint: rgba(255, 255, 255, .45);
  --rule: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
}

body {
  position: relative;
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* violet light falling from the top of the page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% -8%, rgba(126, 0, 255, .55) 0%, rgba(126, 0, 255, 0) 60%),
    radial-gradient(70% 40% at 12% 8%, rgba(180, 0, 255, .28) 0%, rgba(180, 0, 255, 0) 55%);
}

/* the brand bar sits above everything */
body::before {
  content: "";
  position: relative;
  z-index: 2;
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    var(--acid) 0%, var(--acid) 34%,
    var(--magenta) 34%, var(--magenta) 67%,
    var(--violet) 67%, var(--violet) 100%);
}

.masthead, .nights, .foot { position: relative; z-index: 1; }

/* ---------- masthead ---------------------------------------------- */
.masthead { padding: 40px 20px 4px; text-align: center; }

.masthead img {
  display: block;
  margin: 0 auto;
  height: 66px;
  width: auto;
  /* white artwork, so it needs no treatment on the dark ground */
}

.masthead h1 {
  position: relative;
  display: inline-block;
  margin: 22px 0 8px;
  padding-bottom: 12px;
  font-size: clamp(28px, 7.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}

.masthead h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 54px;
  height: 4px;
  background: var(--acid);
}

.masthead p {
  margin: 6px auto 0;
  max-width: 30em;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.8;
  color: var(--text-soft);
}

/* ---------- the two panels ---------------------------------------- */
.nights {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 38px 20px 44px;
  align-content: start;
}

.night {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 38px 22px 30px;
  text-decoration: none;
  color: var(--text);
  background: var(--black);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: riseIn .55s cubic-bezier(.2, .7, .2, 1) both;
}

.night:nth-child(1) { animation-delay: .05s; }
.night:nth-child(2) { animation-delay: .14s; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* each night gets its own colour of light */
.night::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  transition: opacity .18s ease;
}

.night--rb::before {
  background: radial-gradient(120% 80% at 50% 0%, var(--violet) 0%, rgba(126,0,255,0) 64%);
}

.night--mc::before {
  background: radial-gradient(120% 80% at 50% 0%, var(--magenta) 0%, rgba(180,0,255,0) 64%);
}

/* acid rule across the top of every panel */
.night::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: var(--acid);
}

.night > * { position: relative; z-index: 1; }

.night:hover, .night:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .6);
}

.night:hover::before, .night:focus-visible::before { opacity: .78; }
.night:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }

/* the date is the thing you are actually choosing between */
.night .date {
  display: block;
  font-size: clamp(62px, 17vw, 104px);
  font-weight: 700;
  line-height: .88;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--acid);
}

.night .month {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
}

.night .sep { width: 40px; height: 3px; margin: 20px 0 22px; background: var(--acid); }

.night .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  margin-bottom: 18px;
}

.night .logo img { max-height: 120px; max-width: 190px; width: auto; height: auto; }

.night .name {
  margin: 0 0 6px;
  font-size: clamp(17px, 4.6vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}

.night .game {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-faint);
}

.night .go {
  margin-top: auto;
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--acid);
  transition: background .18s ease, color .18s ease;
}

.night:hover .go, .night:focus-visible .go { background: var(--paper); color: var(--ink); }

.night .closed {
  margin-top: auto;
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
  border: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- footer ------------------------------------------------ */
.foot {
  padding: 26px 20px 36px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-faint);
}

/* ---------- responsive -------------------------------------------- */
@media (max-width: 720px) {
  .nights { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
  .night { padding: 30px 20px 24px; }
  .night .logo { height: 96px; }
  .night .logo img { max-height: 96px; max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .night { animation: none; }
  .night:hover, .night:focus-visible { transform: none; }
  * { transition: none !important; }
}