/* kh-newlayout.css: new layout PREVIEW (Nova, 2026-11-06, b250). Loaded after the player's theme,
   only for staff who switched the preview on. Everything is scoped to html.kh-new body. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

html { background: #1a1c25; }

html.kh-new body {
  position: relative;
  isolation: isolate;
  padding-left: 0;
  background-color: #1a1c25;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, #dfe6ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 18%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 46%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 54%, #ffffff 50%, transparent 51%);
  background-size: 260px 260px;
  background-repeat: repeat;
  background-attachment: fixed;
  color: #ece5d4;
  font-family: Inter, Verdana, Arial, sans-serif;
}

/* the galaxy banner: full width, sides and bottom fade into the night sky */
html.kh-new body::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background: url("../layouts/new/banner.webp") center 38% / cover no-repeat;
  filter: brightness(.72) saturate(.72);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%), linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

html.kh-new body #bgoverlay { display: none; }

html.kh-new body #wrapper { width: 1360px; max-width: calc(100% - 32px); }

/* top band: the gold logo on the left, event and notification icons on the right */
#khn-top {
  position: relative;
  height: 118px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
#khn-top .khn-logo { align-self: center; }
#khn-top .khn-icons { padding-bottom: 8px; }
#khn-top .khn-logo img { width: 230px; height: auto; display: block; filter: drop-shadow(0 0 12px rgba(10, 12, 30, .85)); }
#khn-top .khn-icons #header {
  height: auto;
  background: none;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}
#khn-top .khn-icons #header > a,
#khn-top .khn-icons #header > div,
#khn-top .khn-icons .notifications-area-new { position: static !important; margin: 0 !important; }
#khn-top .khn-icons .uinfoBox,
#khn-top .khn-icons #info { display: contents; }
#khn-top .khn-icons #info > table,
#khn-top .khn-icons #info > form,
#khn-top .khn-icons img.icon.mini { display: none; }
#khn-top .khn-icons .notification-category { margin-right: 6px !important; width: 40px !important; height: 40px !important; }
.khn-spel a:first-of-type img { display: block; width: 110px; height: 110px; margin: 0 auto; }
.khn-spel { text-align: center; }

