/* The site's own look since the makeover (owner 2026-10-25, mockup https://claude.ai/artifact/SykNSrAZuxtvAiVgvG4a1Y):
   white cards on the ground, one centred column, the same colours, borders and buttons as the thread pages
   (thread.css). Loaded on every page after frame.css; every rule is under .ui-page or starts with ui-, so the
   original Bootstrap and style.css (still loaded for the header and the forum's MyBB pages) do not leak in, and these
   rules do not leak out. Page groups add their own file (world.css, people.css, forum-pages.css, account.css,
   info.css) for what only they use; shared parts live here.

   One scale for every page (owner 2026-10-25, "spacings, fonts"): the site font everywhere; h1 30 px (24 on
   phones), h2 18, h3 and item titles 15, interface text 14, long prose 15 (.ui-prose), small and muted text 13 in
   --ui-muted, 12 only for table heads and badges. Cards: 8 px corners, 18/22 px padding (14/16 on phones), 16 px
   between cards. Buttons 38 px (the one main action 42, .ui-btn-lg; ghost 32). Two widths: phones up to 600 px,
   tablets up to 900 px. */

:root {
  --ui-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui-line: #d5dde5; --ui-soft-line: #e9edf1; --ui-tint: #f4f7fa; --ui-tint-2: #f8fafc; --ui-text: #222;
  --ui-muted: #5d6874; --ui-link: #2a6496; --ui-primary: #2d6da3; --ui-go: #2e7d32; --ui-control: #c9d3dd;
  --ui-chip: #eef2f6; --ui-tag-bg: #e3f1e3; --ui-tag: #24642a; --ui-warm-bg: #f3ead8; --ui-warm: #6b4b2e;
  --ui-focus: #2d6da3;
}
.ui-page {
  max-width: 1180px; box-sizing: border-box; margin: 18px auto 30px; padding: 0 10px;
  display: flex; flex-direction: column; gap: 16px;
  font: 14px/1.45 var(--ui-font); color: #333;
}
.ui-page *, .ui-page *::before, .ui-page *::after { box-sizing: border-box; }
.ui-page a { color: var(--ui-link); }
.ui-page a:not([href]) { color: inherit; }
.ui-page h1, .ui-page h2, .ui-page h3 { margin: 0; font-family: inherit; font-weight: bold; color: var(--ui-text); }
.ui-page h1 { font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
.ui-page h2 { font-size: 18px; line-height: 1.3; }
.ui-page h3 { font-size: 15px; line-height: 1.3; }
.ui-page p { margin: 0; }
.ui-prose { font-size: 15px; line-height: 1.6; color: var(--ui-text); overflow-wrap: anywhere; }
.ui-prose p + p, .ui-prose p + ul, .ui-prose ul + p { margin-top: .8em; }
.ui-lede { font-size: 15px; line-height: 1.55; color: #3d4852; }
.ui-page code { padding: 1px 5px; border-radius: 4px; background: var(--ui-chip); color: #3d4852; font: 13px/1.4 Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ui-page img.ui-pix, .ui-page .ui-pix img { image-rendering: pixelated; }
/* mcwm-original.css floats every label at 10em and 14pt; labels inside the new pages are ordinary text. */
.ui-page label { float: none; width: auto; margin: 0; font-size: inherit; font-weight: inherit; }
.ui-icon { flex: none; vertical-align: -3px; }
.ui-muted { color: var(--ui-muted); }
.ui-small { font-size: 13px; color: var(--ui-muted); }
.ui-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Cards and layout ---- */
.ui-card {
  background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  min-width: 0;
}
.ui-pad { padding: 18px 22px; }
.ui-card > .ui-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--ui-soft-line);
}
.ui-card > .ui-card-body { padding: 18px 22px; }
.ui-card > .ui-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 22px; border-top: 1px solid var(--ui-soft-line);
}
.ui-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ui-gap-s { gap: 8px; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Main column with a side column beside it; the side column goes under it on narrow windows. */
.ui-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ui-cols > .ui-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ui-cols > .ui-side { flex: 1 1 290px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* A side menu (account, admin, about) beside the content; above it, scrolling sideways, on phones. */
.ui-cols > .ui-menu-col { flex: 1 1 220px; max-width: 260px; min-width: 0; }
.ui-menu { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.ui-menu a {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 6px;
  color: #333 !important; text-decoration: none !important;
}
.ui-menu a:hover { background: #eef2f6; }
.ui-menu a[aria-current] { background: #e7eef5; color: var(--ui-text) !important; font-weight: bold; }
.ui-menu-title { padding: 8px 12px 4px; font-size: 12px; font-weight: bold; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Page head: breadcrumb, title, meta line, actions ---- */
.ui-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; padding: 18px 22px; }
.ui-head-text { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ui-head-actions { flex: 0 1 auto; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ui-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ui-muted); }
.ui-crumbs li + li::before { content: "\203A"; margin-right: 6px; }
.ui-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--ui-muted); }
.ui-who { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: bold; }
.ui-who img { width: 24px; height: 24px; border-radius: 3px; image-rendering: pixelated; }

/* ---- Stat strip under a head: label over value, cells divided ---- */
.ui-stats {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--ui-soft-line); background: var(--ui-tint-2); border-radius: 0 0 8px 8px;
}
.ui-stats > div { padding: 10px 22px; border-right: 1px solid var(--ui-soft-line); min-width: 0; }
.ui-stats > div:last-child { border-right: 0; }
.ui-stats dt { font-size: 13px; font-weight: normal; color: var(--ui-muted); }
.ui-stats dd { margin: 0; font-size: 18px; font-weight: bold; color: var(--ui-text); overflow-wrap: anywhere; }

/* ---- Details list: label left, value right ---- */
.ui-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.ui-dl dt { font-weight: normal; color: var(--ui-muted); }
.ui-dl dd { margin: 0; text-align: right; color: var(--ui-text); overflow-wrap: anywhere; }

/* ---- Chips, tags, badges ---- */
.ui-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; background: var(--ui-chip); color: #3d4852; font-size: 13px; }
.ui-chip-warm { background: var(--ui-warm-bg); color: var(--ui-warm); }
.ui-chip-go { background: #dff0d8; color: #2f5f2f; }
.ui-chip-wait { background: #fcf8e3; color: #6b5427; }
.ui-chip-stop { background: #f2dede; color: #8a2f2c; }
.ui-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-tag { padding: 3px 10px; border-radius: 12px; background: var(--ui-tag-bg); color: var(--ui-tag) !important; font-size: 13px; }

/* ---- Buttons and fields (sizes as thread.css) ---- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--ui-control); border-radius: 6px; background: #fff; color: #333 !important; font: inherit;
  line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none !important;
}
.ui-btn:hover { background: #eef2f6; }
.ui-btn[aria-disabled="true"], .ui-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.ui-btn-lg { min-height: 42px; padding: 0 18px; font-weight: bold; }
.ui-btn-primary { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff !important; font-weight: bold; }
.ui-btn-primary:hover { background: #245a87; }
.ui-btn-go { border-color: var(--ui-go); background: var(--ui-go); color: #fff !important; font-weight: bold; }
.ui-btn-go:hover { background: #256528; }
.ui-btn-danger { border-color: #b03a2e; background: #fff; color: #9b2c22 !important; }
.ui-btn-danger:hover { background: #fbeeec; }
.ui-btn-ghost { min-height: 32px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--ui-muted) !important; font-size: 13px; }
.ui-btn .ui-btn-note { font-weight: normal; opacity: .85; }
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field > label, .ui-label { font-weight: bold; color: var(--ui-text); }
.ui-help { font-size: 13px; color: var(--ui-muted); }
.ui-input, .ui-page select.ui-input, .ui-textarea {
  width: 100%; min-height: 38px; padding: 6px 12px; border: 1px solid var(--ui-control); border-radius: 6px;
  background: #fff; font: inherit; color: var(--ui-text);
}
.ui-textarea { min-height: 120px; padding: 10px 12px; font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; resize: vertical; }
.ui-input:focus, .ui-textarea:focus { outline: 2px solid #8fb4d9; outline-offset: 0; border-color: var(--ui-primary); }
.ui-check { display: flex; align-items: flex-start; gap: 8px; }
.ui-check input { margin-top: 3px; }
.ui-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ui-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---- Notes ---- */
.ui-note { padding: 12px 16px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-tint); font-size: 14px; color: #3d4852; }
.ui-note-ok { border-color: #c8dfc0; background: #eef7ea; color: #2f5f2f; }
.ui-note-warn { border-color: #ecdcae; background: #fcf8e3; color: #6b5427; }
.ui-note-bad { border-color: #e7c3c0; background: #fbeeec; color: #8a2f2c; }
.ui-empty { padding: 28px 22px; text-align: center; color: var(--ui-muted); }

/* ---- Tabs (links or buttons) ---- */
.ui-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid var(--ui-soft-line); }
.ui-tabs > a, .ui-tabs > button {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ui-muted) !important; font: inherit;
  text-decoration: none !important; cursor: pointer;
}
.ui-tabs > [aria-current], .ui-tabs > [aria-selected="true"] { border-bottom-color: var(--ui-primary); color: var(--ui-text) !important; font-weight: bold; }
.ui-count { padding: 0 6px; border-radius: 9px; background: var(--ui-chip); font-size: 12px; font-weight: normal; color: #3d4852; }

/* ---- Tables ---- */
.ui-table-wrap { position: relative; overflow-x: auto; }  /* keeps hidden .ui-sr labels from widening the page */
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th { padding: 10px 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-tint-2); text-align: left; font-size: 12px; font-weight: bold; color: var(--ui-muted); white-space: nowrap; }
.ui-table td { padding: 10px 14px; border-bottom: 1px solid var(--ui-soft-line); vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-num { text-align: right !important; font-variant-numeric: tabular-nums; }

/* ---- World cards (partials/world-card.html) in a grid (partials/world-list.html, home tabs) ---- */
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 18px 22px; }
.ui-wcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff;
  border: 1px solid var(--ui-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.ui-wcard:hover { border-color: #b7c4d1; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.ui-wcard-pic { display: block; aspect-ratio: 16 / 10; background: #1c1c1c; overflow: hidden; }
.ui-wcard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-wcard-nopic { display: flex; align-items: center; justify-content: center; background: #e9eef3 url('/assets/minecraft-logo-icon.png') no-repeat center 38% / 32px auto; image-rendering: pixelated; }
.ui-wcard-nopic span { margin-top: 58px; font-size: 12px; color: #4f5a66; }
.ui-wcard-nopic, .ui-wcard-nopic:hover, .ui-wcard-nopic:focus { text-decoration: none !important; }
.ui-wcard-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; min-width: 0; }
.ui-wcard-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 15px; font-weight: bold; }
.ui-wcard-title a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text) !important; }
.ui-wcard-title small { flex: none; font-weight: normal; font-size: 12px; color: var(--ui-muted); }
.ui-wcard-by { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.ui-wcard-by img { width: 16px; height: 16px; border-radius: 2px; image-rendering: pixelated; flex: none; }
.ui-wcard-by a, .ui-wcard-by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wcard-stats { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--ui-muted); }
.ui-wcard-stats b { color: #333; }
.ui-wcard-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.ui-wcard-top { padding: 8px 12px 0; }

/* ---- Pagination (partials/pagination.html; search.js rebuilds its <li> items) ---- */
.ui-pager { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-pager li a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--ui-control); border-radius: 6px; background: #fff; color: #333 !important;
  text-decoration: none !important;
}
.ui-pager li a:hover { background: #eef2f6; }
.ui-pager li.active a { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff !important; font-weight: bold; }
.ui-pager li.disabled a { opacity: .45; pointer-events: none; }

/* ---- Lists of rows (account worlds, admin queue, upload list, comments, forum rows): one row per item ---- */
.ui-list { margin: 0; padding: 0; list-style: none; }
.ui-list > .ui-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 22px; border-top: 1px solid var(--ui-soft-line); min-width: 0; }
.ui-list > .ui-item:first-child { border-top: 0; }
.ui-item-main { flex: 999 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-item-side { flex: 1 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* ---- Link cards (a grid of places to go: home, archive, people, info) ---- */
.ui-linkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ui-linkcard {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 8px;
  background: #fff; color: #333 !important; text-decoration: none !important;
}
.ui-linkcard:hover { border-color: #b7c4d1; background: var(--ui-tint); }
.ui-linkcard > b, .ui-linkcard > strong { color: var(--ui-link); font-size: 15px; }
.ui-linkcard > span { font-size: 13px; color: var(--ui-muted); }

/* ---- Meter (progress bars: archive progress, uploads) ---- */
.ui-meter { height: 10px; border-radius: 5px; background: var(--ui-chip); overflow: hidden; }
.ui-meter > span { display: block; height: 100%; border-radius: 5px; background: var(--ui-go); }

/* ---- Map box (the world page, home, user pages; world-map.js fills #world_map) ---- */
#world_map { background: #1a1a1a; overflow: hidden; }
.ui-map { position: relative; height: 460px; overflow: hidden; background: #1c1c1c; border: 1px solid #2c3a2c; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ui-map > #world_map { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border: 0; }
.ui-map-tools { position: absolute; top: 12px; right: 12px; z-index: 800; display: flex; gap: 8px; }
.ui-map-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px;
  background: rgba(244, 244, 244, .92); color: #333 !important; font-size: 13px; text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer;
}
.ui-map-btn:hover { background: #fff; }

/* ---- Phones ---- */
@media (max-width: 600px) {
  /* Cards reach 12 px from the screen's edges, in line with the header's logo (frame.css). */
  #all_content:has(> .ui-page) { padding-left: 0; padding-right: 0; }
  .ui-page { margin-top: 10px; padding: 0 12px; gap: 12px; }
  .ui-page h1 { font-size: 24px; }
  .ui-head, .ui-pad, .ui-card > .ui-card-body { padding: 14px 16px; }
  .ui-card > .ui-card-head, .ui-card > .ui-card-foot { padding: 12px 16px; }
  .ui-head-actions { justify-content: stretch; }
  .ui-head-actions > .ui-btn { flex: 1 1 auto; }
  .ui-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-stats > div { padding: 10px 16px; border-bottom: 1px solid var(--ui-soft-line); }
  .ui-stats > div:nth-child(2n) { border-right: 0; }
  .ui-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .ui-wcard-desc { display: none; }
  .ui-cols > .ui-menu-col { max-width: none; flex-basis: 100%; }
  .ui-menu { flex-direction: row; overflow-x: auto; }
  .ui-menu a { flex: none; }
  .ui-menu-title { display: none; }
  .ui-map { height: 300px; }
  .ui-list > .ui-item { padding: 12px 16px; }
  /* Long pagers: «, the first and last page, the current one and its neighbours, » (search.js keeps the same items). */
  .ui-pager li:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)):not(.active + li):not(:has(+ .active)) { display: none; }
  .ui-pager li a { min-width: 40px; height: 40px; }
}

/* ---- Plot-owner search (partials/plot-search.html): on the server worlds page and Creative Archive 1.8's world page ---- */
.plot-search-field { flex: 1 1 240px; max-width: 420px; }
.plot-search-go { align-self: flex-end; }