/* The site's own look (owner 2026-10-25; first mockup https://claude.ai/artifact/SykNSrAZuxtvAiVgvG4a1Y, then shaped
   with the owner in the preview): full-width pages beside a side menu, on a calm warm page with the Minecraft sky and
   grass at its top; cards that sit on it like blocks; stone and grass buttons like Minecraft's own menus. Loaded on
   every page after frame.css. Every rule is under .ui-page, starts with ui- or belongs to the app shell and side
   menu, so the original Bootstrap and style.css (still loaded for the header's navbar and the forum's MyBB pages) do
   not leak in. Page groups keep what only they use in their own file (world.css, home.css, people.css, info.css,
   account.css, forum-pages.css, upload.css); everything shared is here, each part defined once.

   Sections: 1 tokens · 2 base and type · 3 app shell and side menu · 4 cards and layout · 5 page head, stats, details,
   chips · 6 buttons and the shared choice button · 7 fields · 8 notes · 9 tables, lists of rows, link cards, meter ·
   10 world lists (grid, toolbar, find, sort menu, show more) · 11 world card · 12 pager · 13 map box · 14 toast ·
   15 tablets and phones. */

/* ---- 1. Tokens ---- */
:root {
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-pixel: "Pixelify Sans", var(--ui-font);  /* the blocky face: headings only (its "C" reads as "O" and "2" as "8" when small) */
  --ui-line: #e3e8ee; --ui-soft-line: #e9edf1; --ui-tint: #f4f7fa; --ui-tint-2: #f8fafc; --ui-text: #222;
  --ui-muted: #4a5560;  /* 4.5:1 also on the frosted panels over the darkest ground */
  --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;
  /* the page behind the cards: the Minecraft ground of frame.css shows through (owner 2026-10-25: "I liked the blocky
     background"); the panels on it are frosted glass (--ui-frost, owner: "try frosted glass"; .92 white where the
     browser cannot blur), the world cards solid white (--ui-surface) for readable names and clean pictures */
  --ui-page-bg: transparent;
  /* a dark layer over the stone behind the content, like Minecraft's settings screens (owner 2026-10-25: "maybe add
     a blackish tint"); the sky, grass and dirt at the top stay untinted */
  --ui-ground-tint: rgba(0, 0, 0, .25);
  --ui-surface: #fff;
  --ui-frost: rgba(255, 255, 255, .8);
  --ui-hover: #eef2f6;  /* a row's highlight inside a card or panel (section 9) */
  /* menus (the side menu, .ui-menu, the header's current item and its menus): the hover and the current page, green */
  --ui-menu-hover: #eef3ea; --ui-current: #e4f2dc; --ui-current-text: #1c4d1f;
  /* cards sit on the page like blocks: a dark edge, a light inner top edge, a solid shadow under them */
  --ui-block-edge: #2b2b2b;
  --ui-block-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 5px 0 rgba(0, 0, 0, .35), 0 10px 20px rgba(0, 0, 0, .18);
  --ui-block-shadow-up: inset 0 2px 0 rgba(255, 255, 255, .7), 0 8px 0 rgba(0, 0, 0, .35), 0 16px 26px rgba(0, 0, 0, .22);
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .10);
  --ui-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .16);
  --ui-radius: 12px;
  --ui-width: 1680px;  /* every page uses the width beside the side menu (owner 2026-10-25: "the inner screens are still pinched") */
  --ui-side: 300px;    /* a page's side column; the featured map's details use the same, so edges line up */
}
@font-face { font-family: "Pixelify Sans"; src: url("/assets/vendor/pixelify-sans-3/pixelify-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: block; }  /* SIL Open Font License, site/assets/vendor/pixelify-sans-3/OFL.txt */

/* ---- 2. Base and type (owner 2026-10-25: three heading sizes, page 32, sections 20, item titles 14) ---- */
.ui-page {
  max-width: var(--ui-width); box-sizing: border-box; margin: 18px auto 36px; padding: 0 28px;
  display: flex; flex-direction: column; gap: 22px;
  font: 14px/1.45 var(--ui-font); color: #333;
}
.ui-page.ui-wide { max-width: 2100px; padding: 0 28px; }
.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; color: var(--ui-text); }
.ui-page h1, .ui-page h2 { font-family: var(--ui-pixel); font-weight: 600; letter-spacing: .01em; }
.ui-page h3 { font-family: inherit; font-weight: 600; letter-spacing: -.01em; }
.ui-page h1 { font-size: 32px; line-height: 1.15; overflow-wrap: anywhere; }
.ui-page h2 { font-size: 20px; line-height: 1.3; }
.ui-page h3 { font-size: 14px; line-height: 1.3; }
/* a grass block before section headings (owner: "we're lacking minecraft feel"); not before the featured world's name */
.ui-page h2:not(.ui-sr)::before { content: ""; display: inline-block; width: 20px; height: 18px; margin-right: 10px; vertical-align: -2px;
  background: url("/assets/grass-block.svg") no-repeat center / contain; image-rendering: pixelated; }
.ui-page .world-hero-info h2 { font-family: var(--ui-font); }
.ui-page .world-hero-info h2::before { content: none; }
.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; }  /* !important: wins over any display rule of the element it hides */

