/* THE CODE DOOR + CROUTON'S LINE (owner, 2026-10-07: "a big enter code button maybe on the header and the croutons
   quote on the main page"). Loaded after the three playtest sheets, so it wins on order. Every size is 14px or more.
   The pause-effects switch moved down beside TOUR and SOUND, which leaves the header room for two real buttons. */

/* ENTER CODE: the invited player's door, filled and lit, beside GET INVITED */
.masthead .entry-nav .nav-code {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 13px;
  font: 800 14px/1 var(--body, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #031319; text-decoration: none; border-radius: 3px;
  background: linear-gradient(180deg, #8ffcf9 0%, #2ff3f0 48%, #14c6d1 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 0 0 1px rgb(47 243 240 / .7), 0 0 18px rgb(47 243 240 / .45), 0 0 34px -6px rgb(47 243 240 / .55);
  transition: filter .15s ease, transform .12s ease;
}
.masthead .entry-nav .nav-code svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.masthead .entry-nav .nav-code:hover, .masthead .entry-nav .nav-code:focus-visible { filter: brightness(1.1); }
.masthead .entry-nav .nav-code:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.masthead .entry-nav .nav-code:active { transform: scale(.97); }
body.invite-view .masthead .nav-code { display: none; }
/* the neighbours at the same size as the new button, and the logo never squeezed by them */
.masthead .entry-nav .entry-link, .masthead .entry-nav .nav-apply { white-space: nowrap; font-size: 14px; }
.masthead .brand { flex: none; }

/* the pause-effects switch in its new place, sized to sit with TOUR and SOUND */
.city-settings { align-items: center; }
.city-settings .motion-toggle { width: 30px; height: 30px; flex: none; }
.city-settings .motion-toggle svg { width: 12px; height: 12px; }

@media (max-width: 650px) {
  /* the logo alone on a phone: the hero carries the name, the header carries the two doors */
  .masthead .brand span { display: none; }
  .masthead .entry-nav { gap: 8px; }
  .masthead .entry-nav .entry-link { font-size: 14px; }
  .masthead .entry-nav .nav-code { min-height: 38px; padding: 0 11px 0 9px; gap: 6px; letter-spacing: .05em; }
  .masthead .entry-nav .nav-code svg { width: 16px; height: 16px; }
  .masthead .entry-nav .nav-apply { min-height: 38px; padding: 0 10px; gap: 6px; font-size: 14px; letter-spacing: .04em; }
  .masthead .entry-nav .nav-apply span { display: none; }
}
/* a narrower phone keeps both buttons whole: the key icon goes first, then the spacing */
@media (max-width: 400px) {
  .masthead .entry-nav .nav-code svg { display: none; }
  .masthead .entry-nav .nav-code { padding: 0 11px; letter-spacing: .03em; }
}
@media (max-width: 360px) {
  .masthead .entry-nav { gap: 6px; }
  .masthead .entry-nav .nav-code, .masthead .entry-nav .nav-apply { padding: 0 8px; letter-spacing: .01em; }
}

/* CROUTON'S LINE, between the numbers and the big button */
.crouton-quote {
  display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 470px; margin: 20px 0 22px; padding: 11px 18px 11px 11px;
  border-radius: 16px; border: 1px solid rgb(47 243 240 / .24);
  background: linear-gradient(100deg, rgb(8 9 16 / .82), rgb(12 10 24 / .55));
  box-shadow: 0 14px 34px -16px #000, inset 0 1px 0 rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.crouton-quote img { flex: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid #2ff3f0; box-shadow: 0 0 16px rgb(47 243 240 / .5); }
.crouton-quote blockquote { margin: 0; font: italic 600 17px/1.35 var(--body, Rajdhani, sans-serif); color: #f3efff; text-wrap: balance; }
.crouton-quote figcaption { margin-top: 6px; font: 700 14px/1 var(--body, Rajdhani, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #2ff3f0; }
.crouton-quote figcaption::before { content: "— "; }
/* wider screens: "Come prove it." on its own line, so the card hugs the words */
@media (min-width: 651px) { .crouton-quote { max-width: 560px; } .crouton-quote .q2 { display: block; } .crouton-quote blockquote { text-wrap: wrap; } }
@media (max-width: 650px) {
  .crouton-quote { margin: 16px auto 18px; max-width: 100%; text-align: left; }
  .crouton-quote img { width: 52px; height: 52px; }
  .crouton-quote blockquote { font-size: 16px; }
}

/* CROUTON'S INVITATION (owner, 2026-10-08: the old line "is just ass and not something crouton would say"): two lines
   on a wide screen, one sentence each — the 470px cap broke it into four and left "baby." alone. */
@media (min-width: 801px) { .invitation-copy h2 { max-width: 620px; } }