:root {
  --site-nav-bg: #0d0e14;
  --site-nav-panel: #1a1c24;
  --site-nav-border: #343741;
  --site-nav-text: #f7f7fa;
  --site-nav-muted: #9295a3;
  --site-nav-accent: #08ce8a;
}

.yoooov-site-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  background: var(--site-nav-bg) !important;
  border-top: 1px solid #292b32 !important;
  border-bottom: 1px solid #202229 !important;
  color: var(--site-nav-text) !important;
  position: relative;
  z-index: 1000;
}

/* Several pages still carry the nav they had before this shared one existed,
   and its mobile rules: at their own breakpoints they turn .nav-left into a
   column, let .nav-links / .nav-right wrap, give both `width: 100%` and
   reorder the link row below the rest — a stacked three-row header. This bar
   is a fixed 68px single row, so those rules put the wordmark above the
   ceiling, spilled the last links out of the bottom onto the page, and on
   yoooov_challenge.html squeezed the left side to nothing and pushed the menu
   toggle past the right edge of the screen. The height, padding and alignment
   here already win; the rest of the geometry needs saying too, so the bar owns
   its own three regions whatever a page asks for. */
.yoooov-site-nav { flex-wrap: nowrap !important; }
.yoooov-site-nav .nav-left,
.yoooov-site-nav .yoooov-site-nav-left,
.yoooov-site-nav .nav-links,
.yoooov-site-nav .nav-main,
.yoooov-site-links,
.yoooov-site-nav .nav-right,
.yoooov-site-nav .nav-actions,
.yoooov-site-actions {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  order: 0 !important;
  float: none !important;
}
.yoooov-site-nav .nav-links,
.yoooov-site-nav .nav-main,
.yoooov-site-links,
.yoooov-site-nav .nav-right,
.yoooov-site-nav .nav-actions,
.yoooov-site-actions { flex-wrap: nowrap !important; }

.yoooov-site-nav .nav-left,
.yoooov-site-nav .yoooov-site-nav-left {
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: clamp(38px, 4vw, 68px) !important;
}

.yoooov-site-brand,
.yoooov-site-nav .logo,
.yoooov-site-nav .brand {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center !important;
  gap: 13px !important;
  color: var(--site-nav-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  text-decoration: none !important;
}

.yoooov-site-brand img,
.yoooov-site-nav .logo img,
.yoooov-site-nav .brand img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

.yoooov-site-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
}

.yoooov-site-nav .nav-links,
.yoooov-site-nav .nav-main,
.yoooov-site-links {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  /* A page's own inline stylesheet (e.g. recharge.html) may still carry a
     margin-left/margin-right:auto meant for its old bespoke nav layout;
     reset it so the gap next to the logo matches every other page. */
  margin: 0 !important;
}

