@font-face {
  font-family: "FreeRealms";
  src: url("/assets/fonts/FreeRealms.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Tahoma, "Segoe UI", sans-serif;
}

body {
  background-color: #051720;
  background-image: linear-gradient(180deg, #0a2a30 0%, #051720 18%, #051720 82%, #0a2a30 100%);
  color: #bfe9e2;
  min-height: 100vh;
}

a {
  color: #a8f0c6;
}

/* --- Top nav --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 16px;
  max-width: 880px;
  margin: 0 auto;
  background: linear-gradient(180deg, #14958a 0%, #0d6a63 100%);
  border-radius: 0 0 20px 20px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-icon {
  height: 40px;
  width: auto;
}

.join-free-link {
  display: inline-block;
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #ffffff;
  font-weight: bold;
  font-size: 22px;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.25s ease, color 0.15s ease;
}

.join-free-link:hover {
  color: #a8f0c6;
  transform: scale(1.18) rotate(-4deg);
  text-shadow: 0 0 14px rgba(168, 240, 198, 0.9), 0 1px 2px rgba(0,0,0,0.6);
}

.join-free-link:active {
  transform: scale(1.05) rotate(-1deg);
}

.topbar .pill-btn {
  padding: 8px 20px;
  font-size: 14px;
}

.topnav {
  display: flex;
  gap: 8px;
}

.topnav a,
.join-free-link,
.login-link {
  font-family: "FreeRealms", Tahoma, sans-serif;
}


.topnav a {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  background: #0d6a63;
  border: 1px solid #052624;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.topnav a:hover {
  background: #5a9c12;
  border-color: #2d5f10;
}

.topnav a::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 55%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
  pointer-events: none;
}

.topnav a.primary {
  background: #5a9c12;
  border-color: #2d5f10;
}

/* --- Buttons (shared with launcher's style) --- */
.pill-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  /* A <button> (used for "Submit for Review"/"Save Changes"/"Publish Page")
     and an <a> (used for "Cancel") compute their baseline differently as
     inline-block elements, so without this they don't line up - the
     button sits visibly lower than the link next to it. */
  vertical-align: middle;
  background: #5a9c12;
  border: 1px solid #2d5f10;
  color: #ffffff;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-weight: bold;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 26px;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.35);
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.pill-btn:hover {
  filter: brightness(1.08);
}

.pill-btn:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

.pill-btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  right: 4px;
  height: 55%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

.pill-btn.secondary {
  background: #0d6a63;
  border-color: #052624;
}

.pill-btn.secondary:hover {
  background: #5a9c12;
  border-color: #2d5f10;
  filter: none;
}

.pill-btn.disabled {
  background: #6b6b6b;
  border-color: #4a4a4a;
  color: #d0d0d0;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.25);
}

.pill-btn.disabled:hover,
.pill-btn.disabled:active {
  filter: none;
  transform: none;
}

.pill-btn.disabled::before {
  opacity: 0.35;
}

/* --- Ornate decorative banners (top continues the topbar's curve down;
   bottom sits just above the footer). The page-body between them tiles
   the connecting gradient strip so it looks seamless at any content
   height, rather than being a single fixed-size background image. --- */
.ornate-banner-top {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.ornate-banner-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Fixed pixel size - deliberately does NOT scale with window/viewport
   width, so it always matches the content box below it exactly. */
.banner-img {
  width: 640px;
  max-width: none;
  height: auto;
  flex-shrink: 0;
}

/* Side pages (login/register/confirm-email) get a plain solid background
   between the top/bottom ornate banners - no texture, matching the
   reference mockup. */
.page-body {
}

/* Homepage keeps the original tree/starburst backdrop behind its content
   instead of the plain side-page treatment. */
.page-body-home {
  position: relative;
}

.home-backdrop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 880px;
  height: 900px;
  background-image: url("/assets/backdrop.png");
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.page-body-content {
  position: relative;
  z-index: 1;
}

.side-page-logo-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  height: 120px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
}

.side-page-logo-overlay:hover {
  transform: translate(-50%, -50%) scale(1.18) rotate(4deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(168, 240, 198, 0.9));
}

/* --- Hero --- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px 20px 30px;
}

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 2 / 1;
  border-radius: 50% / 38%;
  overflow: hidden;
  border: 4px solid rgba(168, 240, 198, 0.5);
  box-shadow: 0 8px 30px rgba(0,0,0,0.55), inset 0 0 40px rgba(0,0,0,0.4);
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Firefox renders <video> through a hardware overlay compositing path
     that ignores the parent's border-radius/overflow:hidden clip during
     scroll repaints, producing a strobe/flicker. Promoting the VIDEO
     ITSELF (not the clipping ancestor) onto its own layer forces Firefox
     to composite it through the normal rasterized path instead, so the
     parent's clip is respected consistently. (Applying this to the
     ancestor instead, tried previously, froze the video on one frame -
     this is deliberately scoped to the video element only.) */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-stage-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,23,32,0.3) 0%, rgba(5,23,32,0.7) 100%);
  z-index: 1;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15%;
}

