/* Contact page uses the same visual language as game submissions. */
.contact-card{max-width:850px;margin-left:auto;margin-right:auto}
.contact-intro{max-width:850px}
.contact-caption{font-size:.82rem;color:#9db6d5;line-height:1.5;margin-top:1.3rem}
.contact-card .form-actions{flex-wrap:wrap;gap:1rem}
.contact-card .send-button{cursor:pointer}
.contact-card textarea{resize:vertical}

/* Make the Contact LEVEL 31 emphasis use the studio blue instead of purple. */
.contact-intro h1 em{font-style:normal;color:#65c9ff}

/* Apply the same polished field styling to the contact form.
   The previous version only styled #gameForm fields, which left
   the contact form using browser-default small controls. */
#contactForm label{display:block;color:#dceafb;font-size:.91rem;font-weight:750;margin:17px 0 0}
#contactForm label b{color:#62d7ff}
#contactForm input:not([type=hidden]):not([type=checkbox]),
#contactForm select,
#contactForm textarea{
  margin-top:9px;
  width:100%;
  display:block;
  min-height:48px;
  border:1px solid #3b5f93;
  border-radius:9px;
  background:#0b1531;
  color:#fff;
  padding:13px 14px;
  font:inherit;
  outline:none;
}
#contactForm textarea{min-height:190px;line-height:1.55}
#contactForm input:focus,
#contactForm textarea:focus,
#contactForm select:focus{
  border-color:#63ccff;
  box-shadow:0 0 0 3px #4bd4ff22;
}
#contactForm ::placeholder{color:#8193b4}

/* Give subject + message their own roomy layout. */
#contactForm fieldset:last-of-type label + label{margin-top:20px}

@media(max-width:660px){
  .contact-card .form-actions{flex-direction:column;align-items:stretch}
  .contact-card .send-button{width:100%}
}