/* World pages since the makeover (owner 2026-10-25, mockup "World page"): the parts of partials/featured-world.html
   and partials/world-parts.html that site.css does not draw: the map box's saved picture, the featured map card with
   its details beside it (home and player pages), the description, details, uploader and comments, the fullscreen
   page's bar, the browse tabs, the search card and the not-found page. Loaded by world.html, the live
   worlds/world.html, world-full.html, home.html, browse.html, search.html, 404.html and user.html (featured world).
   The upload page has its own upload.css. */

/* The one main action of a page (Download, Return Home) is bold, also when it is disabled. */
.ui-page .ui-btn-lg { font-weight: bold; }

/* ---- Map box: a saved picture where there is no live map ---- */
.ui-map-still > #world_map { display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-map-still > #world_map img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* nothing to show (featured-world.html map_box): a card with the note; inside the featured card it is the card's side */
.world-hero-map > .ui-map-none { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; border: 0 !important;
  border-radius: 0; box-shadow: none !important; }  /* !important: over .ui-card's block edge, as the map box there */

/* ---- Featured map card: map left, details right; details under the map on narrow windows ---- */
.world-hero { display: flex; flex-wrap: wrap; overflow: hidden; }
.world-hero-map { flex: 999 1 560px; min-width: 0; }
.world-hero-map { display: flex; }  /* the map fills the card's height beside the details */
.world-hero-map > .ui-map { flex: 1 1 auto; height: auto; min-height: 400px; border: 0; border-radius: 0; box-shadow: none; }
.world-hero-info { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 22px; }
.world-hero-info .ui-chip { font-weight: bold; }
.ui-page .world-hero-info h1, .ui-page .world-hero-info h2 { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.world-hero-info h1 a, .world-hero-info h2 a { color: var(--ui-text) !important; }
/* The numbers as one line of icons (owner 2026-10-26: "should these be on the same line?", "still look off"). */
.world-hero-stats { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 14px; color: var(--ui-text); }
.world-hero-stats li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.world-hero-stats .ui-icon { color: var(--ui-muted); }
/* The world's own words fill the room between the numbers and the buttons (a few lines, cut with "..."); the two
   buttons sit together at the card's foot, each the card's full width. */
.world-hero-desc { width: 100%; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; line-height: 1.5; color: #4a5560; overflow-wrap: anywhere; }
.world-hero-desc img { display: none; }
.world-hero-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 6px; }
.world-hero-actions > .ui-btn { width: 100%; }
.world-hero-user .world-hero-map > .ui-map { height: 320px; }
/* Wide screens: the details column is exactly as wide as the page's side column (site.css --ui-side), so its left
   edge lines up with the cards below (owner 2026-10-25: "alignment make it happen"). */
@media (min-width: 900px) {
  .world-hero { flex-wrap: nowrap; }
  .world-hero-info { flex: 0 0 calc(var(--ui-side) - 1px); width: calc(var(--ui-side) - 1px); }  /* less the card border */
}

/* ---- About, details, uploader ---- */
/* min-height, margins, size: mcwm-original.css still styles this old class (a 150 px tall description); the text is
   site.css .ui-prose */
.ui-page .world_description { min-height: 0; margin: 0; font-size: 15px; }
.ui-page .world_tags { margin: 0; line-height: inherit; }
.world_description img { max-width: 100%; height: auto; }
.ui-page .ui-dl dd.world-seed { font-family: Menlo, Consolas, monospace; white-space: nowrap; overflow-wrap: normal; }
/* A long description (over 1,200 characters) shows its start and a "Show more" that opens the rest; browsers
   without :has() show it whole. */
.world-desc-more { display: none; }
@supports selector(:has(a)) {
  .world-desc-long > .world_description { max-height: 22em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
  .world-desc-long:has(.world-desc-more[open]) > .world_description { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .world-desc-more { display: block; margin-top: 4px; }
  .world-desc-more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-link);
    font-weight: bold; cursor: pointer; list-style: none; }
  .world-desc-more > summary::-webkit-details-marker { display: none; }
  .world-desc-more > summary::after { content: " \25BE"; margin-left: 4px; }
  .world-desc-more[open] > summary { font-size: 0; }
  .world-desc-more[open] > summary::before { content: "Show less"; font-size: 14px; }
  .world-desc-more[open] > summary::after { content: " \25B4"; font-size: 14px; }
}
/* ---- More by <uploader> (world-parts.html more_by_card) ---- */
.world-more-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* each row's hover: the shared rounded shape, --ui-inset from the card's sides (site.css section 9) */
.world-more-list a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px calc(var(--ui-pad-x) - var(--ui-inset));
  margin: 0 calc(var(--ui-inset) - var(--ui-pad-x)); border-radius: 10px;
  color: var(--ui-text) !important; text-decoration: none !important;
}
.world-more-list a:hover { background: var(--ui-hover); }
.world-more-pic { flex: none; width: 64px; height: 40px; border-radius: 4px; object-fit: cover; background: #1c1c1c; }
.world-more-nopic { background: #e9eef3 url('/assets/grass-block.svg') no-repeat center / 16px auto; image-rendering: pixelated; }
.world-more-text { display: flex; flex-direction: column; min-width: 0; }
.world-more-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }


/* ---- Comments ---- */
/* the note (.ui-note) or the Log in button under the card's head, inset like the card's text */
.ui-page .world-closed { display: flex; align-items: center; gap: 6px; margin: 14px var(--ui-pad-x); }  /* .ui-page: over .ui-page p { margin: 0 } */
.world-comment-form { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--ui-soft-line); }
.world-comment { display: flex; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--ui-soft-line); }
.world_comments > .world-comment:last-child { border-bottom: 0; }
.world-comment > img { flex: none; width: 36px; height: 36px; border-radius: 4px; image-rendering: pixelated; object-fit: cover; }
.world-comment-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.world-comment .comment_data { font-size: 15px; line-height: 1.55; color: var(--ui-text); overflow-wrap: anywhere; }
.world-comment .comment_data img { max-width: 100%; height: auto; }
.world-quote { margin: 0 0 8px; padding: 8px 12px; border: 0; border-radius: 6px; background: var(--ui-tint); font-size: 14px; color: #4a5560; }

@media (max-width: 600px) {
  .world-hero-map > .ui-map { height: 280px; }
  .world-hero-info { padding: 14px 16px; gap: 8px; }
  /* Phones (owner 2026-10-26: "too much vertical on mobile"): two lines of the world's words, the two buttons side
     by side (the size stays on the world page). */
  .world-hero-desc { -webkit-line-clamp: 2; }
  .world-hero-actions { flex-direction: row; padding-top: 2px; }
  .world-hero-actions > .ui-btn { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 12px; padding-right: 12px; }  /* each as wide as its words, the rest shared */
  .world-hero-actions .ui-btn-note { display: none; }
  .world-comment-form, .world-comment { padding-left: 16px; padding-right: 16px; }
}

/* ---- /worlds/<id>/full: a slim bar over the map that fills the rest of the window ---- */
.ui-page.full-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1001; max-width: none; height: 56px; margin: 0; padding: 0 12px;
  flex-direction: row; align-items: center; gap: 12px; background: var(--ui-frost); border-bottom: 2px solid var(--ui-block-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.ui-page.full-bar .full-title { min-width: 0; font-size: 18px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.full-by { flex: none; font-size: 13px; color: var(--ui-muted); }
.full-actions { margin-left: auto; flex: none; }
html.world-full #world_map { top: 56px; }
@media (max-width: 600px) {
  .full-by { display: none; }
  .full-actions .ui-btn-note { display: none; }
}

/* ---- Lists (browse.html), search (search.html) and the not-found page ---- */
.search-head { margin: 0; }
.search-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.search-row > .ui-input[type="search"] { flex: 999 1 260px; width: auto; }
.search-row > select { flex: 0 1 220px; }
.not-found { max-width: 560px; width: 100%; margin: 12px auto 0; }
.not-found .search-row { flex-wrap: nowrap; align-self: stretch; }
.not-found .search-row > .not-found-input { flex: 1 1 auto; min-width: 0; min-height: 42px; }
.not-found .ui-row .ui-btn { flex: 1 1 auto; }

.search-none { grid-column: 1 / -1; }
[data-world-list] [hidden] { display: none; }  /* search.js hides the pager strip when nothing matches */
/* The world's compact head: one line of facts under the name */
.world-head .ui-head { padding: 16px 22px; align-items: center; }
.world-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 2px 0 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--ui-muted); }
.world-facts b { color: var(--ui-text); font-weight: 600; }
.world-facts .world-seed b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; }
/* The full-screen page is all map (owner 2026-10-26: "can't it be on the map itself?"): the name, the player,
   Download and Close float in a small box at the top left, like the map's other controls. */
html.world-full #world_map { top: 0; }
html.world-full .full-bar {
  position: absolute; top: 12px; left: 12px; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  max-width: min(calc(100vw - 140px), 640px); margin: 0; padding: 8px 8px 8px 14px; background: var(--ui-frost, rgba(255, 255, 255, .85));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 2px solid #1e1e1e; border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 10px 20px rgba(0, 0, 0, .2);
}
html.world-full .full-bar .full-title { margin: 0; font-size: 18px; line-height: 1.4; }
html.world-full .full-bar .full-by { font-size: 13px; color: var(--ui-muted, #4a5560); }
html.world-full .full-bar .full-actions { margin-left: auto; }
html.world-full .full-bar .ui-btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
@media (max-width: 600px) { html.world-full .full-bar { max-width: calc(100vw - 24px); } html.world-full .full-bar .full-actions { margin-left: 0; } }
html.world-full .full-notice { flex-basis: 100%; font-size: 11px; color: var(--ui-muted, #4a5560); }
html.world-full .full-notice * { font-size: 11px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
html.world-full .full-notice, html.world-full .full-notice * { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 600px) { html.world-full .full-bar { right: 12px; max-width: none; } }