.hero-wordmark {
  height: 100px;
  max-width: 100%;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
  margin-bottom: 20px;
}

/* --- Dedicated content pages (News, Community, Help) --- */
.content-page {
  padding: 0 20px;
}

.content-block {
  background: linear-gradient(180deg, rgba(20,120,110,0.5), rgba(6,35,33,0.8));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 36px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 24px rgba(0,0,0,0.45);
}

.wiki-block {
  margin-top: 24px;
}

.content-page-title {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  text-align: center;
  font-size: 26px;
  margin-bottom: 26px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.wiki-review-intro {
  font-weight: normal;
  color: #8fd6ca;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 28px;
}

.install-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.install-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.install-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5a9c12;
  border: 1px solid #2d5f10;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-weight: bold;
  font-size: 15px;
}

.step-body h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 16px;
  margin-bottom: 6px;
}

.step-body p {
  font-size: 13px;
  color: #8fd6ca;
  line-height: 1.6;
  margin-bottom: 10px;
}

.step-body a:not(.pill-btn) {
  color: #3aa3d6;
}

.panels-stacked {
  flex-direction: column;
  max-width: 640px;
}

.panels-stacked .panel {
  width: 100%;
}

.panels-stacked .pill-btn {
  margin-top: 10px;
}

/* Inside a .content-block, flatten nested panels/cards into simple
   divided rows instead of their own separate card chrome - avoids a
   card-inside-a-card look now that News/Community/Help wrap everything
   in one big block. */
.content-block .panels-stacked {
  gap: 0;
}

.content-block .panel {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.content-block .panels-stacked .panel:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.content-block .news-list {
  gap: 0;
}

.content-block .news-card {
  background: none;
  border: none;
  border-radius: 8px;
  padding: 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.content-block .news-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Shown in place of a card list when there's nothing to show yet (no
   news posted, no wiki pages yet, a fetch failure) - was plain
   unstyled text before, which read as broken rather than intentional. */
.empty-message {
  color: #8fd6ca;
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  padding: 12px 0;
}

.news-card {
  display: flex;
  gap: 16px;
  background: linear-gradient(180deg, rgba(20,120,110,0.45), rgba(6,35,33,0.75));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 18px;
  text-decoration: none;
  transition: background 0.15s ease;
}

a.news-card:hover {
  background: linear-gradient(180deg, rgba(20,120,110,0.6), rgba(6,35,33,0.85));
}

.news-card-image {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.news-card-body h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  margin: 4px 0 6px;
}

.news-card-body p {
  font-size: 13px;
  color: #8fd6ca;
  line-height: 1.5;
}

.news-card-date {
  font-size: 11px;
  color: #5a9c8a;
  text-transform: uppercase;
  font-family: "FreeRealms", Tahoma, sans-serif;
}

.topnav a.active-page {
  background: #5a9c12;
  border-color: #2d5f10;
}

/* --- About Clover: full-width section, breaks out of the normal
   640px-constrained content column --- */
.about-section-full {
  width: 100%;
  background: linear-gradient(180deg, rgba(13,106,99,0.35), rgba(8,33,31,0.55));
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding: 50px 20px;
  margin: 40px 0;
}

.about-content {
  max-width: 900px;
  margin: 0 auto;
}

.about-content h2 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  text-align: center;
  font-size: 26px;
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.about-content h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin: 28px 0 10px;
}