/* the side column */
html.khn body #khn-side {
  float: left;
  width: 276px; /* b287: was 236 */
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  text-align: left;
}
html.kh-new.khn body #content { margin-left: 292px; }
/* old pages built wider than the space they get scroll inside their own panel, never the whole page */
html.kh-new body #middle { overflow-x: auto; }
html.khn.khn-hidden body #khn-side { display: none; }
html.kh-new.khn.khn-hidden body #content { margin-left: 0; }
.khn-card {
  border-radius: 16px;
  border: 1px solid #373a48;
  background: rgba(35, 37, 48, .86);
  padding: 14px;
}
.khn-card h3 { margin: 0 0 10px; color: #aeaba3; font: 600 12px Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.khn-me-top { display: flex; gap: 10px; align-items: center; }
.khn-tag { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 1px solid #444756; }
.khn-me-name { font-size: 15px; font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.khn-id { color: #aeaba3; font-weight: 400; }
.khn-status { color: #aeaba3; font-size: 12px; font-weight: 400; }
.khn-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.khn-money a { display: block; padding: 8px 10px; border-radius: 10px; background: rgba(26, 28, 37, .8); }
.khn-money span { display: block; color: #aeaba3; font-size: 11px; font-weight: 400; }
.khn-money b { color: #d9bd84; font-size: 15px; }
.khn-me-links { margin-top: 10px; font-size: 13px; color: #aeaba3; }
.khn-pet a { display: block; }
.khn-pet img { display: block; width: 100%; height: auto; border-radius: 12px; background: rgba(26, 28, 37, .8); }
.khn-pet span { display: block; margin-top: 6px; font-weight: 600; }
.khn-short nav { display: flex; flex-direction: column; gap: 4px; }
html.kh-new body .khn-short nav a:link, html.kh-new body .khn-short nav a:visited {
  display: block; padding: 8px 10px; border-radius: 10px; background: rgba(26, 28, 37, .8); color: #ece5d4; font-weight: 500;
}
html.kh-new body .khn-short nav a:hover { background: rgba(217, 189, 132, .14); color: #ecd6a8; }
.khn-small { display: inline-block; margin-top: 8px; font-size: 12px; }
.khn-soon { color: #87857f; }
.khn-hide, .khn-side-btn {
  font: 500 13px Inter, sans-serif; color: #aeaba3; background: transparent; border: 1px solid #373a48; border-radius: 10px;
  padding: 8px 10px; cursor: pointer;
}
.khn-hide:hover, .khn-side-btn:hover { color: #ecd6a8; border-color: #d9bd84; }
.khn-side-btn { margin-right: 8px; padding: 6px 10px; font-size: 16px; line-height: 1; }

/* narrower screens: the column folds away and the ☰ button opens it as a drawer */
html.khn.khn-narrow body #khn-side { display: none; }
html.kh-new.khn.khn-narrow body #content { margin-left: 0; }
html.khn.khn-narrow.khn-open body #khn-side {
  display: flex; position: fixed; z-index: 2000; top: 0; left: 0; bottom: 0; margin: 0; padding: 16px;
  width: 300px; overflow-y: auto; background: rgba(26, 28, 37, .98); border-right: 1px solid #373a48;
  box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}

/* menu bar */
html.kh-new body #links {
  margin-left: 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  border-radius: 14px;
  border: 1px solid #373a48;
  background: rgba(26, 28, 37, .66);
  backdrop-filter: blur(6px);
}
html.kh-new body #links span { height: auto; margin: 0; flex: 0 1 auto; }
html.kh-new body #links a, html.kh-new body #links a:link, html.kh-new body #links a:visited {
  font-family: Inter, Verdana, sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 500;
  font-variant: normal;
  color: #ece5d4;
  padding: 13px clamp(6px, .6vw, 10px);
  line-height: 20px;
}
html.kh-new body #links a:hover { color: #ecd6a8; font-size: clamp(13px, 1.05vw, 15px); }
/* b280 (SunBlind #310): the hover underline is drawn inside the link (inset shadow), so it takes no space and the page no longer jumps */
html.kh-new body #links span.activeLink a, html.kh-new body #links span > a { border-bottom: 0 !important; }
html.kh-new body #links span.activeLink > a { box-shadow: inset 0 -2px 0 #d9bd84; }
html.kh-new body #links span div {
  width: 220px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #373a48;
  background: rgba(35, 37, 48, .97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
html.kh-new body #links span div a, html.kh-new body #links span div a:link, html.kh-new body #links span div a:visited {
  font-size: 14px !important;
  padding: 7px 10px;
  white-space: normal;
  border-radius: 8px;
  border: 0;
}
html.kh-new body #links span div a:hover { background: rgba(217, 189, 132, .12); }

/* content panel */
html.kh-new body #content { margin-left: 0; padding-left: 0; background: transparent; }
html.kh-new body #notificationArea { margin: 0; padding: 0; background: transparent; }
html.kh-new body #middle {
  margin: 16px 0 0;
  padding: 22px 30px 10px;
  border-radius: 18px;
  border: 1px solid #373a48;
  background: rgba(35, 37, 48, .86);
}
html.kh-new body #footer {
  width: 1360px;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 16px auto 0;
  padding: 14px 20px;
  height: auto;
  border-radius: 14px;
  background: rgba(26, 28, 37, .66);
  font-variant: normal;
  font-weight: 500;
  color: #aeaba3;
}
html.kh-new body #footer a, html.kh-new body #footer a:link, html.kh-new body #footer a:visited { padding: 4px 10px; font-variant: normal; color: #d9bd84; }

/* text and links in pages */
html.kh-new body h1, html.kh-new body h2 { border-color: #444756; }
html.kh-new body h1, html.kh-new body h2 { font-family: Fraunces, Georgia, serif; font-variant: normal; color: #f3ecdc; }
html.kh-new body a:link, html.kh-new body a:visited { color: #d9bd84; font-variant: normal; }
html.kh-new body a:hover { color: #ecd6a8; }
html.kh-new body table td { font-family: Inter, Verdana, sans-serif; }

/* the two panel colours used all over the site */
html.kh-new body .basic { background: rgba(26, 28, 37, .9); color: #ece5d4; }
html.kh-new body .basic2 { background: rgba(52, 55, 70, .9); color: #ece5d4; }

/* b260: staff label above the shortcuts */
.khn-staff { display: block; margin: -2px 0 12px; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: rgba(150, 140, 180, .12); border: 1px solid rgba(150, 140, 180, .3); }
html.kh-new body a.khn-staff:link, html.kh-new body a.khn-staff:visited { color: #c8bfdc; }

/* b260: the counts sit beside the staff icons, not on top of them */
#khn-top .khn-icons .notification-category { margin-right: 44px !important; }
#khn-top .khn-icons .amount-of-notifications {
  right: auto !important; bottom: auto !important; left: 46px; top: 9px;
  width: auto !important; min-width: 20px; padding: 2px 6px !important; text-shadow: none !important;
}

/* b260: the lair grid fills the panel, in the calmer colours */
html.kh-new body table.customDemo { width: 100%; border-collapse: separate; }
html.kh-new body .customDemo td, html.kh-new body #ticker, html.kh-new body .profileBox { background: rgba(26, 28, 37, .9); color: #d6cfbf; }
html.kh-new body .customDemo td.khimbit_checked { background-color: rgba(217, 189, 132, .22); }

/* b260: a group's subgroups show as a second row of tabs */
html.kh-new body #subgroupList { margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(26, 28, 37, .6); }
html.kh-new body #subgroupList ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
html.kh-new body #subgroupList ul::before { content: "Subgroups:"; color: #aeaba3; font-size: 13px; align-self: center; margin-right: 4px; }
html.kh-new body #subgroupList li { padding: 4px 10px; border-radius: 8px; background: rgba(52, 55, 70, .9); }
html.kh-new body #subgroupList #selected { background: rgba(217, 189, 132, .25) !important; }

/* b261: staff notification icons live at the right end of the menu bar */
html.kh-new body #links .khn-navicons {
  position: static !important; margin: 0 0 0 auto !important; display: flex !important; align-items: center; gap: 4px;
}
html.kh-new body #links .khn-navicons a { padding: 0 !important; display: block; }
html.kh-new body #links .khn-navicons .notification-category {
  width: 32px !important; height: 32px !important; margin: 0 38px 0 0 !important;
}
html.kh-new body #links .khn-navicons .amount-of-notifications {
  right: auto !important; bottom: auto !important; left: 36px; top: 6px;
  width: auto !important; height: 20px !important; min-width: 20px; padding: 0 6px !important; text-shadow: none !important; font-size: 12px;
}

/* b262: the same soft corners as the side column, on the content's tabs, boxes and controls */
html.kh-new body div.basic, html.kh-new body div.basic2, html.kh-new body .profileBox, html.kh-new body #ticker,
html.kh-new body .ui-widget-content, html.kh-new body .ui-tabs { border-radius: 14px; }
html.kh-new body .ui-tabs .ui-tabs-nav { border-radius: 12px; }
html.kh-new body .ui-tabs .ui-tabs-nav li { border-radius: 10px 10px 0 0; }
html.kh-new body .ui-tabs .ui-tabs-panel { border-radius: 0 0 12px 12px; }
html.kh-new body #grouplist li, html.kh-new body #subgroupList li { border-radius: 10px; }
html.kh-new body table.customDemo td { border-radius: 12px; }
html.kh-new body input[type=button], html.kh-new body input[type=submit], html.kh-new body button,
html.kh-new body select, html.kh-new body input[type=text], html.kh-new body input[type=number], html.kh-new body textarea { border-radius: 8px; }

/* b263: big pictures in pages (the world map, news and event art) get the same soft corners; small icons don't */
html.kh-new body #middle .khn-round, html.kh-new body #middle img[usemap], html.kh-new body #middle .foraging { border-radius: 14px; }

/* b265: the Lounge and other pages' panels get the same soft corners */
html.kh-new body #chatTable, html.kh-new body #chatUsers { border: 0; }
html.kh-new body #chatTableLeft { border-radius: 14px; overflow-x: hidden; overflow-y: auto; border: 1px solid #444756; background: rgba(26, 28, 37, .6); }
html.kh-new body #chatUsers { border-radius: 12px; overflow: hidden; border: 1px solid #444756; border-collapse: separate; background: rgba(26, 28, 37, .6); }
html.kh-new body #middle table.basic, html.kh-new body #middle table.basic2,
html.kh-new body #middle table:has(> tbody > tr.basic, > tbody > tr.basic2, > tr.basic, > tr.basic2) {
  border-radius: 14px; overflow: hidden; border-collapse: separate;
}

/* b268: the Lounge chat stretches to fill the panel (the online list keeps its width on the right) */
html.kh-new body #middle table:has(#chatTableLeft) { width: 100%; }
html.kh-new body #middle td:has(> #chatTableLeft) { width: 100%; }
html.kh-new body #chatTable { width: 100%; }
html.kh-new body #chatTable td.ctext, html.kh-new body #chatTable .ctext { width: auto; }

/* b268: the khimbit Den. Each khimbit is a card with a soft glow behind it, the name stands out, details are quieter */
html.kh-new body #middle td.basic.calign:has(> a[href^="khimbit.php"]) {
  padding: 16px 10px 14px; color: #a19e98; font-size: 12px; line-height: 1.55;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95));
  transition: transform .15s, box-shadow .15s;
}
html.kh-new body #middle td.basic.calign:has(> a[href^="khimbit.php"]):hover {
  transform: translateY(-2px); box-shadow: 0 0 0 1px #d9bd84, 0 10px 24px rgba(0, 0, 0, .35);
}
html.kh-new body #middle td.basic.calign > a[href^="khimbit.php"] > div {
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .20), rgba(150, 130, 210, .10) 45%, transparent 70%);
}
html.kh-new body #middle td.basic.calign > a[href^="khimbit.php"]:not(:has(div)) {
  display: inline-block; margin-top: 6px; font-size: 16px; color: #f3ecdc;
}

/* b268/b269: the Groble Pen matches the Den exactly: four across, 175px pictures in a round glow, the same hover */
html.kh-new body .main-content { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0; }
html.kh-new body .growable-item {
  border-radius: 16px; border: 1px solid #373a48;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important;
  transition: transform .15s, box-shadow .15s;
}
html.kh-new body .growable-item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #d9bd84, 0 10px 24px rgba(0, 0, 0, .35); }
html.kh-new body .growable-item { padding: 16px 10px 10px; align-items: center; border-radius: 12px; }
html.kh-new body .growable-item a.growable-img {
  width: 175px; height: 175px; max-width: 100%; aspect-ratio: auto; flex-grow: 0; padding: 0; align-items: center; justify-content: center;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .20), rgba(150, 130, 210, .10) 45%, transparent 70%);
}
html.kh-new body .growable-item a.growable-img img { max-width: 100%; max-height: 100%; }
html.kh-new body .growable-item .growableinfo span:first-child { color: #f3ecdc; }
html.kh-new body .growable-item .growableinfo { font-size: 13px; color: #a19e98; padding: 6px 10px 10px; }
html.kh-new body .growable-item .growableinfo span { line-height: 1.4; }

/* b268: SITE-WIDE POLISH. One look for the things every page shares. */

/* item tiles (inventory and anything else using .iitem): same cards as the Den and Pen */
html.kh-new body #inventory .item.iitem, html.kh-new body .iitem {
  border-radius: 14px; border: 1px solid #373a48;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important;
  color: #d6cfbf; transition: transform .15s, box-shadow .15s;
}
html.kh-new body #inventory .item.iitem:hover, html.kh-new body .iitem:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #d9bd84, 0 10px 24px rgba(0, 0, 0, .35); }
html.kh-new body #inventory .item.iitem > img, html.kh-new body .iitem > img {
  border-radius: 12px;
  background-image: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .18), rgba(150, 130, 210, .08) 50%, transparent 72%);
}

