/* Shared chrome measured against RubinOT EU at 1440px, October 2026.
   Keep the HighbiniOT identity, live data, translations and existing routes. */
.hb-reference #RbHeader {
  box-sizing: border-box; height: 176px; padding: 24px 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.hb-reference #RbLogo { height: 128px; width: auto; max-width: 80vw; margin: 0; object-fit: contain; }
@media (min-width: 1051px) {
  .hb-reference #Bodycontainer { width: calc(100% - 32px); max-width: 1256px; min-width: 0; }
  .hb-reference #ContentRow { width: 100%; margin: 0; padding: 0; gap: 12px; flex-wrap: nowrap; align-items: flex-start; }
  .hb-reference #MenuColumn,
  .hb-reference #ThemeboxesColumn { position: static; width: 226px; flex: 0 0 226px; margin: 0; padding: 0; }
  .hb-reference #ContentColumn { flex: 1 1 0; min-width: 0; margin: 0; }
}
.hb-reference #Topbar, .hb-reference #TopbarInner { height: 44px; }
.hb-reference #Topbar { margin-bottom: 14px; }
.hb-reference #TopbarInner { box-sizing: border-box; gap: 12px; }
.hb-reference .Content #TopbarInner a.TopbarLink { font-size: 12px; }

/* Full painted bodies rather than cropped border slices. */
.hb-reference #MenuColumn > .rb-panel { margin: 0 0 5px; padding: 0; }
.hb-reference #MenuColumn .rb-panel-head,
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-head {
  position: relative; left: auto; top: auto; width: 100%; height: 31.375px;
  box-sizing: border-box; margin: 0; padding: 0; border: 0;
  font: 700 13px/31.375px 'Cinzel', Georgia, serif;
  color: #f0e6d2; letter-spacing: .6px; z-index: 2;
}
.hb-reference #MenuColumn .rb-panel-head::after { filter: none; }
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-head::after { background-image: url('/templates/highbinot/images/ui/box/header.png'); }
.hb-reference #MenuColumn .rb-panel-body {
  box-sizing: border-box; width: calc(100% - 20px); margin: -5px 10px 0;
  padding: 12px; border: 0; border-radius: 0; box-shadow: none;
  background: url('/templates/highbinot/images/ui/box/body.png') center / 100% 100% no-repeat;
}
.hb-reference #MenuColumn .rb-panel-body::before { display: none; }
.hb-reference #MenuColumn .rb-frame-mid { background: none; padding: 0; }
.hb-reference #MenuColumn .hb-login-panel { margin-bottom: 15px; }
.hb-reference #MenuColumn .hb-login-panel > .rb-panel-body {
  min-height: 146px; padding: 24px 12px 12px; border: 0;
  background: url('/templates/highbinot/images/ui/box/body.png') center / 100% 100% no-repeat;
}
.hb-reference #MenuColumn .hb-login-guest .rb-frame-mid { padding: 0; }
.hb-reference #MenuColumn .hb-login-panel a.rb-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 30px; margin: 0 0 10px; padding: 6px 12px;
  font: 600 11px/15px 'Inter', Arial, sans-serif; box-sizing: border-box;
}
.hb-reference #MenuColumn a.hb-sidebar-download {
  width: calc(100% - 20px); height: 30px; margin: 0 10px 15px;
  font: 600 12px/16px 'Inter', Arial, sans-serif; border-color: #4caf50;
}
.hb-reference #MenuColumn .rb-collapsible .rb-panel-body { background: none; padding: 0; }
.hb-reference #MenuColumn .rb-collapsible .rb-frame-top {
  display: block; height: 27.66px;
  background: url('/templates/highbinot/images/ui/menu/content/content-top.png') 0 0 / 100% 100% no-repeat;
}
.hb-reference #MenuColumn .rb-collapsible .rb-frame-mid {
  position: relative; margin: -25px 0 -22px; padding: 6px 8px 20px;
  background: url('/templates/highbinot/images/ui/menu/content/content-center.png') 0 0 / 100% auto repeat-y;
}
.hb-reference #MenuColumn .rb-collapsible .rb-frame-bot {
  display: block; height: 23.1px;
  background: url('/templates/highbinot/images/ui/menu/content/content-bottom.png') 0 0 / 100% 100% no-repeat;
}
.hb-reference #MenuColumn a.rb-menuitem { box-sizing: border-box; min-height: 33px; padding: 8px 10px 8px 12px; font: 400 12px/16.8px 'Inter', Arial, sans-serif; }
.hb-reference #MenuColumn .RbTgl {
  position: absolute; right: 20px; top: 11px; width: 6px; height: 6px;
  border: 0; border-right: 1px solid #f0e6d2; border-bottom: 1px solid #f0e6d2;
  transform: rotate(225deg); background: none; transition: transform .15s;
}
.hb-reference #MenuColumn .rb-collapsed .RbTgl { transform: rotate(45deg); }
.hb-reference #MenuColumn .RbTgl::before, .hb-reference #MenuColumn .RbTgl::after { content: none; }
.hb-reference #MenuColumn .rb-panel-head:focus-visible { outline: 2px solid #ffe1a4; outline-offset: 2px; }