/* ---- 3. App shell and side menu (owner 2026-10-25: "things look too narrow", full width with a side menu) ----
   The page sits on --ui-page-bg over the ground (frame.css: sky, grass, stone with ores, bedrock in the footer); the
   stone is darkened by --ui-ground-tint from where the dirt ends (384 px down the ground, less the 61 px header).
   Text that sits right on the ground is white with a shadow. */
.app-shell { min-height: calc(100vh - 61px);
  background: linear-gradient(var(--ui-ground-tint), var(--ui-ground-tint)) 0 323px / 100% 100% no-repeat, var(--ui-page-bg); }
.ui-wide .ui-more-page, .ui-wide [data-world-list] > .ui-card-foot { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); }  /* !important: over .ui-page a */
.app-main { min-width: 0; }
.site-side { display: none; }
.site-side-group { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid #eceff3; }
.site-side-group:last-child { border-bottom: 0; }
.site-side-group[hidden] { display: none; }
/* text hierarchy (owner: "sidebar too blocky, and no text hierarchy"): small grey group labels over plain links */
/* small grey labels over plain links; the same in every popup (section 9b) */
.site-side .site-side-head, .site-nav .dropdown-menu > .dropdown-header, .site-suggest-head {
  margin: 10px 12px 4px; padding: 0; font: 700 11px var(--ui-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); }
.site-side a { display: flex; align-items: center; gap: 16px; min-height: 38px; padding: 0 12px; border-radius: 10px;
  color: #1f2933; font-size: 14px; font-weight: 400; text-decoration: none; }
.site-side a .ui-icon { width: 20px; height: 20px; color: #4a5560; }
.site-side a:hover { background: var(--ui-menu-hover); color: #1f2933; text-decoration: none; }
.site-side a[aria-current] { background: var(--ui-current); color: var(--ui-current-text); font-weight: 700; }
.site-side a[aria-current] .ui-icon, .site-side a:hover .ui-icon { color: #2e7d32; }
/* About, Help, the render queue: one small line of plain links at the foot */
.site-side .site-side-foot { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--ui-muted); }
.site-side .site-side-foot a { display: inline; min-height: 0; white-space: nowrap; padding: 0; border-radius: 0; color: var(--ui-muted); font-size: 12px; }
.site-side .site-side-foot a:hover { background: none; color: #1f2933; text-decoration: underline; }
/* it scrolls only when the window is too short for it, with no visible scrollbar (owner: "scrollbar areas have corners") */
.site-side { scrollbar-width: none; }
.site-side::-webkit-scrollbar { display: none; }

/* ---- 4. Cards and layout ----
   .ui-card: a block on the page (owner: "keep it minecrafty feel"). The edge and shadow are !important because some
   page-group files give their cards a border of their own; the block look wins everywhere. A card clips its contents
   to its round corners. A wrapper that only groups cards (.ui-wide's world list, the home lists) has no frame, border
   or background; it and the toolbar (its Sort menu opens out of it) do not clip. */
.ui-card {
  min-width: 0; overflow: hidden; background-color: var(--ui-frost); border: 2px solid var(--ui-block-edge) !important;
  border-radius: var(--ui-radius); box-shadow: var(--ui-block-shadow) !important;
}
.ui-card, .site-side { -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --ui-frost: rgba(255, 255, 255, .92); } }
.ui-wide .home-worlds, .ui-wide [data-world-list].ui-card { background: none; border: 0 !important; border-radius: 0; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.ui-wide .home-worlds, [data-world-list].ui-card, .ui-card.ui-toolbar { overflow: visible; }
.ui-card.ui-toolbar { position: relative; z-index: 5; }  /* its Sort menu opens over the cards below */
.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 #eef1f5;
}
.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: 22px; }
.ui-cols > .ui-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ui-cols > .ui-side { flex: 1 1 290px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* 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: 10px;
  color: #333 !important; font-weight: 500; text-decoration: none !important;
}
.ui-menu a:hover { background: var(--ui-menu-hover); }
.ui-menu a[aria-current] { background: var(--ui-current); color: var(--ui-current-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; }

/* ---- 5. Page head, stat strip, details, chips ---- */
.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 calc(var(--ui-radius) - 2px) calc(var(--ui-radius) - 2px);
}
.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 (green only for main actions; status chips keep a soft colour) */
.ui-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ui-chip); color: #3d4852; font-size: 13px; font-weight: 600; }
.ui-chip-warm { background: var(--ui-warm-bg); color: var(--ui-warm); }
.ui-chip-go { background: #e6f0e6; color: #2b5a2b; }
.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: 999px; background: var(--ui-tag-bg); color: var(--ui-tag) !important; font-size: 13px; font-weight: 600; }

/* ---- 6. Buttons (owner 2026-10-25: like Minecraft's menu buttons): stone with a raised edge and shadowed white text;
   grass-green for the main action of a view; red to remove; ghost buttons stay flat. The header's buttons
   (frame.css .site-btn, the bell, the search button) share the look; each keeps its own size. ---- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  font: inherit; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
.ui-btn, .site-btn, .site-bell-btn, .site-search .btn, .ui-map-btn, #world_map .leaflet-control-zoom a, #world_map .map-panel button,
.site-nav .navbar-toggle, .ui-page input[type="file"]::file-selector-button {
  border: 2px solid #1e1e1e; border-radius: 8px; background: linear-gradient(#8b8b8b, #6f6f6f);
  color: #fff !important;  /* !important: over .ui-page a, which is more specific for link buttons */
  text-shadow: 2px 2px 0 #3a3a3a; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -3px 0 rgba(0, 0, 0, .35);
  text-decoration: none;
}
.ui-btn:hover, .ui-btn:focus, .site-btn:hover, .site-btn:focus, .ui-map-btn:hover, .ui-map-btn:focus { text-decoration: none; }
.ui-btn:hover, .site-btn:hover, .site-bell-btn:hover, .site-bell.open .site-bell-btn, .site-search .btn:hover, .ui-map-btn:hover,
#world_map .leaflet-control-zoom a:hover, #world_map .map-panel button:hover,
.site-nav .navbar-toggle:hover, .site-nav .navbar-toggle:focus, .ui-page input[type="file"]::file-selector-button:hover {
  border-color: #fff; background: linear-gradient(#9a9fd8, #7e85c9); transform: none;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -3px 0 rgba(0, 0, 0, .35);
}
.ui-btn:active { transform: translateY(0); box-shadow: inset 2px 3px 0 rgba(0, 0, 0, .35); }
.ui-btn-go, .ui-btn-primary, .site-btn-primary, #world_map .map-panel .map-go { background: linear-gradient(#6cbf45, #4a9a2c); text-shadow: 2px 2px 0 #2c5a1a; }
.ui-btn-go:hover, .ui-btn-primary:hover, .site-btn-primary:hover, #world_map .map-panel .map-go:hover { background: linear-gradient(#7fd257, #56ad35); }
.ui-btn-danger { background: linear-gradient(#c0504d, #9b2c22); text-shadow: 2px 2px 0 #5a1612; }
.ui-btn-lg { min-height: 44px; }
/* ghost: a quiet button, the small light stone of the choices below (.ui-pills), for minor actions in a row (a post's
   Posts, Quote, Edit; Cancel; Mark all as read) */
.ui-btn-ghost { min-height: 32px; padding: 0 12px; background: linear-gradient(#a0a0a0, #848484); text-shadow: 1px 1px 0 #3a3a3a;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -2px 0 rgba(0, 0, 0, .3); font-size: 13px; }
.ui-btn[aria-disabled="true"], .ui-btn:disabled { opacity: .55; cursor: default; pointer-events: none; }
.ui-btn .ui-btn-note { font-weight: normal; opacity: .85; }
/* The one shared choice button (owner: "make sure it's shared"): every tab row (.ui-tabs) and every row of choices
   (.ui-pills) are small stone buttons, the chosen one dark stone; no line under the row. */
.ui-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 14px 22px 4px; }
.ui-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-tabs > a, .ui-tabs > button, .ui-pills a, .tp-tool {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px;
  border: 2px solid #1e1e1e; border-radius: 8px; background: linear-gradient(#a0a0a0, #848484); color: #fff !important;
  text-shadow: 1px 1px 0 #3a3a3a; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -2px 0 rgba(0, 0, 0, .3);
  font: 600 14px var(--ui-font); text-decoration: none !important; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.ui-pills a, .tp-tool { min-height: 32px; font-size: 13px; }
.ui-tabs > a:hover, .ui-tabs > button:hover, .ui-pills a:hover, .tp-tool:hover { border-color: #fff; background: linear-gradient(#9a9fd8, #7e85c9); }
.ui-tabs > [aria-current], .ui-tabs > [aria-selected="true"], .ui-pills a[aria-current] {
  border-color: #111; background: linear-gradient(#4a4a4a, #333);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .4);
}
.ui-count { padding: 0 6px; border-radius: 9px; background: var(--ui-chip); font-size: 12px; font-weight: normal; color: #3d4852; }
.ui-page :is(h1, h2) :is(.ui-count, .ui-chip) { font-family: var(--ui-font); letter-spacing: normal; vertical-align: 2px; }

/* ---- 7. Fields: flat and white with the same dark edge as the cards and buttons (owner 2026-10-25: the inset bevel
   "looks sunk in"); focus: the hover blue edge and a soft glow. The header's search box (frame.css) shares it. ---- */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field > label, .ui-page .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: 40px; padding: 6px 12px; font: inherit; color: var(--ui-text); }
.ui-input, .ui-textarea, .site-search .form-control {
  border: 2px solid var(--ui-block-edge); border-radius: 8px; background: #fff; box-shadow: none; }
.ui-input:focus, .ui-textarea:focus, .site-search .form-control:focus {
  border-color: #7e85c9; outline: none; box-shadow: 0 0 0 3px rgba(126, 133, 201, .35); }
.ui-textarea { min-height: 120px; padding: 10px 12px; font: 15px/1.5 var(--ui-font); resize: vertical; }
/* a file field's button: a stone button (section 6) */
.ui-page input[type="file"]::file-selector-button { min-height: 36px; margin-right: 10px; padding: 0 14px; font: 600 14px var(--ui-font); cursor: pointer; }
.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; }

/* ---- 8. Notes and empty states ---- */
.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); }

/* ---- 9. Tables, lists of rows, link cards, meter, plot search ---- */
.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-card > .ui-table-wrap .ui-table :is(th, td):first-child { padding-left: var(--ui-pad-x); }
.ui-card > .ui-table-wrap .ui-table :is(th, td):last-child { padding-right: var(--ui-pad-x); }
.ui-num { text-align: right !important; font-variant-numeric: tabular-nums; }  /* !important: over a table's own td alignment */
/* 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; }
/* A row's hover inside a card or panel (owner 2026-10-25: "hovers aren't round as well"): a rounded shape inset from
   the card's edges, never a full-width band. Rows with lines between them draw it under their content (::before); menu
   items in a popup are inset by a margin (the header menus, the bell list, the search suggestions: frame.css); the
   side menu, .ui-menu and .ui-pick are inset by their own padding. */
a.ui-item, .home-link, .info-q > summary, .tp-nav-link { position: relative; isolation: isolate; }
a.ui-item::before, .home-link::before, .info-q > summary::before, .tp-nav-link::before {
  content: ""; position: absolute; inset: 3px 8px; z-index: -1; border-radius: 10px; }
a.ui-item:hover::before, .home-link:hover::before, .info-q > summary:hover::before, .tp-nav-link:hover::before { background: var(--ui-hover); }
.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: 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: 2px solid var(--ui-block-edge); border-radius: var(--ui-radius);
  background: var(--ui-surface); box-shadow: var(--ui-block-shadow); color: #333 !important; text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
}
.ui-linkcard:hover { transform: translateY(-3px); box-shadow: var(--ui-block-shadow-up); }
.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); }
/* plot-owner search (partials/plot-search.html): the server worlds page and Creative Archive 1.8's world page */
/* the status line and the results take no room until the script fills them (the status stays a live region) */
#plot-search-status:empty { position: absolute; }
#plot-search-results:empty { display: none; }

/* ---- 9b. Popups (owner 2026-10-25: "are all the popups consistent with our theme?"): the header's menus, the bell
   panel, the search suggestions and the Sort menu are frosted panels with the block edge, 6 px inside; their items
   take the shared inset hover. The advancement toast (section 14) stays dark on purpose. Each keeps its own place and
   size (frame.css, section 10). ---- */
.site-nav .dropdown-menu, .site-nav .navbar-nav > li > .dropdown-menu, .site-bell-panel, .site-suggest, .ui-pick ul {
  padding: 6px; background-color: rgba(255, 255, 255, .94);  /* more opaque than a panel: inside a frosted card (the Sort menu) it cannot blur */
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border: 2px solid var(--ui-block-edge); border-radius: var(--ui-radius); box-shadow: var(--ui-block-shadow);
}
.site-nav .dropdown-menu > li > a, .site-bell-list a, .site-suggest-item a, .ui-pick li a { margin: 0; border-radius: 8px; }
.site-nav .dropdown-menu > li > a:hover, .site-nav .dropdown-menu > li > a:focus, .site-bell-list a:hover, .site-suggest-item a:hover,
.site-suggest-item.active a, .ui-pick li a:hover { background: var(--ui-hover); }
.site-nav .dropdown-menu > .active > a, .site-nav .dropdown-menu > .active > a:hover, .site-nav .dropdown-menu > .active > a:focus {
  background: var(--ui-current); color: var(--ui-current-text); font-weight: 600; }

/* ---- 10. World lists (owner 2026-10-25: "shared styles across the entire site rather than one-offs"):
   .ui-grid of world cards; .ui-toolbar above a list (its name and count, the find box, the sort menu, Upload, the
   category choices) right on the page; .ui-find a find box; .ui-pick a menu of links (<details>); .ui-more "Show
   more" under a list, which hides the page numbers once it works (list-more.js). ---- */
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; padding: var(--ui-pad-x); }
.ui-wide .ui-grid, .ui-wide .home-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 18px; padding: 0; }
.ui-wide [data-world-list] > .ui-card-foot { border-top: 0; padding: 18px 0; }
.ui-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px; }
.ui-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ui-toolbar-title { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; }
.ui-page .ui-toolbar-title h1 { font-size: 24px; }
.ui-toolbar-title .ui-muted { white-space: nowrap; font-size: 14px; }
.ui-find { flex: 0 1 260px; margin: 0; }
.ui-find .ui-input { min-height: 38px; }
.ui-pick-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.ui-pick { position: relative; }
.ui-pick summary { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid #d9e0e8;
  border-radius: 10px; background: #fff; cursor: pointer; list-style: none; font-size: 14px; }
.ui-pick summary:hover { border-color: #9fb0c1; background: #e6ecf2; }
.ui-pick summary::-webkit-details-marker { display: none; }
.ui-pick summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid #5d6874;
  border-bottom: 2px solid #5d6874; transform: rotate(45deg) translateY(-2px); }
.ui-pick ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 950; min-width: 200px; margin: 0; list-style: none; }  /* a popup (9b) */
.ui-pick li a { display: block; padding: 8px 12px; color: #333 !important; text-decoration: none !important; }
.ui-pick li a[aria-current] { font-weight: 600; background: #eaf2fb; }
.ui-more { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 22px 22px; }
.ui-wide .ui-more { padding: 18px 0 8px; }
.ui-more .ui-btn { min-width: 220px; }
.ui-more-page { font-size: 13px; color: var(--ui-muted); }
[data-world-list].has-more > .ui-card-foot { display: none; }

/* ---- 11. World card (partials/world-card.html; owner 2026-10-25: picture first, "where's the actual cards", "should
   this information be a part of the photo?"): a block card with the picture across its top; on the picture two
   matching dark badges, the downloads and age bottom left, the size bottom right; under it the uploader's square
   pixel head, the world's name and the player's name, one line each (full name on hover), so every card's foot is
   the same compact height (owner: "lots of whitespace at the bottom of the card"). It lifts a little on hover. ---- */
.ui-wcard {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--ui-surface); border: 2px solid var(--ui-block-edge); border-radius: var(--ui-radius); box-shadow: var(--ui-block-shadow);
  transition: transform .15s, box-shadow .15s;
}
.ui-wcard:hover { transform: translateY(-3px); box-shadow: var(--ui-block-shadow-up); }
.ui-wcard-pic { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1c1c1c; border-bottom: 2px solid var(--ui-block-edge); }
.ui-wcard-link { position: absolute; inset: 0; display: block; }
.ui-wcard-link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-wcard-block { position: absolute; inset: 0; background: url("/assets/grass-block.svg") no-repeat center 40% / 72px auto,
  linear-gradient(160deg, #6f8f5a, #4a5d3c 55%, #3a3328); image-rendering: pixelated; }
/* The picture's three corners (owner 2026-10-26, mockup option C2): downloads top left, size top right, the heart
   button bottom right; one height, each with its icon. */
.ui-wcard-chip, .ui-wcard-heart { position: absolute; display: inline-flex; align-items: center; gap: 5px; height: 26px;
  box-sizing: border-box; margin: 0; padding: 0 8px; border-radius: 6px; background: rgba(15, 18, 22, .78); color: #fff;
  font: 700 12px/1 var(--ui-font); white-space: nowrap; }
.ui-wcard-chip { top: 8px; pointer-events: none; }
.ui-wcard-chip .ui-icon { width: 12px; height: 12px; flex: none; }
.ui-wcard-dl { left: 8px; }
.ui-wcard-size { right: 8px; }
.ui-wcard-heart { right: 8px; bottom: 8px; height: 30px; padding: 0 10px 0 9px; gap: 6px; border: 2px solid #1e1e1e;
  border-radius: 999px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.ui-wcard-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ui-wcard-head { flex: none; width: 36px; height: 36px; border-radius: 6px; image-rendering: pixelated; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3); }
.ui-wcard-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-page .ui-wcard .ui-wcard-title { margin: 0; font: 600 16px/1.3 var(--ui-font); letter-spacing: -.01em; }
.ui-page .ui-wcard .ui-wcard-title::before { content: none; }
.ui-wcard-title a, .ui-wcard-by { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-wcard-title a { color: #0f1720 !important; }
.ui-wcard-by { min-width: 0; font-size: 14px; line-height: 1.3; color: #5d6874; }
.ui-wcard-by a { color: #5d6874 !important; }
.ui-wcard-by a:hover { color: #0f1720 !important; }
.ui-wcard-top { padding: 8px 12px 0; }

/* ---- 12. Pager (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: 10px; background: #fff; color: #333 !important;
  text-decoration: none !important;
}
.ui-pager li a:hover { border-color: #9fb0c1; background: #e6ecf2; }
.ui-pager li.active a { border-color: var(--ui-primary); background: var(--ui-primary); color: #fff !important; font-weight: bold; }
.ui-pager li.active a:hover { background: #1d4b72; }
.ui-pager li.disabled a { opacity: .45; pointer-events: none; }

/* ---- 13. 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: 2px solid var(--ui-block-edge); border-radius: var(--ui-radius); box-shadow: var(--ui-block-shadow); }
.ui-map > #world_map { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border: 0; }
/* a saved picture fills the box, no black bars (owner 2026-10-25); over world.css's centred picture */
.ui-map > #world_map > img, .ui-map.ui-map-still > #world_map > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.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; font-size: 13px; font-weight: 600; cursor: pointer; }  /* stone: section 6 */

/* ---- 14. Toast: an advancement-style pop-up (site/scripts/toast.js) ---- */
.mc-toast { position: fixed; top: 76px; right: 18px; z-index: 2000; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: 360px;
  padding: 10px 14px; background: #212121; border: 2px solid #555; outline: 2px solid #0b0b0b; border-radius: 4px; color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-family: var(--ui-font); transform: translateX(120%); transition: transform .25s ease; }
.mc-toast.on { transform: none; }
.mc-toast img { flex: none; width: 32px; height: 30px; image-rendering: pixelated; }
.mc-toast b { display: block; color: #ffff55; font: 700 14px var(--ui-font); }
.mc-toast span { font-size: 13px; color: #eee; }

/* ---- 15. Wide screens, tablets, phones, motion ---- */
@media (min-width: 900px) {
  .ui-cols { flex-wrap: nowrap; }
  .ui-cols > .ui-side { flex: 0 0 var(--ui-side); width: var(--ui-side); }
}
@media (min-width: 1100px) {
  .app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
  /* a card like the others (owner: "does this look off?"): the block edge and shadow */
  /* top and bottom margins as the page's (.ui-page), so at the end of the page it ends on the content's line
     (owner: "sidebar stops below bottom cards") */
  .site-side { display: block; position: sticky; top: 79px; align-self: start; max-height: calc(100vh - 61px - 18px - 36px); margin: 18px 0 36px 14px;
    padding: 12px; overflow-y: auto; font-family: var(--ui-font); background-color: var(--ui-frost);
    border: 2px solid var(--ui-block-edge); border-radius: var(--ui-radius); box-shadow: var(--ui-block-shadow); }
}
@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, .ui-page.ui-wide { padding: 0 12px; }
  .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 { flex-basis: 100%; 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, .ui-wide .ui-grid, .ui-wide .home-grid { grid-template-columns: 1fr; }
  .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; }
  .ui-pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .ui-pills a { flex: none; }
  .ui-toolbar-title { width: 100%; }
  .ui-find { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-btn, .ui-wcard, .ui-linkcard, .mc-toast { transition: none; }
  .ui-btn:hover, .ui-wcard:hover, .ui-linkcard:hover { transform: none; }
}
/* One hover for everything you can press (owner 2026-10-25: white on some hovers, blue on others looked inconsistent):
   the pager, the Sort menu's button and ghost buttons are stone buttons too, and every pressable thing hovers the
   Minecraft way: the blue highlight with a white edge. */
.ui-pager li a, .ui-pick summary, .ui-page select.ui-pick-select {
  border: 2px solid #1e1e1e; border-radius: 8px; background: linear-gradient(#8b8b8b, #6f6f6f); color: #fff !important;
  text-shadow: 2px 2px 0 #3a3a3a; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -2px -3px 0 rgba(0, 0, 0, .35);
}
.ui-pick summary .ui-pick-label { color: #e8e8e8; }
.ui-pick summary::after { border-color: #fff; }
.ui-pager li.active a { background: linear-gradient(#6cbf45, #4a9a2c); text-shadow: 2px 2px 0 #2c5a1a; }
.ui-pager li a:hover, .ui-pick summary:hover, .ui-pick[open] summary, .ui-btn-ghost:hover {
  border-color: #fff; background: linear-gradient(#9a9fd8, #7e85c9); color: #fff !important; text-shadow: 2px 2px 0 #3a3a3a;
}
/* A native menu that a script reads (the search page's Sort: search.js) dressed as the Sort menu's stone button. */
.ui-page select.ui-pick-select { min-height: 40px; padding: 0 34px 0 12px; font: 600 14px var(--ui-font); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"), linear-gradient(#8b8b8b, #6f6f6f);
  background-repeat: no-repeat; background-position: right 12px center, 0 0; }
.ui-page select.ui-pick-select:hover, .ui-page select.ui-pick-select:focus { border-color: #fff; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"), linear-gradient(#9a9fd8, #7e85c9); }
.ui-page select.ui-pick-select option { color: #333; background: #fff; text-shadow: none; }
.ui-toolbar-end { display: flex; flex: 1 1 240px; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; margin-left: auto; }
.ui-toolbar-end .ui-find { min-width: 140px; }  /* shrinks before it drops under the categories */
.ui-toolbar-row .ui-pills { flex: 0 1 auto; }
@media (max-width: 600px) { .ui-toolbar-end { width: 100%; margin-left: 0; } .ui-toolbar-end .ui-find { flex: 1 1 auto; } }
/* ---- One spacing for every section (owner 2026-10-25: "too much margin, can this just be consistent across the
   board, each section"): text 22 px in from a card's sides and 18 px from its top; a row's hover shape 8 px in from
   the sides, and the same 8 px from the bottom of a card that ends with a list. ---- */
:root { --ui-pad-x: 22px; --ui-pad-y: 18px; --ui-inset: 8px; --ui-list-end: calc(var(--ui-inset) - 3px); }
.ui-pad, .ui-card > .ui-card-body { padding: var(--ui-pad-y) var(--ui-pad-x); }
.ui-card > .ui-card-head { padding: var(--ui-pad-y) var(--ui-pad-x) 12px; }
.ui-card:has(> .ui-list:last-child) { padding-bottom: var(--ui-list-end); }
.ui-list > .ui-item { padding: 12px var(--ui-pad-x); }
.site-side { padding: var(--ui-inset); }
@media (max-width: 600px) { :root { --ui-pad-x: 16px; --ui-pad-y: 14px; } }
/* "Show more" stands apart from the cards (owner 2026-10-25: "sitting too close to the cards"): the same gap above it
   as between sections, and room under the page note. */
.ui-more, .ui-wide .ui-more { padding: 34px 0 18px; }
/* The find box (owner 2026-10-25: "should Find a world be bigger?"): room for about 27 characters (~300 px, the usual
   guidance), the same height as the stone buttons beside it, a magnifier inside so it reads as search. */
.ui-find { flex: 0 1 300px; width: 300px; position: relative; }
.ui-find .ui-input { min-height: 0; height: 40px; padding-left: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d6874' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center; }
.ui-pick summary { min-height: 40px; }
@media (max-width: 600px) { .ui-find { width: auto; flex: 1 1 160px; } }  /* a button beside it stays on its row */
/* A side column with nothing in it takes no room: the main column (comments, about) spans the page like the map above
   it (owner 2026-10-26: "comments are not the same width"). */
.ui-cols > .ui-side:not(:has(> *)) { display: none; }
.ui-cols:not(:has(> .ui-side > *)) > .ui-main { flex-basis: 100%; }
/* A pager with one page has nothing to choose: hidden (the markup stays for search.js to rebuild). */
.ui-pager:not(:has(li:nth-child(4))) { display: none; }
nav:has(> .ui-pager:not(:has(li:nth-child(4)))) { display: none; }

/* ---- Three button sizes for the whole site (owner 2026-10-26: "are the buttons all consistent and same size?") ----
   large 44 px, the one main action of a view (Download, Register, Post, Upload on its own page);
   normal 40 px, every other button (page buttons, the header's buttons and search button, the Sort menu);
   small 32 px, choices and map controls (tabs, pills, page numbers, Go, Copy, zoom, the map's tool buttons).
   Text 14 px semibold (13 px on small); the large one 15 px bold. */
:root { --ui-btn-lg: 44px; --ui-btn: 40px; --ui-btn-sm: 32px; }
.ui-btn, .site-btn, .site-bell-btn, .site-search .btn, .ui-pick summary { min-height: var(--ui-btn); height: var(--ui-btn); font-size: 14px; font-weight: 600; }
.site-search .form-control { height: var(--ui-btn); }
.site-bell-btn { width: var(--ui-btn); }
.ui-btn-lg { min-height: var(--ui-btn-lg); height: var(--ui-btn-lg); padding: 0 20px; font-size: 15px; font-weight: 700; }
.ui-tabs > a, .ui-tabs > button, .ui-pills a, .ui-pager li a, .ui-map-btn, #world_map .map-panel button,
#world_map .leaflet-control-zoom a, html.world-full .full-bar .ui-btn {
  min-height: var(--ui-btn-sm); height: var(--ui-btn-sm); font-size: 13px; font-weight: 600; }
.ui-pager li a { min-width: var(--ui-btn-sm); }
#world_map .leaflet-control-zoom a { width: var(--ui-btn-sm); line-height: calc(var(--ui-btn-sm) - 4px); font-size: 18px; }
.ui-input, .ui-find .ui-input { height: var(--ui-btn); min-height: var(--ui-btn); }
/* the same three sizes where a page file or the map stylesheet set their own (stronger selectors on purpose) */
html body #world_map .leaflet-control-zoom a, html body #world_map .map-panel button {
  width: auto; min-width: var(--ui-btn-sm); height: var(--ui-btn-sm); min-height: var(--ui-btn-sm); line-height: 1; font-size: 13px; font-weight: 600; }
html body #world_map .leaflet-control-zoom a { width: var(--ui-btn-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; }
html.world-full body .full-bar .ui-btn { height: var(--ui-btn-sm); min-height: var(--ui-btn-sm); font-size: 13px; }
.ui-page .ui-btn.ui-btn-go:not(.ui-btn-lg), .ui-page .ui-btn.ui-btn-primary:not(.ui-btn-lg) { height: var(--ui-btn); min-height: var(--ui-btn); }
.acct-auth .ui-btn-go { height: var(--ui-btn-lg) !important; min-height: var(--ui-btn-lg) !important; font-size: 15px; font-weight: 700; }  /* !important: over the normal-size rule above */
html.world-full body .full-bar .ui-btn.ui-btn-go { height: var(--ui-btn-sm); min-height: var(--ui-btn-sm); font-size: 13px; }
html.world-full body #world_map .leaflet-control-zoom a { width: var(--ui-btn-sm) !important; height: var(--ui-btn-sm) !important; }  /* !important: over world-map.css's full-page size */
#world_map .leaflet-control-zoom a, #world_map .map-panel button, .ui-map-btn { box-sizing: border-box; }  /* the /full page has no .ui-page box-sizing */
/* In full screen the map's buttons sit at the top left, away from the corner where the screen's own window buttons are
   (owner 2026-10-26: after Exit fullscreen the pointer was over "minimize"). */
.ui-map.ui-map-full .ui-map-tools, .ui-map:fullscreen .ui-map-tools { right: auto; left: 12px; }
@media (max-width: 600px) { :root { --ui-btn-sm: 40px; } }  /* small buttons are finger-sized on phones (owner 2026-10-26: mobile consistency) */
/* "See all →", "Forum →", "All worlds by … →": one link style everywhere (owner 2026-10-26: "is the see all and forum
   button the same?") */
.ui-page .ui-more-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--ui-link); white-space: nowrap; text-decoration: none; }
.ui-page .ui-more-link:hover { text-decoration: underline; }

/* ---- Hearts (owner 2026-10-26: "a heart or something on maps, so we can show people love and support or favorite") ----
   One look for every heart button (the card's, the world page's): an outlined heart, red and filled once given; the
   count beside it (site/scripts/hearts.js). Without JavaScript there are no hearts. */
html:not(.js) .ui-heart, .ui-heart[hidden] { display: none !important; }
.ui-heart svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; }
.ui-heart-count:empty { display: none; }
.ui-heart.on svg { fill: #e0435a; stroke: #c8243d; }
.ui-wcard-heart:hover, .ui-wcard-heart:focus-visible { background: linear-gradient(#9a9fd8, #7e85c9); border-color: #fff; outline: 0; }
.ui-wcard-heart.on { background: #fff; color: #c8243d; border-color: #1e1e1e; }
.ui-heart-btn.on { color: #fff; }
.ui-heart-btn.on svg { fill: #ff5a6e; stroke: #fff; }
.ui-heart-btn .ui-heart-count { padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, .45); }
@keyframes ui-heart-pop { 50% { transform: scale(1.3); } }
.ui-heart.pop svg { animation: ui-heart-pop .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .ui-heart.pop svg { animation: none; } }

/* ---- The list toolbar on phones (owner 2026-10-26: "can we clean up this vertical space on mobile"): two rows.
   Row 1 the list's name and count with Upload as an icon button; row 2 the find box, then Category and Sort as
   menus showing an icon and the current choice (their words stay for screen readers). Wider screens keep the
   category pills; the Category menu and the menu icons are phones only. ---- */
.ui-pick-cat, .ui-pick summary > .ui-icon { display: none; }
@media (max-width: 600px) {
  .ui-toolbar { gap: 10px; padding: 14px 16px; }
  .ui-toolbar-row:first-child { flex-wrap: nowrap; }
  .ui-toolbar-row:first-child .ui-toolbar-title { width: auto; flex: 1 1 auto; flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .ui-page .ui-toolbar-title h1 { font-size: 22px; }
  .ui-toolbar-upload { flex: none; width: var(--ui-btn, 40px); min-width: 0; height: var(--ui-btn, 40px); padding: 0; justify-content: center; }
  .ui-toolbar-upload > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-toolbar #list-cat-label, .ui-toolbar .ui-pills { display: none; }
  .ui-pick-cat { display: block; }
  .ui-toolbar-end { flex-wrap: nowrap; gap: 8px; }
  .ui-toolbar-end .ui-find { flex: 1 1 0; min-width: 0; }
  .ui-toolbar-end .ui-pick summary { gap: 6px; padding: 0 10px; }
  .ui-toolbar-end .ui-pick summary > .ui-icon { display: inline-block; flex: none; }
  .ui-toolbar-end .ui-pick summary > .ui-pick-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}