/* text boxes and dropdowns: dark with light text, a gold ring when you're typing */
html.kh-new body input[type=text], html.kh-new body input[type=number], html.kh-new body input[type=search], html.kh-new body input[type=password],
html.kh-new body input[type=email], html.kh-new body input:not([type]), html.kh-new body textarea, html.kh-new body select {
  background-color: #1a1c25; color: #ece5d4; border: 1px solid #444756; padding: 5px 9px; font-family: Inter, Verdana, sans-serif;
}
html.kh-new body input[type=text]:focus, html.kh-new body input[type=number]:focus, html.kh-new body input[type=search]:focus,
html.kh-new body input[type=password]:focus, html.kh-new body input:not([type]):focus, html.kh-new body textarea:focus, html.kh-new body select:focus {
  outline: none; border-color: #d9bd84; box-shadow: 0 0 0 3px rgba(217, 189, 132, .22);
}
html.kh-new body input::placeholder, html.kh-new body textarea::placeholder { color: #87857f; }

/* buttons: soft by default, gold on hover */
html.kh-new body input[type=submit], html.kh-new body input[type=button], html.kh-new body button:not(.khn-side-btn):not(.khn-hide) {
  background: #373a48; color: #ece5d4; border: 1px solid #444756; padding: 5px 12px; cursor: pointer;
  font-family: Inter, Verdana, sans-serif; font-weight: 500;
}
html.kh-new body input[type=submit]:hover, html.kh-new body input[type=button]:hover, html.kh-new body button:not(.khn-side-btn):not(.khn-hide):hover {
  background: #d9bd84; color: #1c2033; border-color: #d9bd84;
}

/* b280 (Xiomar Rune #311): the foraging captcha buttons are only 40px wide, so the new button padding pushed their
   letters over the edges and into each other. Let them size to their text. */
html.kh-new body input.captchaButton { width: auto; min-width: 0; padding: 3px 5px; margin: 2px 1px; font-size: 12px !important; line-height: 16px; }
/* b283: the slot is small and fixed, so keep the four answers two by two and the captcha picture beside the item */
html.kh-new body .fslot form img.captcha { width: 76px; height: auto; margin-bottom: 2px; }
html.kh-new body .fslot form { white-space: nowrap; }

/* page numbers */
html.kh-new body .pagination a, html.kh-new body .pagination-wrapper a, html.kh-new body .pagination span, html.kh-new body .pagination-wrapper span {
  border-radius: 8px;
}

/* b269: Lounge spacing. The time column was taking a third of the chat; now it's just wide enough for the time */
html.kh-new body #chatTable td:last-child { width: 64px; white-space: nowrap; text-align: right; }
html.kh-new body #chatTable td.cusername { width: 170px; }
html.kh-new body #middle hr { border: 0; border-top: 1px solid #373a48; }

/* b269: forum boxes lose the bright blue edges */
html.kh-new body table.forumBox, html.kh-new body table.forumBox td { border-color: #373a48 !important; }
html.kh-new body table.forumBox { border-radius: 14px; border-collapse: separate; overflow: hidden; }

/* b269: greyed-out page buttons (First / Prev on page 1) */
html.kh-new body .pagination .disabled, html.kh-new body .pagination-wrapper .disabled, html.kh-new body span.disabled {
  background: rgba(52, 55, 70, .5) !important; color: #7a7872 !important; border-color: #373a48 !important;
}

/* b269: the message editor's toolbar */
html.kh-new body .editbar { border-color: #444756 !important; background: #232531; border-radius: 10px 10px 0 0; }

/* b269: event shops become cards like the Activities page */
html.kh-new body .event-shop-container { gap: 14px; justify-content: flex-start; }
html.kh-new body .event-shop { width: calc(25% - 11px); border-radius: 16px; border: 1px solid #373a48;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)); transition: transform .15s, box-shadow .15s; }
html.kh-new body .event-shop:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #d9bd84, 0 10px 24px rgba(0, 0, 0, .35); }
html.kh-new body .event-shop a { font-size: 14px !important; font-weight: 600; padding: 14px !important; }
html.kh-new body .event-shop a img { border-radius: 12px; width: 120px !important; height: 120px !important;
  background-image: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .18), transparent 70%); }

/* b270: the menu's drop-downs stay on top of big page pictures (they went behind the spelunking picture) */
html.kh-new body #links { position: relative; z-index: 500; }

/* b270: Lounge. The chat fills the space (also with the column hidden), the online list sits close on the right,
   and the times are quieter and don't touch the scrollbar */
html.kh-new body #chatTableLeft { width: 100% !important; box-sizing: border-box; }
html.kh-new body #middle td:has(> #chatTableRight) { width: 230px; padding-left: 14px; }
html.kh-new body #chatTable td:last-child { padding-right: 18px !important; color: #918e88; font-size: 12px; }

/* b270: tables made of .basic / .basic2 cells (the inbox and many lists) get soft outer corners */
html.kh-new body #middle table:has(td.basic, td.basic2) { border-collapse: separate; }
html.kh-new body #middle table:has(td.basic, td.basic2) > tbody > tr:first-child > :first-child { border-top-left-radius: 12px; }
html.kh-new body #middle table:has(td.basic, td.basic2) > tbody > tr:first-child > :last-child { border-top-right-radius: 12px; }
html.kh-new body #middle table:has(td.basic, td.basic2) > tbody > tr:last-child > :first-child { border-bottom-left-radius: 12px; }
html.kh-new body #middle table:has(td.basic, td.basic2) > tbody > tr:last-child > :last-child { border-bottom-right-radius: 12px; }

/* b270: news posts lose the old brown frame */
html.kh-new body #middle .box { border: 1px solid #373a48 !important; border-radius: 16px; background: rgba(26, 28, 37, .6); }

/* b270: Online players: each player is a card with their tag, not floating in space */
html.kh-new body #middle td.calign:has(> img[src*="static/users/"]) {
  border-radius: 14px; border: 1px solid #373a48; padding: 12px 8px;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important;
}
html.kh-new body #middle td.calign > img[src*="static/users/"] { border-radius: 12px; max-width: 100px; height: auto; margin-top: 4px; }
/* b270: the inbox: each message is its own soft row */
html.kh-new body #middle table:has(td.star) { border-collapse: separate; border-spacing: 0 4px; }
html.kh-new body #middle table:has(td.star) tr > td:first-child { border-radius: 10px 0 0 10px; }
html.kh-new body #middle table:has(td.star) tr > td:last-child { border-radius: 0 10px 10px 0; }

/* b271: footer links centred */
html.kh-new body #footer { text-align: center; }

/* b271: jQuery tab rows (special items shop and others): dark tabs, gold for the open one */
html.kh-new body .ui-widget-header { background: transparent; border: 0; }
html.kh-new body .ui-widget-content { background: rgba(26, 28, 37, .6); border-color: #373a48; color: #ece5d4; }
html.kh-new body .ui-tabs .ui-tabs-nav li.ui-state-default { background: #232531 !important; border: 1px solid #373a48 !important; }
html.kh-new body .ui-tabs .ui-tabs-nav li.ui-state-default a { color: #d6cfbf !important; }
html.kh-new body .ui-tabs .ui-tabs-nav li.ui-state-hover { border-color: #d9bd84 !important; }
html.kh-new body .ui-tabs .ui-tabs-nav li.ui-state-active, html.kh-new body .ui-tabs .ui-tabs-nav li.ui-tabs-active { background: #d9bd84 !important; border-color: #d9bd84 !important; }
html.kh-new body .ui-tabs .ui-tabs-nav li.ui-state-active a, html.kh-new body .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #1c2033 !important; }

/* b272: the footer centres under the main panel, not across the whole window */
html.kh-new.khn:not(.khn-hidden):not(.khn-narrow) body #footer { padding-left: 312px; }

/* b272: special shop items get the Den's round glow */
html.kh-new body #alternatesLinks td.basic.calign { border-radius: 12px; background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important; padding: 14px 8px; }
html.kh-new body #alternatesLinks td.basic.calign img[src*="static/items/"] {
  width: 110px; height: 110px; object-fit: contain; padding: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .20), rgba(150, 140, 180, .10) 45%, transparent 70%);
}

/* b272: the special shop's category dropdown (replaces the big block of tabs) */
.shop-cat { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #d6cfbf; font-weight: 600; }
.shop-cat select { min-width: 260px; font-size: 15px; padding: 7px 10px; }
html.kh-new body #alternatesLinks.shop-has-select > ul.ui-tabs-nav { display: none; }

/* b273: khimbit index. Breed headers become bars with a little arrow; khimbits get the Den's cards and round glow */
html.kh-new body #middle tr.collapser > td.basic { border-radius: 12px !important; padding: 12px 16px !important; font-size: 15px; transition: background .15s; }
html.kh-new body #middle tr.collapser > td.basic strong::before { content: "▸ "; color: #d9bd84; }
html.kh-new body #middle tr.collapser:hover > td.basic { background: rgba(52, 55, 70, .95); }
html.kh-new body #middle td.basic.calign[id^="khimbit_"] {
  border-radius: 12px; padding: 12px 6px; font-size: 12px; color: #a19e98;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important;
  transition: transform .15s, box-shadow .15s;
}
html.kh-new body #middle td.basic.calign[id^="khimbit_"]:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #d9bd84, 0 10px 24px rgba(0, 0, 0, .35); }
html.kh-new body #middle td.basic.calign[id^="khimbit_"] img {
  width: 96px; height: 96px; object-fit: contain; padding: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .20), rgba(150, 140, 180, .10) 45%, transparent 70%);
}

