/* Conservative repairs for the restored Sean and Such site. */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
#header { width: 100% !important; max-width: 600px; box-sizing: border-box; }
#header img { width: 100% !important; max-width: 400px; height: auto !important; display: block; margin: 0 auto; }
body > div[style*="width:630px"] { width: 100% !important; max-width: 630px; box-sizing: border-box; }
#topnav { width: 100% !important; box-sizing: border-box; }
#container { max-width: 100%; box-sizing: border-box; }

.archive-placeholder {
  width: 100%;
  min-height: 350px;
  box-sizing: border-box;
  padding: 80px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #181818;
  border: 1px solid #3a3a3a;
  color: #f2f2f2;
}
.archive-placeholder h1 { margin: 0 0 12px; font-size: 36px; }
.archive-placeholder p { margin: 0; font-size: 17px; color: #cfcfcf; }

.character-gallery-wrap {
  width: min(960px, calc(100% - 30px));
  margin: 32px auto 45px;
  text-align: center;
}
.character-gallery-wrap h1 { margin-bottom: 8px; }
.character-gallery-intro { margin: 0 0 24px; }
.character-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
}
.character-card { margin: 0; }
.character-card a {
  display: block;
  padding: 12px;
  background: #181818;
  border: 1px solid #333;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.character-card a:hover, .character-card a:focus { transform: translateY(-2px); border-color: #0099ff; }
.character-card img {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
}
.character-card span { display: block; font-size: 18px; color: #fff; }

@media (max-width: 700px) {
  .archive-placeholder { min-height: 260px; padding: 50px 20px; }
  .archive-placeholder h1 { font-size: 30px; }
  .character-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* CSS-only replacements for missing legacy sprite graphics. */
#topnav a.drop::after { content: " \25BE"; font-size: .75em; }
.accordion-wrapper .accordion-title,
.toggle-wrapper .toggle-title { position: relative; background-image: none !important; }
.accordion-wrapper .accordion-title::before,
.toggle-wrapper .toggle-title::before {
  content: "+";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}
.accordion-wrapper .accordion-title.active::before,
.toggle-wrapper .toggle-title.active::before { content: "\2212"; }
.centered-btns_nav,
.large-btns_nav {
  text-indent: -9999px;
  border-radius: 4px;
  background-image: none !important;
}
.centered-btns_nav::after,
.large-btns_nav::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: bold 34px/1 Arial, sans-serif;
  text-indent: 0;
  content: "\2039";
}
.centered-btns_nav.next::after,
.large-btns_nav.next::after { content: "\203A"; }

/* Keep the desktop navigation centered on one line.
   The original 630px wrapper plus 30px item margins forced About Us to wrap. */
@media screen and (min-width: 801px) {
  body > div[style*="width:630px"] {
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #topnav > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
  }

  #topnav > ul > li {
    float: none;
    display: block;
    flex: 0 0 auto;
    margin: 0;
  }
}

/* Replacement for the retired Twitter timeline in the homepage footer. */
.newgrounds-column { text-align: center; }
.newgrounds-card {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  background: #181818;
  border: 1px solid #333;
}
.newgrounds-card a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.newgrounds-card img {
  width: 128px;
  height: 128px;
  display: block;
  transition: transform .15s ease;
}
.newgrounds-card a:hover img,
.newgrounds-card a:focus img { transform: scale(1.05); }
.newgrounds-card a:hover span,
.newgrounds-card a:focus span { text-decoration: underline; }