/* The same 226px side frames and compact artwork as the reference. */
.hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox) {
  position: relative; box-sizing: border-box; margin: 0 0 15px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox)::before { display: none; }
.hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox) > .rb-box-head {
  position: relative; left: auto; top: auto; width: 100%; height: 31.375px;
  margin: 0; padding: 0; border: 0; box-sizing: border-box; z-index: 2;
  font: 700 13px/31.375px 'Cinzel', Georgia, serif; color: #f0e6d2; letter-spacing: .6px;
}
.hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox) > .rb-box-body {
  box-sizing: border-box; width: calc(100% - 20px); min-height: 146px;
  margin: -5px 10px 0; padding: 12px; border: 0;
  background: url('/templates/highbinot/images/ui/box/body.png') center / 100% 100% no-repeat;
}
.hb-reference #ThemeboxesColumn .BoostedCards { padding-top: 10px; gap: 10px; }
.hb-reference #ThemeboxesColumn .BoostedFrame { width: 56px; height: 56px; box-sizing: border-box; border: 2px solid #52697b; background: #d1c2a3; }
.hb-reference #ThemeboxesColumn .BoostedFrame img { max-width: 52px; max-height: 52px; }
.hb-reference #ThemeboxesColumn .BoostedLabel { font: 600 9px/1.4 'Inter', Arial, sans-serif; letter-spacing: 1px; margin-top: 9px; }
.hb-reference #ThemeboxesColumn .BoostedName { font: 400 10px/1.4 'Inter', Arial, sans-serif; max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-reference #ThemeboxesColumn .BoostedDivider { height: 64px; }
.hb-reference #ThemeboxesColumn :is(.DiscordContent,.WikiContent) { width: 100%; box-sizing: border-box; padding: 0; }
.hb-reference #ThemeboxesColumn :is(.DiscordText,.WikiText) { font: 400 11px/1.4 'Inter', Arial, sans-serif; margin: 8px 0; }
.hb-reference #DiscordBox .DiscordIconWrap { width: 56px; height: 56px; margin: 0 auto 8px; }
.hb-reference #DiscordBox .DiscordIconBg { box-sizing: border-box; width: 56px; height: 56px; border: 3px solid #9695fb; box-shadow: 0 0 0 3px #8f8bfb44; }
.hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox) a.rb-btn { min-height: 32px; padding: 7px 5px; box-sizing: border-box; font: 600 11px/16px 'Inter', Arial, sans-serif; letter-spacing: 0; }
.hb-reference #WikiBox .WikiIconWrap {
  display: flex; position: relative; align-items: center; justify-content: center;
  width: 54px; height: 54px; box-sizing: border-box; margin: 3px auto 0; border-radius: 50%;
  color: #fff8df; background: linear-gradient(#caa046,#ab7d2c);
  border: 3px solid #dfba70; box-shadow: 0 0 0 4px #d9b66c66, 0 0 18px #e2b85b88;
}
.hb-reference #WebshopBox.hb-shop-widget { margin-top: 0; margin-bottom: 15px; }
.hb-reference #WebshopBox.hb-shop-widget > .rb-box-head { height: 34px; font-size: 13px; }
.hb-reference #WebshopBox.hb-shop-widget .hb-shop-scene { height: 90px; }
.hb-reference #WebshopBox.hb-shop-widget a.hb-shop-buy { height: 34px; min-height: 34px; font-size: 11px; }

.hb-reference .rb-ticker > .rb-panel-head,
.hb-reference[data-hb-page="news"] #News > .rb-page-head { height: 36px; font-size: 13px; line-height: 36px; }
.hb-reference .rb-ticker .RbTickerInner { min-height: 30px; padding: 5px 8px; }
.hb-reference .rb-ticker .RbTickerText { font: 400 11px/18px 'Inter', Arial, sans-serif; }
.hb-reference .rb-ticker .RbTickerDate { font: 400 10px/18px 'Inter', Arial, sans-serif; }
.hb-reference .rb-ticker .RbTickerText strong { font-weight: 700; }
@media (min-width: 1051px) {
  .hb-reference #RbFooter .RbFooterInner { width: calc(100% - 32px); max-width: 1256px; padding-left: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .hb-reference #RbHeader { height: 148px; padding: 16px 0; }
  .hb-reference #RbLogo { height: 112px; max-width: 80vw; }
  .hb-reference #Topbar, .hb-reference #TopbarInner { height: 68px; }
  .hb-reference #TopbarInner { gap: 6px 10px; }
  .hb-reference .Content #TopbarInner a.TopbarLink { font-size: 10px; }
  .hb-reference #ThemeboxesColumn .rb-box:not(#WebshopBox) > .rb-box-body { padding: 12px 8px; }
  .hb-reference .rb-ticker .RbTickerDate { display: block; }
  .hb-reference #MenuColumn.hb-mobile-ready > .hb-login-panel { display: none; }
  .hb-reference #MenuColumn.hb-nav-open > .hb-login-panel { display: block; }
}
@media (prefers-reduced-motion: reduce) { .hb-reference #MenuColumn .RbTgl { transition: none; } }