/* b273: your personal shop. "Add items" becomes one tidy row; each stocked item is a card with its glow,
   and stock / trinkets / beads line up as small labelled boxes */
html.kh-new body form[action="actions/your_shop_add.php"] > table { border-radius: 14px; border: 1px solid #373a48; background: rgba(35, 37, 48, .9); padding: 8px 12px; }
html.kh-new body form[action="actions/your_shop_add.php"] > table > tbody { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
html.kh-new body form[action="actions/your_shop_add.php"] > table > tbody > tr { display: flex; gap: 6px; align-items: center; }
html.kh-new body form[action="actions/your_shop_add.php"] td.basic { background: transparent !important; padding: 2px; border-radius: 0 !important; }
html.kh-new body td.item.basic:has(label.shop) {
  border-radius: 12px; padding: 14px 12px; font-size: 13px;
  background: linear-gradient(180deg, rgba(35, 37, 48, .95), rgba(26, 28, 37, .95)) !important;
}
html.kh-new body td.item.basic:has(label.shop) > img {
  width: 100px; height: 100px; object-fit: contain; padding: 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, rgba(217, 189, 132, .20), rgba(150, 140, 180, .10) 45%, transparent 70%);
}
html.kh-new body td.item.basic label.shop { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 170px; margin: 4px auto; color: #a19e98; }
html.kh-new body td.item.basic label.shop input { width: 90px; }
html.kh-new body td.item.basic label.shop + br, html.kh-new body td.item.basic label.shop + br + br { display: none; }

/* b276: "go back to the classic layout" link under the column */
.khn-classic { display: block; text-align: center; font-size: 12px; margin-top: 2px; }
html.kh-new body a.khn-classic:link, html.kh-new body a.khn-classic:visited { color: #87857f; font-weight: 400; }

/* b278: active khimera card when none is set, and the "make this my active khimera" button */
.khn-none { margin: 0 0 8px; font-size: 13px; color: #a19e98; text-indent: 0; text-align: left; }
.khn-make { margin: 8px 0 0; }
.khn-make button { width: 100%; }

/* b280: owned items keep their green highlight (Lounge drops; SunBlind via the help desk). The new panel colour
   for .basic2 was covering the page's own .owned colour */
html.kh-new body .basic2.owned, html.kh-new body .basic.owned { background: rgba(46, 120, 70, .55) !important; box-shadow: inset 0 0 0 1px #6fb07f; }

/* b286 (SunBlind #341): Mahjong's layout choices and "save" were dark grey (#272727) on the dark panel */
html.kh-new body .game-mahjong-button { color: #ece5d4; }
html.kh-new body .game-mahjong-button:hover { color: #ecd6a8; }
html.kh-new body .game-mahjong-current-layout { color: #d9bd84; }

/* b287 (Starlight 11-07): movable, foldable column cards; shortcut icons; shoutbox card; dice pop-out */
#khn-cards { display: flex; flex-direction: column; gap: 14px; }
.khn-card h3 { cursor: grab; user-select: none; position: relative; padding-right: 18px; }
.khn-card h3::after { content: "▾"; position: absolute; right: 0; top: 0; color: #87857f; }
.khn-card.khn-fold h3::after { content: "▸"; }
.khn-card.khn-fold > :not(h3):not(.khn-staff) { display: none !important; }
.khn-card.khn-fold h3 { margin-bottom: 0; }
.khn-card.khn-dragging { opacity: .5; outline: 1px dashed #d9bd84; }
.khn-shortgrid { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px !important; }
html.kh-new body .khn-shortgrid a:link, html.kh-new body .khn-shortgrid a:visited {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0 !important;
  border-radius: 12px; background: rgba(26, 28, 37, .8); color: #d9bd84; font-weight: 600;
}
.khn-shortgrid a img { width: 70%; height: 70%; object-fit: contain; }
.khn-shortgrid a img + i { display: none; }
.khn-shortgrid a i { font-style: normal; font-size: 18px; font-family: Fraunces, Georgia, serif; }
html.kh-new body .khn-shortgrid a:hover { background: rgba(217, 189, 132, .16); box-shadow: inset 0 0 0 1px #d9bd84; }
.khn-shortgrid a.khn-dice { opacity: .45; }
.khn-shortgrid a.khn-dice.khn-ready { opacity: 1; box-shadow: inset 0 0 0 1px #d9bd84, 0 0 12px rgba(217, 189, 132, .55); animation: khnGlow 2.4s ease-in-out infinite; }
@keyframes khnGlow { 50% { box-shadow: inset 0 0 0 1px #ecd6a8, 0 0 20px rgba(217, 189, 132, .8); } }
/* shoutbox inside its card: forget its saved floating spot */
html.kh-new body #khn-shout-slot #shoutbox { position: static !important; left: auto !important; top: auto !important; width: auto !important;
  height: 320px !important; margin: 0 !important; border-radius: 10px; }
/* dice: hidden until the icon is clicked, then a centred pop-out */
html.kh-new body #dice_widget { display: none; }
html.kh-new.khn-dice-open body #dice_widget { display: block; position: fixed !important; left: 50% !important; top: 140px !important;
  transform: translateX(-50%); width: 340px !important; height: auto !important; min-height: 200px; z-index: 3000 !important;
  border-radius: 16px; border: 1px solid #444756; background: rgba(35, 37, 48, .98) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); padding: 10px; }
html.kh-new body #dice_widget_move, html.kh-new body #dice_widget_save, html.kh-new body #dice_widget > a + * { display: none; }
html.kh-new body #dice_widget { font-size: 0; } html.kh-new body #dice_widget > * { font-size: 14px; }
.khn-dice-x { position: absolute; right: 8px; top: 6px; background: transparent !important; border: 0 !important; color: #aeaba3 !important; font-size: 22px !important; cursor: pointer; padding: 0 6px !important; }
.khn-dice-x:hover { color: #ecd6a8 !important; }

/* b290: the shoutbox's scrollbar, slim and in the column colours */
html.kh-new body #khn-shout-slot, html.kh-new body #khn-shout-slot * { scrollbar-width: thin; scrollbar-color: #5a5d70 transparent; }
html.kh-new body #khn-shout-slot ::-webkit-scrollbar { width: 8px; }
html.kh-new body #khn-shout-slot ::-webkit-scrollbar-thumb { background: #5a5d70; border-radius: 8px; }
html.kh-new body #khn-shout-slot ::-webkit-scrollbar-track { background: transparent; }
html.kh-new body #khn-shout-slot #shoutbox { overflow-x: hidden !important; box-sizing: border-box; }

/* b291: the shoutbox's messages scroll inside its card (they were spilling out below it, with the scrollbar outside) */
html.kh-new body #khn-shout-slot #shoutbox { display: flex !important; flex-direction: column; height: 360px !important; padding: 6px; }
html.kh-new body #khn-shout-slot #shoutbox .chatArea { flex: 1 1 auto; min-height: 0; height: auto !important; width: auto !important;
  max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; position: static !important; border-radius: 8px; }
html.kh-new body #khn-shout-slot #shoutbox .chatInput { flex: 0 0 auto; position: static !important; width: auto !important; }
html.kh-new body #khn-shout-slot #shoutbox .chatInput form { display: flex; gap: 6px; }
html.kh-new body #khn-shout-slot #shoutbox .chatInput input.text { flex: 1; min-width: 0; width: auto !important; }
html.kh-new body #khn-shout-slot #shoutbox .buttons, html.kh-new body #khn-shout-slot #toggleShoutbox { display: none !important; }

/* b292: the new logo (Onyx and Nova running together, Starlight 11-07). A faint warm glow keeps the black cat from
   disappearing into the night sky. */
html.khs-nova #khn-top .khn-logo img { width: 500px; max-width: 42vw; filter: drop-shadow(0 0 5px rgba(255, 236, 200, .35)) drop-shadow(0 0 14px rgba(10, 12, 30, .8)); }

/* b293: STARSCAPE SKIN (blue, like the old theme; Kess asked for more blue). Nova keeps the gold look above. */
html.khs-starscape body { background-color: #050a1a; }
html.kh-new.khs-starscape body::before { background-image: url("../layouts/new/starscape_banner.webp"); filter: none; background-position: center 30%; } /* b445: Starlight's new Starscape banner (2026-11-08) */
html.khs-starscape body #middle, html.khs-starscape .khn-card { background: rgba(18, 28, 56, .88); border-color: #2c3d6e; }
html.khs-starscape body #links, html.khs-starscape body #footer { background: rgba(14, 22, 46, .75); border-color: #2c3d6e; }
html.khs-starscape body .basic { background: rgba(14, 22, 46, .92); }
html.khs-starscape body .basic2 { background: rgba(32, 46, 86, .92); }
html.kh-new.khs-starscape body a:link, html.kh-new.khs-starscape body a:visited, html.khs-starscape .khn-money b,
html.khs-starscape .khn-shortgrid a:link, html.khs-starscape .khn-shortgrid a:visited { color: #9ec3ff; }
html.kh-new.khs-starscape body a:hover { color: #d4e4ff; }
html.khs-starscape body .khn-money a, html.khs-starscape body .khn-shortgrid a { background: rgba(10, 16, 36, .85) !important; }
html.khs-starscape body #links span.activeLink > a { box-shadow: inset 0 -2px 0 #9ec3ff; }
html.khs-starscape body input[type=submit]:hover, html.khs-starscape body input[type=button]:hover,
html.khs-starscape body button:not(.khn-side-btn):not(.khn-hide):hover { background: #9ec3ff; border-color: #9ec3ff; color: #0b1430; }
html.khs-starscape body input[type=text]:focus, html.khs-starscape body textarea:focus, html.khs-starscape body select:focus { border-color: #9ec3ff; box-shadow: 0 0 0 3px rgba(158, 195, 255, .22); }
html.khs-starscape body .ui-tabs .ui-tabs-nav li.ui-state-active, html.khs-starscape body .ui-tabs .ui-tabs-nav li.ui-tabs-active { background: #9ec3ff !important; border-color: #9ec3ff !important; }
html.khs-starscape .khn-shortgrid a.khn-dice.khn-ready { box-shadow: inset 0 0 0 1px #9ec3ff, 0 0 12px rgba(158, 195, 255, .55); animation: none; }

/* b294: Starscape's logo (the playful star-pup) */
html.khs-starscape #khn-top .khn-logo img { width: 380px; max-width: 34vw; filter: drop-shadow(0 0 5px rgba(200, 220, 255, .3)) drop-shadow(0 0 14px rgba(5, 10, 26, .8)); }

/* b298: PHONES AND NARROW SCREENS (beta). Slim top bar, the menu and column in the ☰ drawer, pages full width. */
#khn-menu { display: none; }
html.khn-narrow body #wrapper { width: 100%; max-width: 100%; padding: 0 8px; box-sizing: border-box; }
html.khn-narrow body #khn-top { height: auto; padding: 8px 0 4px; align-items: center; }
html.khn-narrow body #khn-top .khn-logo img { width: 150px !important; max-width: 45vw !important; }
html.khn-narrow body #links > span { display: none !important; }
html.khn-narrow body #links { justify-content: space-between; padding: 4px 6px; }
html.khn-narrow body .khn-side-btn { font-size: 22px; padding: 8px 14px; margin: 0; }
html.khn-narrow body #links .khn-navicons .notification-category { width: 28px !important; height: 28px !important; margin-right: 30px !important; }
html.khn-narrow.khn-open body #khn-side { width: min(320px, 88vw); }
html.khn-narrow body #khn-menu { display: block; }
.khn-mg { border-bottom: 1px solid #373a48; }
.khn-mg:last-child { border-bottom: 0; }
.khn-mt { display: block; width: 100%; text-align: left; padding: 12px 6px !important; background: transparent !important; border: 0 !important;
  color: #ece5d4 !important; font: 600 16px Inter, sans-serif !important; cursor: pointer; }
.khn-mt::after { content: " ▸"; color: #87857f; }
.khn-mo .khn-mt::after { content: " ▾"; }
.khn-ml { display: none; padding: 0 0 8px 10px; }
.khn-mo .khn-ml { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
html.kh-new body .khn-ml a:link, html.kh-new body .khn-ml a:visited { display: block; padding: 9px 4px; font-size: 15px; }
html.khn-narrow body #middle { padding: 14px 10px 8px; margin-top: 8px; border-radius: 14px; }
html.khn-narrow body #middle img { max-width: 100%; height: auto; }
html.khn-narrow body #middle h1, html.khn-narrow body #middle h2 { font-size: 20px; }
html.khn-narrow body #middle input[type=submit], html.khn-narrow body #middle input[type=button], html.khn-narrow body #middle button,
html.khn-narrow body #middle select { min-height: 40px; }
html.khn-narrow body #footer { max-width: 100%; padding: 12px 8px; font-size: 13px; }
html.khn-narrow body::before { height: 220px; }

/* b299: phone pages that were wider than the screen. Grids wrap two by two; side-by-side page parts stack. */
html.khn-narrow body table.customDemo, html.khn-narrow body table.customDemo > tbody, html.khn-narrow body table.customDemo > tbody > tr { display: block; width: 100% !important; }
html.khn-narrow body table.customDemo > tbody > tr > td { display: inline-block; width: calc(50% - 6px) !important; box-sizing: border-box; vertical-align: top; margin: 3px 0; }
html.khn-narrow body table.customDemo img, html.khn-narrow body table.customDemo .khimImage { max-width: 100% !important; width: auto !important; height: auto !important; }
html.khn-narrow body #forage_squares, html.khn-narrow body #forage_squares > tbody, html.khn-narrow body #forage_squares > tbody > tr { display: flex; flex-wrap: wrap; justify-content: center; width: 100% !important; }
html.khn-narrow body #middle table:has(#foraging_content) > tbody > tr > td,
html.khn-narrow body #middle table:has(#chatTableLeft) > tbody > tr > td { display: block; width: auto !important; padding-left: 0 !important; }
html.khn-narrow body #chatTableRight { max-height: 180px; overflow-y: auto; }
html.khn-narrow body #middle table:has(#chatTableLeft) input[type=text] { width: 100% !important; box-sizing: border-box; }
html.khn-narrow body table:has(> tbody > tr > td.profilerToggle) { display: none; }
html.khn-narrow.khs-nova body #khn-top .khn-logo img, html.khn-narrow.khs-starscape body #khn-top .khn-logo img { width: 190px !important; max-width: 55vw !important; }
html.khn-narrow body #khn-top { padding: 6px 0 2px; }
html.khn-narrow body #links { min-height: 0; padding: 4px 8px; flex-wrap: nowrap; }
html.khn-narrow body #links .khn-side-btn { width: 46px; height: 42px; padding: 0 !important; font-size: 22px !important; line-height: 42px; }
html.khn-narrow body #links .khn-navicons { flex-wrap: nowrap !important; gap: 2px; margin-left: auto !important; }
html.khn-narrow body #links .khn-navicons > * { flex: 0 0 auto; }
html.khn-narrow body #links .khn-navicons .notification-category { width: 26px !important; height: 26px !important; margin: 0 30px 0 0 !important; background-size: contain !important; }
html.khn-narrow body #links .khn-navicons .amount-of-notifications { left: 28px; top: 3px; font-size: 11px; height: 18px !important; }

/* b408: phone beta, news page (and any page with the old fixed-width headers): fit the screen */
html.khn-narrow body #middle label.head, html.khn-narrow body #middle label.pinfo { width: auto !important; max-width: 100%; display: block; box-sizing: border-box; }
html.khn-narrow body #middle img { max-width: 100% !important; height: auto !important; }
html.khn-narrow body #middle td, html.khn-narrow body #middle th { white-space: normal !important; }
html.khn-narrow body #middle th[width], html.khn-narrow body #middle td[width] { width: auto !important; }
html.khn-narrow body #middle input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.khn-narrow body #middle select, html.khn-narrow body #middle textarea, html.khn-narrow body #middle .ffull { max-width: 100% !important; box-sizing: border-box; }
html.khn-narrow body #middle table.forumsTable { width: 100% !important; }
html.khn-narrow body #middle table.forumsTable input[size] { width: 100% !important; }
/* b409: phones: hide the "scroll down to read ALL the news" note (screen space is precious; Starlight 11-07) */
html.khn-narrow body .khn-news-note { display: none; }
/* b410: a close button at the top of the phone drawer (stays in view while you scroll the drawer) */
.khn-close { display: none; }
html.khn-narrow.khn-open body .khn-close { display: block; position: sticky; top: 0; z-index: 5; align-self: flex-end; margin: -6px -4px 4px auto;
  width: 44px; height: 44px; padding: 0 !important; border-radius: 50%; font-size: 28px !important; line-height: 40px;
  background: rgba(35, 37, 48, .95) !important; border: 1px solid #444756 !important; color: #ece5d4 !important; cursor: pointer; }
/* b411: phones: the news search folds behind a button; paging and posts lose their big padding; headers stack cleanly */
.khn-newssearch-btn { display: none; }
html.khn-narrow body .khn-newssearch-btn { display: block; margin: 0 auto 8px; }
html.khn-narrow body .khn-newssearch { display: none; }
html.khn-narrow body .khn-ns-open .khn-newssearch { display: table-row; }
html.khn-narrow body table.khn-newsnav td { padding: 8px !important; width: auto !important; }
html.khn-narrow body table.khn-newsnav form { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.khn-narrow body table.news, html.khn-narrow body table.news td, html.khn-narrow body table.news th { padding: 0 !important; margin: 0 !important; }
html.khn-narrow body table.news .box { padding: 10px 8px !important; margin: 0 !important; }
html.khn-narrow body table.news th.frontnews { padding: 10px 8px 4px !important; text-align: left; }
html.khn-narrow body table.news label.head, html.khn-narrow body table.news label.pinfo { position: static !important; float: none !important;
  height: auto !important; line-height: 1.35 !important; margin: 0 0 4px !important; padding: 0 !important; }
html.khn-narrow body table.news label.head { font-size: 17px !important; }
html.khn-narrow body table.news label.pinfo { font-size: 12px !important; }
html.khn-narrow body .khn-news-note + * { margin-top: 0; }
/* b412: phones: the page title moves into the top bar */
.khn-ptitle { display: none; }
html.khn-narrow body .khn-ptitle { display: block; flex: 1 1 auto; min-width: 0; margin: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 17px Fraunces, Georgia, serif; color: #f3ecdc; }
html.khn-narrow body #middle .khn-ptitle-src { display: none; }
/* b413: news post headers were fixed at 20px tall, so a title that wraps ran over the post (phones, and long titles anywhere) */
html.kh-new body table.news th.frontnews { height: auto !important; min-height: 20px; padding-bottom: 8px; }
/* b416: the phone title was squeezed to nothing by the icons; it always keeps room now */
html.khn-narrow body .khn-ptitle { flex: 1 1 0; min-width: 72px; }
html.khn-narrow body #links .khn-navicons .notification-category { margin-right: 24px !important; }
/* b417: phones: Search and the older/newer news links share one row */
.khn-newssearch-cell { display: none; }
html.khn-narrow body .khn-newssearch-cell { display: table-cell; }
html.khn-narrow body .khn-newssearch-btn { margin: 0; padding: 6px 10px !important; }
html.khn-narrow body table.khn-newsnav { width: 100%; }
html.khn-narrow body tr.khn-newspage td { font-size: 13px; }
html.khn-narrow body tr.khn-newspage td:empty { display: none; }

/* b420: Nova banner no wider than 1800px (the picture is 2400px; stretched past that it went blurry), centred,
   with its soft edges on the picture itself (Kitty 11-08) */
html.kh-new.khs-nova body::before { left: 50%; right: auto; width: min(100%, 1800px); transform: translateX(-50%); }
/* b420: Home page on phones: Spotlight and About Us one above the other instead of two squeezed halves */
html.khn-narrow.page-index .spotlight, html.khn-narrow.page-index .info { width: 100%; float: none; }

/* b426 (SunBlind via the desk, #411): the BBCode editor's toolbar buttons show their icon as a background picture.
   The general button style above gave them padding, a dark background and repeat, so icons tiled, letters sat low and
   dark icons vanished. Editor buttons: light chips, one centred icon, no padding. */
html.kh-new body .editbar button:not(.khn-side-btn):not(.khn-hide), html.kh-new body .richeditor .editbar input[type=button] {
  padding: 0; background-color: #e9e5dc; background-repeat: no-repeat; background-position: center;
  color: #1c2033; border: 1px solid #b9b2a3; border-radius: 4px; font-weight: 700; line-height: 1;
}
html.kh-new body .editbar button:not(.khn-side-btn):not(.khn-hide):hover, html.kh-new body .richeditor .editbar input[type=button]:hover { background-color: #d9bd84; border-color: #d9bd84; }

/* b426 (SunBlind via the desk, #416/#417): inventory tiles had a fixed width, so a wide window left an empty strip at
   the side that looked like a missing column. A grid fills each row: as many tiles as fit, stretched to the edge. */
html.kh-new body #inventory { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
html.kh-new body #inventory > .item2 { float: none; width: auto; margin: 0; }
html.kh-new body #inventory > :not(.item2) { grid-column: 1 / -1; }

/* b435 (2026-11-08, BananaFarmer): khimeros-starscape.css sets body{height:100%}, so on long pages the body (and its starfield) stopped at one screen height. */
html.kh-new body { height: auto; min-height: 100%; }

/* b438 (2026-11-08, SunBlind): foraging tiles with long item names (e.g. "Stalking Shadowbeast - Sinister") pushed the button and
   the inventory count out of the 128px tile. Tighter spacing: measured 159px -> 128px. */
html.kh-new body .foraging td.fslot > div table { border-spacing: 0; }
html.kh-new body .foraging td.fslot > div td { line-height: 1.15; padding-top: 1px; padding-bottom: 1px; }
html.kh-new body .foraging td.fslot .buyButton { padding: 2px 10px; margin: 2px 0 1px; line-height: 1.2; }

/* b439 (2026-11-08, SunBlind): with the side bar hidden the lair columns widen; the fixed 200px image box stayed left while the
   text is centred. Centre the box (its icons are positioned inside it, so they stay on the image corner). */
html.kh-new body .customDemo td.calign > div:first-child { width: fit-content; margin-left: auto; margin-right: auto; }
/* b440 (SunBlind: b438 still stuck out for every item): the inner table is height:100% but starts ~11px down, so it always
   overflowed by 8px. Let it size to its content (the cell still centres it) and use a compact button. Checked on the live page. */
html.kh-new body .foraging td.fslot td > table { height: auto; }
html.kh-new body .foraging td.fslot input.buyButton { padding: 1px 10px !important; min-height: 0 !important; height: auto !important; line-height: 1.25 !important; font-size: 11px !important; margin: 1px 0 !important; }

/* b461 (KpopIsMyEscape 11-09): in a mid-size window the Lounge chat squeezed to a sliver beside the online list, so
   NPC event lines ran one letter per line. Below 1300px the online list goes under the chat (as on phones), and on
   small screens the name column narrows. Tested on the live page at 1400, 1300, 1000, 800, 600 and 420px. */
@media (max-width: 1300px) {
	html.kh-new body #middle table:has(#chatTableLeft) > tbody > tr > td { display: block; width: auto !important; padding-left: 0 !important; }
	html.kh-new body #chatTableRight { max-height: 140px; overflow-y: auto; }
}
/* b461b (Starlight 11-09: "a column is kind of clunky"): under the chat, the online list runs across in rows. Phones too. */
@media (max-width: 1300px) {
	html.kh-new body #chatTableRight { width: 100% !important; box-sizing: border-box; padding: 8px 10px; }
	html.kh-new body #chatUsers, html.kh-new body #chatUsers > tbody { display: flex; flex-wrap: wrap; gap: 2px 16px; width: 100%; }
	html.kh-new body #chatUsers tr, html.kh-new body #chatUsers td { display: block; padding: 2px 0; }
}
html.khn-narrow body #chatTableRight { width: 100% !important; box-sizing: border-box; padding: 8px 10px; }
html.khn-narrow body #chatUsers, html.khn-narrow body #chatUsers > tbody { display: flex; flex-wrap: wrap; gap: 2px 16px; width: 100%; }
html.khn-narrow body #chatUsers tr, html.khn-narrow body #chatUsers td { display: block; padding: 2px 0; }
@media (max-width: 700px) {
	html.kh-new body #chatTable td.cusername { width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* b474: emoji shortcut icons (until Starlight's drawn set); twemoji turns them into pictures on most pages */
.khn-shortgrid a i.khn-emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 20px; line-height: 1; }
.khn-shortgrid a i.khn-emo img.emoji { width: 22px !important; height: 22px !important; display: block; }
/* b474b: the name pops up straight away on hover (and keyboard focus) */
html.kh-new body .khn-shortgrid a { position: relative; }
html.kh-new body .khn-shortgrid a[aria-label]:hover::after, html.kh-new body .khn-shortgrid a[aria-label]:focus-visible::after {
  content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 50;
  white-space: nowrap; font: 600 12px/1.2 system-ui, sans-serif; color: #141a2e; background: #d9bd84; padding: 4px 8px; border-radius: 6px;
  pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
/* b474c: centring. A link someone has visited can only change colour under :visited (browser privacy rule), so the
   layout must not depend on :link/:visited, or visited shortcuts sit top-left. Plain "a" here. */
html.kh-new body .khn-shortgrid a { display: flex !important; align-items: center !important; justify-content: center !important; aspect-ratio: 1; padding: 0 !important; } /* b474d: an older ".khn-short nav a:link {display:block}" outranked it */
html.kh-new body .khn-shortgrid a i.khn-emo { display: flex; align-items: center; justify-content: center; }

/* b478 (KpopIsMyEscape 11-09): profile columns were fixed 420px floats, so in a mid-size window the right column
   dropped under the left one ("one really long one"). Now they share the width half and half; phones still stack.
   Not on the profile edit page (#modules), which has its own layout. */
html.kh-new body .profileBox:is(#leftProfile, #rightProfile):not(#modules *) { width: calc(50% - 41px); max-width: none; }
html.kh-new body #topProfile.profileBox:not(#modules *) { width: calc(100% - 40px); max-width: none; }
html.khn-narrow body .profileBox:is(#leftProfile, #rightProfile):not(#modules *) { width: calc(100% - 40px); float: none; }