.yoooov-site-nav .nav-link,
.yoooov-site-nav .nav-main > a,
.yoooov-site-links > a {
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--site-nav-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.yoooov-site-nav .nav-link:hover,
.yoooov-site-nav .nav-main > a:hover,
.yoooov-site-links > a:hover,
.yoooov-site-nav .nav-link.active,
.yoooov-site-nav .nav-main > a.active,
.yoooov-site-links > a.active {
  color: var(--site-nav-text) !important;
  text-decoration: none !important;
}

.yoooov-site-nav .nav-right,
.yoooov-site-nav .nav-actions,
.yoooov-site-actions {
  position: relative;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 13px !important;
}

/* Same geometric avatar used on index.html (colorful rotated shapes, hashed
   from the signed-in username via --geo-a/--geo-b/--geo-angle/data-geometry)
   so every page's avatar looks the same, not just the pages that already
   shipped this design. */
.yoooov-site-nav .avatar,
.yoooov-site-avatar-btn {
  --geo-a: #25d5ff;
  --geo-b: #8c59ff;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--geo-a) 25%, #07101c), #080a11);
  border: 1px solid color-mix(in srgb, var(--geo-a) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--geo-a) 18%, transparent);
  cursor: pointer;
}
.yoooov-site-nav .avatar::before,
.yoooov-site-nav .avatar::after,
.yoooov-site-avatar-btn::before,
.yoooov-site-avatar-btn::after { content: ""; position: absolute; transition: transform .25s ease; }
.yoooov-site-nav .avatar::before,
.yoooov-site-avatar-btn::before {
  width: 22px;
  height: 22px;
  left: 4px;
  top: 7px;
  border: 4px solid var(--geo-a);
  transform: rotate(var(--geo-angle, 18deg));
}
.yoooov-site-nav .avatar::after,
.yoooov-site-avatar-btn::after {
  width: 18px;
  height: 18px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: var(--geo-b);
  mix-blend-mode: screen;
}
.yoooov-site-nav .avatar[data-geometry="1"]::before,
.yoooov-site-avatar-btn[data-geometry="1"]::before { border-radius: 50%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--geo-a); border: 0; }
.yoooov-site-nav .avatar[data-geometry="1"]::after,
.yoooov-site-avatar-btn[data-geometry="1"]::after { border-radius: 2px; transform: rotate(35deg); }
.yoooov-site-nav .avatar[data-geometry="2"]::before,
.yoooov-site-avatar-btn[data-geometry="2"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--geo-a); border: 0; }
.yoooov-site-nav .avatar[data-geometry="2"]::after,
.yoooov-site-avatar-btn[data-geometry="2"]::after { width: 21px; height: 7px; border-radius: 8px; transform: rotate(-42deg); }
.yoooov-site-nav .avatar:hover::before,
.yoooov-site-avatar-btn:hover::before { transform: rotate(calc(var(--geo-angle, 18deg) + 18deg)) scale(1.08); }

.yoooov-site-account-panel {
  position: absolute;
  z-index: 1001;
  top: calc(100% + 10px);
  right: 0;
  width: 190px;
  padding: 8px;
  border: 1px solid var(--site-nav-border);
  border-radius: 14px;
  background: #1b1d25;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.yoooov-site-account-panel[hidden] { display: none; }

.yoooov-site-nav .yoooov-site-menu-shortcut {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--site-nav-text) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  appearance: none;
}
/* Some shortcuts are buttons (copies of the bar's icon buttons, e.g. 消息 /
   通知): without the reset above they got the browser's grey button look. */
.yoooov-site-nav .yoooov-site-menu-shortcut:hover { background: rgba(255, 255, 255, .06); }

