/* =============================================================================
   DODUS — NIGHT SESSION, landing-page section
   -----------------------------------------------------------------------------
   Every selector here begins with .nightsec or .night__, so nothing in this
   file can reach Day Run's markup above. It is loaded as a separate stylesheet
   for the same reason: it can be removed entirely and the page is unchanged.

   Colours come from the same theme variables the rest of the site uses, shifted
   toward dusk — the same world, later in the day, not a different brand.
   ========================================================================== */

.nightsec {
  --night-deep: #1C2333;     /* the sky, late */
  --night-mid:  #2E3A52;     /* card ground */
  --night-soft: #46587A;     /* borders, dividers */
  --night-glow: #F0C46B;     /* lantern light — warm against all that blue */
  --night-text: #E8EDF7;

  padding: clamp(2.5rem, 7vw, 4.5rem) 1.2rem clamp(3rem, 8vw, 5rem);
  background: var(--night-deep);
  color: var(--night-text);
}
.nightsec[hidden] { display: none; }

.night__head { max-width: 40rem; margin: 0 auto 1.6rem; text-align: center; }

.night__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  line-height: 1.05;
  color: var(--night-text);
}
.night__moon {
  /* a soft halo, the way a moon looks through cold air */
  text-shadow: 0 0 18px rgba(240, 196, 107, .55);
}
.night__sub {
  margin: .6rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(.95rem, 2.6vw, 1.15rem);
  opacity: .85;
}

/* ---- the card ------------------------------------------------------------ */
.night__card {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1.7rem;
  background: var(--night-mid);
  border: 2.5px solid var(--night-soft);
  /* the same hand-cut corners as the rest of the site */
  border-radius: 28px 18px 26px 20px / 20px 28px 18px 28px;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .35);
}
.night__card--open {
  border-color: var(--night-glow);
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .35), 0 0 34px rgba(240, 196, 107, .16);
  text-align: center;
}

.night__find,
.night__codehead {
  margin: 0 0 .6rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--night-glow);
}

.night__ways {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  font-size: .95rem;
  line-height: 1.6;
}
.night__ways li { margin: .2rem 0; }
.night__ways li::marker { color: var(--night-glow); }

.night__blurb {
  margin: 0 0 .9rem;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 1rem;
  opacity: .88;
}

/* ---- the way in, on the locked card -------------------------------------- */
.night__lead {
  text-align: center;
  /* The gap below is what keeps the button clear of the divider and the
     heading beneath it. The button is inline-block with an offset shadow, so
     it needs real room, not just a line-height's worth. */
  padding-bottom: 1.6rem;
}
.night__leadtext {
  margin: 0 0 1.1rem;
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(1rem, 2.8vw, 1.12rem);
  line-height: 1.45;
}
.night__play--day { margin-top: 0; }

/* ---- the code box -------------------------------------------------------- */
.night__code {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--night-soft);
}
/* the first heading inside the code block sits right under the divider */
.night__code > .night__find:first-child { margin-top: 0; }

.night__label {
  display: block;
  margin: 0 0 .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  opacity: .7;
}

.night__row { display: flex; gap: .5rem; flex-wrap: wrap; }

.night__input {
  flex: 1 1 11rem;
  min-width: 0;                 /* lets it actually shrink inside the flex row */
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: .7rem .8rem;
  color: var(--night-text);
  background: rgba(0, 0, 0, .25);
  border: 2px solid var(--night-soft);
  border-radius: 16px 11px 14px 12px / 11px 14px 11px 16px;
}
.night__input::placeholder { color: var(--night-text); opacity: .35; }
.night__input:focus-visible {
  outline: 3px dashed var(--night-glow);
  outline-offset: 2px;
  border-color: var(--night-glow);
}

/* The button borrows the site's .btn shape but wears night colours. */
.night__btn,
.night__play {
  margin-top: 0;
  flex: 0 0 auto;
  background: var(--night-glow);
  color: #2B2723;
  border-color: #12181F;
  box-shadow: 3px 4px 0 #12181F;
}
.night__btn:hover,
.night__play:hover { box-shadow: 5px 6px 0 #12181F; }
.night__btn:active,
.night__play:active { box-shadow: 1px 1px 0 #12181F; }
.night__btn:focus-visible,
.night__play:focus-visible { outline: 3px dashed var(--night-glow); outline-offset: 3px; }
.night__btn[disabled] { opacity: .6; cursor: default; }

.night__msg {
  margin: .7rem 0 0;
  min-height: 1.2rem;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--night-glow);
}

/* ---- unlocked ------------------------------------------------------------ */
.night__found {
  margin: 0 0 .5rem;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.1rem, 3.6vw, 1.45rem);
  color: var(--night-glow);
}
.night__soon {
  margin: 1rem 0 0;
  font-size: .9rem;
  font-weight: 700;
  opacity: .7;
}
/* A block-level button never collides with whatever follows it. */
.night__play {
  display: inline-block;
  margin-top: 1.1rem;
  margin-bottom: 0;
  text-decoration: none;
}
.night__flavour {
  margin: .1rem 0 0;
  font-size: .85rem;
  font-weight: 700;
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .nightsec *, .nightsec *::before, .nightsec *::after {
    animation: none !important;
    transition: none !important;
  }
}