.about-content p {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 14px;
}

.about-content a {
  color: #3aa3d6;
  text-decoration: underline;
}

/* --- Features: staggered stack of showcases --- */
.features {
  max-width: 900px;
  margin: 50px auto;
  padding: 0 20px;
}

.features-title {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  text-align: center;
  font-size: 22px;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.features-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.feature-row-reverse {
  flex-direction: row-reverse;
  margin-left: 40px;
}

.feature-row:not(.feature-row-reverse) {
  margin-right: 40px;
}

.feature-image {
  width: 220px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  flex-shrink: 0;
  background: rgba(4, 26, 24, 0.4);
}

.feature-text h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin-bottom: 8px;
}

.feature-text p {
  font-size: 13px;
  color: #8fd6ca;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .feature-row,
  .feature-row-reverse {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }
}

/* --- Feature panels (recreating the circular-highlights layout) --- */
.panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.panel {
  background: linear-gradient(180deg, rgba(20,120,110,0.45), rgba(6,35,33,0.75));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 20px;
  width: 260px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.35);
}

.panel-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #5a9c12;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 24px;
}

.panel h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  margin-bottom: 8px;
}

.panel p {
  font-size: 13px;
  color: #8fd6ca;
  line-height: 1.5;
}

.panel-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #a8f0c6;
  text-decoration: underline;
}

/* --- Mini icon row (echoes the original site's job-icon strip) --- */
/* --- Forms (login/register) --- */
.form-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.form-card {
  background: linear-gradient(180deg, rgba(20,120,110,0.5), rgba(6,35,33,0.8));
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 640px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 24px rgba(0,0,0,0.45);
}

.form-card h2 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  margin-bottom: 20px;
  text-align: center;
  font-size: 22px;
}

/* Site CSP blocks inline style="" attributes (style-src 'self'), so this
   has to be a real class rather than an inline style - an inline style
   here silently gets dropped by the browser and falls back to default
   text color/size, which is what "not formatted" looked like. */
.form-card-intro {
  color: #8fd6ca;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
  margin: -8px 0 16px;
}

.form-card label {
  display: block;
  font-size: 12px;
  color: #8fd6ca;
  margin: 12px 0 4px;
  font-family: "FreeRealms", Tahoma, sans-serif;
}