.yoooov-site-nav .yoooov-site-menu-summary {
  padding: 8px 9px 11px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--site-nav-border);
}
.yoooov-site-nav .yoooov-site-menu-summary small {
  display: block;
  margin-bottom: 4px;
  color: var(--site-nav-muted);
  font-size: 10px;
}
.yoooov-site-nav .yoooov-site-menu-summary strong {
  display: block;
  overflow: hidden;
  color: var(--site-nav-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoooov-site-menu-divider {
  height: 1px;
  margin: 6px 2px;
  background: var(--site-nav-border);
}

.yoooov-site-nav .yoooov-site-menu-logout {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #ff7180;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.yoooov-site-nav .yoooov-site-menu-logout:hover { background: rgba(255, 78, 97, .1); }

.yoooov-site-login,
.yoooov-site-register,
.yoooov-site-language {
  box-sizing: border-box;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
}

.yoooov-site-nav [hidden] { display: none !important; }

.yoooov-site-credit-cluster {
  max-width: 210px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--site-nav-border);
  border-radius: 10px;
  background: var(--site-nav-panel);
}

.yoooov-site-nav .yoooov-site-credit-balance {
  min-width: 112px;
  height: 100%;
  padding: 0 11px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--site-nav-muted);
  font-size: 9px;
  white-space: nowrap;
}

.yoooov-site-nav .yoooov-site-credit-balance strong {
  display: inline;
  min-width: 0;
  max-width: 86px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yoooov-site-recharge {
  height: 100%;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid rgba(8, 206, 138, .28);
  border-radius: 0;
  background: rgba(8, 206, 138, .12);
  color: #57e8b6 !important;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none !important;
}

.yoooov-site-nav .my-games,
.yoooov-site-nav .icon-btn,
.yoooov-site-nav .balance,
.yoooov-site-nav .avatar,
.yoooov-site-nav .user-phone,
.yoooov-site-nav .nav-user,
.yoooov-site-nav .account-menu,
.yoooov-site-nav .back,
.yoooov-site-nav .nav-button,
.yoooov-site-nav .btn {
  flex: 0 0 auto;
}

/* The avatar already identifies the signed-in user. Keeping the adjacent
   username out of the compact header prevents it resembling a second locale. */
.yoooov-site-nav .user-phone,
.yoooov-site-nav .nav-user { display: none !important; }

.yoooov-site-nav .icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.yoooov-site-nav .avatar {
  width: 38px;
  height: 38px;
  display: inline-block !important;
}

/* Pages set `display: flex` on these by class, which outranks the `hidden`
   attribute's default style — so a control marked hidden (signed-out visitor,
   empty balance) kept its place in the bar. Spell the hidden case out. */
.yoooov-site-nav .icon-btn[hidden],
.yoooov-site-nav .avatar[hidden],
.yoooov-site-nav .my-games[hidden],
.yoooov-site-nav .balance[hidden],
.yoooov-site-nav [data-auth="user"][hidden] { display: none !important; }

.yoooov-site-nav .my-games,
.yoooov-site-nav .back,
.yoooov-site-nav .nav-button,
.yoooov-site-nav .btn {
  color: #d7d9df !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.yoooov-site-login {
  min-width: 88px;
  padding: 0 22px;
  border: 1px solid var(--site-nav-border);
  background: var(--site-nav-panel);
  color: var(--site-nav-text);
}

.yoooov-site-register {
  min-width: 140px;
  padding: 0 24px;
  border: 1px solid var(--site-nav-accent);
  background: var(--site-nav-accent);
  color: #06150f;
}

.yoooov-site-language {
  min-width: 54px;
  padding: 0 14px;
  border: 1px solid var(--site-nav-border);
  background: var(--site-nav-panel);
  color: #c9cbd2;
}

.yoooov-site-login:hover,
.yoooov-site-language:hover { border-color: #555965; color: #fff; }
.yoooov-site-register:hover { background: #20dda0; }

.yoooov-site-nav .nav-dropdown { position: relative; }
.yoooov-site-nav .nav-dropdown-menu { top: calc(100% + 14px) !important; }

.yoooov-site-context {
  color: #c8cad1 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.yoooov-site-menu-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--site-nav-border);
  border-radius: 10px;
  background: var(--site-nav-panel);
  cursor: pointer;
}
.yoooov-site-menu-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--site-nav-text);
}
.yoooov-site-menu-panel { display: none; }

/* Tight bar: the first thing tried when the row runs short of room, with the
   same spacing the 1050px breakpoint uses. Only if this is still not enough
   does the bar go compact below. */
.yoooov-site-nav-tight { padding-inline: 22px !important; gap: 20px !important; }
.yoooov-site-nav-tight .nav-left,
.yoooov-site-nav-tight .yoooov-site-nav-left { gap: 30px !important; }
.yoooov-site-nav-tight .nav-links,
.yoooov-site-nav-tight .nav-main,
.yoooov-site-nav-tight .yoooov-site-links { gap: 22px !important; }
.yoooov-site-nav-tight .nav-link,
.yoooov-site-nav-tight .nav-main > a,
.yoooov-site-nav-tight .yoooov-site-links > a { font-size: 13px !important; }
.yoooov-site-nav-tight .yoooov-site-login { min-width: 72px; padding-inline: 16px; }
.yoooov-site-nav-tight .yoooov-site-register { min-width: 112px; padding-inline: 17px; }

/* Compact bar. Set by network_resilience.js when the link row and the
   right-hand controls would otherwise collide — which no fixed breakpoint can
   predict, because the same seven links need ~405px in Chinese and ~510px in
   English, and yoooov.com drops two of them entirely. The links move into the
   dropdown panel, which already carries the same list. */
.yoooov-site-nav-compact .nav-links,
.yoooov-site-nav-compact .nav-main,
.yoooov-site-nav-compact .yoooov-site-links,
.yoooov-site-nav-compact .my-games,
.yoooov-site-nav-compact .icon-btn { display: none !important; }

.yoooov-site-nav-compact .yoooov-site-menu-toggle { display: inline-flex !important; }

/* With the links gone the bar has three children, and space-between would
   float the controls halfway to the toggle — glaring on yoooov.com, whose
   right-hand side is just the edition badge and the language button. Keep
   them against the toggle instead. */
.yoooov-site-nav.yoooov-site-nav-compact .nav-right,
.yoooov-site-nav.yoooov-site-nav-compact .nav-actions,
.yoooov-site-nav.yoooov-site-nav-compact .yoooov-site-actions { margin-left: auto !important; }

.yoooov-site-nav-compact.yoooov-site-menu-open .yoooov-site-menu-panel {
  display: flex;
  position: absolute;
  z-index: 999;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 18px 22px;
  background: var(--site-nav-bg);
  border-bottom: 1px solid var(--site-nav-border);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .45);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.yoooov-site-menu-panel .yoooov-site-menu-links {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.yoooov-site-menu-panel .nav-link {
  padding: 12px 6px !important;
  border-bottom: 1px solid var(--site-nav-border);
  font-size: 15px !important;
}
.yoooov-site-menu-panel .yoooov-site-login,
.yoooov-site-menu-panel .yoooov-site-register {
  display: inline-flex !important;
  width: 100%;
  min-height: 46px;
}
.yoooov-site-menu-panel [hidden] { display: none !important; }

/* Snug and bare bars: the compact bar still did not fit — a signed-in phone,
   or a page with its own back link. The back link moves into the dropdown
   first; if that is not enough the credit pill goes, since the avatar menu
   already carries its recharge link. */
.yoooov-site-menu-context { display: none; }
.yoooov-site-nav-snug .yoooov-site-context { display: none !important; }
.yoooov-site-nav-snug .yoooov-site-menu-panel .yoooov-site-menu-context {
  display: block;
  padding: 12px 6px;
  border-bottom: 1px solid var(--site-nav-border);
  color: var(--site-nav-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.yoooov-site-nav-bare .yoooov-site-credit-cluster { display: none !important; }

@media (max-width: 1050px) {
  html:not([data-nav-wide]) .yoooov-site-nav { padding-inline: 22px !important; gap: 20px !important; }
  html:not([data-nav-wide]) .yoooov-site-nav .nav-left,
  html:not([data-nav-wide]) .yoooov-site-nav .yoooov-site-nav-left { gap: 30px !important; }
  html:not([data-nav-wide]) .yoooov-site-nav .nav-links,
  html:not([data-nav-wide]) .yoooov-site-nav .nav-main,
  html:not([data-nav-wide]) .yoooov-site-links { gap: 22px !important; }
  html:not([data-nav-wide]) .yoooov-site-nav .nav-link,
  html:not([data-nav-wide]) .yoooov-site-nav .nav-main > a,
  html:not([data-nav-wide]) .yoooov-site-links > a { font-size: 13px !important; }
  html:not([data-nav-wide]) .yoooov-site-login { min-width: 72px; padding-inline: 16px; }
  html:not([data-nav-wide]) .yoooov-site-register { min-width: 112px; padding-inline: 17px; }
}

@media (max-width: 780px) {
  html:not([data-nav-wide]) .yoooov-site-nav { height:60px !important; min-height:60px !important; padding:0 14px !important; }
  html:not([data-nav-wide]) .yoooov-site-nav .nav-left,
  html:not([data-nav-wide]) .yoooov-site-nav .yoooov-site-nav-left { gap: 18px !important; }
  html:not([data-nav-wide]) .yoooov-site-brand,
  html:not([data-nav-wide]) .yoooov-site-nav .logo,
  html:not([data-nav-wide]) .yoooov-site-nav .brand { font-size: 20px !important; }
  html:not([data-nav-wide]) .yoooov-site-brand-mark,
  html:not([data-nav-wide]) .yoooov-site-brand img,
  html:not([data-nav-wide]) .yoooov-site-nav .logo img,
  html:not([data-nav-wide]) .yoooov-site-nav .brand img { width: 30px !important; height: 30px !important; }
  html:not([data-nav-wide]) .yoooov-site-login { display: none; }
  html:not([data-nav-wide]) .yoooov-site-register { min-width: auto; min-height: 42px; padding-inline: 15px; font-size: 13px; }
  html:not([data-nav-wide]) .yoooov-site-language { min-width: 45px; min-height: 42px; padding-inline: 10px; font-size: 13px; }
  html:not([data-nav-wide]) .yoooov-site-avatar-btn { width: 34px; height: 34px; }
  html:not([data-nav-wide]) .yoooov-site-credit-cluster { height:36px; }
  html:not([data-nav-wide]) .yoooov-site-nav .yoooov-site-credit-balance { min-width:0; padding-inline:8px; }
  html:not([data-nav-wide]) .yoooov-site-nav .yoooov-site-credit-balance { font-size:0; }
  html:not([data-nav-wide]) .yoooov-site-nav .yoooov-site-credit-balance strong { font-size:11px; }
  html:not([data-nav-wide]) .yoooov-site-recharge { padding-inline:10px; font-size:11px; }
}

@media (max-width: 560px) {
  /* The link row is the compact bar's business now; on a phone the register
     button is what still has to go, so the toggle keeps its corner. */
  html:not([data-nav-wide]) .yoooov-site-register { display: none; }
}

/* Notification bell (network_resilience.js mountNotifications). Styled here
   too: only some pages ship their own .icon-btn look. */
.yoooov-site-nav .yoooov-site-bell {
  position: relative;
  padding: 0;
  border: 1px solid var(--site-nav-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  color: var(--site-nav-text);
  cursor: pointer;
}
.yoooov-site-nav .yoooov-site-bell:hover { background: rgba(255, 255, 255, .09); }
.yoooov-site-nav .yoooov-site-bell svg { width: 19px; height: 19px; }
.yoooov-site-bell-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #0d0e14;
  border-radius: 99px;
  background: #ff5968;
  color: #fff;
  font: 800 10px/14px 'Space Grotesk', 'Noto Sans SC', sans-serif;
  text-align: center;
  pointer-events: none;
}
.yoooov-site-bell-badge[hidden] { display: none; }

.yoooov-site-notice-panel {
  position: fixed;
  z-index: 1150;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 90px));
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--site-nav-border, rgba(255, 255, 255, .1));
  border-radius: 16px;
  background: #1b1d25;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5);
  color: #f4f6fb;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
}
.yoooov-site-notice-panel[hidden] { display: none; }
.yoooov-site-notice-head { padding: 8px 10px 10px; font-size: 14px; font-weight: 800; }
.yoooov-site-notice-list { display: grid; gap: 2px; }
.yoooov-site-notice {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 11px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 11px;
  color: inherit !important;
  text-decoration: none !important;
}
.yoooov-site-notice:hover { background: rgba(255, 255, 255, .06); }
.yoooov-site-notice.unread { background: rgba(5, 199, 126, .08); }
.yoooov-site-notice.unread::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05c77e;
  transform: translateY(-50%);
}
.yoooov-site-notice-cover {
  width: 56px;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: #292d38 url('assets/yoooov-logo-v2-soft.svg') center / 20px no-repeat;
}
.yoooov-site-notice-cover img { width: 100%; height: 100%; object-fit: cover; }
.yoooov-site-notice-copy { min-width: 0; padding-right: 12px; font-size: 12.5px; line-height: 1.5; color: #c9cfdb; }
.yoooov-site-notice-copy strong, .yoooov-site-notice-copy b { color: #fff; font-weight: 800; }
.yoooov-site-notice-copy time { display: block; margin-top: 2px; color: #8c93a3; font-size: 11px; }
.yoooov-site-notice-empty { display: grid; gap: 6px; padding: 22px 16px 18px; color: #8c93a3; font-size: 12.5px; line-height: 1.6; text-align: center; }
.yoooov-site-notice-empty strong { color: #fff; font-size: 14px; }
.yoooov-site-notice-empty a { justify-self: center; margin-top: 6px; padding: 7px 14px; border-radius: 9px; background: #05c77e; color: #06120d !important; font-weight: 800; text-decoration: none !important; }

/* A picked or uploaded avatar (users.avatar) instead of the generated pattern. */
.yoooov-site-nav .avatar.yoooov-site-avatar-image,
.yoooov-site-avatar-btn.yoooov-site-avatar-image {
  background-color: #20232c;
  background-position: center;
  background-size: cover;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}
.yoooov-site-avatar-image::before,
.yoooov-site-avatar-image::after { display: none; }