.form-card input {
  width: 100%;
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e4fbf5;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

.form-card input:focus {
  outline: none;
  border-color: #5a9c12;
}

.form-card .pill-btn {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.form-message {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  font-family: "FreeRealms", Tahoma, sans-serif;
}

.form-message.error { color: #ff8f7a; }
.form-message.success { color: #a8f0c6; }

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 4px;
}

.label-row label {
  margin: 0;
}

.field-hint {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  min-height: 14px;
  font-family: Tahoma, sans-serif;
}

.field-hint.error { color: #ff8f7a; }
.field-hint.success { color: #a8f0c6; }
.field-hint.checking { color: #8fd6ca; }

@keyframes message-pop-in {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(1px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.form-message.message-pop {
  animation: message-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-footer-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
}

.form-footer-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.form-footer-row .form-footer-link {
  margin-top: 0;
}

/* --- Footer --- */
footer {
  text-align: center;
  padding: 28px 20px;
}

.footer-links {
  font-size: 12px;
  margin-bottom: 8px;
}

.footer-links a {
  color: #a8f0c6;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links-legal a {
  color: #8fd6ca;
}

.footer-disclaimer {
  max-width: 640px;
  margin: 16px auto 0;
  font-size: 10px;
  line-height: 1.6;
  color: #5a9c8a;
}

/* --- Wiki: real two-column layout (sidebar + article), backed by SQLite
   with real edit history --- */
/* No vertical padding here (horizontal-only, matching .content-page) -
   every other page on the site has its content box flush against both
   the top and bottom ornate banners with zero gap, so the wiki matches
   that instead of having its own breathing room. */
/* Wiki pages are now single-box, like every other page on the site
   (.content-block supplies the box background/border) - .wiki-article
   is just a typography wrapper around rendered Markdown content now,
   not its own boxed column next to a sidebar. */
.wiki-article {
  min-width: 0;
}

/* Sits right next to the page's <h1> now (inside .wiki-title-row),
   instead of as its own block above the title. */
.wiki-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.wiki-title-row .content-page-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.wiki-category-tag {
  display: inline-block;
  background: #0d6a63;
  border: 1px solid #052624;
  color: #ffffff;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.wiki-article h1 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 26px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.wiki-article h2 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin: 24px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.wiki-article h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 15px;
  margin: 20px 0 8px;
}

.wiki-article p {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 14px;
}

.wiki-article ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.wiki-article li {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 6px;
}

.wiki-article a {
  color: #3aa3d6;
  text-decoration: underline;
}

.wiki-article a.pill-btn {
  color: #ffffff;
  text-decoration: none;
}

.wiki-index-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.wiki-index-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wiki-index-list a {
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-weight: bold;
}

.wiki-page-actions {
  margin-bottom: 20px;
  font-size: 13px;
}

.wiki-page-actions a {
  color: #3aa3d6;
}

.wiki-edit-form label {
  display: block;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 13px;
  color: #8fd6ca;
  margin: 16px 0 6px;
}

.wiki-edit-form input,
.wiki-edit-form textarea,
.wiki-edit-form select {
  width: 100%;
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e4fbf5;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Courier New", monospace;
  box-sizing: border-box;
}

.wiki-edit-form input,
.wiki-edit-form select {
  font-family: Tahoma, sans-serif;
}

.wiki-edit-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8fd6ca 50%), linear-gradient(135deg, #8fd6ca 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

.wiki-edit-form select option {
  background: #06231f;
  color: #e4fbf5;
}

.wiki-edit-form input:focus,
.wiki-edit-form textarea:focus,
.wiki-edit-form select:focus {
  outline: none;
  border-color: #5a9c12;
}

.wiki-edit-form .pill-btn {
  margin-top: 16px;
  margin-right: 10px;
}

.wiki-history-list {
  list-style: none;
  padding: 0;
}

.wiki-history-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
}

/* Bottom banner now just uses the plain .ornate-banner-bottom centering
   like every other page - no wiki-specific shift. */

/* --- Wiki search (new) --- */
.wiki-search-form {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.wiki-search-form input {
  flex: 1;
  min-width: 0;
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e4fbf5;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: Tahoma, sans-serif;
}

.wiki-search-form input:focus {
  outline: none;
  border-color: #5a9c12;
}

/* Reuses the site's real .pill-btn (same button as "Create Page",
   "Save Changes", "Join Discord", etc.) - just sized down to fit the
   sidebar, the same way .topbar .pill-btn scales down the header's
   "Log In" button rather than inventing a one-off button style. */
.wiki-search-form .pill-btn {
  padding: 8px 14px;
  font-size: 12px;
  white-space: nowrap;
}

.wiki-search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wiki-search-result {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wiki-search-result:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wiki-search-result h3 {
  margin-bottom: 4px;
}

.wiki-search-result h3 a {
  color: #a8f0c6;
  text-decoration: none;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 16px;
}

.wiki-search-result h3 a:hover {
  text-decoration: underline;
}

.wiki-search-snippet {
  font-size: 13px;
  color: #8fd6ca;
  line-height: 1.6;
}

/* Extend the FreeRealms display font to more short UI/navigational text
   (footer nav, page-action links, history entries) - left off body
   paragraphs, which stay in Tahoma for readability. */
.footer-links a,
.wiki-home-link,
.wiki-page-actions a,
.wiki-history-list a,
.wiki-search-result h3 a {
  font-family: "FreeRealms", Tahoma, sans-serif;
}

/* --- Legal pages (Privacy/Terms/Legal): these reused .content-block and
   .content-page-title, which already existed, but .legal-content and
   .last-updated had no rules anywhere in the site's CSS, so all their
   text was rendering completely unstyled. Matches the same long-form
   text treatment already used for .about-content on the homepage. */
.last-updated {
  text-align: center;
  font-size: 12px;
  color: #8fd6ca;
  margin-bottom: 24px;
}

.legal-content h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin: 28px 0 10px;
}

.legal-content h3:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-content li {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 6px;
}

.legal-content a {
  color: #3aa3d6;
  text-decoration: underline;
}

/* --- Wiki home page: single box (welcome, category slideshow, "Helping
   Out" how-to) instead of the sidebar + article two-column layout used
   on every other wiki page. Reuses .content-block/.content-page, the
   same box every other single-box page on the site uses. --- */
.wiki-home-block {
  max-width: 760px;
}

.wiki-welcome {
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 20px;
}

.wiki-welcome p.wiki-welcome-lead {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 20px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}

.wiki-welcome p {
  max-width: 560px;
  margin: 0 auto 14px;
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
}

.wiki-welcome p:last-child {
  margin-bottom: 0;
}

.wiki-home-search {
  margin: 20px 0 30px;
}

/* The "+ New Page"/"Log In to Get Started" CTA at the bottom of the
   "Get Involved" section - now just the site's standard .pill-btn (the
   same button as "Log In", "Create Page", "Save Changes"), sized up
   slightly and centered as a full-width row so it still reads as the
   page's main call to action. */
.wiki-new-page-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.wiki-home-block h2 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin: 28px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.wiki-howto-list {
  margin: 0 0 20px;
  padding-left: 22px;
}

.wiki-howto-list li {
  font-size: 14px;
  color: #bfe9e2;
  line-height: 1.7;
  margin-bottom: 8px;
}

.wiki-category-slideshow {
  margin-bottom: 10px;
}

/* This went through a translateX-sliding-row design first (a flex row,
   one slide wide, shifted with a transform), which turned out to have
   a genuine browser rendering bug: a slide's <img> that had never been
   on screen yet - clipped out of view by the track's overflow:hidden -
   would sometimes never actually get painted once the transform
   scrolled it into view, leaving a blank box with no error, no missing
   network request, and a fully-loaded/fully-decodable image underneath
   (confirmed by drawing it to a canvas - the pixel data was there, it
   just wasn't reaching the screen). will-change/translateZ layer-promotion
   hints didn't fix it. Cross-fading all slides in place instead, rather
   than sliding a single row, sidesteps the bug entirely: every slide's
   <img> is already in its final on-screen position from first paint, so
   there's no "never been visible, now needs to appear mid-transform"
   case for the browser to get wrong - only its opacity changes. */
.wiki-category-track {
  position: relative;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
}

/* Each slide is a full-bleed photo for that category (a real <img>, see
   .wiki-category-slide-img below - not a CSS background-image), with a
   dark gradient overlay so the category name (in the FreeRealms display
   font) and page count stay legible over any image. All 14 stack in the
   same spot (position:absolute, inset:0) and cross-fade via opacity -
   only .active is interactive so a hidden slide's link can't be tabbed
   to or clicked. */
.wiki-category-slide {
  position: absolute;
  inset: 0;
  height: 220px;
  background-color: rgba(4, 26, 24, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.wiki-category-slide.active {
  opacity: 1;
  visibility: visible;
}

/* A plain <img>, not a CSS background-image - an inline
   style="background-image: url(...)" attribute is blocked outright by
   a CSP without 'unsafe-inline' on style-src (the real site's helmet
   config), and moving it into a CSS class inside a <style> block turned
   out to hit its own wall - some HTML preview/sanitizing tools silently
   drop a very large data: URI sitting inside a <style> block's url(),
   which is exactly what the self-contained offline preview needs for
   these photos. A plain <img src="..."> sidesteps both: img-src is
   essentially always allowed same-origin under any normal CSP, and a
   preview tool that strips huge inline CSS still renders an ordinary
   <img> tag fine (that's how the banner and wordmark logo already work
   on every page here). */
.wiki-category-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.wiki-category-slide-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.wiki-category-slide-overlay {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(4,26,24,0) 0%, rgba(4,26,24,0.55) 45%, rgba(4,26,24,0.92) 100%);
  text-align: center;
}

.wiki-category-slide h3 {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #ffffff;
  font-size: 24px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85);
  margin-bottom: 4px;
}

.wiki-category-slide-count {
  display: inline-block;
  color: #a8f0c6;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

/* --- Wiki, single-box redesign: no more sidebar --- */

/* The link back to /wiki shown at the top of every wiki page except the
   home page itself, now that there's no sidebar "Wiki Home" link. */
.wiki-home-link {
  display: inline-block;
  margin-bottom: 16px;
  color: #8fd6ca;
  font-size: 13px;
  text-decoration: none;
}

.wiki-home-link:hover {
  color: #a8f0c6;
  text-decoration: underline;
}

/* Swaps in for the topbar's language dropdown on wiki pages - same
   dimensions/position, just a search box instead. */
.wiki-header-search {
  display: flex;
  gap: 6px;
  align-items: center;
}

.wiki-header-search input {
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.3);
  color: #e4fbf5;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-family: Tahoma, sans-serif;
  width: 160px;
}

.wiki-header-search input:focus {
  outline: none;
  border-color: #5a9c12;
}

.wiki-header-search .pill-btn {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* The category tag on an article page is now a link through to that
   category's full listing. */
.wiki-category-tag a {
  color: #ffffff;
  text-decoration: none;
}

.wiki-category-tag a:hover {
  text-decoration: underline;
}

/* Category-grouped subheadings on /wiki/category/:category (grouped by
   subcategory, e.g. "Weapons" / "Shards" under Items). */
.wiki-subcategory-heading {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 18px;
  margin: 24px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.wiki-category-view-all {
  display: inline-block;
  margin-top: 12px;
  color: #a8f0c6;
  font-size: 13px;
  text-decoration: underline;
}

.wiki-category-full-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.wiki-category-full-list li a {
  color: #3aa3d6;
  text-decoration: underline;
  font-size: 14px;
}

.wiki-slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.wiki-slide-prev,
.wiki-slide-next {
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e4fbf5;
  font-size: 18px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

.wiki-slide-prev:hover,
.wiki-slide-next:hover {
  border-color: #5a9c12;
  color: #a8f0c6;
}

.wiki-slide-dots {
  display: flex;
  gap: 6px;
}

.wiki-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 0;
}

.wiki-slide-dot.active {
  background: #5a9c12;
}

/* --- Review workflow: pending-page/edit banners, the review notice on
   forms, the review queue list, and revision-status tags in history --- */
.wiki-review-notice {
  background: rgba(90, 156, 18, 0.12);
  border: 1px solid rgba(90, 156, 18, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #a8f0c6;
  margin-bottom: 16px;
}

.wiki-pending-banner {
  background: rgba(212, 168, 38, 0.14);
  border: 1px solid rgba(212, 168, 38, 0.45);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #f0d98c;
  margin-bottom: 16px;
}

.wiki-pending-banner a {
  color: #f0d98c;
  text-decoration: underline;
}

.wiki-pending-banner-rejected {
  background: rgba(214, 90, 74, 0.14);
  border-color: rgba(214, 90, 74, 0.45);
  color: #f2b3a6;
}

.wiki-review-link {
  text-align: center;
  margin-top: 14px;
}

.wiki-review-link a {
  color: #a8f0c6;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 13px;
  text-decoration: underline;
}

.wiki-review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wiki-review-item {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wiki-review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wiki-review-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wiki-review-item-head h3 {
  margin: 0;
}

.wiki-review-item-head h3 a {
  color: #a8f0c6;
  text-decoration: none;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 16px;
}

.wiki-review-item-head h3 a:hover {
  text-decoration: underline;
}

.wiki-review-kind {
  display: inline-block;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 10px;
  color: #ffffff;
}

.wiki-review-kind-new {
  background: #0d6a63;
}

.wiki-review-kind-edit {
  background: #6a5a0d;
}

.wiki-review-meta {
  font-size: 12px;
  color: #8fd6ca;
  margin: 4px 0 8px;
}

.wiki-review-snippet {
  font-size: 13px;
  color: #bfe9e2;
  line-height: 1.6;
  margin-bottom: 10px;
}

.wiki-review-actions {
  display: flex;
  gap: 10px;
}

.wiki-review-action-form .pill-btn {
  padding: 8px 18px;
  font-size: 13px;
}

.wiki-revision-status {
  display: inline-block;
  font-family: "FreeRealms", Tahoma, sans-serif;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
  color: #ffffff;
}

.wiki-revision-status-pending {
  background: #6a5a0d;
}

.wiki-revision-status-rejected {
  background: #6a1f16;
}

.wiki-revision-status-live {
  background: #2d5f10;
}

/* --- Review team management (/wiki/review/team) --- */
.wiki-review-team-link {
  margin-bottom: 16px;
  font-size: 13px;
}

.wiki-review-team-link a {
  color: #a8f0c6;
  text-decoration: underline;
}

.wiki-team-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wiki-team-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wiki-team-username {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  font-size: 14px;
}

.wiki-team-meta {
  font-size: 12px;
  color: #8fd6ca;
  flex: 1;
}

.wiki-team-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f5c84a;
  font-weight: 700;
}

.wiki-team-admin-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.wiki-team-remove-form .pill-btn {
  padding: 6px 14px;
  font-size: 12px;
}

.wiki-team-add-form {
  max-width: 340px;
}

/* --- "Apply" nav button (uses the starburst badge PNG as its
   background instead of the plain pill shape the other nav links
   use, so it stands out as a call to action) and generic select/
   textarea styling for .form-card, used by the /apply page. --- */

.topnav a.topnav-apply {
  /* Same box size as the other nav links (padding/font-size match
     .topnav a) so this button doesn't grow the topbar itself - it's
     made to look bigger with `transform: scale()` below instead, which
     renders larger without affecting the flex layout's height. The
     padding is intentionally top-light/bottom-heavy so the centered
     text sits a little higher in the starburst graphic. The scale
     grows evenly from the center (like the button is popping toward
     the viewer) rather than from an edge (which reads as sliding
     sideways) - the left/right margin below is what keeps it clear of
     Help and the search box instead. */
  background-color: transparent;
  background-image: url("/assets/apply-badge.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  padding: 6px 16px 12px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px;
  transform: scale(1.35);
  transform-origin: center center;
  animation: topnav-apply-pulse 1.8s ease-in-out infinite;
}

.topnav a.topnav-apply::before {
  display: none;
}

.topnav a.topnav-apply:hover {
  /* Full, steady glow on hover - the animation is turned off entirely
     (rather than paused) so it doesn't freeze mid-fade at whatever
     point the cycle happened to be in. */
  background-color: transparent;
  animation: none;
  transform: scale(1.45);
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 170, 30, 1)) drop-shadow(0 0 22px rgba(255, 140, 0, 0.9));
}

@keyframes topnav-apply-pulse {
  0%, 100% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 0 rgba(255, 170, 30, 0.6));
  }
  50% {
    transform: scale(1.45);
    filter: drop-shadow(0 0 8px rgba(255, 170, 30, 0.85));
  }
}

.form-card select,
.form-card textarea {
  width: 100%;
  background: rgba(4, 26, 24, 0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #e4fbf5;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: Tahoma, sans-serif;
  box-sizing: border-box;
}

.form-card textarea {
  resize: vertical;
  min-height: 100px;
  font-family: Tahoma, sans-serif;
}

.role-info-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(4, 26, 24, 0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #bfe9e2;
  font-family: Tahoma, sans-serif;
}

.role-info-list li + li {
  margin-top: 10px;
}

.role-info-list strong {
  color: #a8f0c6;
  font-family: "FreeRealms", Tahoma, sans-serif;
}

.form-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #8fd6ca 50%), linear-gradient(135deg, #8fd6ca 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

.form-card select option {
  background: #06231f;
  color: #e4fbf5;
}

.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: #5a9c12;
}

.wiki-audit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wiki-audit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wiki-audit-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wiki-audit-row a {
  font-family: "FreeRealms", Tahoma, sans-serif;
  color: #a8f0c6;
  text-decoration: none;
  font-size: 14px;
}

.wiki-audit-row a:hover {
  text-decoration: underline;
}